/* SnapKenang — page-specific styles: preview modal, gallery, editor, invitation viewer, manage, dashboard */

[hidden] { display: none !important; }
input[type=range] { accent-color: var(--ox); }
.help { font-size: 12.5px; color: var(--mute); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { background: #e4ecd9; color: #3f5a32; }
.pill-draft { background: #f3e5cf; color: #8a5a17; }
.pill-no { background: #f1dcdc; color: #8b2c35; }

/* ---------- Template preview modal ---------- */
.pv-box { width: min(1080px, 100%); padding: 0; overflow: hidden; }
.pv { display: grid; grid-template-columns: 1.35fr 1fr; min-height: min(640px, calc(100vh - 40px)); }
.pv-stage { position: relative; display: grid; place-items: center; padding: 40px; background: radial-gradient(circle at 50% 60%, #efe1cd, #e2cfb5 70%); overflow: hidden; }
.pv-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.pv-env { width: min(420px, 100%); margin-top: 38%; cursor: pointer; }
.pv-hint { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; justify-content: center; align-items: center; transition: opacity .4s; }
.pv-info { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
.pv-info h2 { font-size: 48px; margin: 8px 0 20px; }
.pv-info dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14.5px; border-top: 1px solid var(--line); padding-top: 18px; }
.pv-info dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 600; padding-top: 2px; }
.pv-info dd small { color: var(--mute); }
@media (max-width: 820px) { .pv { grid-template-columns: 1fr; } .pv-stage { min-height: 420px; } .pv-info { padding: 28px; } }

/* ---------- Gallery page ---------- */
.gal-bar { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 40px; }
.gal-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gal-lang { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 3px 3px 14px; font-size: 13px; }
.gal-lang span { color: var(--mute); margin-right: 6px; }
.gal-lang button { border: 0; background: none; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.gal-lang button.on { background: var(--ink); color: var(--card); }
.gal-search { max-width: 260px; border-radius: 999px; padding-left: 18px; }

/* =================== Editor =================== */
.ed-page { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.ed-page::before { display: none; }
.ed-top { height: 64px; flex: none; display: flex; align-items: center; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--card); z-index: 10; }
.ed-top .logo { font-size: 22px; }
.ed-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ed-title span { font-family: var(--display); font-size: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ed-title small { font-size: 12px; color: var(--mute); }
.ed-actions { display: flex; gap: 8px; align-items: center; }
.ed-uilang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.ed-uilang button { border: 0; background: none; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--mute); }
.ed-uilang button.on { background: var(--ink); color: var(--card); }
.ed { flex: 1; min-height: 0; display: grid; grid-template-columns: 84px 370px 1fr; }
.ed-tabs { border-right: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; padding: 10px 0; overflow-y: auto; }
.ed-tabs button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); position: relative; transition: color .2s; }
.ed-tabs button .i { width: 22px; height: 22px; }
.ed-tabs button:hover { color: var(--ink); }
.ed-tabs button.on { color: var(--ox); }
.ed-tabs button.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ox); }
.ed-panel { overflow-y: auto; padding: 24px 22px 60px; border-right: 1px solid var(--line); background: var(--paper); }
.ed-panel-title { font-size: 32px; margin-bottom: 18px; }
.ed-group { margin-bottom: 26px; }
.ed-group h4 { font-family: var(--body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; margin-bottom: 12px; }
.ed-group h4 small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mute); font-size: 12.5px; margin-top: 4px; }
.ed-sub { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 16px 0 8px; }
.ed-group .field label { text-transform: none; letter-spacing: 0; font-size: 13px; }

.ed-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ed-tpl { text-align: center; font-size: 11.5px; color: var(--ink-2); }
.ed-tpl img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4); transition: transform .25s; outline: 2px solid transparent; outline-offset: 3px; }
.ed-tpl:hover img { transform: translateY(-3px); }
.ed-tpl.on img { outline-color: var(--ox); }
.ed-tpl span { display: block; margin-top: 6px; line-height: 1.25; }

.ed-fonts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ed-font { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 10px 4px 8px; font-size: 26px; line-height: 1.1; display: flex; flex-direction: column; align-items: center; }
.ed-font small { font-family: var(--body); font-size: 10.5px; color: var(--mute); margin-top: 4px; }
.ed-font.on, .ed-liner.on, .ed-seg button.on, .ed-effects button.on, .ed-track.on, .ed-stk-list button.on { border-color: var(--ox); box-shadow: 0 0 0 1px var(--ox); }

