/* Theme: كحلي ليلي (navy) — night sky, scattered twinkling stars, a crescent, champagne-gold Amiri names. */
@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Readex+Pro:wght@300;400;500&display=swap");

html.t-navy {
  --door-img: url("/o/img/doors-navy.jpg"); --foil-img: url("/o/img/foil-gold.jpg");
  --bg: #141C33; --paper: #1A2341; --ink: #EEF0F6; --muted: #A4ABC3;
  --accent: #C9B27A; --accent-hi: #EEE0B4; --accent-lo: #98814B; --on-accent: #141C33;
  --line: rgba(201, 178, 122, .32); --field: rgba(255, 255, 255, .045); --ok: #9DD5B1; --no: #F2A79F;
  --display: "Amiri", serif; --body: "Readex Pro", "Tajawal", sans-serif; --ui: "Readex Pro", "Tajawal", sans-serif; --body-w: 300;
  --fs: 17px; --lh: 2; --names-fs: clamp(48px, 15vw, 82px); --names-lh: 1.35; --names-w: 700; --h2-fs: clamp(28px, 8vw, 36px); --h2-w: 700;
  --radius: 16px; --btn-radius: 999px; --cover-radius: 999px;
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  --map-filter: grayscale(.4) brightness(.92) contrast(1.05);
  --texture:
    radial-gradient(ellipse 110% 60% at 50% -8%, rgba(64, 84, 150, .55), transparent 70%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(40, 30, 80, .45), transparent 70%),
    linear-gradient(180deg, #141C33, #0D1326);
  --hero-orn-w: 150px; --hero-orn-h: 84px; --corner-size: 70px;
  --orn-hero: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 84'><path transform='rotate(-24 80 42)' d='M92 18.9A26 26 0 1 0 92 65.1A23.8 23.8 0 1 1 92 18.9z' fill='black'/><path d='M124 12Q124 22 132 22Q124 22 124 32Q124 22 116 22Q124 22 124 12z' fill='black'/><path d='M138 44Q138 49 142 49Q138 49 138 54Q138 49 134 49Q138 49 138 44z' fill='black'/><path d='M30 26Q30 31 34 31Q30 31 30 36Q30 31 26 31Q30 31 30 26z' fill='black'/><circle cx='18' cy='54' r='1.6' fill='black'/><circle cx='112' cy='70' r='1.4' fill='black'/><circle cx='146' cy='28' r='1.2' fill='black'/><circle cx='44' cy='12' r='1.2' fill='black'/></svg>");
  --orn-div: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 32'><path d='M14 16h86M140 16h86' stroke='black' stroke-width='.9' stroke-linecap='round'/><path d='M120 4Q120 16 132 16Q120 16 120 28Q120 16 108 16Q120 16 120 4z' fill='black'/><circle cx='102' cy='16' r='1.6' fill='black'/><circle cx='138' cy='16' r='1.6' fill='black'/><circle cx='8' cy='16' r='1.2' fill='black'/><circle cx='232' cy='16' r='1.2' fill='black'/></svg>");
  --orn-corner: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'><path d='M18 18L44 10M18 18L30 40M30 40L12 56' stroke='black' stroke-width='.6' stroke-opacity='.6' fill='none'/><path d='M18 7Q18 18 29 18Q18 18 18 29Q18 18 7 18Q18 18 18 7z' fill='black'/><circle cx='44' cy='10' r='1.8' fill='black'/><circle cx='30' cy='40' r='1.5' fill='black'/><circle cx='12' cy='56' r='1.2' fill='black'/><circle cx='58' cy='26' r='1' fill='black'/></svg>");
  --orn-bullet: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0Q10 10 20 10Q10 10 10 20Q10 10 0 10Q10 10 10 0z' fill='black'/></svg>");
  /* openings */
  --op-bg: #10172B;
  --env: #22305A; --env-2: #1A254A; --env-edge: #121A36;
  --seal: #B8975A; --seal-hi: #EBD59E; --seal-lo: #75592A; --seal-ink: #2A2210;
  --door: #1C2647; --door-hi: #27325C; --door-lo: #111833; --door-trim: #C9B27A;
  --foil-1: #7C859B; --foil-2: #F3F5FA; --foil-3: #B3BACB; --foil-ink: rgba(26, 34, 62, .6);
  --lattice: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M15 6Q15 15 24 15Q15 15 15 24Q15 15 6 15Q15 15 15 6z' fill='black'/><circle cx='0' cy='0' r='1.5'/><circle cx='30' cy='0' r='1.5'/><circle cx='0' cy='30' r='1.5'/><circle cx='30' cy='30' r='1.5'/></svg>");
}
/* two fixed star fields at different tile sizes so the sky never looks tiled; the second one twinkles */
.t-navy body::before, .t-navy body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.t-navy body::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1px 1px at 151px 97px, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.4px 1.4px at 87px 180px, rgba(238, 224, 180, .9), transparent),
    radial-gradient(1px 1px at 190px 15px, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1px 1px at 61px 120px, rgba(200, 210, 255, .55), transparent);
  background-size: 211px 211px, 233px 233px, 277px 277px, 197px 197px, 251px 251px;
}
.t-navy body::after {
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px, rgba(255, 255, 255, .95), transparent),
    radial-gradient(1.2px 1.2px at 260px 200px, rgba(238, 224, 180, .9), transparent),
    radial-gradient(2px 2px at 150px 330px, rgba(255, 255, 255, .8), transparent);
  background-size: 331px 331px, 389px 389px, 443px 443px;
  animation: navyTwinkle 5s ease-in-out infinite alternate;
}
@keyframes navyTwinkle { from { opacity: .25; } to { opacity: 1; } }
.t-navy .hero::before { content: ""; position: absolute; left: 50%; top: 64px; width: 260px; height: 260px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(238, 224, 180, .16), rgba(120, 140, 220, .06) 55%, transparent); pointer-events: none; }
.t-navy .hero-orn { filter: drop-shadow(0 0 10px rgba(238, 224, 180, .45)); }
.t-navy .hero-orn.bottom { display: none; }
.t-navy .c3, .t-navy .c4 { display: none; }
.t-navy .names .n {
  background: linear-gradient(180deg, #F6ECCB 10%, #D9C28A 55%, #B29458 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45));
}
.t-navy .names .amp { font-style: italic; font-weight: 400; color: var(--muted); }
.t-navy .hd-side { border-color: rgba(201, 178, 122, .25); }
.t-navy .cover-frame { border-radius: 999px 999px 28px 28px; padding: 8px; border-color: var(--accent); background: rgba(255, 255, 255, .03); }
.t-navy .cover-frame img { border-radius: 999px 999px 22px 22px; }
.t-navy .shot, .t-navy .shot img { border-radius: 14px; }
.t-navy .wish, .t-navy .cd-cell, .t-navy .rsvp-state, .t-navy .choice span, .t-navy .map { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .t-navy body::after { animation: none; } }