/* ============================================================
   Themes. Pick one in config.js with  theme: 'forest'
   garden (default, in style.css) · midnight · forest · blush ·
   coastal · terracotta · monochrome
   ============================================================ */

/* Midnight: dark navy with champagne gold */
html[data-theme="midnight"] {
  --paper: #12161f; --paper-rgb: 18, 22, 31;
  --cream: #181d2a; --cream-rgb: 24, 29, 42;
  --beige: #222939; --line: #2f3748;
  --ink: #e6e1d6; --muted: #a7a296;
  --forest: #f1e7d0; --forest-rgb: 241, 231, 208;
  --sage: #c9a96e; --sage-deep: #d4b47a;
  --gold: #c9a96e; --gold-rgb: 201, 169, 110;
  --shade-rgb: 0, 0, 0; --hi-rgb: 38, 46, 64;
  --surface: #1a2030;
  --btn: #c9a96e; --btn-hover: #dcc08a; --on-btn: #12161f; --btn-ghost: #e2c995;
  --band: #0b0e15; --band-2: #1d2436; --on-band: #f1e7d0; --on-band-soft: #c9bfa8;
  --nav-bg: rgba(18, 22, 31, .9);
  --emboss-a: #1d2333; --emboss-b: #161b27;
  --tile-1: #232b3d; --tile-2: #2c3550; --tile-3: #3a3550;
  --yes-bg: #23382a; --yes-fg: #a8d5a2; --no-bg: #3d2424; --no-fg: #f0b3a8;
  --err-bg: #3d2424; --err-line: #6b3a34; --err-fg: #f5c4ba;
  --icon: #c9a96e;
  --hero-glow: rgba(201, 169, 110, .16); --hero-glow-2: rgba(40, 50, 75, .9);
  --serif: 'Playfair Display', Georgia, serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  color-scheme: dark;
}
html[data-theme="midnight"] .hero h1 { font-size: clamp(3.2rem, 11vw, 7rem); }

/* Forest: deep emerald and moss, for garden, jungle and mountain weddings */
html[data-theme="forest"] {
  --paper: #f4f1e6; --paper-rgb: 244, 241, 230;
  --cream: #e9e6d4; --cream-rgb: 233, 230, 212;
  --beige: #d9d6bd; --line: #c9c7a8;
  --ink: #24301f; --muted: #56624d;
  --forest: #1e3a2a; --forest-rgb: 30, 58, 42;
  --sage: #6f9a64; --sage-deep: #3f6b45;
  --gold: #a6782f; --gold-rgb: 166, 120, 47;
  --shade-rgb: 30, 58, 42;
  --btn: #1e3a2a; --btn-hover: #3f6b45; --on-btn: #f4f1e6;
  --band: #16301f; --band-2: #2c5234; --on-band: #f1eedd; --on-band-soft: #c9d3b4;
  --emboss-a: #f8f6ec; --emboss-b: #e6e2cc;
  --tile-1: #b9cfa8; --tile-2: #dcd8b8; --tile-3: #8fb08a;
  --icon: #3f6b45;
  --hero-glow: rgba(111, 154, 100, .38); --hero-glow-2: rgba(217, 214, 189, .9);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Allura', 'Snell Roundhand', cursive;
}

/* Blush: soft rose and wine */
html[data-theme="blush"] {
  --paper: #fdf8f6; --paper-rgb: 253, 248, 246;
  --cream: #f8ece8; --cream-rgb: 248, 236, 232;
  --beige: #f0d9d3; --line: #ead0c9;
  --ink: #4a3236; --muted: #85696d;
  --forest: #6e3b45; --forest-rgb: 110, 59, 69;
  --sage: #d79a9f; --sage-deep: #a2555f;
  --gold: #c19a6b; --gold-rgb: 193, 154, 107;
  --shade-rgb: 168, 97, 107;
  --btn: #8c4a56; --btn-hover: #a2555f; --on-btn: #fdf8f6;
  --band: #6e3b45; --band-2: #a2555f; --on-band: #fdf3f0; --on-band-soft: #f3dcd6;
  --emboss-a: #fffbfa; --emboss-b: #f5e4df;
  --tile-1: #f3d4d2; --tile-2: #f8ece8; --tile-3: #e8c0c2;
  --icon: #a2555f;
  --hero-glow: rgba(215, 154, 159, .30); --hero-glow-2: rgba(240, 217, 211, .9);
  --script: 'Parisienne', 'Snell Roundhand', cursive;
}