.ed-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.sw { width: 34px; height: 34px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); position: relative; transition: transform .15s; }
.sw:hover { transform: scale(1.08); }
.sw.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--paper), 0 0 0 4px var(--ox); }
.sw-env { width: 44px; height: 30px; border-radius: 4px; }
.sw-round { border-radius: 50%; }
.sw-pick { display: grid; place-items: center; font-size: 18px; color: var(--ink-2); background: conic-gradient(#e2566f, #f2b631, #86a477, #5bb6ef, #a387bf, #e2566f); cursor: pointer; overflow: hidden; }
.sw-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sw-def { width: auto; padding: 0 7px; display: grid; place-items: center; }
.sw-def small { padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, .88); color: #2a1f1d; font-size: 10px; font-weight: 600; letter-spacing: .02em; }

.ed-liners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ed-liner { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 6px 8px; font-size: 11.5px; color: var(--ink-2); }
.ed-liner i { display: block; height: 40px; border-radius: 6px; margin-bottom: 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 60%, 0 100%); }

.ed-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-seg button { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 11px; font-size: 13.5px; font-weight: 600; }
.ed-emblems { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }
.ed-emblems button { border-radius: 50%; padding: 2px; transition: transform .15s; }
.ed-emblems button:hover { transform: scale(1.08); }
.ed-emblems button.on { box-shadow: 0 0 0 2px var(--ox); }

.ed-stickers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ed-stickers button { padding: 6px; border-radius: 10px; transition: background .15s, transform .15s; }
.ed-stickers button:hover { background: var(--card); transform: scale(1.1); }
.ed-stk-list { display: grid; gap: 6px; }
.ed-stk-list button { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--card); text-align: left; font-size: 13.5px; }
.ed-stk-list svg { width: 30px; height: 30px; }
.ed-stk-list small { display: block; color: var(--mute); font-size: 11.5px; }
.ed-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-effects button { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 6px 9px; font-size: 13.5px; text-align: left; font-weight: 500; display: flex; flex-direction: column; gap: 7px; }
.ed-effects button span { padding: 0 5px; }
.ed-fx-mini { display: block; width: 100%; height: 58px; border-radius: 7px; background: linear-gradient(160deg, #f8efe4, #efe2d2); }
.ed-fx-mini.dark { background: linear-gradient(160deg, #26304f, #141a2e); }
.ed-fx-mini[data-fx="none"] { background: repeating-linear-gradient(135deg, #f4ece2 0 8px, #efe5d8 8px 16px); }

.ed-tracks { display: grid; gap: 6px; }
.ed-track { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 9px 12px; cursor: pointer; text-align: left; width: 100%; font-size: 14px; }
.ed-track small { display: block; font-size: 12px; color: var(--mute); }
.ed-play { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; flex: none; }
.ed-play .i { width: 15px; height: 15px; }
.ed-play.is-playing { background: var(--ox); color: #fff; }
.ed-track > div { flex: 1; min-width: 0; }
.ed-st { font-style: normal; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; white-space: nowrap; background: var(--paper-2); color: var(--mute); flex: none; }
.ed-st-licensed { background: #e7efe6; color: #3f6640; }
.ed-st-cleared { background: #eef0f6; color: #46506e; }
.ed-st-user { background: #f6eee2; color: #7a5a2a; }
.ed-st-unavailable { background: #f3e6e4; color: #8a3b32; }
.ed-now { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.ed-now-txt { flex: 1; min-width: 0; }
.ed-now-txt b { margin-right: 6px; }
.ed-prog { height: 4px; border-radius: 4px; background: var(--paper-2); margin: 8px 0 4px; overflow: hidden; }
.ed-prog i { display: block; height: 100%; background: var(--ox); transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s linear; }
.ed-now-txt small { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.ed-lock { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); }
.ed-lock-h { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.ed-lock-h > .i { width: 18px; height: 18px; color: var(--mute); flex: none; margin: 0 8px; }
.ed-lock-h > div { flex: 1; min-width: 0; }
.ed-lock-h small { display: block; font-size: 12px; color: var(--mute); }
.ed-lock p { font-size: 12.5px; color: var(--mute); margin: 8px 0; line-height: 1.45; }
.ed-file.is-off { opacity: .5; pointer-events: none; }
.ed-file { position: relative; overflow: hidden; cursor: pointer; }
.ed-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ed-photo { display: flex; gap: 14px; align-items: center; }
.ed-photo img, .ed-photo > span { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--paper-2); display: grid; place-items: center; color: var(--mute); flex: none; }
.ed-photo > div { display: flex; gap: 6px; flex-wrap: wrap; }

.ed-switch { display: flex; align-items: center; gap: 12px; font-size: 14.5px; margin-bottom: 18px; cursor: pointer; }
.ed-switch input { display: none; }
.ed-switch span { width: 42px; height: 24px; border-radius: 999px; background: #d8cbb8; position: relative; transition: background .2s; flex: none; }
.ed-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ed-switch input:checked + span { background: var(--ox); }
.ed-switch input:checked + span::after { transform: translateX(18px); }

.ed-stage { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 55%, #f1e4d1, #e0ccb1 75%); display: flex; flex-direction: column; }
.ed-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(90, 60, 40, .07) 1px, transparent 1px); background-size: 18px 18px; }
.ed-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.ed-view-toggle { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; background: rgba(255, 250, 242, .85); backdrop-filter: blur(8px); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.ed-view-toggle button { padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ed-view-toggle button.on { background: var(--ink); color: var(--paper); }
.ed-canvas { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; z-index: 3; padding: 70px 24px 80px; }
.ed-env { --w: min(560px, 86%, calc((100vh - 64px - 160px) / 1.28)); width: var(--w); margin-top: calc(var(--w) * .52); }
.ed-card { width: min(400px, 80%, calc((100vh - 64px - 170px) / 1.5)); box-shadow: 0 30px 60px -30px rgba(42, 31, 29, .6), 0 4px 10px rgba(0, 0, 0, .08); border-radius: 6px; overflow: hidden; }
.ed-canvas .stk { pointer-events: auto; cursor: grab; touch-action: none; }
.ed-canvas .stk:active { cursor: grabbing; }
.ed-canvas .stk.sel { outline: 1.5px dashed var(--ox); outline-offset: 3px; border-radius: 4px; }
.ed-canvas .env.is-breaking .stk { pointer-events: none; }
.ed-stage-bar { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 6; display: flex; gap: 8px; justify-content: center; align-items: center; }
.ed-stage-bar .btn-ghost { background: rgba(255, 250, 242, .8); }
.ed-tip { font-size: 12.5px; color: var(--ink-2); margin-left: 8px; }

@media (max-width: 1100px) { .ed { grid-template-columns: 76px 320px 1fr; } .ed-tip { display: none; } }
@media (max-width: 860px) {
  .ed-page { height: auto; overflow: visible; }
  .hide-sm { display: none; }
  .ed-top { position: sticky; top: 0; gap: 10px; padding: 0 12px; }
  .ed-top .btn { padding: 0 12px; }
  .ed-save span { display: none; }
  .ed-title small { display: none; }
  .ed { display: flex; flex-direction: column; }
  .ed-stage { order: 1; height: 62vh; flex: none; }
  .ed-tabs { order: 2; flex-direction: row; overflow-x: auto; padding: 0 6px; border: 0; border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 8; }
  .ed-tabs button { min-width: 72px; padding: 10px 4px; }
  .ed-tabs button.on::before { top: auto; bottom: 0; left: 12px; right: 12px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .ed-panel { order: 3; border: 0; overflow: visible; }
  .ed-env { --w: min(440px, 80vw, calc((62vh - 150px) / 1.28)); }
  .ed-card { width: min(300px, 66vw, calc((62vh - 150px) / 1.5)); }
}

/* =================== Invitation viewer =================== */
.iv-page { --env: #f3ead8; min-height: 100vh; overflow-x: clip; background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--env) 30%, #fffaf2), color-mix(in srgb, var(--env) 45%, #efe4d3) 80%) fixed; }
.iv-page.iv-dark { color: #f3e9da; background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--env) 75%, #3a3236), color-mix(in srgb, var(--env) 55%, #050506) 85%) fixed; }
.iv-page.iv-dark::before { mix-blend-mode: screen; opacity: .12; }
.iv-page.is-closed { overflow: hidden; height: 100vh; }
.iv-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.iv-watermark { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200'%3E%3Ctext x='140' y='100' text-anchor='middle' transform='rotate(-28 140 100)' font-family='Georgia,serif' font-size='20' fill='%23888' fill-opacity='.22'%3ESnapKenang %C2%B7 Preview%3C/text%3E%3C/svg%3E") repeat; }
.iv-guest img, .iv-guest svg { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
.iv-preview-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; text-align: center; font-size: 13px; padding: 8px 16px; background: var(--ink); color: #f3e9da; }
.iv-stage { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px; position: relative; }
.is-opened .iv-stage, .is-opened .iv-stage.has-cover { display: none; }
.iv-env { --w: min(560px, 90vw, calc((100svh - 120px) / 1.28)); width: var(--w); margin-top: calc(var(--w) * .5); cursor: pointer; animation: ivfloat 5s ease-in-out infinite; }
.iv-env:has(.is-breaking) { animation: none; }
@keyframes ivfloat { 50% { transform: translateY(-8px) rotate(-.4deg); } }
.iv-hint { position: absolute; bottom: 7vh; left: 0; right: 0; display: flex; gap: 10px; justify-content: center; align-items: center; font-size: 14px; letter-spacing: .04em; opacity: .85; }
.iv-hint .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ping 1.6s infinite; }
.iv-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.iv-missing { text-align: center; max-width: 420px; padding: 24px; }
.iv-missing h2 { font-size: 40px; margin-bottom: 10px; }
.iv-missing p { opacity: .75; margin-bottom: 20px; }

.iv-main { max-width: 980px; margin: 0 auto; padding: 56px 24px 40px; }
.iv-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.iv-card { width: min(460px, 88vw); border-radius: 8px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(20, 10, 5, .7), 0 6px 16px rgba(0, 0, 0, .1); }
/* Arriving from the envelope: the card flies from the envelope to here (FLIP in invite.js), above the fading stage */
.iv-main.iv-flip .iv-card { animation: none; position: relative; z-index: 56; }
.iv-stage.is-leaving { position: fixed; inset: 0; z-index: 55; }
.iv-stage.is-leaving .env-card { visibility: hidden; }
.iv-to { font-family: 'Pinyon Script', cursive; font-size: 34px; margin-top: 30px; }
.iv-cta { margin-top: 26px; background: var(--accent); }
.iv-sec { margin-top: 96px; text-align: center; }
.iv-sec .eyebrow, .iv-page .eyebrow { color: var(--accent); }
.iv-sec h2 { font-size: clamp(40px, 6vw, 60px); }
.iv-clock { display: flex; justify-content: center; gap: clamp(12px, 3vw, 28px); margin-top: 18px; }
.iv-clock div { min-width: clamp(62px, 14vw, 104px); padding: 14px 6px; border-radius: 16px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(0, 0, 0, .06); }
.iv-dark .iv-clock div, .iv-dark .iv-tile, .iv-dark .iv-form, .iv-dark .iv-thanks { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.iv-clock b { display: block; font-family: var(--display); font-size: clamp(34px, 6vw, 54px); font-weight: 500; line-height: 1; }
.iv-clock span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.iv-photo { width: min(340px, 80vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 16px 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.iv-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; text-align: left; }
.iv-tile { background: rgba(255, 255, 255, .5); border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; padding: 26px; }
.iv-tile > .i { width: 26px; height: 26px; color: var(--accent); }
.iv-tile h3 { font-size: 28px; margin: 10px 0 6px; }
.iv-tile p { font-size: 15px; opacity: .85; }
.iv-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.iv-links a { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--accent); }
.iv-links .i { width: 15px; height: 15px; }
.iv-by { opacity: .75; margin-top: 8px; }
.iv-form, .iv-thanks { max-width: 640px; margin: 32px auto 0; text-align: left; background: rgba(255, 255, 255, .6); border: 1px solid rgba(0, 0, 0, .06); border-radius: 22px; padding: 32px; }
.iv-dark .field label { color: rgba(243, 233, 218, .75); }
.iv-dark .field input, .iv-dark .field select, .iv-dark .field textarea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #f3e9da; }
.iv-dark .field select option { color: #2a1f1d; }
.iv-form .btn-primary { width: 100%; background: var(--accent); }
.iv-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.iv-choice input { display: none; }
.iv-choice span { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 14px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .12); cursor: pointer; font-weight: 600; font-size: 14.5px; transition: all .2s; }
.iv-dark .iv-choice span { border-color: rgba(255, 255, 255, .2); }
.iv-choice input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.iv-thanks { text-align: center; }
.iv-thanks-seal { width: 110px; margin: 0 auto 14px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); animation: pop .6s cubic-bezier(.2, 1.4, .4, 1); }
.iv-thanks h3 { font-size: 36px; margin-bottom: 8px; }
.iv-thanks p { opacity: .8; margin-bottom: 18px; }
.iv-dark .btn-ghost { border-color: rgba(243, 233, 218, .5); }
.iv-foot { text-align: center; padding: 80px 0 30px; }
.iv-brand { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; text-decoration: none; opacity: .7; }
.iv-brand:hover { opacity: 1; }
.iv-brand .seal-mini { width: 26px; }
.iv-ctrl { position: fixed; right: 18px; bottom: 18px; z-index: 65; display: flex; flex-direction: column; gap: 10px; }
.iv-ctrl button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 250, 242, .85); color: var(--ink); backdrop-filter: blur(8px); box-shadow: var(--shadow); transition: transform .2s; }
.iv-ctrl button:hover { transform: scale(1.08); }
.iv-ctrl [hidden] { display: none !important; }
.iv-vol { position: relative; }
.iv-volpop { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255, 250, 242, .94); backdrop-filter: blur(8px); box-shadow: var(--shadow); animation: ivPop .2s ease-out; }
.iv-volpop button { width: 34px; height: 34px; box-shadow: none; background: transparent; }
.iv-volpop input { width: min(140px, 40vw); accent-color: var(--ox, #6e2233); }
/* Step aside while the guest is typing their RSVP */
body:has(#iv-main form :focus) .iv-ctrl { opacity: 0; pointer-events: none; }
.iv-ctrl { transition: opacity .25s; }
@media (max-width: 720px) {
  .iv-ctrl { right: 12px; bottom: 12px; gap: 8px; }
  .iv-ctrl > button, .iv-vol > button { width: 40px; height: 40px; }
  .iv-volpop { right: 48px; }
}
@keyframes ivPop { from { opacity: 0; transform: translate(8px, -50%); } }
@media (prefers-reduced-motion: reduce) { .iv-volpop { animation: none; } }
@media (max-width: 680px) {
  .iv-choice { grid-template-columns: 1fr; }
  .iv-form, .iv-thanks { padding: 22px; }
  .iv-form .row2 { grid-template-columns: 1fr; }
}

/* =================== Manage =================== */
.mg-head { display: grid; grid-template-columns: 150px 1fr; gap: 36px; align-items: center; }
.mg-thumb { border-radius: 6px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(42, 31, 29, .6); transform: rotate(-2deg); }
.mg-title h1 { font-size: clamp(40px, 5vw, 60px); margin: 12px 0 6px; }
.mg-title p { color: var(--ink-2); }
.mg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.mg-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 44px 0 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.mg-stats div { padding: 24px 26px; border-right: 1px solid var(--line); }
.mg-stats div:last-child { border: 0; }
.mg-stats b { display: block; font-family: var(--display); font-size: 48px; font-weight: 500; line-height: 1; }
.mg-stats span { font-size: 12.5px; color: var(--mute); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.mg-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-bottom: 24px; }
.mg-grid .panel, .mg-guests { padding: 30px; }
.mg-grid h3, .mg-guests h3 { font-size: 30px; margin-bottom: 14px; }
.mg-warn { background: #f7ead3; color: #7a4f12; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 14px; }
.mg-link { display: flex; gap: 8px; }
.mg-link .input { font-size: 13.5px; }
.mg-share-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 22px; }
.mg-qr { display: flex; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; }
.mg-qr img { border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.mg-qr h4 { font-family: var(--display); font-size: 22px; font-weight: 600; }
.mg-qr p { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 8px; }
.mg-qr a { font-size: 13.5px; font-weight: 600; }
.mg-personal p { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
#mg-links { margin-top: 14px; display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.mg-plink { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; background: var(--paper); border-radius: 10px; font-size: 14px; }
.mg-plink span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-plink .btn { height: 32px; padding: 0 10px; background: var(--card); }
.mg-guests-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.mg-guests-head h3 { margin: 0 auto 0 0; }
.mg-search { max-width: 200px; height: 38px; border-radius: 999px; padding: 0 16px; }
.mg-table-wrap { overflow-x: auto; }
.mg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mg-table th { text-align: left; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mg-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mg-table td small { display: block; color: var(--mute); font-size: 12.5px; }
.mg-note { max-width: 280px; color: var(--ink-2); font-style: italic; }
.mg-del { color: var(--mute); padding: 4px; border-radius: 6px; }
.mg-del:hover { color: var(--ox); background: var(--paper-2); }
.mg-empty { text-align: center; padding: 48px 0; color: var(--mute); }
.mg-empty .i { width: 40px; height: 40px; stroke-width: 1.2; margin-bottom: 8px; }
.mg-private { margin-top: 22px; font-size: 13.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mg-private .link { font-size: inherit; color: var(--ink); }
.mg-mail { margin-top: 12px; max-width: 520px; }
.mg-mail label { display: block; font-size: 13.5px; color: var(--mute); margin-bottom: 8px; }
@media (max-width: 900px) { .mg-grid { grid-template-columns: 1fr; } .mg-stats { grid-template-columns: repeat(3, 1fr); } .mg-stats div:nth-child(3) { border-right: 0; } .mg-stats div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .mg-stats div { padding: 16px; } .mg-stats b { font-size: 36px; } }
@media (max-width: 600px) { .mg-head { grid-template-columns: 100px 1fr; gap: 20px; } }

/* =================== Dashboard =================== */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.dash-card { display: grid; grid-template-columns: 120px 1fr; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.dash-card.is-draft { border-style: dashed; }
.dash-thumb { border-radius: 5px; overflow: hidden; box-shadow: 0 10px 20px -12px rgba(42, 31, 29, .5); display: block; align-self: start; }
.dash-body h3 { font-size: 26px; margin: 10px 0 2px; }
.dash-body p { font-size: 13.5px; color: var(--mute); }
.dash-meta { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); margin: 10px 0 14px; }
.dash-meta span { display: flex; gap: 5px; align-items: center; }
.dash-meta .i { width: 15px; height: 15px; }
.dash-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-share { margin-top: 6px; }
.dash-empty { text-align: center; padding: 40px 0 20px; }
.dash-empty-env { width: 300px; margin: 0 auto 30px; }
.dash-empty h3 { font-size: 36px; }
.dash-empty p { color: var(--ink-2); margin: 6px 0 22px; }
.dash-restore { margin-top: 56px; max-width: 640px; }
.dash-restore h3 { font-size: 26px; }
.dash-restore p { font-size: 14px; color: var(--ink-2); margin: 6px 0 14px; }
.dash-restore-form { display: flex; gap: 8px; }

/* =================== Invitation page sections =================== */
.iv-main { --iv-head: var(--display); --iv-script: var(--display); }
.iv-scroll { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.iv-scroll .i { order: 2; width: 20px; height: 20px; animation: floaty 2.2s ease-in-out infinite; }
.iv-nav { position: fixed; top: 14px; left: 50%; z-index: 62; transform: translate(-50%, calc(-100% - 60px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s; visibility: hidden; max-width: calc(100vw - 28px); }
.iv-nav.show { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
body:has(#iv-preview:not([hidden])) .iv-nav { top: 48px; }
.iv-nav div { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 5px; border-radius: 999px; background: rgba(255, 250, 242, .82); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -12px rgba(30, 15, 5, .35); }
.iv-nav div::-webkit-scrollbar { display: none; }
.iv-nav a { flex: none; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink-2); transition: background .25s, color .25s; }
.iv-nav a:hover { color: var(--ink); }
.iv-nav a.on { background: var(--accent); color: #fff; }
.iv-dark .iv-nav div { background: rgba(20, 16, 18, .7); }
.iv-dark .iv-nav a { color: rgba(243, 233, 218, .75); }
.iv-dark .iv-nav a.on { color: #1d1c1f; }
.iv-sec { scroll-margin-top: 80px; }
.iv-top { position: fixed; right: 22px; bottom: 190px; z-index: 64; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 250, 242, .85); color: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s; }
.iv-top.show { opacity: 1; pointer-events: auto; }
body:has(#iv-sound[hidden]) .iv-top { bottom: 80px; }
.iv-top .i { width: 18px; height: 18px; }

.iv-orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px auto 40px; color: var(--accent); }
.iv-orn i { width: 64px; height: 1px; background: currentColor; opacity: .45; }
.iv-orn .i { width: 16px; height: 16px; }
.iv-x h2 { font-family: var(--iv-script); font-weight: 400; line-height: 1.15; }
.iv-x h3 { font-family: var(--iv-head); }
.iv-lead { max-width: 640px; margin: 0 auto 30px; font-size: 17px; opacity: .85; }
.iv-label { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: .65; margin: 22px 0 10px; }
.iv-glass, .iv-mile, .iv-sched li > div, .iv-hotel, .iv-gifts, .iv-capture, .iv-faq details, .iv-wish, .iv-wish-form, .iv-menu { background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 0, 0, .06); }
.iv-dark :is(.iv-mile, .iv-sched li > div, .iv-hotel, .iv-gifts, .iv-capture, .iv-faq details, .iv-wish, .iv-wish-form, .iv-menu) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

/* Story */
.iv-story-intro { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 660px; margin: 0 auto 56px; }
.iv-story-intro p { font-family: var(--display); font-size: 23px; line-height: 1.55; font-style: italic; }
.iv-timeline { list-style: none; position: relative; max-width: 820px; margin: 0 auto; padding: 0; }
.iv-timeline::before { content: ''; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(transparent, var(--accent) 8%, var(--accent) 92%, transparent); opacity: .5; }
.iv-timeline li { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin-bottom: 26px; }
.iv-node { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); justify-self: center; position: relative; z-index: 1; }
.iv-node .i { width: 22px; height: 22px; }
.iv-timeline .iv-node { grid-column: 2; grid-row: 1; }
.iv-mile { border-radius: 18px; padding: 22px 24px; text-align: left; grid-row: 1; transition: translate .3s; }
.iv-mile:hover { translate: 0 -3px; }
.iv-timeline li.l .iv-mile { grid-column: 1; text-align: right; }
.iv-timeline li.r .iv-mile { grid-column: 3; }
.iv-mile small { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.iv-mile h3 { font-size: 27px; margin: 4px 0 4px; line-height: 1.15; }
.iv-mile p { font-size: 15px; opacity: .82; }

/* Schedule */
.iv-sched { list-style: none; max-width: 640px; margin: 0 auto; padding: 0; position: relative; text-align: left; }
.iv-sched::before { content: ''; position: absolute; left: 123px; top: 24px; bottom: 24px; width: 1px; background: var(--accent); opacity: .4; }
.iv-sched li { display: grid; grid-template-columns: 90px 64px 1fr; align-items: center; margin-bottom: 14px; }
.iv-sched time { font-family: var(--display); font-size: 22px; font-weight: 600; text-align: right; color: var(--accent); }
.iv-sched .iv-node { width: 40px; height: 40px; }
.iv-sched .iv-node .i { width: 18px; height: 18px; }
.iv-sched li > div { border-radius: 16px; padding: 16px 20px; }
.iv-sched h3 { font-size: 24px; line-height: 1.2; }
.iv-sched p { font-size: 14.5px; opacity: .8; }

/* Dress code */
.iv-dress { display: flex; flex-direction: column; align-items: center; max-width: 620px; margin: 0 auto; text-align: center; --dw: min(20vw, 110px); }
.iv-dress.is-s { --dw: min(15vw, 76px); }
.iv-dress.is-l { --dw: min(32vw, 160px); }
.iv-dress h3 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.1; }
.iv-dress-style { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 4px 0 6px; }
.iv-dress-note { font-size: 14px; opacity: .86; max-width: 520px; }
.iv-dress-art { width: var(--dw); margin: 12px auto 2px; border-radius: 180px 180px 20px 20px; overflow: hidden; background: #fbf6ee; border: 1px solid rgba(0, 0, 0, .06); padding: 10% 5% 3%; box-shadow: 0 30px 60px -36px rgba(30, 15, 5, .55); display: grid; place-items: center; }
.iv-dress-art[style*="aspect-ratio"] > * { width: 100%; height: 100%; }
.iv-dress-art[style*="aspect-ratio"] .dress-photo img { height: 100%; object-fit: contain; }
.iv-dress-art .dress-photo { border-radius: inherit; }
.iv-dark .iv-dress-art { background: #f3ead8; }
/* separate dress codes for the bride's and the groom's families */
.iv-dfam { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; max-width: 480px; margin: 16px auto 0; text-align: center; }
.iv-dfam-c { padding: 12px 10px 12px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 18px; background: color-mix(in srgb, #fff 40%, transparent); }
.iv-dfam-c .iv-label { margin: 0 0 6px; color: var(--accent); opacity: 1; font-size: 9.5px; letter-spacing: .14em; line-height: 1.4; }
.iv-dfam-c h3 { font-size: clamp(15px, 2.2vw, 19px); line-height: 1.15; margin: 0 0 4px; }
.iv-dfam-c .iv-dress-note { font-size: 12px; margin: 0 0 8px; }
.iv-dfam-c .iv-swatches { gap: 6px 8px; }
.iv-dfam-c .iv-swatches span { width: 22px; height: 22px; }
.iv-dfam-c .iv-swatches li { font-size: 10px; gap: 4px; }
.iv-dfam-art { width: 54px; margin: 0 auto 8px; border-radius: 70px 70px 12px 12px; overflow: hidden; background: #fbf6ee; border: 1px solid rgba(0, 0, 0, .06); padding: 12px 4px 2px; }
.iv-dark .iv-dfam-art { background: #f3ead8; }
.iv-dark .iv-dfam-c { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12); }
.iv-dark .iv-swatches span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 8px 16px -8px rgba(0, 0, 0, .6); }
.iv-ed .iv-dfam-c { border-radius: 0; background: #fff; border: 0; box-shadow: 0 24px 50px -32px rgba(30, 24, 20, .35); }
/* colours for guests: just a label, a line and the swatches */
.iv-dguest { max-width: 620px; margin: 16px auto 0; text-align: center; }
.iv-dguest .iv-label { margin-top: 0; color: var(--accent); opacity: 1; }
.iv-dguest .iv-dress-note { margin: 0 auto 8px; font-size: 13px; }
.iv-dguest .iv-swatches span { width: 24px; height: 24px; }
/* family cards: the small outfit picture sits beside the name and colours */
.iv-dfam-c:has(.iv-dfam-art) { display: grid; grid-template-columns: 54px 1fr; column-gap: 10px; align-items: center; text-align: left; }
.iv-dfam-c:has(.iv-dfam-art) > * { grid-column: 2; }
.iv-dfam-c:has(.iv-dfam-art) > .iv-dfam-art { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.iv-dfam-c:has(.iv-dfam-art) .iv-swatches { justify-content: flex-start; }
/* the palette: its label and colours share one line */
.iv-dpal { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; }
.iv-dpal .iv-label { margin: 0; }
.iv-dress.lay-side .iv-dpal { justify-content: flex-start; }
/* dress layouts: side by side puts the picture beside the words; compact drops the picture for a tidy card */
.iv-dress.lay-side { display: grid; grid-template-columns: var(--dw) 1fr; column-gap: 16px; align-items: center; align-content: center; text-align: left; max-width: 480px; --dw: min(24vw, 110px); }
.iv-dress.lay-side.is-s { --dw: min(18vw, 80px); }
.iv-dress.lay-side.is-l { --dw: min(32vw, 150px); }
.iv-dress.lay-side > * { grid-column: 2; }
.iv-dress.lay-side > .iv-dress-art { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
.iv-dress.lay-side .iv-swatches { justify-content: flex-start; }
.iv-dress.lay-side .iv-dpal { margin-top: 8px; }
.iv-dress.lay-compact { max-width: 400px; padding: 16px 16px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 18px; }
.iv-dress.lay-compact h3 { font-size: clamp(20px, 3vw, 26px); }
.iv-dress.lay-compact .iv-dress-note { font-size: 14px; }
.iv-dress.lay-compact .iv-swatches span { width: 24px; height: 24px; }
.iv-ed .iv-dress.lay-compact { border: 0; border-radius: 0; background: #fff; box-shadow: 0 24px 50px -32px rgba(30, 24, 20, .35); }
.iv-ed .iv-eddark .iv-dress.lay-compact, .iv-dark .iv-dress.lay-compact { background: rgba(255, 255, 255, .045); }
.dress-art { width: 100%; height: auto; display: block; }
.dress-art * { transition: fill .5s; }
.iv-swatches { display: flex; gap: 10px 14px; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; }
.iv-swatches li { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; letter-spacing: .04em; opacity: .9; max-width: 84px; }
.iv-swatches span { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 8px 16px -8px rgba(0, 0, 0, .4); transition: transform .25s; }
.iv-swatches li:hover span { transform: translateY(-4px) scale(1.06); }
.sk-frame { overflow: hidden; }
.sk-frame img { display: block; }

/* Menu */
.iv-menu { max-width: 540px; margin: 0 auto; border-radius: 6px; padding: 46px 40px; position: relative; outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -12px; }
.iv-course small { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.iv-course p { font-family: var(--iv-head); font-size: 20px; line-height: 1.45; margin-top: 6px; }
.iv-course p span { display: block; }
.iv-menu-dot { display: block; width: 6px; height: 6px; margin: 22px auto; transform: rotate(45deg); background: var(--accent); opacity: .7; }
.iv-menu-note { margin-top: 28px; font-size: 13.5px; font-style: italic; opacity: .7; }

/* Gallery */
.iv-gallery { columns: 3 220px; column-gap: 14px; }
.iv-shot { display: block; width: 100%; margin-bottom: 14px; border-radius: 14px; overflow: hidden; break-inside: avoid; cursor: zoom-in; }
.iv-shot img { width: 100%; display: block; transition: transform .6s; }
.iv-shot:hover img { transform: scale(1.04); }
.iv-lb-modal { padding: 0 !important; background: #000 !important; max-width: min(1000px, 94vw) !important; }
.iv-lb { position: relative; }
.iv-lb img { display: block; width: 100%; max-height: 86vh; object-fit: contain; }
/* transparent layer over the full-size photo so a long-press or right-click hits it, not the image */
.iv-lb-shield { position: absolute; inset: 0; }
.iv-protect img:not(.iv-qr-img) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.iv-lb button { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .85); display: grid; place-items: center; }
.iv-lb-prev { left: 12px; } .iv-lb-prev .i { transform: scaleX(-1); }
.iv-lb-next { right: 12px; }

/* Travel & gifts */
.iv-hotels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; text-align: left; max-width: 860px; margin: 0 auto; }
.iv-hotel { display: flex; gap: 16px; border-radius: 18px; padding: 22px; }
.iv-hotel > .i { width: 26px; height: 26px; flex: none; color: var(--accent); }
.iv-hotel h3 { font-size: 24px; line-height: 1.2; }
.iv-hotel p { font-size: 14.5px; opacity: .82; }
.iv-gifts { max-width: 600px; margin: 0 auto; border-radius: 22px; padding: 34px; }
.iv-gifts > .i { width: 34px; height: 34px; color: var(--accent); margin-bottom: 12px; }
.iv-gifts p { font-family: var(--display); font-size: 21px; font-style: italic; line-height: 1.5; }
/* Event camera: teaser before the day, the QR on the day, the gallery after */
.iv-capture { max-width: 520px; margin: 0 auto; border-radius: 22px; padding: 34px 30px; display: grid; justify-items: center; gap: 16px; }
.iv-capture > .i { width: 34px; height: 34px; color: var(--accent); }
.iv-capture p { font-family: var(--display); font-size: 20px; font-style: italic; line-height: 1.5; }
.iv-capture small { display: block; text-align: center; line-height: 1.7; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.iv-capture small .i { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.iv-ed .iv-sec .iv-capture p { font-size: 17px; }
.iv-ed .iv-sec .iv-capture small { font-size: 10.5px; }
.iv-capture .iv-capture-qr { width: min(240px, 70vw); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px -24px rgba(20, 10, 5, .5); }
.iv-gift-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* FAQ */
.iv-faq { max-width: 720px; margin: 0 auto; text-align: left; display: grid; gap: 10px; }
.iv-faq details { border-radius: 16px; overflow: hidden; }
.iv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 22px; font-family: var(--iv-head); font-size: 20px; font-weight: 600; }
.iv-faq summary::-webkit-details-marker { display: none; }
.iv-faq summary .i { width: 18px; height: 18px; flex: none; color: var(--accent); transition: transform .3s; }
.iv-faq details[open] summary .i { transform: rotate(180deg); }
.iv-faq details p { padding: 0 22px 20px; font-size: 15.5px; opacity: .85; animation: fade .4s; }

/* Wishes */
.iv-wish-form { max-width: 640px; margin: 0 auto 34px; border-radius: 20px; padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.iv-wish-form input, .iv-wish-form textarea { width: 100%; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px; background: rgba(255, 255, 255, .7); color: inherit; resize: vertical; }
.iv-dark .iv-wish-form :is(input, textarea) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.iv-wish-form input { grid-column: 1 / -1; }
.iv-wish-form .btn { align-self: stretch; background: var(--accent); }
.iv-wall { columns: 3 230px; column-gap: 16px; text-align: left; }
.iv-wish { break-inside: avoid; margin: 0 0 16px; border-radius: 18px; padding: 22px; animation: pop .5s both; }
.iv-wish:nth-child(3n+1) { rotate: -.6deg; } .iv-wish:nth-child(3n+2) { rotate: .5deg; }
.iv-wish blockquote { margin: 0; font-family: var(--display); font-size: 19px; font-style: italic; line-height: 1.45; }
.iv-wish blockquote::before { content: '“'; display: block; font-size: 48px; line-height: .6; color: var(--accent); margin-bottom: 4px; }
.iv-wish figcaption { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.iv-wish time { margin-left: auto; font-weight: 400; opacity: .55; font-size: 12px; }
.iv-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent, var(--ox)); }
.iv-wall-empty { column-span: all; text-align: center; opacity: .6; }
.iv-check { display: flex; gap: 10px; align-items: center; font-size: 14px; margin: -4px 0 18px; cursor: pointer; }
.iv-check input { accent-color: var(--accent); width: 17px; height: 17px; }

.iv-map { margin-top: 18px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .06); height: 280px; }
.iv-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.7) sepia(.15); }
.iv-sign { font-family: 'Pinyon Script', cursive; font-size: 46px; margin-bottom: 18px; color: var(--accent); }
.iv-foot .btn { margin-bottom: 26px; }
.iv-draft .iv-main { padding-top: 30px; }
.iv-draft .iv-nav { transform: translate(-50%, 0); }

/* Opening quote */
.iv-verse { max-width: 600px; margin: 0 auto; font-family: var(--display); font-size: clamp(18px, 2.3vw, 23px); line-height: 1.7; white-space: pre-line; }
.iv-verse.is-pantun { font-style: italic; font-size: clamp(20px, 2.6vw, 26px); }
.iv-quote { max-width: 640px; margin: 0 auto; padding: 0 10px; }
.iv-quote > .i { width: 28px; height: 28px; color: var(--accent); opacity: .7; margin-bottom: 10px; }
.iv-quote blockquote { font-family: var(--display); font-size: clamp(18px, 2.3vw, 24px); font-style: italic; line-height: 1.55; }
.iv-quote figcaption { margin-top: 16px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.iv-quote figcaption::before { content: '— '; }

/* Couple */
.iv-couple { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; max-width: 760px; margin: 0 auto; }
.iv-person { display: grid; justify-items: center; gap: 6px; }
.iv-portrait { width: min(230px, 100%); aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; overflow: hidden; margin-bottom: 14px; background: color-mix(in srgb, var(--accent) 16%, #fbf6ee); border: 6px solid rgba(255, 255, 255, .8); box-shadow: 0 26px 50px -28px rgba(30, 15, 5, .6); display: grid; place-items: center; }
.iv-portrait img { width: 100%; height: 100%; object-fit: cover; }
.iv-portrait span { font-family: var(--iv-script); font-size: 62px; color: var(--accent); }
.iv-person h3 { font-size: 30px; line-height: 1.15; }
.iv-person p { font-size: 14.5px; opacity: .78; max-width: 260px; }
.iv-ig { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.iv-ig .i { width: 16px; height: 16px; }
.iv-amp { font-family: 'Pinyon Script', cursive; font-size: 64px; color: var(--accent); line-height: 1; }

/* Story photos */
.iv-mile.has-photo { padding-top: 14px; }
.iv-mile-img { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; margin-bottom: 14px; cursor: zoom-in; }
.iv-mile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.iv-mile-img:hover img { transform: scale(1.04); }

/* Memories: slideshow */
.iv-slides { max-width: 760px; margin: 0 auto; }
.iv-slides-frame { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; margin: 0 auto; border-radius: 22px; overflow: hidden; background: rgba(0, 0, 0, .06); box-shadow: 0 34px 70px -40px rgba(30, 15, 5, .7); touch-action: pan-y; }
@media (min-width: 721px) { .iv-slides-frame { aspect-ratio: 3 / 2; } }
.iv-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; cursor: zoom-in; pointer-events: none; }
.iv-slide.on { opacity: 1; pointer-events: auto; }
.iv-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease-out; }
.iv-slide.on img { transform: scale(1); }
.iv-slides-prev, .iv-slides-next { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #2a1f1d; display: grid; place-items: center; z-index: 2; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: background .2s; }
.iv-slides-prev:hover, .iv-slides-next:hover { background: #fff; }
.iv-slides-prev { left: 14px; } .iv-slides-prev .i { transform: rotate(180deg); }
.iv-slides-next { right: 14px; }
.iv-slides-count { position: absolute; right: 16px; bottom: 14px; z-index: 2; padding: 5px 12px; border-radius: 99px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12.5px; letter-spacing: .08em; backdrop-filter: blur(6px); }
.iv-thumbs { display: flex; gap: 8px; justify-content: safe center; margin-top: 14px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.iv-thumbs button { flex: none; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; opacity: .5; transition: opacity .3s, transform .3s; outline: 2px solid transparent; outline-offset: 2px; }
.iv-thumbs button.on { opacity: 1; outline-color: var(--accent); }
.iv-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Memories: film strip of polaroids */
.iv-film { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 8vw 30px; margin: 0 -24px; scrollbar-width: none; }
.iv-polaroid { flex: none; width: min(260px, 66vw); background: #fff; padding: 10px 10px 42px; box-shadow: 0 18px 34px -18px rgba(30, 15, 5, .55); scroll-snap-align: center; cursor: zoom-in; transition: rotate .4s, translate .4s; }
.iv-polaroid:nth-child(odd) { rotate: -3deg; } .iv-polaroid:nth-child(even) { rotate: 2.5deg; translate: 0 12px; }
.iv-polaroid:hover { rotate: 0deg; translate: 0 -4px; }
.iv-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Gift accounts */
.iv-accts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 640px; margin: 18px auto 0; }
.iv-acct { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px 18px; text-align: left; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #000), color-mix(in srgb, var(--accent) 55%, #1a1410)); box-shadow: 0 22px 40px -26px rgba(20, 10, 5, .7); display: grid; gap: 4px; }
.iv-qrs { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 640px; margin: 18px auto 0; }
.iv-qr { box-sizing: border-box; width: min(220px, calc(50% - 8px)); border-radius: 18px; padding: 14px 12px 12px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(0, 0, 0, .06); display: grid; gap: 4px; justify-items: center; text-align: center; }
.iv-qr-img { display: block; width: 100%; aspect-ratio: 1; padding: 8px; border: 0; border-radius: 12px; background: #fff; cursor: zoom-in; }
.iv-qr-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.iv-qr small { margin-top: 8px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.iv-qr span { font-size: 14px; opacity: .8; }
.iv-qr .btn { margin-top: 8px; max-width: 100%; padding-inline: 12px; white-space: nowrap; }
.iv-dark .iv-qr { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.iv-acct::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.iv-acct small { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.iv-acct b { font-size: 22px; letter-spacing: .08em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.iv-acct span { font-size: 14px; opacity: .85; }
.iv-acct .btn { justify-self: start; margin-top: 10px; color: #fff; border-color: rgba(255, 255, 255, .45); position: relative; z-index: 1; }

/* Dress code illustrations */
.dress-photo { position: relative; border-radius: 160px 160px 14px 14px; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--d3) 30%, #fff), var(--d3)); }
.dress-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(transparent, color-mix(in srgb, var(--d1) 22%, transparent)); pointer-events: none; }
.dress-photo img { display: block; width: 100%; height: auto; position: relative; z-index: 1; padding: 6% 3% 0; }
.dress-photo.is-blend img { mix-blend-mode: multiply; }

@media (max-width: 720px) {
  /* phones keep the left-right zigzag, just tighter */
  .iv-timeline li { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); margin-bottom: 20px; }
  .iv-timeline .iv-node { width: 34px; height: 34px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  .iv-timeline .iv-node .i { width: 16px; height: 16px; }
  .iv-mile { border-radius: 14px; padding: 14px 14px; overflow-wrap: anywhere; }
  .iv-mile.has-photo { padding-top: 10px; }
  .iv-mile-img { border-radius: 9px; margin-bottom: 10px; }
  .iv-mile small { font-size: 9.5px; letter-spacing: .12em; }
  .iv-mile h3 { font-size: 19px; }
  .iv-mile p { font-size: 13px; line-height: 1.5; }
  .iv-sched::before { left: 87px; }
  .iv-sched li { grid-template-columns: 62px 50px 1fr; }
  .iv-sched time { font-size: 17px; }
  .iv-dress.is-l { --dw: min(34vw, 150px); }
  .iv-menu { padding: 38px 24px; }
  .iv-wish-form { grid-template-columns: 1fr; }
  .iv-top { right: 13px; bottom: 162px; }
  .iv-sec { margin-top: 72px; }
  .iv-couple { grid-template-columns: 1fr; gap: 6px; }
  .iv-portrait { width: 200px; }
  .iv-amp { font-size: 54px; margin: 4px 0; }
  .iv-slides-prev, .iv-slides-next { width: 38px; height: 38px; }
}

/* =================== Editor: page content =================== */
.ed-tab-sep { display: block; font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--mute); text-align: center; padding: 14px 0 4px; margin-top: 6px; border-top: 1px solid var(--line); }
.ed-list { display: grid; gap: 12px; }
.ed-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 4px; background: var(--paper); }
.ed-item .field { margin-bottom: 10px; }
.ed-item-head { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.ed-item-head b { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-item-head button { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-2); }
.ed-item-head button:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); }
.ed-item-head button:disabled { opacity: .3; }
.ed-item-head .i { width: 16px; height: 16px; }
.ed-item-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ox); color: #fff; flex: none; margin-right: 4px; }
.ed-item-ic .i { width: 15px; height: 15px; }
.ed-icons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.ed-icons button { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 1px solid transparent; color: var(--ink-2); }
.ed-icons button .i { width: 16px; height: 16px; }
.ed-icons button.on { border-color: var(--ox); color: var(--ox); background: var(--card); }
.ed-add { justify-self: start; }
.ed-secs { display: grid; gap: 8px; }
.ed-sec { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 10px 10px 12px; transition: opacity .2s; }
.ed-sec.off { opacity: .55; }
.ed-sec > div { flex: 1; min-width: 0; }
.ed-sec b { display: block; font-size: 14px; }
.ed-sec small { display: block; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-sec > button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-2); }
.ed-sec > button:disabled { opacity: .3; }
.ed-sec > button .i { width: 15px; height: 15px; }
.ed-switch-sm { margin: 0 0 0 4px; }
.ed-dress-art { max-width: 210px; border-radius: 130px 130px 14px 14px; background: #fbf6ee; border: 1px solid var(--line); padding: 16px 8px 4px; margin: 0 auto 22px; }
.ed-fam-art { max-width: 120px; border-radius: 70px 70px 10px 10px; background: #fbf6ee; border: 1px solid var(--line); padding: 10px 4px 2px; margin: 12px auto; }
.ed-seg-3 { grid-template-columns: repeat(3, 1fr); }
.ed-palette { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ed-palette .sw { width: 42px; height: 42px; }
.ed-pal-add { display: grid; place-items: center; background: var(--card); border: 1px dashed var(--line); color: var(--ink-2); }
.ed-pal-add .i { width: 16px; height: 16px; }
.sw-round { border-radius: 50%; }
.ed-pals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-pals button { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 12.5px; font-weight: 600; }
.ed-pals button:hover { border-color: var(--ox); }
.ed-pals span { display: flex; width: 100%; height: 18px; border-radius: 5px; overflow: hidden; }
.ed-pals i { flex: 1; }
.ed-nudge { display: flex; gap: 12px; align-items: flex-start; margin: -10px 0 26px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.ed-nudge > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--accent); }
.ed-nudge b { font-size: 13px; color: var(--ink); }
.ed-nudge p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 3px 0 0; }
.ed-nudge .btn { margin-top: 10px; }
.ed-nudge:first-child { margin-top: 0; }
.ed-slot .ed-sub { margin: 12px 0 6px; }
.ed-slot-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ed-slot-row button { flex: none; width: 46px; height: 58px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--paper-2); }
.ed-slot-row button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-slot-row button.on { border-color: var(--ox); }
.ed-slot-row .ed-slot-auto { font-size: 11.5px; font-weight: 600; color: var(--ink-2); border: 1px dashed var(--line); }
.ed-slot-row .ed-slot-auto.on { border-style: solid; }
.ed-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.ed-gal > div { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.ed-gal img { width: 100%; height: 100%; object-fit: cover; }
.ed-gal > div button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.ed-gal > div button .i { width: 13px; height: 13px; }
.ed-gal-add { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--ink-2); cursor: pointer; position: relative; }
.ed-gal-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ed-stage.is-page .ed-stage-bar, .ed-stage.is-page .ed-fx { display: none; }
.ed-canvas.is-page, .ed-canvas.is-live { padding: 64px 20px 76px; }
.ed-canvas.is-page { padding-bottom: 20px; }
.ed-stage.is-live .ed-fx { display: none; }
.ed-stage-bar .ed-op { padding-inline: 10px; }
.ed-stage-bar .ed-op:disabled { opacity: .4; pointer-events: none; }
@media (max-width: 860px) { .ed-tab-sep { display: flex; align-items: center; padding: 0 8px; margin: 0; border: 0; border-left: 1px solid var(--line); } }
/* Device preview: real viewport sizes scaled to fit (editor.js fitDevice) */
.ed-devs { position: absolute; top: 18px; right: 18px; z-index: 6; display: none; gap: 2px; background: rgba(255, 250, 242, .85); backdrop-filter: blur(8px); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.ed-stage.is-live .ed-devs { display: flex; }
.ed-devs button { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ed-devs button span { display: none; }
.ed-devs button.on { padding-inline: 12px; }
.ed-devs button.on span { display: inline; }
.ed-devs button .i { width: 16px; height: 16px; }
.ed-devs button.on { background: var(--ink); color: var(--paper); }
.ed-devs .ed-dev-rot { display: none; padding: 6px 9px; }
.ed-devs.can-rotate .ed-dev-rot { display: flex; }
.ed-dev-fit { position: relative; flex: none; }
.ed-dev-fit[hidden], .ed-phone[hidden] { display: none; }
.ed-phone { width: min(400px, 100%); height: 100%; max-height: 820px; border-radius: 34px; padding: 10px; background: #1d1c1f; box-shadow: 0 40px 80px -30px rgba(30, 15, 5, .6); }
.ed-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 26px; background: #fffaf2; }
.ed-static { display: contents; }
.ed-device { position: absolute; top: 0; left: 0; transform-origin: 0 0; box-sizing: border-box; display: flex; flex-direction: column; background: #1b1a1d; box-shadow: 0 40px 80px -30px rgba(30, 15, 5, .6), inset 0 0 0 2px #3a383d; }
.ed-device iframe { flex: 1; min-height: 0; width: 100%; border: 0; background: #fffaf2; display: block; }
.ed-dev-bar { flex: none; height: var(--bar); position: relative; display: flex; align-items: center; justify-content: space-between; background: #fffaf2; color: #111; font: 600 17px/1 -apple-system, 'SF Pro Text', 'Manrope', sans-serif; padding: 0 34px; }
.ed-dev-bar b { font-weight: 600; }
.ed-sys { display: flex; align-items: center; gap: 7px; }
.ed-sys svg { height: 12px; fill: currentColor; }
.ed-batt { width: 25px; height: 12px; border: 1.5px solid rgba(0, 0, 0, .4); border-radius: 4px; padding: 1.5px; box-sizing: border-box; }
.ed-batt i { display: block; height: 100%; width: 80%; background: currentColor; border-radius: 1.5px; }
.ed-dev-home { display: none; }
/* the phone uses the same look as the tablet: even bezel, slim status bar, no island or home bar */
.dev-phone { border-radius: 46px; }
.dev-phone .ed-dev-bar { border-radius: 24px 24px 0 0; font-size: 13px; padding: 0 24px; }
.dev-phone iframe { border-radius: 0 0 24px 24px; }
.dev-tablet { border-radius: 46px; }
.dev-tablet .ed-dev-bar { border-radius: 24px 24px 0 0; font-size: 13px; padding: 0 26px; }
.dev-tablet iframe { border-radius: 0 0 24px 24px; }
.dev-desktop { border-radius: 12px; overflow: hidden; background: #fffaf2; }
.dev-desktop .ed-dev-bar { justify-content: flex-start; gap: 18px; padding: 0 16px; background: #ece6dd; border-bottom: 1px solid #d9d1c5; font-size: 13px; font-weight: 500; color: #5a5048; }
.ed-dots { display: flex; gap: 8px; }
.ed-dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.ed-dots i:nth-child(2) { background: #febc2e; }
.ed-dots i:nth-child(3) { background: #28c840; }
.ed-url { flex: 1; max-width: 560px; margin: 0 auto; transform: translateX(-40px); height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .75); display: flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .ed-devs { top: 64px; right: 50%; transform: translateX(50%); } .ed-canvas.is-live { padding-top: 108px; } .ed-phone { height: calc(62vh - 84px); } }

/* =================== Manage: dashboard tabs =================== */
.mg-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 24px; scrollbar-width: none; }
.mg-tabs button { flex: none; display: flex; gap: 8px; align-items: center; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mg-tabs button .i { width: 17px; height: 17px; }
.mg-tabs button i { font-style: normal; font-size: 11.5px; background: var(--paper-2); border-radius: 999px; padding: 1px 8px; }
.mg-tabs button.on { color: var(--ox); border-color: var(--ox); }
.mg-ov { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mg-ov .panel, .mg-plan { padding: 28px; }
.mg-ov h3, .mg-plan h3 { font-size: 26px; margin-bottom: 16px; }
.mg-donut-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 28px; align-items: center; }
.mg-donut-card h3, .mg-donut-card .help { grid-column: 1 / -1; }
.mg-donut { --a: 0%; --b: 0%; width: 170px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sage) 0 var(--a), var(--ox) var(--a) var(--b), #e6dccd var(--b) 100%); }
.mg-donut div { width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--card); display: grid; place-content: center; text-align: center; }
.mg-donut b { font-family: var(--display); font-size: 44px; font-weight: 500; line-height: 1; }
.mg-donut span { font-size: 11.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.mg-legend { list-style: none; padding: 0; display: grid; gap: 10px; }
.mg-legend li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.mg-legend li b { margin-left: auto; font-size: 16px; }
.mg-legend i { width: 12px; height: 12px; border-radius: 3px; }
.k-yes { background: var(--sage); } .k-no { background: var(--ox); } .k-pend { background: #e6dccd; }
.mg-donut-card .help { margin-top: 18px; font-size: 13px; }
.mg-spark { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; height: 110px; align-items: end; }
.mg-spark div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.mg-spark b { width: 100%; min-height: 3px; border-radius: 4px 4px 2px 2px; background: var(--ox); opacity: .85; transition: height .6s; }
.mg-spark span { font-size: 10.5px; color: var(--mute); height: 13px; }
.mg-bar { display: grid; grid-template-columns: 110px 1fr 36px; gap: 12px; align-items: center; font-size: 14px; margin-bottom: 10px; }
.mg-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-bar i { height: 10px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.mg-bar i b { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.mg-bar em { font-style: normal; font-weight: 700; text-align: right; }
.mg-feed, .mg-notes { list-style: none; padding: 0; display: grid; gap: 4px; }
.mg-feed li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mg-feed li:last-child { border: 0; }
.mg-feed .i { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--paper-2); color: var(--ox); flex: none; }
.mg-feed small { display: block; font-size: 12px; color: var(--mute); }
.mg-notes li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.mg-notes li b { min-width: 110px; }
.mg-notes .i { width: 15px; height: 15px; color: var(--ox); flex: none; align-self: center; }
.mg-notes small { display: block; color: var(--mute); font-size: 12px; }
.mg-wishes { columns: 3 260px; column-gap: 16px; }
.mg-wish { break-inside: avoid; margin: 0 0 16px; padding: 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.mg-wish.is-hidden { opacity: .55; border-style: dashed; }
.mg-wish blockquote { margin: 0; font-family: var(--display); font-size: 18px; font-style: italic; line-height: 1.45; }
.mg-wish figcaption { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 14px; }
.mg-wish figcaption small { margin-left: auto; color: var(--mute); }
.mg-wish .iv-av { --accent: var(--ox); }
.mg-wish-act { display: flex; gap: 6px; margin-top: 14px; }
.mg-wish-act .btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.mg-ilist { display: grid; gap: 6px; }
.mg-plink .pill { flex: none; font-size: 11px; }
.mg-plan { max-width: 760px; }
.mg-plan-head { display: flex; justify-content: space-between; align-items: baseline; }
.mg-plan-head span { color: var(--mute); font-size: 14px; font-weight: 600; }
.mg-progress { height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-bottom: 10px; }
.mg-progress b { display: block; height: 100%; background: var(--sage); border-radius: 99px; transition: width .5s; }
.mg-plan h4 { font-family: var(--body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 24px 0 8px; }
.mg-plan ul { list-style: none; padding: 0; }
.mg-plan li { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.mg-plan label { flex: 1; display: flex; gap: 12px; align-items: center; padding: 11px 0; font-size: 15px; cursor: pointer; }
.mg-plan input { width: 18px; height: 18px; accent-color: var(--sage); }
.mg-plan input:checked + span { text-decoration: line-through; color: var(--mute); }
.mg-plan-add { display: flex; gap: 8px; margin-top: 14px; }
@media (max-width: 900px) { .mg-ov { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mg-donut-card { grid-template-columns: 1fr; justify-items: center; } .mg-legend { width: 100%; margin-top: 18px; } }

/* Editor: photos, artwork picker */
.ed-photo.is-round img, .ed-photo.is-round > span { border-radius: 50%; }
.ed-arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ed-arts button, .ed-arts-up { position: relative; border: 1px solid var(--line); background: #fbf6ee; border-radius: 12px; padding: 6px 6px 8px; display: grid; gap: 4px; justify-items: center; cursor: pointer; color: var(--ink-2); }
.ed-arts img, .ed-arts-svg, .ed-arts-up > .i { width: 100%; aspect-ratio: 1; object-fit: contain; display: grid; place-items: center; }
.ed-arts-svg svg { width: 100%; height: 100%; }
.ed-arts-up > .i { width: 26px; height: 60px; }
.ed-arts small { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.ed-arts-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ed-arts .on { border-color: var(--ox); box-shadow: 0 0 0 1px var(--ox); }

/* =================== Opening cover photo =================== */
.iv-stage.has-cover { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 20px; padding: max(7vh, 40px) 20px 14vh; color: #fff; overflow: hidden; }
.iv-cover { position: absolute; inset: 0; z-index: 0; background: #1c1714; overflow: hidden; }
.iv-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; transform: scale(1.12); }
.iv-cover img.on { opacity: 1; animation: ivkb 11s ease-out forwards; }
@keyframes ivkb { from { transform: scale(1.16) translate(var(--kx), var(--ky)); } to { transform: scale(1.02) translate(0, 0); } }
.iv-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(12, 8, 6, calc(var(--dim) + .15)), rgba(12, 8, 6, calc(var(--dim) * .55)) 45%, rgba(12, 8, 6, calc(var(--dim) + .2))); transition: background .8s; }
.iv-cover-txt { position: relative; z-index: 1; text-align: center; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); animation: rise 1.2s .2s backwards; transition: opacity .7s, translate .7s; }
.iv-cover-txt p { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; opacity: .9; }
.iv-cover-txt h1 { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: clamp(46px, 12vw, 92px); line-height: 1.1; margin: 10px 0 8px; }
.iv-cover-txt .iv-cover-date { font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: .14em; text-transform: none; }
.iv-stage.has-cover .iv-env { position: relative; z-index: 1; --w: min(470px, 84vw, calc((100svh - 330px) / .95)); margin-top: 0; }
.iv-stage.has-cover .iv-hint { z-index: 1; color: #fff; bottom: 6vh; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.iv-stage.has-cover .iv-hint .dot { background: #fff; }
.iv-stage.is-opening .iv-cover-txt { opacity: 0; translate: 0 -24px; }
.iv-stage.is-opening .iv-cover::after { background: rgba(12, 8, 6, calc(var(--dim) + .25)); }
.ed-canvas .iv-cover { position: absolute; }
.ed-canvas .iv-cover-txt { position: absolute; top: 34px; left: 0; right: 0; color: #fff; animation: none; }
.ed-canvas .iv-cover-txt h1 { font-size: 46px; }
.ed-canvas.has-cover .ed-env { margin-top: 110px; }

/* =================== Full-width photo backdrops =================== */
.iv-page { overflow-x: clip; }
.iv-band { position: relative; isolation: isolate; width: 100vw; margin-left: calc(50% - 50vw); min-height: min(60vh, 520px); display: grid; place-items: center; padding: 72px 24px; color: #fff; overflow: hidden; }
.iv-band-bg { position: absolute; inset: 0; z-index: -1; background: #1c1714; }
.iv-band-bg img { position: absolute; left: 0; top: -14%; width: 100%; height: 128%; object-fit: cover; }
/* band photos drift against the scroll on the compositor (no scroll JS), so they never lag behind a flick */
@supports (animation-timeline: view()) {
  .iv-band-bg img { animation: bandplx linear both; animation-timeline: view(); animation-range: cover; }
}
@keyframes bandplx { from { translate: 0 -9%; } to { translate: 0 9%; } }
@media (prefers-reduced-motion: reduce) { .iv-band-bg img { animation: none; top: 0; height: 100%; } }
.iv-band-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(12, 8, 6, .38), rgba(12, 8, 6, .55)), radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .35)); }
.iv-band-in { position: relative; max-width: 720px; width: 100%; text-shadow: 0 2px 16px rgba(0, 0, 0, .3); }
.iv-band .eyebrow, .iv-band .iv-orn, .iv-band .iv-quote > .i, .iv-band .iv-quote figcaption { color: #fff !important; }
.iv-band .iv-clock div { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.iv-band h2 { color: #fff; }
.iv-closing h2 { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: clamp(42px, 7.5vw, 70px); line-height: 1.15; margin: 8px 0; }
.iv-band-date { font-family: 'Cormorant Garamond', serif; font-size: 20px; letter-spacing: .12em; }
.iv-band + .iv-foot { padding-top: 50px; }
/* Thank-you without a photo: a quiet text section */
.iv-thanks { text-align: center; padding-top: 56px; padding-bottom: 44px; }
.iv-thanks .eyebrow { color: var(--accent); }
.iv-thanks-note { max-width: 520px; margin: 12px auto 16px; font-size: 15.5px; line-height: 1.7; }
.iv-thanks-names { font-family: 'Pinyon Script', cursive; font-size: 30px; margin: 4px 0 10px; }
.iv-ed .iv-thanks-names { font-family: var(--ed-script); }
.iv-band .iv-thanks-note { color: #fff; }

/* =================== Scroll reveals =================== */
.iv-x { overflow-x: clip; overflow-clip-margin: 24px; }
/* motion.js animates through WAAPI; these only support it */
.mo-w { display: inline-block; white-space: nowrap; }
.mo-c { display: inline-block; }
.mo-float { animation: mo-float 7s ease-in-out infinite; }
.mo-float:nth-of-type(2n) { animation-duration: 8.5s; animation-delay: -2s; }
@keyframes mo-float { 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .mo-float, .iv-scroll .i { animation: none; } }

/* Desktop: names on the left, envelope on the right */
@media (min-width: 900px) and (min-height: 560px) {
  .iv-stage.has-cover { flex-direction: row; justify-content: center; align-items: center; gap: 0; padding: 40px 6vw; }
  .iv-stage.has-cover .iv-cover-txt { flex: 0 1 460px; min-width: 0; margin-right: clamp(48px, 7vw, 120px); text-align: left; transition: opacity .7s, translate .7s, flex-basis 1.1s .25s cubic-bezier(.6, 0, .2, 1), margin 1.1s .25s cubic-bezier(.6, 0, .2, 1); }
  .iv-stage.has-cover .iv-cover-txt h1 { font-size: clamp(64px, 6.6vw, 112px); margin: 14px 0 18px; }
  .iv-stage.has-cover .iv-cover-txt .iv-cover-date { display: flex; align-items: center; gap: 16px; font-size: 21px; }
  .iv-stage.has-cover .iv-cover-txt .iv-cover-date::before { content: ''; width: 56px; height: 1px; background: currentColor; opacity: .7; }
  .iv-stage.has-cover .iv-env { flex: none; --w: min(520px, 42vw, calc((100vh - 150px) / 1.28)); margin-top: calc(var(--w) * .42); }
  .iv-stage.is-opening .iv-cover-txt { translate: -40px 0; flex-basis: 0; margin-right: 0; }
}

/* ---------- Background system (backgrounds.js) ---------- */
.sk-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sk-bg-fill, .sk-bg-ov { position: absolute; inset: 0; }
.sk-bg-media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-bg-drift { position: absolute; inset: -30%; animation: skdrift 28s ease-in-out infinite alternate; will-change: transform; }
@keyframes skdrift { 50% { transform: translate(7%, -5%) rotate(6deg) scale(1.08); } 100% { transform: translate(-6%, 4%) rotate(-4deg) scale(1.04); } }
.iv-page { isolation: isolate; }
.sk-bg.sk-bg-page { position: fixed; z-index: -1; }
.iv-stage.has-bg, .iv-hero.has-bg, .iv-sec.has-bg { isolation: isolate; }
.iv-hero.has-bg { position: relative; width: 100vw; margin: -56px 0 0 calc(50% - 50vw); padding: 56px 24px 48px; }
.iv-sec.has-bg { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 80px max(24px, calc(50vw - 466px)); overflow-x: clip; }
[data-tone="dark"].has-bg, body[data-page-tone="dark"] .iv-main { color: #f6efe4; }
[data-tone="light"].has-bg, body[data-page-tone="light"] .iv-main { color: #2a1f1d; }
.iv-stage[data-tone="dark"] .iv-hint { color: #f6efe4; }
@media (max-width: 600px) { .iv-sec.has-bg { padding-block: 60px; } }
/* a photo band with its own background (Background tab) and a chosen height */
.iv-band.has-bg { padding: 72px 24px; }
.iv-band[data-tone="light"] .iv-band-in { text-shadow: none; }
.iv-band[data-tone="light"], .iv-band[data-tone="light"] h2, .iv-band[data-tone="light"] :is(.eyebrow, .iv-orn, .iv-quote > .i, .iv-quote figcaption) { color: #2a1f1d !important; }
.iv-band[data-tone="light"] .iv-clock div { background: rgba(42, 31, 29, .06); border-color: rgba(42, 31, 29, .2); }
.iv-ed .iv-band[data-tone="light"] .btn.iv-edbtn:hover { background: #2a1f1d; color: #fff; }
.iv-sec.iv-band.is-m { min-height: min(56vh, 460px); }
.iv-sec.iv-band.is-s { min-height: 0; padding-block: 72px; }
@media (prefers-reduced-motion: reduce) { .sk-bg-drift { animation: none; } }

/* Editor: background tab */
.ed-seg.ed-seg-wrap { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }
.ed-seg.ed-seg-wrap button { padding: 9px 8px; font-size: 12.5px; }
.ed-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.ed-bgtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ed-bgtile { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 5px; text-align: left; min-width: 0; }
.ed-bgtile.on { border-color: var(--ox); box-shadow: 0 0 0 1px var(--ox); }
.ed-bgprev { display: block; position: relative; isolation: isolate; aspect-ratio: 1; border-radius: 7px; overflow: hidden; background: repeating-conic-gradient(#efe9e1 0 25%, #fbf8f3 0 50%) 0 0 / 12px 12px; }
.ed-bgprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-bgtiles-tall .ed-bgprev { aspect-ratio: 3 / 4; }
.ed-bgtile small { display: block; font-size: 11.5px; font-weight: 600; margin-top: 5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.ed-bgtile small em { display: block; font-style: normal; font-weight: 400; color: var(--mute); font-size: 10.5px; }
.ed-focal { position: relative; border-radius: 10px; overflow: hidden; cursor: crosshair; }
.ed-focal img { width: 100%; display: block; }
.ed-focal i { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .4); pointer-events: none; }
.ed-canvas.has-bg { isolation: isolate; }

/* Editor: frame picker */
.ed-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.ed-frames button { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px 4px 6px; display: grid; justify-items: center; gap: 4px; color: inherit; }
.ed-frames button svg { width: 26px; height: 26px; }
.ed-frames button small { font-size: 11px; font-weight: 600; }
.ed-frames button.on { border-color: var(--ox); box-shadow: 0 0 0 1px var(--ox); color: var(--ox); }
.ed-det { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.ed-det summary { cursor: pointer; font-size: 13px; font-weight: 700; padding: 4px 0; }
.ed-det[open] summary { margin-bottom: 8px; }
.ed-det .ed-row > .field { flex: 1; min-width: 0; }
.ed-check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin: 6px 0; }
.ed-focal-sm { max-width: 180px; }
.ed-named { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ed-named button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 10px 4px 5px; font-size: 12px; font-weight: 600; color: inherit; }
.ed-named i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ed-arts small em { display: block; font-style: normal; font-weight: 500; opacity: .6; font-size: 10.5px; }

/* Illustrations: placed art with gentle motion (transform / opacity only) */
.sk-illo { position: relative; margin: 0 auto 26px; width: var(--iw, min(40vw, 220px)); display: block; }
.sk-illo.is-s { --iw: min(28vw, 150px); }
.sk-illo.is-l { --iw: min(70vw, 340px); }
.sk-illo.al-left { margin-left: 0; }
.sk-illo.al-right { margin-right: 0; }
.sk-illo-art { position: relative; }
.sk-illo-art > img, .sk-illo-art > svg { display: block; width: 100%; height: auto; }
.sk-illo-art.sk-frame > img { height: 100%; }
.sk-illo-art.sk-frame { background: color-mix(in srgb, var(--accent) 10%, #fbf6ee); box-shadow: 0 22px 44px -30px rgba(30, 15, 5, .5); }
.iv-hero .sk-illo { margin: 18px auto 6px; }
.iv-foot .sk-illo { margin-bottom: 18px; }
.sk-illo *, .sk-illo { animation-play-state: paused; }
.sk-illo.is-on, .sk-illo.is-on * { animation-play-state: running; }

/* sway and float loop */
.a-sway .sk-illo-art { transform-origin: 50% 100%; animation: skSway calc(5s * var(--spd)) ease-in-out infinite; }
.a-float .sk-illo-art { animation: skFloat calc(6s * var(--spd)) ease-in-out infinite; }
@keyframes skSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes skFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* dance: whole couple sways, partners bob out of phase, skirt and veil follow */
.a-dance .ca-pair, .a-dance .ca-a, .a-dance .ca-b, .a-dance .ca-hem, .a-dance .ca-veil, .a-dance .ca-arms { transform-box: fill-box; }
.a-dance .ca-pair { transform-origin: 50% 100%; animation: caPair calc(5.2s * var(--spd)) ease-in-out infinite; }
.a-dance .ca-a { transform-origin: 50% 100%; animation: caBob calc(2.6s * var(--spd)) ease-in-out infinite; }
.a-dance .ca-b { transform-origin: 50% 100%; animation: caBob calc(2.6s * var(--spd)) ease-in-out calc(-1.3s * var(--spd)) infinite; }
.a-dance .ca-hem { transform-origin: 50% 0; animation: caHem calc(2.6s * var(--spd)) ease-in-out infinite; }
.a-dance .ca-veil { transform-origin: 100% 0; animation: caVeil calc(5.2s * var(--spd)) ease-in-out infinite; }
.a-dance .ca-arms { transform-origin: 50% 100%; animation: caArms calc(5.2s * var(--spd)) ease-in-out infinite; }
@keyframes caPair { 0%, 100% { transform: rotate(-2.4deg) translateX(-3px); } 50% { transform: rotate(2.4deg) translateX(3px); } }
@keyframes caBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes caHem { 0%, 100% { transform: skewX(-4deg) scaleX(1); } 50% { transform: skewX(4deg) scaleX(1.03); } }
@keyframes caVeil { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes caArms { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-2px) rotate(1.5deg); } }

.sk-illo.is-line .sk-illo-art, .sk-illo.is-tint .sk-illo-art { color: var(--ink, var(--accent)); }
/* recoloured transparent artwork: the image keeps the size, the mask paints it */
.sk-illo.is-tint .sk-illo-art > img { visibility: hidden; }
.sk-tint { position: absolute; inset: 0; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
/* line-art couples: strokes draw themselves in once, then the couple moves */
.sk-illo .lc-pair, .sk-illo .lc-pair g { transform-box: fill-box; }
.sk-illo.is-line.a-draw .d, .sk-illo.is-line.a-dance .d { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sk-illo.is-line.a-draw .lc-fill, .sk-illo.is-line.a-dance .lc-fill, .sk-illo.is-line.a-draw .lc-blooms, .sk-illo.is-line.a-dance .lc-blooms,
.sk-illo.is-line.a-draw .lc-bouquet, .sk-illo.is-line.a-dance .lc-bouquet, .sk-illo.is-line.a-draw .lc-flowers, .sk-illo.is-line.a-dance .lc-flowers { opacity: 0; }
.sk-illo.is-line.is-seen .d { animation: lcDraw calc(2.6s * var(--spd)) cubic-bezier(.45, .1, .3, 1) forwards; }
.sk-illo.is-line.is-seen .lc-bride .d { animation-delay: calc(.35s * var(--spd)); }
.sk-illo.is-line.is-seen :is(.lc-arms, .lc-hands) .d { animation-delay: calc(.8s * var(--spd)); }
.sk-illo.is-line.is-seen .lc-gown .d { animation-delay: calc(.6s * var(--spd)); animation-duration: calc(3s * var(--spd)); }
.sk-illo.is-line.is-seen .lc-veil .d { animation-delay: calc(1.2s * var(--spd)); }
.sk-illo.is-line.is-seen :is(.lc-fill, .lc-blooms, .lc-bouquet, .lc-flowers) { animation: lcFade calc(1.2s * var(--spd)) ease-out calc(1.6s * var(--spd)) forwards; }
@keyframes lcDraw { to { stroke-dashoffset: 0; } }
@keyframes lcFade { to { opacity: 1; } }
/* waltz: slow sway, veil and train follow; starts as the drawing finishes */
.a-dance.lc-waltz.is-seen .lc-pair { transform-origin: 50% 100%; animation: lcSway calc(6s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-waltz.is-seen .lc-veil { transform-origin: 0 0; animation: lcVeil calc(4s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-waltz.is-seen .lc-hem, .a-dance.lc-waltz.is-seen .lc-swoosh { transform-origin: 50% 0; }
.a-dance.lc-waltz.is-seen .lc-gown { transform-origin: 50% 0; animation: lcHem calc(3s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-waltz.is-seen .lc-bouquet { transform-origin: 30% 0; animation: lcFade calc(1.2s * var(--spd)) ease-out calc(1.6s * var(--spd)) forwards, lcSwing calc(3s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
@keyframes lcSway { 0%, 100% { transform: rotate(-2.2deg) translateX(-2px); } 50% { transform: rotate(2.2deg) translateX(2px); } }
@keyframes lcVeil { 0%, 100% { transform: rotate(0deg) skewY(0deg); } 50% { transform: rotate(-4deg) skewY(3deg); } }
@keyframes lcHem { 0%, 100% { transform: skewX(-3deg); } 50% { transform: skewX(3deg) scaleX(1.02); } }
@keyframes lcSwing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
/* hand in hand: alternating steps, a light bob and swinging hands */
.a-dance.lc-walk.is-seen .lc-pair { animation: lcBob calc(1.4s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-walk.is-seen .lc-legA { transform-origin: 50% 0; animation: lcStep calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-walk.is-seen .lc-legB { transform-origin: 50% 0; animation: lcStep calc(2.8s * var(--spd)) ease-in-out calc(1s * var(--spd)) infinite; }
.a-dance.lc-walk.is-seen .lc-hands { transform-origin: 50% 0; animation: lcHands calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-walk.is-seen .lc-gown { transform-origin: 50% 0; animation: lcHem calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-walk.is-seen .lc-bouquet { transform-origin: 30% 0; animation: lcFade calc(1.2s * var(--spd)) ease-out calc(1.6s * var(--spd)) forwards, lcSwing calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
/* walking away: the same step, seen from behind; the veil trails */
.a-dance.lc-away.is-seen .lc-pair { animation: lcBob calc(1.4s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-away.is-seen .lc-legA { transform-origin: 50% 0; animation: lcStep calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-away.is-seen .lc-legB { transform-origin: 50% 0; animation: lcStep calc(2.8s * var(--spd)) ease-in-out calc(1s * var(--spd)) infinite; }
.a-dance.lc-away.is-seen .lc-hands { transform-origin: 50% 0; animation: lcHands calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-away.is-seen .lc-gown { transform-origin: 50% 0; animation: lcHem calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-away.is-seen .lc-veil { transform-origin: 50% 0; animation: lcTrail calc(2.8s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
@keyframes lcTrail { 0%, 100% { transform: skewX(-4deg); } 50% { transform: skewX(4deg) translateY(1px); } }
/* embrace: a slow rock together, a heart rises between them */
.a-dance.lc-embrace.is-seen .lc-pair { transform-origin: 40% 100%; animation: lcRock calc(7s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-embrace.is-seen .lc-veil { transform-origin: 0 0; animation: lcVeil calc(4s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.a-dance.lc-embrace.is-seen .lc-gown { transform-origin: 50% 0; animation: lcHem calc(3.5s * var(--spd)) ease-in-out calc(2.4s * var(--spd)) infinite; }
.sk-illo.is-line.is-seen .lc-heart .d { animation-delay: calc(1.8s * var(--spd)); animation-duration: calc(1.2s * var(--spd)); }
.a-dance.lc-embrace.is-seen .lc-heart { transform-origin: 50% 100%; animation: lcRise calc(4s * var(--spd)) ease-in-out calc(3s * var(--spd)) infinite; }
@keyframes lcRock { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes lcRise { 0% { transform: none; opacity: 1; } 70% { transform: translateY(-14px) scale(1.15); opacity: 0; } 71% { transform: translateY(6px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* twirl: she spins under his raised hand, the skirt flares and swirl lines chase */
.a-dance.lc-twirl.is-seen .lc-gown { transform-origin: 50% 0; animation: lcFlare calc(2.4s * var(--spd)) ease-in-out calc(2.6s * var(--spd)) infinite; }
.a-dance.lc-twirl.is-seen .lc-bride { transform-origin: 30% 0; animation: lcSpin calc(2.4s * var(--spd)) ease-in-out calc(2.6s * var(--spd)) infinite; }
.a-dance.lc-twirl.is-seen .lc-groom { transform-origin: 50% 100%; animation: lcRock calc(4.8s * var(--spd)) ease-in-out calc(2.6s * var(--spd)) infinite; }
.a-dance.lc-twirl.is-seen .lc-veil { transform-origin: 0 50%; animation: lcVeil calc(1.2s * var(--spd)) ease-in-out calc(2.6s * var(--spd)) infinite; }
.a-dance.lc-twirl.is-seen .lc-swirl .d { animation: lcDraw calc(1.4s * var(--spd)) ease-out calc(1.6s * var(--spd)) forwards, lcChase calc(2.4s * var(--spd)) ease-in-out calc(3s * var(--spd)) infinite; }
@keyframes lcFlare { 0%, 100% { transform: skewX(-7deg) scaleX(1); } 50% { transform: skewX(7deg) scaleX(.93); } }
@keyframes lcSpin { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes lcChase { 0% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: -1; } 46% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes lcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes lcStep { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes lcHands { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* walk in once, then a light step */
.a-walk .sk-illo-art { opacity: 0; transform: translateX(-46px); }
.a-walk.is-seen .sk-illo-art { animation: skWalk calc(2.6s * var(--spd)) cubic-bezier(.3, .6, .3, 1) forwards, skStep calc(.65s * var(--spd)) ease-in-out 4; }
@keyframes skWalk { to { opacity: 1; transform: translateX(0); } }
@keyframes skStep { 50% { translate: 0 -3px; } }

/* watercolour reveal: soft-edged mask grows from the centre */
.a-water .sk-illo-art { -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%) 50% 50% / 0% 0% no-repeat; mask: radial-gradient(closest-side, #000 55%, transparent 100%) 50% 50% / 0% 0% no-repeat; }
.a-water.is-seen .sk-illo-art { animation: skWater calc(2.4s * var(--spd)) ease-out forwards; }
@keyframes skWater { to { -webkit-mask-size: 260% 260%; mask-size: 260% 260%; } }

/* floral reveal: art blooms in, sprigs grow from the corners */
.a-floral .sk-illo-art { opacity: 0; transform: scale(.9); transition: opacity 1.2s, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.a-floral.is-seen .sk-illo-art { opacity: 1; transform: none; }
.sk-sprig { position: absolute; width: 34%; color: var(--accent); opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity 1s .5s, transform 1.4s .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.sk-sprig.l { left: -16%; bottom: -6%; transform-origin: 0 100%; }
.sk-sprig.r { right: -16%; top: -6%; transform-origin: 100% 0; rotate: 180deg; }
.a-floral.is-seen .sk-sprig { opacity: .85; transform: none; }

/* sparkle: small stars twinkle around the art */
.sk-spark { position: absolute; width: 12px; color: var(--accent); opacity: 0; animation: skTw calc(3.2s * var(--spd)) ease-in-out infinite; pointer-events: none; }
.sk-spark svg { display: block; width: 100%; }
.sk-spark.s1 { left: -4%; top: 12%; } .sk-spark.s2 { right: -2%; top: 4%; width: 9px; animation-delay: -.8s; }
.sk-spark.s3 { right: -6%; top: 52%; animation-delay: -1.6s; } .sk-spark.s4 { left: 4%; bottom: 8%; width: 9px; animation-delay: -2.2s; }
.sk-spark.s5 { left: 48%; top: -6%; width: 8px; animation-delay: -2.8s; }
@keyframes skTw { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: .95; transform: scale(1) rotate(45deg); } 60% { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  .sk-illo *, .sk-illo .sk-illo-art { animation: none !important; transition: none !important; }
  .sk-illo .sk-illo-art { opacity: 1; transform: none; -webkit-mask: none; mask: none; }
  .sk-illo .sk-sprig { opacity: .85; transform: none; }
  .sk-illo.is-line .d { stroke-dashoffset: 0 !important; }
  .sk-illo.is-line :is(.lc-fill, .lc-blooms, .lc-bouquet, .lc-flowers) { opacity: 1 !important; }
  .sk-spark { display: none; }
}
.iv-illo-row { grid-column: 1 / -1; }
.ed-illo { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: var(--card); }
.ed-illo.is-off { opacity: .6; }
.ed-illo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ed-illo-thumb { width: 56px; height: 56px; border-radius: 10px; background: #f6efe4; display: grid; place-items: center; overflow: hidden; flex: none; }
.ed-illo-thumb .sk-illo { width: 48px; margin: 0; }
.ed-illo-head .ed-switch { margin: 0; flex: 1; }
.ed-illo-btns { display: flex; gap: 4px; }
.ed-illo-btns button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; }
.ed-illo-btns button svg { width: 15px; height: 15px; }
.ed-illo select { width: 100%; }
.ed-row-wrap { flex-wrap: wrap; }

/* Video section: a facade until the guest presses play */
.iv-video { position: relative; width: 100%; max-width: 760px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #1d1a18; box-shadow: var(--shadow); }
.iv-video iframe, .iv-video video, .iv-video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.iv-video video { object-fit: cover; background: #000; }
.iv-video-play { display: grid; place-items: center; cursor: pointer; background: linear-gradient(160deg, #3a302a, #1d1a18); padding: 0; }
.iv-video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.iv-video-play span { position: relative; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 250, 242, .92); color: var(--iv-accent, #6e2233); box-shadow: 0 8px 30px rgba(0, 0, 0, .3); transition: transform .25s; }
.iv-video-play span .i { width: 24px; height: 24px; margin-left: 3px; }
.iv-video-play:hover span { transform: scale(1.06); }
.iv-transport { display: flex; gap: 14px; align-items: flex-start; max-width: 620px; margin: 0 auto 22px; text-align: left; }
.iv-transport > .i { width: 22px; height: 22px; flex: none; margin-top: 3px; opacity: .7; }
.iv-transport h3 { margin: 0 0 4px; font-size: 1.05rem; }
.iv-transport p { margin: 0; white-space: pre-line; }

/* =================== Editor: motion =================== */
.ed-mo-btns { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 6px; margin: 2px 0 4px; }
.ed-mo-btns .btn { padding-inline: 8px; justify-content: center; white-space: nowrap; }
.ed-mo-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ed-mo-tile { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 8px 8px 10px; text-align: left; display: grid; gap: 2px; color: inherit; }
.ed-mo-tile.on { border-color: var(--ox); box-shadow: 0 0 0 1px var(--ox); }
.ed-mo-tile b { font-size: 13px; }
.ed-mo-tile small { font-size: 11.5px; line-height: 1.3; opacity: .68; }
.ed-mo-demo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 66px; margin-bottom: 6px; border-radius: 8px; background: color-mix(in srgb, var(--ox) 7%, transparent); overflow: hidden; }
.ed-mo-demo .d-l { width: 26px; height: 3px; border-radius: 2px; background: var(--ox); opacity: .65; }
.ed-mo-demo .d-h { font-family: var(--display); font-size: 22px; line-height: 1; font-weight: 500; }
.ed-mo-demo .d-ln { width: 42px; height: 1px; background: currentColor; opacity: .4; }
.ed-mo-demo .d-b { width: 62px; height: 3px; border-radius: 2px; background: currentColor; opacity: .22; }
.ed-mo-demo .d-b + .d-b { width: 44px; }

/* ---------- Editorial layout (cfg.layout = 'editorial'): photo-led, edge to edge, compact type ---------- */
.iv-page.iv-ed { --ed-paper: #f3f1ed; --ed-paper-2: #e8e5df; --ed-ink: #2d2a27; --ed-mute: #7b746d; --ed-line: rgba(45, 42, 39, .14); color: var(--ed-ink); background: var(--ed-paper); }
.iv-ed .iv-main { max-width: none; padding: 0; position: relative; }

/* opening: the cover photo, which slides up off the screen */
.iv-stage.is-ed { display: block; padding: 0; overflow: hidden; color: #fff; background: #1c1714; }
.iv-stage.is-ed > .iv-env, .iv-stage.is-ed > .iv-hint, .is-opened .iv-stage.is-ed { display: none; }
.iv-edcover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.iv-edcover-bg { position: absolute; inset: 0; overflow: hidden; }
.iv-edcover-bg img { width: 100%; height: 100%; object-fit: cover; animation: edkb 18s ease-out forwards; }
.iv-edcover-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(12, 9, 7, calc(var(--dim) * .5)) 0%, rgba(12, 9, 7, calc(var(--dim) * .25)) 35%, rgba(12, 9, 7, calc(var(--dim) + .32)) 100%); }
.iv-edcover-txt { position: relative; text-align: center; padding: 0 28px max(8vh, 44px); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); animation: edrise 1.3s .25s cubic-bezier(.2, .7, .2, 1) backwards; }
.iv-edcover-k { font-size: 10px; letter-spacing: .36em; text-transform: uppercase; font-weight: 600; opacity: .9; }
.iv-edcover-txt h1 { font-family: var(--ed-script, 'Pinyon Script', cursive); font-weight: 400; font-size: clamp(46px, 13vw, 88px); line-height: 1.08; margin: 8px 0 4px; }
.iv-edcover-date { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; opacity: .9; }
.iv-edcover-to { display: grid; gap: 4px; justify-items: center; margin: 28px auto 20px; }
.iv-edcover-to small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.iv-edcover-to b { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; letter-spacing: .02em; }
.iv-edopen { display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font: 600 10.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.iv-edopen:hover { background: #fff; color: var(--ed-ink); }
.iv-edopen .i { width: 15px; height: 15px; }
@keyframes edkb { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes edrise { from { opacity: 0; transform: translateY(26px); } }
@keyframes edzoom { from { transform: scale(1.02); } to { transform: scale(1.16) translate(-1.5%, -1%); } }

/* one couple photo stays fixed behind the page and shows faintly through the light sections */
.iv-edfix { position: fixed; inset: 0; z-index: -1; background: #1c1714; }
.iv-edfix img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); }

/* hero: full-screen photo with a slow zoom, names along the bottom */
.iv-edhero { position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; clip-path: inset(0); justify-content: flex-end; color: #fff; }
/* the hero photo is pinned to the screen and clipped to the hero, so it holds still under the names without scroll JS */
.iv-edhero-bg { position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: -1; background: #1c1714; overflow: hidden; }
.iv-edcover-bg .sk-bg, .iv-edhero-bg .sk-bg { z-index: 0; }
.iv-edhero-bg img { width: 100%; height: 100%; object-fit: cover; animation: edzoom 26s ease-in-out infinite alternate; }
.iv-edhero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(12, 9, 7, .18), rgba(12, 9, 7, 0) 32%, rgba(12, 9, 7, .74)), rgba(12, 9, 7, var(--ed-dim, 0)); }
.iv-edhero-in { display: flex; flex-direction: column; align-items: center; padding: 0 28px max(5vh, 30px); text-shadow: 0 2px 18px rgba(0, 0, 0, .3); }
.iv-edhero :is(.ic-intro, .ic-names, .ic-date, .ic-note) { color: #fff; font-style: normal; }
.iv-edhero .ic-intro { font-family: var(--body); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; font-weight: 600; opacity: .9; }
.iv-edhero .ic-names { font-family: var(--ed-script); font-weight: 400; font-size: clamp(48px, 14vw, 96px); line-height: 1.06; margin: 8px 0 6px; }
.iv-edhero .ic-sub { font-family: var(--body); font-size: 13px; line-height: 1.6; max-width: 34ch; margin: 0 0 12px; opacity: .92; white-space: pre-line; }
.iv-edhero .ic-date { font-family: var(--body); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; }
.iv-edcount { margin-top: 10px; font-size: 11px; letter-spacing: .12em; opacity: .85; font-variant-numeric: tabular-nums; }
.iv-edhero .iv-to { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; margin-top: 18px; }
.iv-edhero .iv-cta { margin-top: 18px; }
.iv-edhero .iv-scroll { margin-top: 22px; font-size: 9px; letter-spacing: .3em; }
.iv-edhero .sk-illo { margin: 10px auto 0; }

/* buttons: thin outline capsules */
.iv-ed .btn.iv-edbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; box-shadow: none; font: 600 10.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; }
.iv-ed .iv-band .btn.iv-edbtn:hover, .iv-ed .iv-edhero .btn.iv-edbtn:hover { background: #fff; color: var(--ed-ink); }
.iv-ed .iv-sec:not(.iv-band) .btn.iv-edbtn:hover { background: var(--ed-ink); color: #fff; }
.iv-ed .btn.iv-edbtn .i { width: 14px; height: 14px; }

/* sections: edge to edge, translucent paper over the fixed photo, lots of air */
.iv-ed .iv-main > .iv-sec:not(.iv-band), .iv-ed .iv-main > .iv-venue { --ed-pad: max(26px, calc(50% - 290px)); margin: 0; padding: 96px var(--ed-pad); width: auto; background: color-mix(in srgb, var(--ed-paper) 91%, transparent); overflow-x: clip; }
.iv-ed .iv-main > .iv-sec.ed-alt:not(.iv-band) { background: color-mix(in srgb, var(--ed-paper-2) 88%, transparent); }
.iv-ed .iv-main > .iv-venue { padding-top: 0; margin-top: -40px; }
.iv-ed .iv-main > .iv-sec.iv-eddark { background: #26211e; color: #fff; }
.iv-ed .iv-sec { font-size: 13px; line-height: 1.75; }
.iv-ed .iv-sec :where(p, li, summary, figcaption, small, blockquote) { font-size: 13px; }
.iv-ed .iv-sec .eyebrow, .iv-ed .eyebrow { font-size: 10px; letter-spacing: .32em; margin-bottom: 12px; }
.iv-ed .iv-sec:not(.iv-band) .eyebrow { color: var(--ed-mute); }
.iv-ed .iv-sec h3 { font-family: var(--iv-head); font-size: 19px; font-weight: 500; line-height: 1.3; }
.iv-ed .iv-sec h2 { font-family: var(--ed-script); font-weight: 400; font-size: clamp(42px, 12.5vw, 64px); line-height: 1.02; letter-spacing: 0; text-transform: none; }
.iv-ed .iv-sec:not(.iv-band) h2 { color: var(--ed-ink); }
.iv-ed .iv-orn { display: none; }
.iv-ed .iv-quote blockquote { font-size: clamp(15px, 3.9vw, 19px); line-height: 1.6; }
.iv-ed .iv-map { border-radius: 0; height: 240px; }
.iv-ed .iv-sec .iv-verse { font-size: clamp(15px, 4.1vw, 19px); line-height: 1.75; }

/* script titles: two offset lines; at the sides a hairline runs out to the screen edge */
.iv-edh { display: flex; flex-direction: column; align-items: center; margin: 0 0 44px; }
.iv-edh span + span { padding-left: 1.2em; }
.ed-l > .eyebrow { text-align: left; }
.ed-r > .eyebrow { text-align: right; }
.ed-l > .iv-edh, .ed-r > .iv-edh { align-items: stretch; }
.ed-l > .iv-edh { text-align: left; }
.ed-r > .iv-edh { text-align: right; }
.ed-r > .iv-edh span + span { padding-left: 0; }
.ed-r > .iv-edh span:first-child:not(:last-child) { padding-right: 1.2em; }
.ed-l > .iv-edh span:last-child, .ed-r > .iv-edh span:last-child { display: flex; align-items: center; gap: 16px; }
.ed-r > .iv-edh span:last-child { flex-direction: row-reverse; }
.ed-l > .iv-edh span:last-child::after, .ed-r > .iv-edh span:last-child::after { content: ''; flex: 1 1 32px; height: 1px; background: currentColor; opacity: .3; }
.ed-l > .iv-edh span:last-child::after { margin-right: calc(-1 * var(--ed-pad)); }
.ed-r > .iv-edh span:last-child::after { margin-left: calc(-1 * var(--ed-pad)); }

/* photo bands: full-screen, darker */
.iv-ed .iv-band { width: 100%; margin: 0; min-height: min(72svh, 600px); padding: 72px 26px; }
.iv-ed .iv-band-bg::after { background: linear-gradient(rgba(10, 8, 6, .5), rgba(10, 8, 6, .64)); }
.iv-ed .iv-band h2.iv-edh { font-size: clamp(40px, 11vw, 64px); margin-bottom: 14px; }
.iv-ed .iv-closing .iv-band-date { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.iv-ed .iv-thanks h2.iv-edh { font-size: clamp(40px, 11vw, 64px); margin-bottom: 14px; }

/* Save the date: the four numbers in the corners around the title */
.iv-edsd { position: relative; width: min(100%, 300px); margin: 0 auto 26px; }
.iv-ed .iv-edsd .iv-clock { display: grid; grid-template-columns: 1fr 1fr; row-gap: clamp(100px, 28vw, 130px); margin: 0; }
.iv-ed .iv-edsd .iv-clock div { min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; }
.iv-ed .iv-edsd .iv-clock div:nth-child(even) { text-align: right; }
.iv-ed .iv-edsd .iv-clock b { font-family: var(--iv-head); font-size: 34px; font-weight: 400; }
.iv-ed .iv-edsd .iv-clock span { font-size: 9px; letter-spacing: .28em; }
.iv-ed .iv-edsd h2.iv-edh { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; }

/* couple: portraits on an offset backing, alternating sides, first name running up beside the photo */
.iv-edcouple { display: grid; gap: 34px; max-width: 520px; margin: 0 auto; }
.iv-edp { display: grid; gap: 34px; }
.iv-edp-ph { position: relative; isolation: isolate; width: min(64%, 300px); aspect-ratio: 3 / 4; }
.iv-edp.r .iv-edp-ph { justify-self: end; }
.iv-edp-ph::before { content: ''; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; border-radius: var(--edp-r, 0); background: color-mix(in srgb, var(--accent) 16%, var(--ed-paper-2)); }
.iv-edp.r .iv-edp-ph::before { inset: 18px 18px -18px -18px; }
.iv-edp-pic { position: absolute; inset: 0; overflow: hidden; }
.iv-edp-pic > img, .iv-edp-ini { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iv-edp-ini { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 26%, #fff); font-family: var(--ed-script); font-size: 64px; color: var(--accent); }
.iv-edp-v { position: absolute; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font-family: var(--ed-script); font-size: clamp(40px, 12vw, 60px); line-height: 1; white-space: nowrap; color: var(--ed-ink); }
.iv-edp.l .iv-edp-v { left: calc(100% + 30px); }
.iv-edp.r .iv-edp-v { right: calc(100% + 30px); }
.iv-edp-txt { display: grid; gap: 4px; justify-items: start; text-align: left; }
.iv-edp.r .iv-edp-txt { justify-items: end; text-align: right; }
.iv-ed .iv-edp-txt h3 { font-size: 22px; }
.iv-ed .iv-edp-txt p { font-size: 12px; color: var(--ed-mute); max-width: 300px; }
.iv-ed .iv-edp-txt .iv-ig { font-size: 11px; letter-spacing: .06em; padding: 5px 11px; border: 1px solid var(--ed-line); border-radius: 999px; color: var(--ed-ink); margin-top: 6px; }
.iv-ed .iv-edp-txt .iv-ig .i { width: 13px; height: 13px; }
.iv-ed .iv-edamp { font-family: var(--ed-script); font-size: 54px; line-height: 1; color: var(--accent); text-align: center; }

/* event card: arched photo, white panel with its title running down the side */
.iv-edev { max-width: 420px; margin: 0 auto; }
.iv-edev-ph { width: 82%; margin: 0 auto; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; }
.iv-edev-ph img { width: 100%; height: 100%; object-fit: cover; }
.iv-edev-card { display: grid; grid-template-columns: 46px 1fr; background: #fff; text-align: left; box-shadow: 0 24px 50px -32px rgba(30, 24, 20, .4); }
.iv-ed .iv-edev-side { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; margin: 0; padding: 18px 0; background: var(--ed-ink); color: #fff; font-family: var(--ed-script); font-size: 24px; line-height: 1; white-space: nowrap; overflow: hidden; }
.iv-edev-body { padding: 28px 24px 30px; min-width: 0; }
.iv-edev-date { display: flex; align-items: center; gap: 16px; }
.iv-edev-date b { font-family: var(--iv-head); font-size: 64px; font-weight: 400; line-height: .9; }
.iv-edev-date span { display: grid; padding-left: 16px; border-left: 1px solid var(--ed-line); }
.iv-edev-date i { font-style: normal; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.8; }
.iv-ed .iv-edev-time { display: flex; align-items: center; gap: 8px; margin: 16px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ed-line); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.iv-edev-time .i { width: 15px; height: 15px; color: var(--accent); }
.iv-ed .iv-edev-k { display: block; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ed-mute); margin-bottom: 6px; }
.iv-ed .iv-edev-body h3 { font-size: 20px; margin: 0 0 4px; }
.iv-ed .iv-edev-body p { color: var(--ed-mute); }
.iv-edev-body .iv-edbtn { margin-top: 18px; }
.iv-ed .iv-edev-body .iv-links { margin-top: 18px; gap: 16px; }
/* event card design (Wording → Event card design) */
.iv-edev.ph-round .iv-edev-ph { border-radius: 28px 28px 0 0; }
.iv-edev.ph-square .iv-edev-ph { border-radius: 0; width: 100%; aspect-ratio: 4 / 3; }
.iv-edev.ph-circle .iv-edev-ph { width: 64%; aspect-ratio: 1; border-radius: 50%; margin-bottom: -18%; position: relative; z-index: 1; border: 6px solid #fff; }
.iv-edev.ph-circle .iv-edev-body { padding-top: calc(18% + 18px); }
.iv-edev.card-cream .iv-edev-card { background: var(--ed-paper-2, #f4ede3); }
.iv-edev.card-clear .iv-edev-card { background: transparent; box-shadow: none; border: 1px solid var(--ed-line); }
.iv-edev.card-dark .iv-edev-card { background: #26211e; color: #fff; }
.iv-edev.card-accent .iv-edev-card { background: var(--accent); color: #fff; }
.iv-ed .iv-edev:is(.card-dark, .card-accent) :is(.iv-edev-body p, .iv-edev-k, .iv-edev-time, .iv-edev-time .i, h3, .iv-links a) { color: #fff !important; opacity: .92; }
.iv-edev:is(.card-dark, .card-accent) :is(.iv-edev-date span, .iv-edev-time) { border-color: rgba(255, 255, 255, .28); }
.iv-ed .iv-edev:is(.card-dark, .card-accent) .btn.iv-edbtn:hover { background: #fff; color: var(--ed-ink); }
.iv-ed .iv-edev.side-accent .iv-edev-side { background: var(--accent); }
.iv-edev.card-accent.side-accent .iv-edev-side { background: rgba(0, 0, 0, .18); }
.iv-edev.side-none .iv-edev-card { grid-template-columns: 1fr; }
.iv-edev.side-none .iv-edev-side { display: none; }
.iv-edev + .iv-edev { margin-top: 34px; }
.iv-edev.no-ph.ph-circle .iv-edev-body { padding-top: 28px; }
.iv-edev-track { display: flex; height: 100%; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.iv-edev-track img { flex: 0 0 100%; min-width: 0; }
.iv-edev.is-flip .iv-edev-track { flex-direction: row-reverse; }
/* Curved corner: one big rounded corner, on the side away from the title strip */
.iv-edev.ph-corner .iv-edev-ph { width: 100%; aspect-ratio: 5 / 4; border-radius: 0 min(120px, 32%) 0 0; }
.iv-edev.ph-corner.is-flip .iv-edev-ph { border-radius: min(120px, 32%) 0 0 0; }
/* Zigzag: every second card mirrors, strip on the right reading downwards, photo on the other side */
.iv-edev.is-flip .iv-edev-card { grid-template-columns: 1fr 46px; }
.iv-edev.is-flip .iv-edev-side { order: 2; transform: none; }
.iv-edev.is-flip.side-none .iv-edev-card { grid-template-columns: 1fr; }
.iv-edev:is(.ph-arch, .ph-round) .iv-edev-ph { margin: 0 0 0 auto; }
.iv-edev.is-flip:is(.ph-arch, .ph-round) .iv-edev-ph { margin: 0 auto 0 0; }
.iv-ed .iv-edev-body h3.iv-edev-title { font-family: var(--ed-script); font-size: 34px; font-weight: 400; line-height: 1.1; margin: 0 0 14px; }
.iv-ed .iv-edev-dline { font-family: var(--iv-head); font-size: 22px; line-height: 1.3; margin: 0; color: inherit !important; }
.iv-ed .iv-links a { font-size: 11px; letter-spacing: .04em; }
.iv-ed .iv-eddetails .iv-tile { max-width: 420px; margin: 18px auto 0; text-align: left; background: #fff; border: 0; border-radius: 0; padding: 20px 22px; }
.iv-ed .iv-eddetails .iv-tile h3 { margin: 6px 0 2px; }

/* the rest of the page in the same quieter key */
.iv-ed :is(.iv-tile, .iv-mile, .iv-sched li > div, .iv-hotel, .iv-gifts, .iv-faq details, .iv-wish, .iv-wish-form, .iv-menu, .iv-form, .iv-thanks, .iv-acct, .iv-transport) { border-radius: 4px; }
.iv-ed .iv-foot { background: var(--ed-paper); margin: 0; padding: 64px 24px 120px; }
.iv-ed .iv-foot .iv-sign { font-family: var(--ed-script); }
@media (prefers-reduced-motion: reduce) { .iv-edcover-bg img, .iv-edhero-bg img { animation: none; } .iv-edcover-txt { animation: none; } }

/* editor: the opening as a cover in the canvas */
.ed-canvas .iv-edcover { position: absolute; inset: 0; color: #fff; }
.ed-canvas .iv-edcover-txt { animation: none; }

/* Scaled-down tablet / desktop preview on a phone (see invite.js): drop the costliest compositing layers */
.iv-lite *, .iv-lite *::before, .iv-lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; }
/* the drifting background is drawn 160% of the viewport each way: at desktop size that one layer alone exceeds iOS's budget */
.iv-lite .sk-bg-drift { inset: 0; animation: none; }
.iv-lite .iv-edcover-bg img, .iv-lite .iv-edhero-bg img, .iv-lite .iv-band-bg img { animation: none !important; transform: none !important; }

/* Host's own colours from the Fonts tab (headings, text). Sections over photos keep their white type */
body.iv-chead .iv-main .iv-sec:not(.iv-band, .iv-eddark) :is(h2, h3):not(.btn *) { color: var(--iv-heading); }
body.iv-ctext .iv-main .iv-sec:not(.iv-band, .iv-eddark) :is(p, blockquote, li, summary, small, figcaption, dd, dt, time, .iv-clock b, .iv-clock span, .iv-edev-k, .iv-edev-time):not(.btn *, .btn) { color: var(--iv-text); }
.ed-slot-row button { position: relative; }
.ed-pic-n { position: absolute; top: 3px; left: 3px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ox); color: #fff; font-size: 10.5px; line-height: 17px; text-align: center; }

/* Phones: the same compact feel as the tablet view; strips fit their words instead of filling the screen */
@media (max-width: 600px) {
  .iv-sec { margin-top: 64px; }
  .iv-sec h2 { font-size: clamp(30px, 8.5vw, 38px); }
  .iv-band, .iv-sec.iv-band.is-m { min-height: min(44svh, 400px); padding: 52px 20px; }
  .iv-band.has-bg { padding: 52px 20px; }
  .iv-closing h2 { font-size: clamp(36px, 10vw, 46px); }
  .iv-clock { gap: 8px; }
  .iv-clock div { min-width: 58px; padding: 10px 4px; border-radius: 12px; }
  .iv-clock b { font-size: 28px; }
  .iv-clock span { font-size: 9px; }
  .iv-quote > .i { width: 22px; height: 22px; margin-bottom: 6px; }
  .iv-quote blockquote { font-size: 16px; line-height: 1.5; }
  .iv-quote figcaption { margin-top: 10px; font-size: 10px; }
  .iv-thanks { padding-top: 40px; padding-bottom: 32px; }
  .iv-thanks-note { font-size: 14px; margin: 8px auto 12px; }
  .iv-thanks-names { font-size: 24px; }
  /* editorial */
  .iv-ed .iv-main > .iv-sec:not(.iv-band) { padding-block: 64px; }
  .iv-ed .iv-sec h2 { font-size: clamp(34px, 9.5vw, 44px); }
  .iv-edh { margin-bottom: 26px; }
  .iv-ed .iv-band { min-height: min(46svh, 420px); padding: 52px 22px; }
  .iv-ed .iv-band h2.iv-edh, .iv-ed .iv-thanks h2.iv-edh { font-size: clamp(32px, 9vw, 42px); margin-bottom: 10px; }
  .iv-ed .iv-quote blockquote { font-size: 14.5px; line-height: 1.6; }
  .iv-edsd { width: min(100%, 250px); margin-bottom: 18px; }
  .iv-ed .iv-edsd .iv-clock { row-gap: 78px; }
  .iv-ed .iv-edsd .iv-clock b { font-size: 26px; }
  .iv-ed .iv-edsd .iv-clock span { font-size: 8px; }
  .iv-ed .iv-dress h3 { font-size: 16px; }
  .iv-ed .iv-main > #s-dress.iv-sec { padding-block: 48px; }
  #s-dress .iv-edh { margin-bottom: 18px; }
  .iv-dfam { gap: 8px; }
  .iv-dfam-c:has(.iv-dfam-art) { grid-template-columns: 44px 1fr; column-gap: 8px; padding: 10px 8px; }
  .iv-dfam-art { width: 44px; }
  .iv-dfam-c .iv-label { font-size: 8.5px; letter-spacing: .1em; margin-bottom: 4px; }
}