/* Yaniverse design system.
 *
 * One stylesheet for every page. Two moods from one family (Yani's brief:
 * "same family, two moods"): .theme-her (rosy, blush, fresh salmon pink) and
 * .theme-him (oxblood, midnight slate, silk taupe, copper). Shared: warm
 * whites, dusty rose, gold sand for testimonials, a copper line.
 *
 * Fonts (all free Google Fonts, loaded in each page's <head>):
 *   Montserrat          body text (her brief: keep Montserrat)
 *   Fraunces (soft)     big editorial serif: quotes, shared headlines. The
 *                       closest free match to her pinned Instagram post
 *   Bodoni Moda         high-contrast serif capitals, wide spacing (him)
 *   Ms Madi             script titles (her: Pleasure Portal), signatures. Yani
 *                       chose it from three options, 12 Oct 2026
 */

:root {
  --wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C240,92 480,4 720,30 C960,56 1200,96 1440,40 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,36 C300,0 520,84 760,62 C1000,40 1220,8 1440,46 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,52 C260,96 520,10 760,26 C1000,42 1240,92 1440,50 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,4 500,70 740,58 C980,46 1220,4 1440,30 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,58 C280,10 540,88 780,64 C1020,40 1240,6 1440,36 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
  /* her */
  --her-bg: #FFF8F6;
  --her-panel: #E8DADB;
  --her-salmon: #FDAEAF;      /* exact, her Pleasure Portal header in Canva */
  --her-salmon-soft: #FDD3D3;
  --her-coral: #F2676A;       /* exact, the brighter header proposal she also likes */
  --her-rosewood: #792F2F;
  --her-plum: #502C2C;
  /* him */
  --him-bg: #FFFCF3;
  --him-taupe: #8A6F66;
  --him-oxblood: #542020;
  --him-slate: #161E2A;
  --him-chocolate: #3A2621;
  /* shared */
  --rose: #D79595;
  --copper: #B5764A;
  --gold-copper: #E4BB98;     /* exact, the bars in her Temple of Polarity design */
  --gold: #C9A36A;
  --sand: #F3E3D0;
  --ink: #2E2220;
  --ink-soft: #6B5753;
  --white: #FFFFFF;

  --font-body: "Montserrat", system-ui, sans-serif;
  --font-editorial: "Fraunces", Georgia, serif;
  --font-caps: "Bodoni Moda", Georgia, serif;        /* the Yaniverse logo */
  --font-display-him: "DM Serif Display", Georgia, serif;  /* men's headings: Yani chose B, 12 Oct (Bodoni's hairlines vanish at headline size) */
  --font-script: "Ms Madi", cursive;

  --wrap: 1120px;
  --radius: 999px;
  --shadow: 0 18px 40px -24px rgba(46, 34, 32, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--her-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }

.wrap { width: min(var(--wrap), 100% - 48px); margin: 0 auto; }

/* ---------- type ---------- */
.kicker {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.editorial {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: "SOFT" 100;
  line-height: 1.08;
  letter-spacing: -.005em;
}
.caps {
  font-family: var(--font-caps);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .22em;
  line-height: 1.25;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
}
h1, h2, h3 { margin: 0 0 .5em; font-weight: 400; }

/* The copper foil line from the Bedroom Skills banner, as a small accent. */
.copper-line {
  display: block;
  width: 72px;
  height: 2px;
  margin: 22px 0;
  border: 0;
  background: linear-gradient(90deg, #B5764A, #E4BB98 40%, #C98E5E 70%, #E4BB98);
}
.center .copper-line, .copper-line.center { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow: var(--shadow);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.btn-her { background: var(--her-salmon); color: var(--her-plum); }
.btn-her:hover { background: #FC9C9E; }
.btn-him { background: var(--him-oxblood); color: var(--him-bg); }
.btn-him:hover { background: #6A2929; }
.btn-ghost { background: transparent; box-shadow: none; border: 1px solid currentColor; }

/* ---------- header / menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 248, 246, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(121, 47, 47, .08);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand {
  font-family: var(--font-caps);
  font-size: 17px;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu a, .menu button {
  font: 500 12px/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: none; border: 0; padding: 10px 0; cursor: pointer;
}
.menu a:hover, .menu button:hover { color: var(--her-rosewood); }
.menu .sub {
  position: absolute; top: 100%; left: -18px; min-width: 170px;
  list-style: none; margin: 0; padding: 10px 0;
  background: var(--white); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu li:hover > .sub, .menu li:focus-within > .sub, .menu li.open > .sub { opacity: 1; visibility: visible; transform: none; }
.menu .sub a { display: block; padding: 10px 18px; }
.menu-toggle { display: none; }

@media (max-width: 900px) {
  .menu-toggle {
    display: block; background: none; border: 0; padding: 10px; cursor: pointer;
    font: 500 12px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  }
  .menu {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--her-bg); padding: 8px 24px 24px;
    border-bottom: 1px solid rgba(121, 47, 47, .1);
    display: none;
  }
  .menu.open { display: flex; }
  .menu > li { border-bottom: 1px solid rgba(121, 47, 47, .08); }
  .menu a, .menu button { display: block; width: 100%; text-align: left; padding: 16px 0; }
  .menu .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; padding: 0 0 8px 14px; display: none; }
  .menu li.open > .sub { display: block; }
}

/* ---------- flowy section transitions ---------- */
/* Each .flow section's own top edge is cut into a wave with a CSS mask, and
 * the section is pulled up by the wave's height so it overlaps the section
 * above. The wave is therefore made of the section's real background
 * (gradient, silk, photo), with no separate shape and no seam line. Pick a
 * curve with .wave-a to .wave-e. */
.flow {
  --wave-h: clamp(44px, 6vw, 96px);
  --wave-shape: var(--wave-a);
  position: relative;
  margin-top: calc(var(--wave-h) * -1);
  padding-top: calc(var(--pad-top, clamp(64px, 7.5vw, 104px)) + var(--wave-h));
  -webkit-mask:
    var(--wave-shape) left top / 100% var(--wave-h) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--wave-h) - 1px) / 100% 100% no-repeat;
          mask:
    var(--wave-shape) left top / 100% var(--wave-h) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--wave-h) - 1px) / 100% 100% no-repeat;
}
.wave-a { --wave-shape: var(--wave-a); }
.wave-b { --wave-shape: var(--wave-b); }
.wave-c { --wave-shape: var(--wave-c); }
.wave-d { --wave-shape: var(--wave-d); }
.wave-e { --wave-shape: var(--wave-e); }

/* ---------- sections ---------- */
section { padding: clamp(64px, 7.5vw, 104px) 0; }
/* The next section's wave overlaps this one's bottom edge by --wave-h, so
 * any section with a section after it gets that height back as extra bottom
 * space. Keeps the gap above and below each section's content even. */
main > section {
  padding-bottom: calc(var(--pad-bottom, clamp(64px, 7.5vw, 104px)) + var(--next-wave, 0px));
}
main > section:not(:last-child) { --next-wave: clamp(44px, 6vw, 96px); }
/* Even rhythm: every section gets the same top and bottom space; .flow adds
 * the wave height on top of it. */
.center { text-align: center; }
.lead { font-size: 19px; color: var(--ink-soft); }
.measure { max-width: 620px; }
.center .measure { margin-left: auto; margin-right: auto; }

/* Gold sand band for testimonials. */
/* Gold band for testimonials, matched to the gold background on her current
 * site and in her Canva: pale champagne light sweeping diagonally into
 * caramel gold. */
.band-sand {
  background:
    linear-gradient(118deg,
      #F7E6CC 0%, #F3DDBF 18%, #E5BE97 34%, #F2D9BA 46%,
      #D9A57A 60%, #EBC8A3 72%, #C99167 88%, #E2B68E 100%);
}
.band-sand .quotes figure { background: rgba(255, 252, 247, .82); }
.quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 14px;
}
.quote-by {
  font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); font-style: normal;
}

/* ---------- footer ---------- */
.site-footer {
  background: #1C1311;
  color: rgba(255, 252, 243, .78);
  padding: 64px 0 36px;
  font-size: 13px;
  letter-spacing: .06em;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: center; }
.site-footer a { color: inherit; text-decoration: none; }
/* The wordmark from the header, larger and light, with the gold-copper line
 * under it, above the footer links. */
.site-footer .footer-brand {
  flex-basis: 100%;
  text-align: center;
  font-family: var(--font-caps);
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: .42em;
  text-indent: .42em; /* balances the trailing letter-spacing so it centres */
  text-transform: uppercase;
  color: #F5EBDD;
  padding-bottom: 22px;
  margin-bottom: 10px;
  position: relative;
}
.site-footer .footer-brand::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 2px;
  background: linear-gradient(90deg, #B5764A, #E4BB98 40%, #C98E5E 70%, #E4BB98);
}
.site-footer .footer-brand:hover { color: #FFFFFF; }
.site-footer a:hover { color: var(--her-salmon); }
.site-footer .credit { flex-basis: 100%; text-align: center; font-size: 10.5px; letter-spacing: 1px; opacity: .6; margin-top: 6px; }

/* Placeholders still to be filled before publishing. Deliberately loud so
 * nothing ships with one left in (BUILD-STATUS 6b). */
.todo {
  display: inline-block;
  padding: 2px 10px;
  border: 1px dashed #B5764A;
  border-radius: 6px;
  background: #FFF3E6;
  color: #8E5A34;
  font: 600 12px/1.6 var(--font-body);
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .menu .sub { transition: none; }
}

/* ---------- legal pages (privacy policy, terms) ---------- */
.legal h2 { font: 600 18px/1.4 var(--font-body); margin: 30px 0 8px; color: var(--ink); }
.legal p, .legal li { font-size: 16px; line-height: 1.7; }
.legal ul { padding-left: 1.2em; margin: 0 0 12px; }
.legal a { color: inherit; }