/* Coastal: ocean blue, seafoam and sand, for beach weddings */
html[data-theme="coastal"] {
  --paper: #fbf9f4; --paper-rgb: 251, 249, 244;
  --cream: #f1ebe0; --cream-rgb: 241, 235, 224;
  --beige: #e4d8c3; --line: #d9cfbd;
  --ink: #213547; --muted: #56677a;
  --forest: #1f4e6b; --forest-rgb: 31, 78, 107;
  --sage: #7fb5c4; --sage-deep: #2a6982;
  --gold: #c79a5b; --gold-rgb: 199, 154, 91;
  --shade-rgb: 31, 78, 107;
  --btn: #1f4e6b; --btn-hover: #2a6982; --on-btn: #fbf9f4;
  --band: #173b52; --band-2: #2a6982; --on-band: #f6f1e7; --on-band-soft: #cfe3e8;
  --emboss-a: #fefdf9; --emboss-b: #ece4d4;
  --tile-1: #cfe3e8; --tile-2: #f1ebe0; --tile-3: #a9cdd8;
  --icon: #2a6982;
  --hero-glow: rgba(127, 181, 196, .38); --hero-glow-2: rgba(228, 216, 195, .9);
  --serif: 'Marcellus', Georgia, serif;
  --script: 'Sacramento', 'Snell Roundhand', cursive;
}
html[data-theme="coastal"] .timeline .t { white-space: nowrap; font-size: 1.05rem; }

/* Terracotta: warm clay and olive, boho and rustic */
html[data-theme="terracotta"] {
  --paper: #faf5ee; --paper-rgb: 250, 245, 238;
  --cream: #f2e7da; --cream-rgb: 242, 231, 218;
  --beige: #e6d2bd; --line: #dcc6ae;
  --ink: #3d2a20; --muted: #75604f;
  --forest: #7a3b22; --forest-rgb: 122, 59, 34;
  --sage: #c98a62; --sage-deep: #9b4c2a;
  --gold: #8c8a4a; --gold-rgb: 140, 138, 74;
  --shade-rgb: 164, 83, 47;
  --btn: #8e4527; --btn-hover: #9b4c2a; --on-btn: #faf5ee;
  --band: #5e2d1a; --band-2: #9b4c2a; --on-band: #fbf1e6; --on-band-soft: #ecd2bd;
  --emboss-a: #fdf9f3; --emboss-b: #efe1d0;
  --tile-1: #ecc9ae; --tile-2: #f2e7da; --tile-3: #d9a888;
  --icon: #9b4c2a;
  --hero-glow: rgba(201, 138, 98, .28); --hero-glow-2: rgba(230, 210, 189, .9);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Allura', 'Snell Roundhand', cursive;
}

/* Monochrome: classic black and white */
html[data-theme="monochrome"] {
  --paper: #ffffff; --paper-rgb: 255, 255, 255;
  --cream: #f4f4f2; --cream-rgb: 244, 244, 242;
  --beige: #e6e6e3; --line: #dcdcd8;
  --ink: #1c1c1c; --muted: #5e5e58;
  --forest: #111111; --forest-rgb: 17, 17, 17;
  --sage: #8a8a85; --sage-deep: #4a4a46;
  --gold: #8a8a84; --gold-rgb: 154, 154, 148;
  --shade-rgb: 0, 0, 0;
  --btn: #111111; --btn-hover: #3a3a3a; --on-btn: #ffffff;
  --band: #111111; --band-2: #2a2a2a; --on-band: #ffffff; --on-band-soft: #cfcfca;
  --emboss-a: #ffffff; --emboss-b: #efefec;
  --tile-1: #e6e6e3; --tile-2: #f4f4f2; --tile-3: #d2d2ce;
  --icon: #4a4a46;
  --hero-glow: rgba(0, 0, 0, .05); --hero-glow-2: rgba(230, 230, 227, .9);
  --serif: 'Bodoni Moda', Didot, Georgia, serif;
  --script: 'Italianno', 'Snell Roundhand', cursive;
}
html[data-theme="monochrome"] .ent-group { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35), inset 0 0 0 1px #e6e6e3; }

