/* =========================================================
   Mekudeshet — Redesign Stylesheet
   Brand plum #6E4067 + hot-pink #FF0075 + brown #463939. Elegant, dignified.
   ========================================================= */

:root {
  /* Brand — taken from the live site's CSS:
     plum/mauve #6E4067 (primary) + hot-pink #FF0075 (accent) + brown #463939 text */
  --blue: #6E4067;          /* primary brand plum (var name kept for brevity) */
  --blue-deep: #4A2A47;     /* deep plum for sections/headers */
  --blue-ink: #3A2138;      /* near-black plum for headings */
  --blue-soft: #f3e8f0;     /* plum tint */

  --gold: #FF0075;          /* hot-pink accent (CTAs, highlights) */
  --gold-deep: #C70061;     /* deeper pink for hover/text */

  --ivory: #FAF7F9;         /* page background (warm white) */
  --cream: #F3ECF0;         /* alt section background (plum-tinted) */
  --white: #ffffff;

  --ink: #463939;           /* body text (brand brown) */
  --muted: #6b5d63;         /* secondary text */
  --line: #e9dee6;          /* hairlines on light */

  /* Type — PP Hatton (the site's proprietary serif) substituted with the
     closest high-contrast free serif; Inter stands in for Nunito Sans/Poppins */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1140px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px -20px rgba(74, 42, 71, 0.30);
  --shadow-sm: 0 8px 24px -12px rgba(74, 42, 71, 0.26);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.08; color: var(--blue-ink); }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; max-width: 640px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .72rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-lg { padding: .9rem 1.8rem; font-size: 1rem; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #5a3355; }
.btn-gold { background: var(--gold); color: #fff; box-shadow: 0 10px 26px -12px rgba(199,0,97,.6); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(74, 42, 71, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* The wordmark is 1619x187 — an 8.7:1 strip. Sizing it by height alone made
   it 329px wide, which swallowed the whole header on a phone, so it is capped
   by width and steps down on small screens. */
.brand-logo { height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.nav { display: flex; gap: 1.05rem; margin-left: auto; flex-wrap: nowrap; white-space: nowrap; }
.nav a {
  color: rgba(255,255,255,.86); font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; position: relative; padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold); transition: right .3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { right: 0; }
.nav-cta { margin-left: 1.1rem; flex-shrink: 0; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px; margin-left: auto;
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

.mobile-menu {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--blue-deep); padding: 12px 24px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}
/* The [hidden] attribute must win over the display:flex above. */
.mobile-menu[hidden] { display: none; }
/* Never show the mobile drawer on desktop, even if toggled. */
@media (min-width: 1181px) { .mobile-menu { display: none !important; } }
.mobile-menu a { color: rgba(255,255,255,.9); padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 500; }
.mobile-menu a:last-child { border-bottom: 0; margin-top: 12px; }
.mobile-menu .btn { justify-content: center; }

/* ---------- Eyebrows & titles ---------- */
.eyebrow {
  display: inline-block; font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
  color: var(--gold-deep); margin: 0 0 .9rem;
}
.eyebrow-light { color: var(--gold); }
.section-title { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.01em; }
.section-title.light { color: #fff; }
.lead { font-size: 1.18rem; color: var(--muted); }
.lead.light { color: rgba(255,255,255,.85); }
.section-head { margin-bottom: 3rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 9vw, 7rem);
  isolation: isolate;
}
/* Background promo video — covers the hero, sits behind the gradient overlay */
.hero-video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  /* Translucent plum tint over the video: keeps text legible, video shows through.
     Solid colors at the edges fall back gracefully if the video fails to load. */
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(255,0,117,.30), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(110,64,103,.45), transparent 55%),
    linear-gradient(160deg, rgba(46,24,48,.82) 0%, rgba(74,42,71,.62) 45%, rgba(110,64,103,.55) 120%);
}
@media (prefers-reduced-motion: reduce) {
  /* Respect users who disable motion: hide the video, show the full gradient. */
  .hero-video { display: none; }
  .hero-bg {
    background:
      radial-gradient(1200px 600px at 75% -10%, rgba(255,0,117,.30), transparent 60%),
      radial-gradient(900px 600px at 10% 110%, rgba(110,64,103,.65), transparent 55%),
      linear-gradient(160deg, #2e1830 0%, #4A2A47 45%, #6E4067 120%);
  }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5;
}
.hero-inner { position: relative; max-width: 880px; }
.hero h1 {
  color: #fff; font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 600;
  margin: 0 0 1.4rem; letter-spacing: -.015em;
}
.hero-script {
  display: block; color: var(--gold); font-style: italic; font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); margin-top: .2rem;
}
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.9); max-width: 620px; margin-bottom: 2.2rem; }
.hero-sub em { color: var(--gold); font-style: italic; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, var(--ivory)); z-index: -1; }

