/* ─────────────────────────────────────────────────────────────
   The twelve looks. Each is a block of variables plus optional
   scenery (the fixed .scenery layers behind the page).
     --names / --head / --body   fonts for the couple's names, headings, text
     --line, --lw, --wobble, --echo, --boil   the background drawing line
     --radius, --bw   how boxes and buttons are outlined
   ───────────────────────────────────────────────────────────── */
:root {
  --sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --radius: var(--sketch); --bw: 2px;
  --names-weight: 700; --head-weight: 700; --body-weight: 400; --body-size: 19px;
  --names-scale: 1; --head-scale: 1; --glow: ; --texture: none;
}
.scenery i { position: fixed; pointer-events: none; z-index: 0; display: none; background-repeat: no-repeat; }

/* 1 · Minimal */
[data-style="minimal"] {
  --bg: #ffffff; --ink: #161616; --muted: #8a8a8a; --accent: #161616; --line: #161616; --line-op: .12;
  --names: "Inter", system-ui, sans-serif; --head: "Inter", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
  --names-weight: 300; --head-weight: 300; --body-weight: 400; --body-size: 17px; --names-scale: .78; --head-scale: .78;
  --lw: 1.2px; --wobble: 0; --echo: 0; --boil: 0; --radius: 999px; --bw: 1px;
}

/* 2 · Classic */
[data-style="classic"] {
  --bg: #fbf8f1; --ink: #2c2621; --muted: #8c8073; --accent: #a8834e; --line: #a8834e; --line-op: .32;
  --names: "Pinyon Script", cursive; --head: "Cormorant Garamond", serif; --body: "Cormorant Garamond", serif;
  --names-weight: 400; --head-weight: 500; --body-weight: 400; --body-size: 19px; --names-scale: .95; --head-scale: .92;
  --lw: 1.2px; --wobble: .6; --echo: .8; --boil: 0; --radius: 3px; --bw: 1px;
}
[data-style="classic"] .scenery .s1 { display: block; inset: 10px; border: 3px double var(--accent); opacity: .5; }

/* 3 · Ink & paper */
[data-style="ink"] {
  --bg: #faf7f0; --ink: #24211d; --muted: #7a7166; --accent: #c0573e; --line: #24211d; --line-op: .22;
  --names: "Caveat", cursive; --head: "Caveat", cursive; --body: "Kalam", cursive; --body-weight: 300; --names-scale: .94;
  --lw: 2.2px; --wobble: 2.5; --echo: 2.2; --boil: 1;
  --texture: radial-gradient(rgba(60, 40, 20, .05) 1px, transparent 1.2px) 0 0 / 5px 5px;
}

/* 4 · Pencil sketch */
[data-style="pencil"] {
  --bg: #f5f5f2; --ink: #3c3d42; --muted: #85868d; --accent: #5b7fb7; --line: #55565c; --line-op: .3;
  --names: "Shadows Into Light", cursive; --head: "Shadows Into Light", cursive; --body: "Patrick Hand", cursive; --names-scale: .9; --head-scale: .9;
  --lw: 1.4px; --wobble: 3.5; --echo: 3; --boil: 1;
  --texture: repeating-linear-gradient(transparent 0 31px, rgba(91, 127, 183, .14) 31px 32px);
}
[data-style="pencil"] :is(.amp, .mark) { font-family: "Caveat", cursive; }

/* 5 · Watercolour */
[data-style="watercolor"] {
  --bg: #fdfaf6; --ink: #4a3b33; --muted: #8f7c70; --accent: #d07a8c; --line: #6b5243; --line-op: .32;
  --names: "Amatic SC", cursive; --head: "Amatic SC", cursive; --body: "Kalam", cursive; --body-weight: 300; --names-scale: .98; --head-scale: 1.1;
  --lw: 2.4px; --wobble: 2; --echo: 1.6; --boil: 0;
  --texture:
    radial-gradient(38% 30% at 12% 14%, rgba(240, 168, 180, .32), transparent 70%),
    radial-gradient(34% 28% at 88% 32%, rgba(150, 196, 170, .3), transparent 70%),
    radial-gradient(40% 30% at 20% 70%, rgba(160, 190, 230, .28), transparent 70%),
    radial-gradient(36% 26% at 85% 88%, rgba(246, 206, 140, .3), transparent 70%);
}