/* ---------- Theme picker (demo site only) ---------- */
.theme-picker { position: fixed; left: 16px; bottom: 16px; z-index: 60; font: 14px/1.3 'Jost', system-ui, sans-serif; color: #222; }
.theme-picker > button {
  display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  background: #fff; color: #222; font: inherit; font-weight: 500; padding: 10px 16px 10px 12px; border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .08);
}
.theme-picker .tp-panel {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: 240px; background: #fff; border-radius: 16px; padding: 10px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .08);
}
.theme-picker .tp-title { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #666; padding: 6px 8px 8px; }
.theme-picker .tp-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: #222;
  font: inherit; text-align: left; padding: 8px; border-radius: 10px; cursor: pointer;
}
.theme-picker .tp-opt:hover { background: #f2f2f0; }
.theme-picker .tp-opt[aria-pressed="true"] { background: #ececea; font-weight: 600; }
.theme-picker .tp-opt small { display: block; color: #666; font-weight: 400; font-size: 12px; }
.theme-picker button:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
.tp-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
@media (max-width: 600px) { .theme-picker { left: 12px; bottom: 12px; } }
@media print { .theme-picker { display: none; } }
@media (max-width: 600px) { html[data-theme="coastal"] .timeline .t { font-size: .88rem; } }

/* ============================================================
   LAYOUTS. Each theme also changes the shape of the page: the
   save-the-date hero, photo frames, cards and the gallery.
   ============================================================ */

/* Shared: gallery "wall" (every photo shown at once) */
.gallery.wall { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; }
.wall-item { margin: 0; overflow: hidden; background: var(--beige); }
.wall-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .gallery.wall { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Shared hero reset for themes whose photo is a framed picture, not a full background */
html[data-theme="midnight"] .hero.has-photo::before,
html[data-theme="forest"] .hero.has-photo::before,
html[data-theme="blush"] .hero.has-photo::before,
html[data-theme="coastal"] .hero.has-photo::before,
html[data-theme="terracotta"] .hero.has-photo::before { display: none; }
html[data-theme="midnight"] .hero.has-photo :is(.save, .date, h1),
html[data-theme="forest"] .hero.has-photo :is(.save, .date, h1),
html[data-theme="blush"] .hero.has-photo :is(.save, .date, h1),
html[data-theme="coastal"] .hero.has-photo :is(.save, .date, h1),
html[data-theme="terracotta"] .hero.has-photo :is(.save, .date, h1) { text-shadow: none; }
html[data-theme="midnight"] .hero .sprig,
html[data-theme="coastal"] .hero .sprig,
html[data-theme="terracotta"] .hero .sprig,
html[data-theme="monochrome"] .hero .sprig { display: none; }

/* ---------- MIDNIGHT: split editorial ---------- */
html[data-theme="midnight"] { --radius: 4px; --btn-radius: 2px; --gallery: wall; }
html[data-theme="midnight"] .hero.has-photo { grid-template-columns: 1fr 1fr; place-items: stretch; padding: 0; background: var(--paper); }
html[data-theme="midnight"] .hero.has-photo .hero-bg { position: relative; inset: auto; grid-column: 2; grid-row: 1; min-height: 100%; }
html[data-theme="midnight"] .hero.has-photo .hero-bg::after { content: ''; position: absolute; inset: 22px; z-index: 2; border: 1px solid rgba(var(--gold-rgb), .75); pointer-events: none; }
html[data-theme="midnight"] .hero.has-photo .hero-inner { grid-column: 1; grid-row: 1; align-self: center; text-align: left; padding: 64px clamp(24px, 6vw, 96px); }
html[data-theme="midnight"] .hero.has-photo :is(.countdown, .actions) { justify-content: flex-start; }
html[data-theme="midnight"] .hero.has-photo h1 .amp { margin: .15em 0 .1em .2em; }
html[data-theme="midnight"] .hero.has-photo .save { letter-spacing: .4em; color: var(--gold); }
html[data-theme="midnight"] .hero.has-photo .cd { min-width: 64px; text-align: left; }
@media (max-width: 860px) {
  html[data-theme="midnight"] .hero.has-photo { grid-template-columns: 1fr; }
  html[data-theme="midnight"] .hero.has-photo .hero-bg { grid-column: 1; grid-row: 1; min-height: 46vh; }
  html[data-theme="midnight"] .hero.has-photo .hero-inner { grid-column: 1; grid-row: 2; text-align: center; padding: 40px 20px 56px; }
  html[data-theme="midnight"] .hero.has-photo :is(.countdown, .actions) { justify-content: center; }
  html[data-theme="midnight"] .hero.has-photo .cd { text-align: center; }
}
html[data-theme="midnight"] .divider svg { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
html[data-theme="midnight"] .divider svg path { display: none; }
html[data-theme="midnight"] .divider::before, html[data-theme="midnight"] .divider::after { width: 110px; }
html[data-theme="midnight"] .ent-group { background: var(--surface); box-shadow: none; border: 1px solid rgba(var(--gold-rgb), .4); border-radius: 4px; }
html[data-theme="midnight"] .ent-group::after { inset: 6px; border-radius: 2px; border-color: rgba(var(--gold-rgb), .18); box-shadow: none; }
html[data-theme="midnight"] .ent-group h3, html[data-theme="midnight"] .person b { text-shadow: none; }
html[data-theme="midnight"] .gallery.wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 10px; grid-auto-flow: dense; }
html[data-theme="midnight"] .wall-item.big { grid-column: span 2; grid-row: span 2; }
html[data-theme="midnight"] .wall-item { outline: 1px solid rgba(var(--gold-rgb), .35); outline-offset: -8px; }
html[data-theme="midnight"] .wall-item img { filter: brightness(.88); transition: filter .3s; }
html[data-theme="midnight"] .wall-item:hover img { filter: none; }
@media (max-width: 720px) { html[data-theme="midnight"] .gallery.wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } }

/* ---------- FOREST: arched window ---------- */
html[data-theme="forest"] { --radius: 24px; --gallery: wall; }
html[data-theme="forest"] .hero.has-photo { grid-template-columns: minmax(260px, .85fr) 1fr; gap: clamp(24px, 5vw, 80px); padding: 56px clamp(20px, 7vw, 110px); }
html[data-theme="forest"] .hero.has-photo .hero-bg {
  position: relative; inset: auto; grid-column: 1; grid-row: 1; justify-self: end; z-index: 1;
  width: 100%; max-width: 430px; aspect-ratio: 3 / 4.3; border-radius: 999px 999px 6px 6px; overflow: hidden;
  box-shadow: 0 0 0 10px var(--paper), 0 0 0 11px var(--sage-deep), 0 30px 60px -30px rgba(var(--forest-rgb), .6);
}
html[data-theme="forest"] .hero.has-photo .hero-inner { grid-column: 2; grid-row: 1; padding: 0; }
html[data-theme="forest"] .hero.has-photo .sprig.tl { top: auto; bottom: -20px; left: -10px; transform: rotate(-30deg); z-index: 2; }
html[data-theme="forest"] .hero.has-photo .sprig.br { bottom: -20px; right: -30px; transform: rotate(200deg); }
@media (max-width: 860px) {
  html[data-theme="forest"] .hero.has-photo { grid-template-columns: 1fr; padding: 40px 20px 56px; }
  html[data-theme="forest"] .hero.has-photo .hero-bg { grid-column: 1; grid-row: 1; justify-self: center; max-width: 280px; }
  html[data-theme="forest"] .hero.has-photo .hero-inner { grid-column: 1; grid-row: 2; }
}
html[data-theme="forest"] .ent-group { border-radius: 36px 6px 36px 6px; }
html[data-theme="forest"] .ent-group::after { border-radius: 28px 3px 28px 3px; }
html[data-theme="forest"] :is(.card, details) { border-radius: 24px 4px 24px 4px; }
html[data-theme="forest"] .gallery.wall { grid-template-columns: repeat(4, 1fr); gap: 16px; }
html[data-theme="forest"] .wall-item { aspect-ratio: 3 / 4.2; border-radius: 999px 999px 6px 6px; }
html[data-theme="forest"] .wall-item:nth-child(even) { transform: translateY(28px); }
html[data-theme="forest"] .gallery.wall { padding-bottom: 28px; }
@media (max-width: 720px) { html[data-theme="forest"] .gallery.wall { grid-template-columns: repeat(2, 1fr); } }

/* ---------- BLUSH: round portrait and polaroids ---------- */
html[data-theme="blush"] { --radius: 22px; --gallery: wall; }
html[data-theme="blush"] .hero.has-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; }
html[data-theme="blush"] .hero.has-photo .hero-bg {
  position: relative; inset: auto; flex: none; z-index: 1;
  width: clamp(190px, 22vw, 270px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 18px;
  box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px var(--sage), 0 24px 50px -20px rgba(var(--shade-rgb), .55);
}
html[data-theme="blush"] .hero.has-photo h1 { font-size: clamp(3rem, 9vw, 6.2rem); }
html[data-theme="blush"] .hero.has-photo h1 .amp { display: inline-block; margin: 0 .25em; font-size: .38em; vertical-align: middle; }
html[data-theme="blush"] .hero.has-photo .date { margin-top: 1rem; }
html[data-theme="blush"] .hero.has-photo .countdown { margin: 1.4rem 0; }
html[data-theme="blush"] .ent-group { border-radius: 28px; background: var(--surface); box-shadow: 0 18px 44px -26px rgba(var(--shade-rgb), .5); }
html[data-theme="blush"] .ent-group::after { display: none; }
html[data-theme="blush"] .divider svg { width: 22px; height: 22px; }
html[data-theme="blush"] .gallery.wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 22px; padding: 10px 0 20px; }
html[data-theme="blush"] .wall-item { width: 230px; aspect-ratio: auto; background: #fff; padding: 10px 10px 40px; overflow: visible; box-shadow: 0 14px 30px -16px rgba(var(--shade-rgb), .55); transition: transform .25s; }
html[data-theme="blush"] .wall-item img { aspect-ratio: 1; height: auto; }
html[data-theme="blush"] .wall-item:nth-child(3n+1) { transform: rotate(-3deg); }
html[data-theme="blush"] .wall-item:nth-child(3n+2) { transform: rotate(2deg) translateY(10px); }
html[data-theme="blush"] .wall-item:nth-child(3n) { transform: rotate(-1deg); }
html[data-theme="blush"] .wall-item:hover { transform: rotate(0) scale(1.04); z-index: 1; }
@media (max-width: 600px) { html[data-theme="blush"] .wall-item { width: calc(50% - 12px); padding: 6px 6px 24px; } }

/* ---------- COASTAL: wide photo with a card over it ---------- */
html[data-theme="coastal"] { --radius: 18px; --gallery: wall; }
html[data-theme="coastal"] .hero.has-photo { display: block; min-height: 0; padding: 0 0 64px; }
html[data-theme="coastal"] .hero.has-photo .hero-bg { position: relative; inset: auto; width: 100%; height: 64vh; min-height: 340px; clip-path: ellipse(140% 100% at 50% 0%); }
html[data-theme="coastal"] .hero.has-photo .hero-inner {
  width: min(760px, calc(100% - 32px)); margin: -170px auto 0; padding: 40px 28px 36px;
  background: var(--surface); border-radius: 26px; box-shadow: 0 34px 70px -34px rgba(var(--forest-rgb), .45);
}
html[data-theme="coastal"] .hero.has-photo h1 { font-size: clamp(3.4rem, 10vw, 6.6rem); }
html[data-theme="coastal"] .hero.has-photo h1 .amp { display: inline-block; margin: 0 .25em; font-size: .36em; vertical-align: middle; }
html[data-theme="coastal"] .hero.has-photo .date { margin-top: .8rem; }
html[data-theme="coastal"] .hero.has-photo .countdown { margin: 1.4rem 0; }
@media (max-width: 600px) { html[data-theme="coastal"] .hero.has-photo .hero-bg { height: 48vh; } html[data-theme="coastal"] .hero.has-photo .hero-inner { margin-top: -90px; padding: 30px 18px; } }
html[data-theme="coastal"] .divider svg { width: 10px; height: 10px; border-radius: 50%; background: var(--sage); }
html[data-theme="coastal"] .divider svg path { display: none; }
html[data-theme="coastal"] .ent-group { background: var(--surface); box-shadow: 0 12px 30px -22px rgba(var(--forest-rgb), .45); border-top: 4px solid var(--sage); border-radius: 18px; }
html[data-theme="coastal"] .ent-group::after { display: none; }
html[data-theme="coastal"] :is(.card, details) { border: 0; box-shadow: 0 10px 30px -22px rgba(var(--forest-rgb), .45); background: var(--surface); }
html[data-theme="coastal"] .gallery.wall { display: flex; max-width: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; scrollbar-width: thin; }
html[data-theme="coastal"] .wall-item { flex: 0 0 min(72vw, 300px); height: 400px; border-radius: 22px; scroll-snap-align: center; }
html[data-theme="coastal"] .wall-item.big { flex-basis: min(86vw, 520px); }

/* ---------- TERRACOTTA: arch card over the photo, staggered wall ---------- */
html[data-theme="terracotta"] { --radius: 16px; --gallery: wall; }
html[data-theme="terracotta"] .hero.has-photo { place-items: center start; padding: 56px clamp(20px, 8vw, 120px); }
html[data-theme="terracotta"] .hero.has-photo .hero-inner {
  width: min(470px, 100%); padding: 96px 36px 44px; text-align: center;
  background: var(--paper); border-radius: 260px 260px 18px 18px; box-shadow: 0 34px 70px -30px rgba(var(--forest-rgb), .55);
}
html[data-theme="terracotta"] .hero.has-photo .hero-inner::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--shade-rgb), .35); border-radius: 250px 250px 12px 12px; pointer-events: none; }
html[data-theme="terracotta"] .hero.has-photo h1 { font-size: clamp(3rem, 8vw, 5.2rem); }
html[data-theme="terracotta"] .hero.has-photo .cd { min-width: 56px; }
html[data-theme="terracotta"] .hero.has-photo .countdown { gap: 12px; }
@media (max-width: 860px) { html[data-theme="terracotta"] .hero.has-photo { place-items: center; padding: 40px 16px; } }
html[data-theme="terracotta"] .divider svg { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gold); }
html[data-theme="terracotta"] .divider svg path { display: none; }
html[data-theme="terracotta"] .ent-group { border-radius: 150px 150px 18px 18px; padding-top: 46px; }
html[data-theme="terracotta"] .ent-group::after { border-radius: 142px 142px 12px 12px; }
html[data-theme="terracotta"] .ent-row .ent-group { border-radius: 120px 120px 18px 18px; }
html[data-theme="terracotta"] .gallery.wall { display: block; columns: 3 240px; column-gap: 14px; }
html[data-theme="terracotta"] .wall-item { break-inside: avoid; margin: 0 0 14px; border-radius: 14px; }
html[data-theme="terracotta"] .wall-item img { height: auto; }
html[data-theme="terracotta"] .wall-item:nth-child(4n+1) { border-radius: 200px 200px 14px 14px; }