/* ---------- Mission ---------- */
.mission { background: var(--ivory); }
.mission .lead { font-size: 1.3rem; color: var(--ink); }

/* ---------- Services / cards ---------- */
.services { background: var(--cream); }
.card-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold); }
.card-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 1.1rem;
}
/* Drawn rather than typed: these were ♥ ⇆ ◷ ✦ until Kim asked for artwork on
   the last two ("Lightbulb helping hand clip art here"). `currentColor` keeps
   them tied to the tile's colour, so the two never drift apart. */
.card-icon svg { width: 27px; height: 27px; display: block; }
.card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.card p { color: var(--muted); flex: 1; }
.card-link { font-weight: 600; font-size: .95rem; margin-top: .6rem; color: var(--blue); }
.card-link:hover { color: var(--gold-deep); text-decoration: none; }

/* ---------- Feature splits ---------- */
.feature-alt { background: var(--ivory); }
.feature { background: var(--white); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.split.reverse .split-text { order: 2; }
.split.reverse .split-photo { order: 1; }
.split-text .lead { margin-bottom: 1.6rem; }
.fine { font-size: .9rem; color: var(--muted); margin-top: 1rem; }

/* One column, because the second one is empty.
   The abstract panels that used to fill it — two rings and a mem, two linked
   squares, a giant quotation mark — were struck out: "This is not needed.
   Stock photos are acceptable. Messages from satisfied couples also are nice."
   A lone left-hand column with a hole beside it looks like a picture that
   failed to load, so these centre instead and read as a decision.
   Adding a photograph means deleting `split-solo` from the container. */
.split.split-solo {
  grid-template-columns: 1fr; max-width: 780px;
  margin-inline: auto; text-align: center;
}

/* The photograph slot. Nothing uses it yet — there are no photographs in the
   repository beyond the logo and the event stills. */
.split-photo {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: var(--blue-soft);
}
.split-photo img {
  display: block; width: 100%; height: 100%;
  min-height: 320px; object-fit: cover;
}

/* ---------- Couples (empty until somebody real has said something) ---------- */
.couples { background: var(--white); }
.couple-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem; margin-top: 2.6rem;
}
.couple {
  margin: 0; padding: 2rem 1.8rem; border-radius: var(--radius);
  background: var(--ivory); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); position: relative;
}
.couple blockquote {
  margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.5;
  color: var(--blue-ink);
}
.couple blockquote::before { content: "\201C"; }
.couple blockquote::after  { content: "\201D"; }
.couple figcaption {
  margin-top: 1rem; font-family: var(--sans); font-size: .92rem;
  font-weight: 600; color: var(--gold-deep);
}

/* ---------- Dating Source (dark band) ---------- */
.dating-source {
  position: relative; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, #4A2A47, #6E4067);
}
.dating-source::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 400px at 85% 20%, rgba(255,0,117,.32), transparent 60%);
}
.dating-source .lead { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---------- Board ---------- */
.board { background: var(--cream); }
.board-group { margin-top: 2.5rem; }
.board-subhead {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em;
  font-size: .8rem; color: var(--gold-deep); font-weight: 700; text-align: center; margin-bottom: 1.6rem;
}
.people { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 2.6rem; margin: 0; padding: 0; }
.person { text-align: center; width: 150px; }
.avatar {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto .8rem;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.9rem; font-weight: 600;
  color: var(--blue-deep); background: var(--white); border: 2px solid var(--gold);
  box-shadow: var(--shadow-sm);
}
.person-name { font-weight: 600; margin: 0; color: var(--blue-ink); }
.person-role { margin: 0; color: var(--muted); font-size: .9rem; }

/* ---------- Videos ---------- */
.videos { background: var(--ivory); }
.video-featured { margin: 2.6rem auto 1.8rem; max-width: 880px; }
.video-featured video {
  width: 100%; aspect-ratio: 16/9; display: block; border-radius: var(--radius);
  box-shadow: var(--shadow); background: #1a0f1c;
}
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 0 0 1rem; }
.video-item { margin: 0; }
.video-item video {
  width: 100%; aspect-ratio: 16/9; display: block; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: #1a0f1c;
  transition: transform .3s var(--ease);
}
.video-item:hover video { transform: translateY(-4px); box-shadow: var(--shadow); }
.video-cap {
  text-align: center; font-weight: 600; color: var(--blue-ink);
  margin: .7rem 0 0; font-family: var(--sans); font-size: .96rem;
}