/* 6 · Chalkboard */
[data-style="chalk"] {
  --bg: #26332d; --ink: #f2efe4; --muted: #b9bcb0; --accent: #f3d77a; --line: #f2efe4; --line-op: .3;
  --names: "Cabin Sketch", cursive; --head: "Cabin Sketch", cursive; --body: "Patrick Hand", cursive; --names-scale: .85; --head-scale: .85;
  --lw: 3px; --wobble: 5; --echo: 2.6; --boil: 1;
  --texture:
    radial-gradient(50% 40% at 25% 20%, rgba(255, 255, 255, .06), transparent 70%),
    radial-gradient(45% 35% at 80% 60%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px) 0 0 / 4px 4px;
}

/* 7 · Painted countryside: big skies, soft clouds, rolling hills with a little house */
[data-style="countryside"] {
  --bg: #f6f1e3; --ink: #3b4636; --muted: #7b836f; --accent: #d9774a; --line: #5f7a4a; --line-op: .3;
  --names: "Klee One", cursive; --head: "Zen Maru Gothic", sans-serif; --body: "Zen Maru Gothic", sans-serif;
  --names-weight: 600; --body-size: 17.5px; --names-scale: .95; --head-scale: .78;
  --lw: 2px; --wobble: 1.6; --echo: 1.4; --boil: 0; --radius: 22px;
  --texture:
    radial-gradient(22% 7% at 18% 9%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(14% 6% at 28% 7%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(20% 6% at 78% 15%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(12% 5% at 70% 13%, rgba(255, 255, 255, .85), transparent 70%),
    linear-gradient(#a9d4ee 0%, #d4e9ee 26%, #f6f1e3 52%);
}
[data-style="countryside"] .scenery .s1 { display: block; left: 0; right: 0; bottom: 0; height: 22vh; background: url("art/hills.svg") center bottom / cover no-repeat; opacity: .55; }

/* 8 · Fairytale castle: royal night sky, gold sparkle, a castle on the horizon */
[data-style="fairytale"] {
  --bg: #1b2257; --ink: #fbf3df; --muted: #c9c2e0; --accent: #f3d27a; --line: #f3d27a; --line-op: .45;
  --names: "Great Vibes", cursive; --head: "Cinzel Decorative", serif; --body: "Cormorant Garamond", serif;
  --names-weight: 400; --head-weight: 700; --body-size: 20px; --names-scale: 1.1; --head-scale: .6;
  --lw: 1.6px; --wobble: .8; --echo: 1; --boil: 0; --radius: 16px; --glow: drop-shadow(0 0 5px rgba(243, 210, 122, .8));
  --texture:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 22%, #fff, transparent), radial-gradient(1px 1px at 76% 6%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 28%, #fff, transparent), radial-gradient(1px 1px at 44% 40%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(60% 40% at 50% 100%, rgba(243, 210, 122, .14), transparent 70%),
    linear-gradient(#121947, #2a2a6c 55%, #4a3a80);
}
[data-style="fairytale"] .scenery .s1 { display: block; left: 0; right: 0; bottom: 0; height: 24vh; background: url("art/castle.svg") center bottom / contain no-repeat; opacity: .75; }
[data-style="fairytale"] .scenery .s2 {
  display: block; inset: 0; animation: twinkle 3.5s ease-in-out infinite;
  background:
    radial-gradient(2px 2px at 20% 30%, #f3d27a, transparent), radial-gradient(2px 2px at 72% 18%, #f3d27a, transparent),
    radial-gradient(2px 2px at 84% 52%, #f3d27a, transparent), radial-gradient(2px 2px at 10% 64%, #f3d27a, transparent),
    radial-gradient(2px 2px at 50% 12%, #f3d27a, transparent);
}

/* 9 · Botanical */
[data-style="botanical"] {
  --bg: #f5f3ea; --ink: #2f3a2e; --muted: #7d8574; --accent: #6f8f5e; --line: #6f8f5e; --line-op: .32;
  --names: "Dancing Script", cursive; --head: "Lora", serif; --body: "Lora", serif;
  --head-weight: 500; --body-size: 18px; --head-scale: .8;
  --lw: 1.8px; --wobble: 1.4; --echo: 1.2; --boil: 0;
}
[data-style="botanical"] .scenery .s1 { display: block; top: 0; right: -10px; width: 34vw; max-width: 200px; aspect-ratio: 3 / 4; background: url("art/sprig.svg") top right / contain no-repeat; opacity: .6; }
[data-style="botanical"] .scenery .s2 { display: block; bottom: 70px; left: -10px; width: 30vw; max-width: 180px; aspect-ratio: 3 / 4; background: url("art/sprig.svg") bottom left / contain no-repeat; opacity: .5; transform: scale(-1, -1); }

/* 10 · Gold at night */
[data-style="gold"] {
  --bg: #121829; --ink: #f1e7d0; --muted: #a99f8a; --accent: #d9b56c; --line: #d9b56c; --line-op: .5;
  --names: "Parisienne", cursive; --head: "Parisienne", cursive; --body: "Cormorant Garamond", serif;
  --names-weight: 400; --head-weight: 400; --body-size: 20px; --names-scale: .95; --head-scale: .95;
  --lw: 1.6px; --wobble: 1.2; --echo: 1.2; --boil: 0; --glow: drop-shadow(0 0 4px rgba(217, 181, 108, .7));
  --texture:
    radial-gradient(1px 1px at 20% 30%, rgba(241, 231, 208, .6), transparent), radial-gradient(1px 1px at 70% 15%, rgba(241, 231, 208, .5), transparent),
    radial-gradient(1px 1px at 85% 70%, rgba(241, 231, 208, .5), transparent), radial-gradient(1px 1px at 35% 85%, rgba(241, 231, 208, .4), transparent),
    radial-gradient(60% 40% at 50% 0%, rgba(217, 181, 108, .08), transparent 70%);
}

/* 11 · Art Deco */
[data-style="deco"] {
  --bg: #10241d; --ink: #f2e8cc; --muted: #a8a088; --accent: #c9a45a; --line: #c9a45a; --line-op: .4;
  --names: "Poiret One", sans-serif; --head: "Poiret One", sans-serif; --body: "Josefin Sans", sans-serif;
  --names-weight: 400; --head-weight: 400; --body-weight: 300; --body-size: 18px; --names-scale: .82; --head-scale: .8;
  --lw: 1.2px; --wobble: 0; --echo: 0; --boil: 0; --radius: 0; --bw: 1px;
}
[data-style="deco"] .scenery .s1 { display: block; inset: 10px; border: 1px solid var(--accent); outline: 1px solid var(--accent); outline-offset: -6px; opacity: .55; }
[data-style="deco"] .scenery .s2 {
  display: block; left: 0; right: 0; top: 0; height: 34vh; opacity: .5;
  background: repeating-conic-gradient(from 90deg at 50% 0%, rgba(201, 164, 90, .35) 0 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
[data-style="deco"] .names { letter-spacing: .04em; }

/* 12 · Retro ’70s */
[data-style="retro"] {
  --bg: #f5e6cc; --ink: #4a2a17; --muted: #94705a; --accent: #d9622b; --line: #8a4b2a; --line-op: .35;
  --names: "Shrikhand", cursive; --head: "Shrikhand", cursive; --body: "Quicksand", sans-serif;
  --names-weight: 400; --head-weight: 400; --body-weight: 500; --body-size: 18px; --names-scale: .78; --head-scale: .7;
  --lw: 3px; --wobble: 1; --echo: 0; --boil: 0; --radius: 26px;
}
[data-style="retro"] .scenery .s1 { display: block; right: 0; bottom: 0; width: 70vmin; height: 70vmin; opacity: .3; background: radial-gradient(circle at 100% 100%, #d9622b 0 22vmin, #e8a33d 22vmin 32vmin, #b5532a 32vmin 42vmin, #e8c07a 42vmin 52vmin, transparent 52vmin); }
[data-style="retro"] .scenery .s2 { display: block; left: 0; top: 0; width: 40vmin; height: 40vmin; opacity: .25; background: radial-gradient(circle at 0 0, #e8a33d 0 12vmin, #d9622b 12vmin 18vmin, #b5532a 18vmin 24vmin, transparent 24vmin); }

@keyframes twinkle { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .scenery i { animation: none !important; } }

/* Script fonts are lovely for names but hard to read on buttons */
[data-style="gold"] :is(.dock a, .btn, .style-btn, .choice span, .step-label, .counter output, .pill) { font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: .03em; }
[data-style="gold"] :is(.dock a, .style-btn) { font-size: 1.05rem; }
[data-style="gold"] :is(.btn, .choice span) { font-size: 1.15rem; }