/* ---------- MONOCHROME: black-and-white editorial ---------- */
html[data-theme="monochrome"] { --radius: 0; --btn-radius: 0; --gallery: wall; }
html[data-theme="monochrome"] :is(.hero-bg, .page-bg) .slide .main { filter: grayscale(1) contrast(1.05); }
html[data-theme="monochrome"] :is(.hero-bg, .page-bg) .slide .fill { filter: blur(28px) grayscale(1); }
html[data-theme="monochrome"] .hero.has-photo { place-items: end start; padding: 0; }
html[data-theme="monochrome"] .hero.has-photo::before { background: linear-gradient(180deg, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .72) 100%); }
html[data-theme="monochrome"] .hero.has-photo .hero-inner { text-align: left; padding: 0 clamp(20px, 6vw, 88px) clamp(40px, 8vh, 84px); max-width: 980px; }
html[data-theme="monochrome"] .hero.has-photo :is(.save, .date, .place, .note-invite, .cd b, .cd span, h1) { color: #fff; text-shadow: none; }
html[data-theme="monochrome"] .hero.has-photo h1 { font-family: var(--serif); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2.8rem, 9vw, 6.6rem); line-height: .95; }
html[data-theme="monochrome"] .hero.has-photo h1 .amp { display: inline-block; font-family: var(--script); text-transform: none; font-style: normal; color: #ddd; font-size: .6em; margin: 0 .15em; }
html[data-theme="monochrome"] .hero.has-photo :is(.countdown, .actions) { justify-content: flex-start; }
html[data-theme="monochrome"] .hero.has-photo .cd { text-align: left; min-width: 64px; }
html[data-theme="monochrome"] .hero.has-photo .btn { background: #fff; border-color: #fff; color: #111; }
html[data-theme="monochrome"] .hero.has-photo .btn.ghost { background: transparent; color: #fff; }
html[data-theme="monochrome"] .hero.has-photo .btn.ghost:hover { background: #fff; color: #111; }
html[data-theme="monochrome"] .divider { display: none; }
html[data-theme="monochrome"] main section :is(.wrap, .narrow) > :is(.eyebrow, h2) { text-align: left; }
html[data-theme="monochrome"] main section :is(.wrap, .narrow) > h2 { border-bottom: 1px solid var(--ink); padding-bottom: .3em; margin-bottom: 1.4em; }
html[data-theme="monochrome"] main section .narrow[style*="text-align:center"] { text-align: left !important; }
html[data-theme="monochrome"] .swatches { justify-content: flex-start; }
html[data-theme="monochrome"] .sage h2 { border-color: #fff !important; }
html[data-theme="monochrome"] .ent-group { background: #fff; box-shadow: none; border: 1px solid #111; border-radius: 0; }
html[data-theme="monochrome"] .ent-group::after { display: none; }
html[data-theme="monochrome"] .ent-group h3, html[data-theme="monochrome"] .person b { text-shadow: none; }
html[data-theme="monochrome"] .gallery.wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 4px; max-width: none; grid-auto-flow: dense; }
html[data-theme="monochrome"] .wall-item.big { grid-column: span 2; grid-row: span 2; }
html[data-theme="monochrome"] .wall-item img { filter: grayscale(1); transition: filter .4s; }
html[data-theme="monochrome"] .wall-item:hover img { filter: none; }
@media (max-width: 720px) { html[data-theme="monochrome"] .gallery.wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }
/* Framed and band layouts always fill their photo frame (no blurred side bars) */
html[data-theme="coastal"] .hero-bg .slide.contain .main,
html[data-theme="monochrome"] .hero-bg .slide.contain .main,
html[data-theme="midnight"] .hero-bg .slide.contain .main,
html[data-theme="forest"] .hero-bg .slide.contain .main,
html[data-theme="blush"] .hero-bg .slide.contain .main { background-size: cover; }
html[data-theme="coastal"] .hero-bg .slide.contain .fill,
html[data-theme="monochrome"] .hero-bg .slide.contain .fill,
html[data-theme="midnight"] .hero-bg .slide.contain .fill,
html[data-theme="forest"] .hero-bg .slide.contain .fill,
html[data-theme="blush"] .hero-bg .slide.contain .fill { display: none; }
@media (max-width: 600px) { html[data-theme="terracotta"] .gallery.wall { columns: 2; column-gap: 10px; } html[data-theme="terracotta"] .wall-item { margin-bottom: 10px; } }