/* ---------- Contact ---------- */
.contact { background: var(--white); }
.contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.contact-list li { padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.contact-k { display: inline-block; width: 96px; color: var(--gold-deep); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.contact-form {
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .4rem; color: var(--blue-ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 1rem; background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.contact-form .btn { width: 100%; margin-top: .4rem; }
.form-note { font-size: .9rem; margin: .9rem 0 0; min-height: 1.2em; }

/* Entering yourself by talking, with the form one tap away (case 41). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The two tabs that used to sit here are gone: Kim, "I'm not sure why there
   are two options. I'd have it say 'tell us about yourself' which opens to the
   form." What is left is one checkbox and one link, neither of which reads as
   a fork in the road. */
.perspective {
  display: flex; align-items: center; gap: .55rem; margin: 1.6rem 0 .4rem;
  font-family: var(--sans); font-size: .95rem; color: var(--muted);
  cursor: pointer;
}
.perspective input { width: 1.05rem; height: 1.05rem; accent-color: var(--blue); }
.chat-offer {
  margin: 0 0 .4rem; font-family: var(--sans); font-size: .95rem;
  color: var(--muted);
}
.linky {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--blue); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.linky:hover { color: var(--blue-ink); }
.intake-chat {
  margin-top: 1rem;
  background: var(--ivory); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.chat-log { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.chat-line {
  max-width: 85%; padding: .7rem .9rem; border-radius: 14px;
  font-size: 1rem; line-height: 1.45;
}
/* Us on the left, them on the right — the arrangement everybody already
   knows from a messaging app, so nobody has to work out who is speaking. */
.chat-us { align-self: flex-start; background: var(--blue-soft); color: var(--blue-ink); }
.chat-them { align-self: flex-end; background: var(--blue); color: #fff; }
.chat-entry { display: flex; gap: .6rem; }
.chat-entry input {
  flex: 1; padding: .75rem .85rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--sans); font-size: 1rem;
  background: #fff; color: var(--ink);
}
.chat-entry .btn { width: auto; flex: 0 0 auto; }
.form-note.ok { color: #198754; }
.form-note.err { color: #c0392b; }

/* ---------- Donate CTA ---------- */
.donate-cta {
  text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
}
.donate-cta .section-title.light { color: #fff; }
.donate-cta .lead.light { color: rgba(255,255,255,.9); }
.donate-cta .btn-gold { background: var(--blue-deep); color: #fff; box-shadow: 0 10px 26px -12px rgba(46,24,48,.6); }
.donate-cta .btn-gold:hover { background: var(--blue-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-ink); color: rgba(255,255,255,.78); padding: 3.5rem 0 1.5rem; }
.footer-inner { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr; gap: 2.5rem; }
.footer-logo { height: 54px; margin-bottom: 1rem; }
.footer-tag { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 280px; }
.footer-nav { display: flex; flex-direction: column; gap: .55rem; }
.footer-nav a { color: rgba(255,255,255,.78); font-size: .95rem; }
.footer-nav a:hover { color: var(--gold); text-decoration: none; }
.footer-contact p { margin: 0 0 .4rem; font-size: .95rem; }
.footer-contact a { color: rgba(255,255,255,.85); }
.footer-contact a:hover { color: var(--gold); }
.footer-contact .ig { display: inline-block; margin-top: .6rem; color: var(--gold); font-weight: 600; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.4rem;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.footer-legal p { margin: 0 0 .35rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  /* On a phone the picture always follows the words, whichever side it takes
     on a wide screen. */
  .split.reverse .split-text { order: 1; }
  .split.reverse .split-photo { order: 2; }
  .split-photo img { min-height: 220px; }
  .card-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .contact-k { display: block; width: auto; margin-bottom: 2px; }
}

/* =========================================================
   Sign-in link + the shadchan portal section.
   Added with the portal: the public site now has a private
   half, and the front page should say so plainly.
   ========================================================= */

.nav-signin {
  font-weight: 600;
  padding-left: 18px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
}

.section.portal {
  background: var(--blue-deep);
  color: #fff;
  overflow: hidden;
}
.portal-inner {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .portal-inner { grid-template-columns: 1.05fr .95fr; }
}
/* With the roster mockup gone there is no second column. Centred, so the
   section reads as finished rather than as a picture that failed to load. */
.portal-inner.portal-solo {
  grid-template-columns: 1fr; max-width: 760px;
  margin-inline: auto; text-align: center;
}
.portal-solo .portal-actions { justify-content: center; }
.portal .eyebrow { color: var(--gold); }
.portal .section-title { color: #fff; }
.portal .lead { color: rgba(255, 255, 255, .82); }

.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-primary { background: #fff; color: var(--blue-deep); }
.btn-primary:hover { background: rgba(255, 255, 255, .9); text-decoration: none; }
.btn-ghost-dark {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}
.btn-ghost-dark:hover { border-color: #fff; text-decoration: none; }

@media (max-width: 720px) {
  .brand-logo { height: 26px; max-width: 156px; }
  .header-inner { height: 62px; gap: 1rem; }
}
@media (max-width: 380px) {
  .brand-logo { height: 22px; max-width: 132px; }
}