@import url("./example-artwork.css");

:root {
  color-scheme: light;
  --wine: #4b252d;
  --wine-dark: #241214;
  --rose: #b66f78;
  --blush: #edd3d2;
  --cream: #fffaf4;
  --ink: #382326;
  --gold: #b98b52;
  --hero-background: url("/designs/background%20design1.jfif");
  --floral-one: url("/assets/floral-background-01.jpg");
  --floral-two: url("/assets/floral-background-02.jpg");
  --floral-three: url("/assets/floral-background-03.jpg");
  --floral-four: url("/assets/floral-background-04.jpg");
  --invitation-page-art-a: var(--floral-four);
  --invitation-page-art-b: var(--floral-four);
  --invitation-page-wash: rgba(255,251,245,.58);
  --invitation-page-ink: #493931;
  --invitation-page-muted: #736155;
  --invitation-page-accent: #9d784c;
  --invitation-page-line: rgba(99,80,64,.16);
  --invitation-page-panel: rgba(255,252,248,.72);
  --invitation-page-solid: #f6eee5;
  --invitation-surface-soft: #faf4ed;
  --invitation-surface-deep: #f2e8df;
}

html[data-invitation-tone="blush"] {
  --invitation-page-art-a: var(--floral-one);
  --invitation-page-art-b: var(--floral-two);
  --invitation-page-wash: rgba(255,240,235,.62);
  --invitation-page-ink: #54373b;
  --invitation-page-muted: #795759;
  --invitation-page-accent: #9a4d62;
  --invitation-page-line: rgba(89,59,63,.16);
  --invitation-page-panel: rgba(255,248,244,.7);
  --invitation-page-solid: #fff0e9;
  --invitation-surface-soft: #fae8e2;
  --invitation-surface-deep: #f3dad4;
}

html[data-invitation-tone="plum"] {
  --wine: #ffe196;
  --wine-dark: #f7eedf;
  --rose: #f0ca7d;
  --blush: rgba(255, 238, 198, .18);
  --ink: #ffffff;
  --gold: #ffe196;
  --invitation-page-art-a: var(--floral-three);
  --invitation-page-art-b: var(--floral-three);
  --invitation-page-wash: rgba(38,22,42,.78);
  --invitation-page-ink: #ffffff;
  --invitation-page-muted: #f6eaf8;
  --invitation-page-accent: #ffe196;
  --invitation-page-line: rgba(255,238,198,.25);
  --invitation-page-panel: rgba(255,255,255,.12);
  --invitation-page-solid: #26162a;
  --invitation-surface-soft: #321c38;
  --invitation-surface-deep: #1e1022;
}

html[data-invitation-tone="blue"] {
  --wine: #ffe196;
  --wine-dark: #f7eedf;
  --rose: #f0ca7d;
  --blush: rgba(255, 238, 198, .18);
  --ink: #ffffff;
  --gold: #ffe196;
  --invitation-page-art-a: var(--floral-four);
  --invitation-page-art-b: var(--floral-four);
  --invitation-page-wash: rgba(16,32,48,.78);
  --invitation-page-ink: #ffffff;
  --invitation-page-muted: #e6f0fa;
  --invitation-page-accent: #ffe196;
  --invitation-page-line: rgba(255,238,198,.25);
  --invitation-page-panel: rgba(255,255,255,.12);
  --invitation-page-solid: #102234;
  --invitation-surface-soft: #162c42;
  --invitation-surface-deep: #0c1b2a;
}

html[data-invitation-tone="emerald"] {
  --wine: #ffe196;
  --wine-dark: #f7eedf;
  --rose: #f0ca7d;
  --blush: rgba(255, 238, 198, .18);
  --ink: #ffffff;
  --gold: #ffe196;
  --invitation-page-art-a: var(--floral-four);
  --invitation-page-art-b: var(--floral-four);
  --invitation-page-wash: rgba(14,38,26,.78);
  --invitation-page-ink: #ffffff;
  --invitation-page-muted: #f5ebe0;
  --invitation-page-accent: #ffe196;
  --invitation-page-line: rgba(255,238,198,.25);
  --invitation-page-panel: rgba(255,255,255,.12);
  --invitation-page-solid: #112d20;
  --invitation-surface-soft: #163628;
  --invitation-surface-deep: #0e241b;
}

*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; scroll-behavior: smooth; overscroll-behavior-x: none; }
body { max-width: 100%; margin: 0; overflow-x: hidden; overscroll-behavior-x: none; background: var(--cream); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
.invitation-data-loading .opening-card { opacity: 0; }
.invitation-data-loading #invitation { visibility: hidden; }
.opening-card { transition: opacity .35s ease; }
.invitation-load-error .opening-card { opacity: 1; }
.invitation-load-error .opening-button { display: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link { position: fixed; left: 16px; top: 16px; z-index: 100; transform: translateY(-180%); border-radius: 999px; padding: 12px 18px; background: white; color: var(--wine); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #e0b06e; outline-offset: 4px; }

.invitation-opening { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; contain: strict; will-change: opacity; padding: 24px; background: linear-gradient(var(--invitation-page-wash), var(--invitation-page-wash)), var(--invitation-page-art-a) center 46% / cover no-repeat; color: var(--invitation-page-ink); transition: opacity .9s ease, visibility .9s ease; }
.invitation-opening[hidden] { display: none; }
.invitation-opening::before, .invitation-opening::after { position: absolute; width: 52vmax; height: 52vmax; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.invitation-opening::before { left: -28vmax; top: -20vmax; }
.invitation-opening::after { right: -28vmax; bottom: -24vmax; }
.invitation-opening.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-glow { position: absolute; width: min(74vw, 520px); aspect-ratio: 1; border-radius: 50%; background: rgba(185,139,82,.16); filter: blur(80px); }
.opening-art { display: none; }
.opening-card { position: relative; z-index: 1; width: min(560px, 100%); display: grid; justify-items: center; gap: clamp(32px, 6vw, 46px); border: 1px solid var(--invitation-page-line); padding: clamp(58px, 11vw, 100px) clamp(24px, 6vw, 54px) clamp(50px, 9vw, 76px); background: var(--invitation-page-panel); text-align: center; box-shadow: 0 35px 100px rgba(75,47,52,.12), inset 0 0 60px rgba(255,255,255,.22); backdrop-filter: blur(10px); }
body:not(.invitation-data-loading) .opening-card { animation: opening-card-arrival .9s cubic-bezier(.2,.8,.2,1) both; }
.opening-card::before { position: absolute; inset: 11px; content: ""; border: 1px solid var(--invitation-page-line); pointer-events: none; }
.opening-card::after { width: 76px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--invitation-page-accent), transparent); opacity: .78; }
.opening-kicker, .invitation-eyebrow { margin: 0; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.opening-card h1 { width: 100%; display: grid; justify-items: center; margin: 0; overflow-wrap: break-word; color: var(--invitation-page-ink); font-family: "Cormorant Garamond", serif; font-size: clamp(3.55rem, 13vw, 6.8rem); font-weight: 500; line-height: .76; letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 2px 24px rgba(255,255,255,.46); }
.opening-card h1[data-name-fit="medium"] { font-size: clamp(3.2rem, 11vw, 6rem); }
.opening-card h1[data-name-fit="long"] { font-size: clamp(2.6rem, 9vw, 5rem); line-height: .94; }
.opening-name { display: block; }
.opening-ampersand { display: block; margin: .34em 0 .28em; color: var(--invitation-page-accent); font-size: .4em; font-style: italic; font-weight: 400; line-height: .72; letter-spacing: 0; }
.opening-card p:not(.opening-kicker) { max-width: 360px; margin: 0; color: var(--invitation-page-muted); line-height: 1.7; }
.opening-error-copy { max-width: 360px; }
.opening-card small { color: #bfa7a1; }
.opening-button, .invitation-button, .share-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0 24px; background: var(--wine); color: white; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.opening-button { min-width: 190px; border: 1px solid var(--invitation-page-line); padding-inline: 32px; background: rgba(255,252,248,.82); color: var(--invitation-page-ink); box-shadow: 0 14px 34px rgba(75,47,52,.12); font-family: Inter, system-ui, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(12px); }
.opening-button:hover, .invitation-button:hover, .share-button:hover { transform: translateY(-2px); }

html[data-invitation-slug="gamze-mert-can"] .invitation-opening { padding: 0; background: #e9ddd0; }
html[data-invitation-slug="gamze-mert-can"] .invitation-data-loading .opening-card { opacity: 1; }
html[data-invitation-slug="gamze-mert-can"] .invitation-opening::before,
html[data-invitation-slug="gamze-mert-can"] .invitation-opening::after,
html[data-invitation-slug="gamze-mert-can"] .opening-glow { display: none; }
html[data-invitation-slug="gamze-mert-can"] .opening-card { width: 100vw; max-width: none; height: 100svh; aspect-ratio: auto; display: block; transform: scale(1.04); overflow: hidden; border: 0; padding: 0; background: #e9ddd0; box-shadow: none; image-rendering: auto; backdrop-filter: none; }
html[data-invitation-slug="gamze-mert-can"] .opening-art { position: absolute; inset: 0; display: block; pointer-events: none; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
html[data-invitation-slug="gamze-mert-can"] .opening-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
html[data-invitation-slug="gamze-mert-can"] .opening-card::before,
html[data-invitation-slug="gamze-mert-can"] .opening-card::after { display: none; }
html[data-invitation-slug="gamze-mert-can"] body:not(.invitation-data-loading) .opening-card { animation: none; }
html[data-invitation-slug="gamze-mert-can"] .opening-card h1,
html[data-invitation-slug="gamze-mert-can"] .opening-error-copy { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-invitation-slug="gamze-mert-can"] .opening-button { position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; padding: 0; background: transparent; color: transparent; box-shadow: none; font-size: 0; animation: none; backdrop-filter: none; }
html[data-invitation-slug="gamze-mert-can"] .opening-button:hover { transform: none; background: transparent; }
html[data-invitation-slug="gamze-mert-can"] .opening-button:focus-visible { outline-color: #b4873f; outline-offset: -8px; }
html[data-invitation-slug="gamze-mert-can"] body.invitation-studio-mode .opening-button { inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; animation: none; }
html[data-invitation-slug="gamze-mert-can"] body.invitation-studio-mode .opening-button:hover { background: transparent; }

@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 1/1) {
  html[data-invitation-slug="gamze-mert-can"] .opening-card { transform: translateY(3%) scale(1.1); }
}

@media (min-aspect-ratio: 1/1) {
  html[data-invitation-slug="gamze-mert-can"] .opening-card { transform: translateY(-1.5%) scale(1.05); }
}

@keyframes gamze-opening-arrival {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gamze-opening-button-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(190,143,67,.14); }
  50% { box-shadow: 0 0 24px rgba(190,143,67,.34), 0 0 42px rgba(255,244,216,.16); }
}

@keyframes opening-card-arrival {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

main[inert] { height: 100vh; overflow: hidden; }
.invitation-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 90px 24px; background: linear-gradient(rgba(255,250,244,.18), rgba(255,250,244,.30)), var(--hero-background) center/cover; text-align: center; }
.hero-full-page-art { display: none; pointer-events: none; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.invitation-hero::before { position: absolute; inset: 22px; content: ""; border: 1px solid rgba(122,75,68,.2); pointer-events: none; }
.invitation-hero::after { position: absolute; inset: auto 0 0; z-index: 1; height: clamp(90px, 14vw, 190px); content: ""; background: linear-gradient(to bottom, transparent, var(--invitation-page-solid)); pointer-events: none; }
.hero-copy { --layout-x: 0%; --layout-y: 0svh; --user-x: 0%; --user-y: 0%; position: relative; z-index: 2; width: min(82%, 680px); display: grid; justify-items: center; gap: clamp(14px, 2.2svh, 22px); transform: translate(var(--layout-x), var(--layout-y)) translate(var(--user-x), var(--user-y)); transition: transform .35s ease, width .35s ease; }
.hero-copy h1 { width: 100%; margin: 0; overflow-wrap: break-word; color: var(--wine); font-family: "Cormorant Garamond", serif; font-size: clamp(3.4rem, 14vw, 8.5rem); font-weight: 400; line-height: .82; letter-spacing: -.045em; text-wrap: balance; }
.hero-copy h1[data-name-fit="medium"] { font-size: clamp(3rem, 11.5vw, 7.2rem); line-height: .86; }
.hero-copy h1[data-name-fit="long"] { font-size: clamp(2.5rem, 9.5vw, 5.8rem); line-height: .92; letter-spacing: -.025em; }
.hero-copy h1 span { display: block; margin: 18px 0 10px; color: var(--gold); font-size: .3em; letter-spacing: 0; }
.hero-date { margin: 6px 0 0; color: var(--wine); font-family: "Cormorant Garamond", serif; font-size: clamp(1.5rem, 4.5vw, 2.3rem); letter-spacing: .22em; }
.hero-time { margin: -8px 0 0; color: #795b58; font-size: .8rem; font-weight: 800; letter-spacing: .18em; }
.hero-note { display: -webkit-box; max-width: 560px; margin: 0; overflow: hidden; color: #6d5051; font-family: "Cormorant Garamond", serif; font-size: clamp(1.15rem, 2.7vw, 1.65rem); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
.family-names { margin: -4px 0 0; color: #7b5c58; font-size: clamp(.72rem, 1.8vw, .9rem); font-weight: 700; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
.invitation-hero.hero-glass-layout { min-height: 100svh; aspect-ratio: auto; padding: 2.5svh 12px; background: url("/assets/gamze-mert-can-opening-glass.png") center / cover no-repeat; }
.hero-glass-layout::before, .hero-glass-layout .hero-ornament { display: none; }
.hero-glass-layout::after { display: block; height: clamp(110px, 18vw, 220px); background: linear-gradient(to bottom, transparent, rgba(246,242,234,.96)); }
.hero-glass-layout .hero-copy { --layout-x: 0%; --layout-y: 0svh; --user-x: 0%; --user-y: 0%; width: min(94vw, 68svh); aspect-ratio: 1060 / 1472; align-content: center; gap: clamp(4px, .6svh, 8px); padding: clamp(72px, 9.8svh, 115px) 15% clamp(18px, 2.5svh, 32px); background: transparent; box-shadow: none; color: #4f4136; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transform: none; }
.hero-glass-layout .hero-glass-kicker { order: 1; margin: 0; color: #6e5a49; font-family: "Cormorant Garamond", serif; font-size: clamp(.98rem, 1.9svh, 1.28rem); font-style: italic; letter-spacing: .08em; line-height: 1.2; }
.hero-glass-layout .hero-glass-kicker::before { display: block; margin-bottom: 3px; content: "BİRLİKTE"; font-family: Inter, system-ui, sans-serif; font-size: .52em; font-style: normal; font-weight: 700; letter-spacing: .42em; }
.hero-glass-layout .hero-copy h1 { order: 2; display: grid; justify-items: center; color: #493b31; font-size: clamp(3.5rem, 8.45svh, 6.3rem); font-weight: 500; line-height: .74; letter-spacing: .055em; text-shadow: 0 1px 0 rgba(255,255,255,.28); }
.hero-glass-layout .hero-copy h1[data-name-fit="medium"], .hero-glass-layout .hero-copy h1[data-name-fit="long"] { font-size: clamp(3.08rem, 7.5svh, 5.65rem); line-height: .78; }
.hero-glass-layout .hero-glass-name { display: block; }
.hero-glass-layout .hero-copy h1 .hero-glass-ampersand { position: relative; width: 100%; display: block; margin: .25em 0 .2em; color: #806d5c; font-size: .28em; letter-spacing: 0; }
.hero-glass-layout .hero-glass-ampersand::before, .hero-glass-layout .hero-glass-ampersand::after { position: absolute; top: 50%; width: 31%; height: 1px; content: ""; background: rgba(99,80,64,.28); }
.hero-glass-layout .hero-glass-ampersand::before { left: 5%; }
.hero-glass-layout .hero-glass-ampersand::after { right: 5%; }
.hero-glass-layout .invitation-eyebrow { order: 3; max-width: 280px; color: #54453a; font-size: clamp(.8rem, 1.48svh, .96rem); font-weight: 700; letter-spacing: .14em; line-height: 1.4; }
.hero-glass-layout .hero-date, .hero-glass-layout .hero-time, .hero-glass-layout .hero-note { display: none; }
.hero-glass-date { order: 4; width: 100%; display: grid; grid-template-columns: 1fr 1.45fr 1fr; align-items: center; color: #5b4b3f; text-transform: uppercase; }
.hero-glass-date > * { min-height: 44px; display: grid; place-items: center; padding: 0 5px; font-size: clamp(.72rem, 1.3svh, .88rem); font-weight: 600; letter-spacing: .1em; }
.hero-glass-date strong { border-inline: 1px solid rgba(91,75,63,.28); font-family: "Cormorant Garamond", serif; font-size: clamp(1.25rem, 2.5svh, 1.7rem); font-weight: 600; letter-spacing: .04em; }
.hero-glass-venue { order: 5; display: grid; justify-items: center; gap: 3px; color: #5b4b3f; text-transform: uppercase; }
.hero-glass-venue span { font-size: clamp(.68rem, 1.16svh, .8rem); font-weight: 700; letter-spacing: .17em; }
.hero-glass-venue strong { color: #4e4035; font-family: "Cormorant Garamond", serif; font-size: clamp(1.28rem, 2.35svh, 1.62rem); font-weight: 600; letter-spacing: .07em; }
.hero-glass-venue small { max-width: 280px; color: #655449; font-size: clamp(.65rem, 1.1svh, .76rem); font-weight: 600; line-height: 1.35; letter-spacing: .055em; }
.hero-glass-layout .family-names { order: 6; margin: 0; color: #5e4d41; font-size: clamp(.68rem, 1.18svh, .82rem); letter-spacing: .1em; }
html[data-invitation-layout="atelier-demo"] .invitation-hero.hero-glass-layout {
  isolation: isolate;
  padding: 0;
  background: #eee9e1;
}
html[data-invitation-layout="atelier-demo"] .invitation-hero.hero-glass-layout::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: min(100vw, 71.53svh);
  height: min(100svh, 139.81vw);
  transform: translate(-50%, -50%);
  border: 0;
  content: "";
  background: var(--hero-background) center / cover no-repeat;
  box-shadow: 0 24px 70px rgba(75, 56, 39, .11);
  pointer-events: none;
}
html[data-invitation-layout="atelier-demo"] .invitation-hero.hero-glass-layout::after { display: none; }
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy {
  width: min(100vw, 71.53svh);
  aspect-ratio: 1060 / 1482;
  max-height: 100svh;
  gap: clamp(4px, .58svh, 8px);
  padding: clamp(82px, 11svh, 124px) 17% clamp(38px, 5svh, 62px);
}
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-glass-kicker { display: none; }
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .invitation-eyebrow {
  max-width: 92%;
  font-size: clamp(.68rem, 1.35svh, .9rem);
  line-height: 1.35;
}
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy h1 {
  font-size: clamp(2.75rem, 7.4svh, 5.4rem);
  letter-spacing: .11em;
}
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy h1 .hero-glass-name {
  margin: 0;
  color: inherit;
  font-size: 1em;
  letter-spacing: inherit;
}
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy h1[data-name-fit="medium"],
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy h1[data-name-fit="long"] {
  font-size: clamp(2.35rem, 6.45svh, 4.65rem);
}
html[data-invitation-layout="atelier-demo"] .hero-glass-layout .family-names {
  max-width: 100%;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(.72rem, 1.3svh, .9rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
}
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blush"] .hero-glass-layout .hero-copy {
  transform: translateY(-7svh);
}
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-layout .hero-copy,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-layout .hero-copy,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-layout .hero-copy h1,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-layout .hero-copy h1,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-layout .invitation-eyebrow,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-layout .invitation-eyebrow,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-date,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-date,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-venue,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-venue,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-venue strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-venue strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-venue small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-venue small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-layout .family-names,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-layout .family-names { color: #fff5da; text-shadow: 0 2px 18px rgba(0,0,0,.68); }
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-ampersand::before,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-ampersand::after,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-ampersand::before,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-ampersand::after { background: rgba(255, 238, 198, .46); }
@media (max-width: 600px) {
  html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy h1 {
    font-size: clamp(2.55rem, 6.25svh, 4.35rem);
  }
  html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy h1[data-name-fit="medium"],
  html[data-invitation-layout="atelier-demo"] .hero-glass-layout .hero-copy h1[data-name-fit="long"] {
    font-size: clamp(2.25rem, 5.65svh, 3.9rem);
  }
}
.invitation-hero[data-layout="gold-floral"] .hero-copy { --layout-x: 14%; --layout-y: -2svh; width: min(62%, 500px); }
.invitation-hero[data-layout="gold-couple"] .hero-copy { --layout-y: -5svh; width: min(72%, 570px); }
.invitation-hero[data-layout="ivory"] .hero-copy { --layout-x: 11%; --layout-y: -1svh; width: min(70%, 560px); }
html[data-invitation-slug="gamze-mert-can"] .invitation-hero.hero-glass-layout .hero-copy { --layout-x: 0%; --layout-y: 0svh; --user-x: 0%; --user-y: 0%; width: min(94vw, 68svh); }
.invitation-hero[data-layout="blush"] .hero-copy,
.invitation-hero[data-layout="blue"] .hero-copy { width: min(80%, 640px); }
.invitation-hero[data-layout="rose"] .hero-copy { --layout-y: -2svh; width: min(74%, 590px); }
.invitation-hero[data-layout="purple"] .hero-copy { --layout-y: -8svh; width: min(76%, 600px); gap: clamp(12px, 1.8svh, 18px); }
.invitation-hero[data-layout="purple"] .hero-note { font-size: clamp(1.05rem, 2.45vw, 1.5rem); }
.hero-drag-handle { display: none; }
.invitation-studio-mode .hero-copy { cursor: grab; touch-action: none; user-select: none; }
.invitation-studio-mode .hero-copy.is-dragging { cursor: grabbing; transition: none; }
.invitation-studio-mode .hero-drag-handle { position: absolute; left: 50%; top: -48px; display: inline-flex; min-height: 34px; align-items: center; justify-content: center; transform: translateX(-50%); border: 1px solid rgba(75,37,45,.3); border-radius: 999px; padding: 0 14px; background: rgba(255,250,244,.92); color: var(--wine); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(45,25,28,.12); cursor: grab; backdrop-filter: blur(8px); }
.invitation-studio-mode .hero-copy.is-dragging .hero-drag-handle { cursor: grabbing; }
.hero-ornament { position: absolute; width: 280px; height: 280px; border: 1px solid rgba(185,139,82,.18); border-radius: 50%; }
.ornament-one { left: -170px; top: 12%; }
.ornament-two { right: -160px; bottom: 12%; }
.page-scroll-cue { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 18px)); z-index: 5; display: grid; justify-items: center; align-content: center; min-height: 44px; min-width: 44px; gap: 5px; transform: translateX(-50%); border: 0; padding: 8px 16px 4px; background: transparent; color: var(--invitation-page-accent); font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; text-shadow: 0 1px 12px rgba(255,255,255,.9); touch-action: manipulation; }
.page-scroll-cue::before { width: 1px; height: 22px; content: ""; background: linear-gradient(to bottom, transparent, currentColor); animation: page-scroll-line 1.8s ease-in-out infinite; }
.page-scroll-cue::after { width: 7px; height: 7px; content: ""; transform: rotate(45deg); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; animation: page-scroll-chevron 1.8s ease-in-out infinite; }
.page-scroll-cue:hover { color: #8c6a35; }
.page-scroll-cue:focus-visible { border-radius: 999px; }
@keyframes page-scroll-line { 0%, 100% { transform: scaleY(.55); opacity: .45; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } }
@keyframes page-scroll-chevron { 0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .45; } 50% { transform: translateY(3px) rotate(45deg); opacity: 1; } }

.invitation-section { --transition-from: var(--invitation-page-solid); position: relative; isolation: isolate; padding: clamp(82px, 12vw, 150px) max(24px, calc((100vw - 1080px) / 2)); }
.invitation-hero + .invitation-section,
.invitation-section + .invitation-section { margin-top: -1px; }
.invitation-section::before { position: absolute; inset: 0 0 auto; z-index: 0; height: clamp(86px, 12vw, 170px); content: ""; background: linear-gradient(to bottom, var(--transition-from) 0%, var(--transition-from) 8%, transparent 100%); pointer-events: none; }
.invitation-section > * { position: relative; z-index: 1; }
.invitation-page { min-height: 100svh; align-content: center; }
.invitation-section h2, .invitation-closing h2 { margin: 14px 0 0; font-family: "Cormorant Garamond", serif; font-size: clamp(3rem, 8vw, 6.3rem); font-weight: 500; line-height: .92; letter-spacing: -.035em; }
.countdown-section { --transition-from: var(--invitation-page-solid); background: linear-gradient(var(--invitation-page-wash), var(--invitation-page-wash)), var(--invitation-page-art-a) center 52% / cover no-repeat; color: var(--invitation-page-ink); text-align: center; }
.countdown-section .invitation-eyebrow { color: var(--invitation-page-accent); }
.scratch-card { position: relative; width: min(920px, 100%); margin: 48px auto 0; isolation: isolate; }
.countdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); padding: clamp(8px, 2vw, 20px); background: radial-gradient(circle at 50% 45%, rgba(185,139,82,.14), transparent 67%); }
.date-reveal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 22px); width: min(760px, 100%); margin: 0 auto; padding: clamp(6px, 1.6vw, 16px); background: radial-gradient(circle at 50% 45%, rgba(185,139,82,.14), transparent 67%); }
.countdown-grid[hidden], .date-reveal-grid[hidden], .countdown-summary[hidden], .scratch-subtitle[hidden], .scratch-instruction[hidden] { display: none !important; }
.countdown-heart { position: relative; aspect-ratio: 704 / 628; min-width: 0; filter: drop-shadow(0 18px 22px rgba(0,0,0,.2)); }
.heart-counter { position: absolute; inset: 15% 13% 12%; display: grid; place-content: center; gap: 8px; transform: scale(.8); opacity: .25; border: 1px solid var(--invitation-page-line); border-radius: 50%; background: var(--invitation-page-panel); box-shadow: inset 0 0 0 6px rgba(255,255,255,.18); filter: blur(3px); transition: transform .9s cubic-bezier(.16,1,.3,1), filter .8s ease, opacity .7s ease; }
.countdown-heart.is-revealed .heart-counter { transform: scale(1); opacity: 1; filter: blur(0); }
.countdown-grid strong { font-family: "Cormorant Garamond", serif; font-size: clamp(2.35rem, 5.5vw, 4.6rem); font-weight: 400; line-height: .78; }
.date-reveal-grid strong { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 500; line-height: .82; }
.date-reveal-grid .date-reveal-month { font-size: clamp(1.2rem, 3.3vw, 2.7rem); }
.countdown-grid .heart-counter span { color: var(--invitation-page-muted); font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.heart-scratch-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; cursor: crosshair; touch-action: none; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), visibility .9s ease; }
.countdown-heart.is-scratching .heart-scratch-canvas { cursor: grabbing; }
.countdown-heart.is-revealed .heart-scratch-canvas { transform: scale(1.08); opacity: 0; visibility: hidden; pointer-events: none; }
.heart-scratch-hint { position: absolute; left: 50%; top: 47%; z-index: 3; transform: translate(-50%, -50%); color: #4b2d1e; font-family: "Cormorant Garamond", serif; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: .06em; pointer-events: none; text-shadow: 0 1px 0 rgba(255,255,255,.42); transition: opacity .22s ease; }
.countdown-heart.is-scratching .heart-scratch-hint, .countdown-heart.is-revealed .heart-scratch-hint { opacity: 0; }
.scratch-instruction { position: relative; z-index: 3; display: grid; gap: 6px; margin: 8px 0 0; color: var(--invitation-page-ink); text-align: center; pointer-events: none; transition: opacity .35s ease; }
.scratch-instruction strong { font-family: "Cormorant Garamond", serif; color: var(--invitation-page-accent); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 600; }
.scratch-instruction span { color: var(--invitation-page-muted); font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.scratch-card.is-revealed .scratch-instruction span { display: none; }
.scratch-celebration { position: absolute; inset: -20% -8%; z-index: 4; overflow: hidden; pointer-events: none; }
.firework-particle { position: absolute; left: var(--origin-x); top: var(--origin-y); width: var(--size); height: var(--size); transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(.3); border-radius: 50%; background: var(--particle-color); box-shadow: 0 0 8px 2px var(--particle-color), 0 0 18px var(--particle-color); opacity: 0; }
.firework-particle::after { position: absolute; left: 50%; top: 100%; width: 2px; height: 18px; transform: translateX(-50%); content: ""; background: linear-gradient(var(--particle-color), transparent); opacity: .78; }
.scratch-card.is-celebrating .firework-particle { animation: scratch-firework var(--duration) cubic-bezier(.12,.65,.2,1) var(--delay) forwards; }
.firework-ring { position: absolute; left: var(--origin-x); top: var(--origin-y); width: 18px; height: 18px; transform: translate(-50%, -50%) scale(.2); border: 2px solid var(--ring-color); border-radius: 50%; box-shadow: 0 0 16px var(--ring-color), inset 0 0 12px var(--ring-color); opacity: 0; }
.scratch-card.is-celebrating .firework-ring { animation: scratch-firework-ring 1.05s ease-out var(--delay) forwards; }
@keyframes scratch-firework {
  0% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(.25); opacity: 0; }
  16% { opacity: 1; }
  72% { opacity: .9; }
  100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(var(--travel)) scale(.05); opacity: 0; }
}
@keyframes scratch-firework-ring {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  18% { opacity: .95; }
  100% { transform: translate(-50%, -50%) scale(5.8); opacity: 0; }
}
.scratch-reveal-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 16px auto 0; border: 0; border-bottom: 1px solid var(--invitation-page-line); padding: 8px 20px; background: transparent; color: var(--invitation-page-muted); font-size: .67rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.scratch-reveal-button:hover { color: var(--invitation-page-ink); }
.scratch-reveal-button[hidden] { display: none; }
.scratch-subtitle { margin: 14px 0 0; color: var(--invitation-page-muted); font-family: "Cormorant Garamond", serif; font-size: clamp(1.25rem, 3.2vw, 2rem); font-weight: 500; letter-spacing: .035em; }
.countdown-summary { width: min(560px, 100%); margin: clamp(38px, 7vw, 70px) auto 0; padding-top: 24px; border-top: 1px solid var(--invitation-page-line); }
.countdown-summary > p { margin: 0 0 18px; color: var(--invitation-page-accent); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.countdown-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, 2vw, 14px); }
.countdown-summary-grid > span { aspect-ratio: 1; display: grid; place-content: center; gap: 3px; border: 1px solid rgba(169,132,69,.32); border-radius: 50%; background: rgba(255,252,248,.56); box-shadow: inset 0 0 0 5px rgba(255,255,255,.16), 0 10px 30px rgba(106,82,55,.08); }
.countdown-summary-grid strong { font-family: "Cormorant Garamond", serif; font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 500; line-height: 1; }
.countdown-summary-grid small { color: var(--invitation-page-muted); font-size: clamp(.5rem, 1.4vw, .62rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
html[data-invitation-slug="gamze-mert-can"] .countdown-section #countdownEyebrow { display: none; }
html[data-invitation-slug="gamze-mert-can"] .countdown-section h2 { font-size: clamp(4rem, 10vw, 7.2rem); }
html[data-invitation-slug="gamze-mert-can"] .countdown-section .scratch-card { margin-top: clamp(28px, 5vw, 46px); }
html[data-invitation-slug="homepage-sample"] .countdown-section #countdownEyebrow { display: none; }
html[data-invitation-slug="homepage-sample"] .countdown-section h2 { font-size: clamp(4rem, 10vw, 7.2rem); }
html[data-invitation-slug="homepage-sample"] .countdown-section .scratch-card { margin-top: clamp(28px, 5vw, 46px); }
.calendar-primary-button { margin: 30px auto 0; background: var(--cream); color: var(--wine); }

.story-section { background: #efe2dc; }
.story-card { width: min(920px, 100%); margin: 0 auto; border-left: 1px solid rgba(75,37,45,.24); padding: clamp(24px, 7vw, 72px); }
.story-card p:not(.invitation-eyebrow) { max-width: 680px; color: #73585a; font-size: 1.05rem; line-height: 1.8; }
.signature { display: block; margin-top: 32px; color: var(--wine); font-family: "Cormorant Garamond", serif; font-size: 2rem; font-style: italic; }

.schedule-section { background: var(--cream); }
.schedule-list { width: min(820px, 100%); display: grid; margin-top: 52px; }
.schedule-list article { display: grid; grid-template-columns: 110px 1fr; gap: 28px; align-items: start; border-top: 1px solid rgba(75,37,45,.14); padding: 28px 0; }
.schedule-list article:last-child { border-bottom: 1px solid rgba(75,37,45,.14); }
.schedule-list time { color: var(--gold); font-family: "Cormorant Garamond", serif; font-size: 2.2rem; }
.schedule-list h3 { margin: 0 0 6px; font-family: "Cormorant Garamond", serif; font-size: 2rem; font-weight: 600; }
.schedule-list p { margin: 0; color: #826c69; }

.venue-section { --transition-from: var(--invitation-page-solid); background: linear-gradient(var(--invitation-page-wash), var(--invitation-page-wash)), var(--invitation-page-art-b) center 45% / cover no-repeat; color: var(--invitation-page-ink); }
.venue-card { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.venue-card .invitation-eyebrow { color: var(--invitation-page-accent); }
.venue-card p { color: var(--invitation-page-muted); }
.venue-detail { max-width: 580px; line-height: 1.7; }
.venue-actions { display: grid; gap: 12px; justify-items: stretch; }
.light-button { background: var(--wine); color: white; }
.venue-map-pin, .venue-map-sprig { display: none; }
html[data-invitation-slug="gamze-mert-can"] .venue-card { grid-template-columns: 1fr; align-items: start; }
html[data-invitation-slug="gamze-mert-can"] .venue-actions { width: 100%; justify-items: center; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink { position: relative; width: min(720px, 100%); min-height: clamp(108px, 15vw, 138px); justify-content: center; overflow: hidden; border: 1px solid rgba(180,135,63,.52); border-radius: 68px 20px 68px 20px; padding: 0 clamp(34px, 7vw, 82px) 0 clamp(112px, 17vw, 172px); background: linear-gradient(135deg, rgba(255,253,249,.96), rgba(239,223,203,.9)); color: #86622e; font-family: "Cormorant Garamond", serif; font-size: clamp(1.18rem, 2.6vw, 1.65rem); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 20px 48px rgba(117,84,48,.12), inset 0 0 0 7px rgba(255,255,255,.42); }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink::after { position: absolute; inset: 11px; border: 1px solid rgba(180,135,63,.34); border-radius: 58px 14px 58px 14px; content: ""; pointer-events: none; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink:hover { transform: translateY(-3px); background-color: transparent; box-shadow: 0 24px 56px rgba(117,84,48,.17), inset 0 0 0 7px rgba(255,255,255,.5); }
html[data-invitation-slug="gamze-mert-can"] .venue-map-pin { position: absolute; left: clamp(38px, 7vw, 70px); top: 50%; width: clamp(42px, 6.5vw, 62px); aspect-ratio: 1; display: block; transform: translateY(-60%) rotate(-45deg); border-radius: 50% 50% 50% 8px; background: radial-gradient(circle at 50% 50%, #f8efe4 0 17%, transparent 18%), linear-gradient(135deg, #f7dfaa, #b8873e 48%, #76511f); box-shadow: -8px 10px 20px rgba(111,75,31,.18), inset 5px 5px 10px rgba(255,255,255,.58); }
html[data-invitation-slug="gamze-mert-can"] .venue-map-pin::after { position: absolute; left: -13%; top: 91%; width: 126%; height: 38%; transform: rotate(45deg); border: 2px solid rgba(154,111,52,.56); border-radius: 50%; content: ""; box-shadow: 0 5px 12px rgba(111,75,31,.12); }
html[data-invitation-slug="gamze-mert-can"] .venue-map-sprig { position: absolute; z-index: 1; top: -2px; width: clamp(98px, 17vw, 150px); height: clamp(68px, 10vw, 92px); display: block; pointer-events: none; opacity: .92; filter: drop-shadow(0 3px 3px rgba(120,84,39,.11)); background: radial-gradient(circle at 9% 70%, #a7783c 0 1.3px, #fffdf8 1.5px 4.2px, rgba(213,181,131,.7) 4.4px 5px, transparent 5.3px), radial-gradient(circle at 18% 49%, #a7783c 0 1.2px, #fffdf8 1.4px 4px, rgba(213,181,131,.68) 4.2px 4.8px, transparent 5.1px), radial-gradient(circle at 25% 23%, #a7783c 0 1.1px, #fffdf8 1.3px 3.7px, rgba(213,181,131,.64) 3.9px 4.5px, transparent 4.8px), radial-gradient(circle at 34% 41%, #a7783c 0 1.2px, #fffdf8 1.4px 4.1px, rgba(213,181,131,.7) 4.3px 4.9px, transparent 5.2px), radial-gradient(circle at 42% 12%, #a7783c 0 1px, #fffdf8 1.2px 3.5px, rgba(213,181,131,.62) 3.7px 4.3px, transparent 4.6px), radial-gradient(circle at 50% 29%, #a7783c 0 1.1px, #fffdf8 1.3px 3.8px, rgba(213,181,131,.66) 4px 4.6px, transparent 4.9px), radial-gradient(circle at 62% 9%, #a7783c 0 1px, #fffdf8 1.2px 3.5px, rgba(213,181,131,.62) 3.7px 4.3px, transparent 4.6px), radial-gradient(circle at 69% 35%, #a7783c 0 1.1px, #fffdf8 1.3px 3.8px, rgba(213,181,131,.66) 4px 4.6px, transparent 4.9px), radial-gradient(circle at 80% 19%, #a7783c 0 1px, #fffdf8 1.2px 3.5px, rgba(213,181,131,.62) 3.7px 4.3px, transparent 4.6px), radial-gradient(circle at 88% 43%, #a7783c 0 1.1px, #fffdf8 1.3px 3.8px, rgba(213,181,131,.66) 4px 4.6px, transparent 4.9px), linear-gradient(62deg, transparent 0 19%, rgba(174,132,72,.72) 19.4% 20%, transparent 20.4%), linear-gradient(76deg, transparent 0 31%, rgba(174,132,72,.64) 31.4% 32%, transparent 32.4%), linear-gradient(83deg, transparent 0 43%, rgba(174,132,72,.67) 43.4% 44%, transparent 44.4%), linear-gradient(94deg, transparent 0 57%, rgba(174,132,72,.6) 57.4% 58%, transparent 58.4%), linear-gradient(106deg, transparent 0 70%, rgba(174,132,72,.66) 70.4% 71%, transparent 71.4%), linear-gradient(118deg, transparent 0 80%, rgba(174,132,72,.62) 80.4% 81%, transparent 81.4%); }
html[data-invitation-slug="gamze-mert-can"] .venue-map-sprig::before { position: absolute; left: 4%; right: 2%; bottom: 9%; height: 1px; transform: rotate(-12deg); transform-origin: left center; background: linear-gradient(90deg, rgba(160,113,54,.82), rgba(198,158,96,.6)); content: ""; }
html[data-invitation-slug="gamze-mert-can"] .venue-map-sprig::after { position: absolute; left: 20%; bottom: 20%; width: 66%; height: 1px; transform: rotate(-29deg); transform-origin: left center; background: rgba(174,132,72,.64); content: ""; }
html[data-invitation-slug="gamze-mert-can"] .venue-map-sprig-left { left: clamp(116px, 18vw, 180px); transform: rotate(-7deg); }
html[data-invitation-slug="gamze-mert-can"] .venue-map-sprig-right { right: clamp(10px, 2.5vw, 25px); transform: scaleX(-1) rotate(-7deg); }
html[data-invitation-slug="gamze-mert-can"] .venue-map-label { position: relative; z-index: 2; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink { width: min(760px, 100%); min-height: 0; aspect-ratio: 1959 / 803; overflow: visible; border: 0; border-radius: 0; padding: 0 4% 0 34%; background: transparent; color: #72563a; font-size: clamp(.78rem, 2.4vw, 1.35rem); box-shadow: none; -webkit-mask-image: none; mask-image: none; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink::before { position: absolute; inset: 0; z-index: 0; content: ""; background: url("../assets/gamze-mert-can-directions-transparent.png") center / contain no-repeat; background-image: image-set(url("../assets/gamze-mert-can-directions-transparent.webp") type("image/webp"), url("../assets/gamze-mert-can-directions-transparent.png") type("image/png")); opacity: 1; pointer-events: none; transition: filter .25s ease; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink::after { display: none; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink:hover { background: transparent; box-shadow: none; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink:hover::before { filter: drop-shadow(0 10px 18px rgba(117,84,48,.1)); }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink .venue-map-label { top: 6%; }
html[data-invitation-slug="gamze-mert-can"] #venueMapLink .venue-map-pin,
html[data-invitation-slug="gamze-mert-can"] #venueMapLink .venue-map-sprig { display: none; }
html[data-invitation-slug="homepage-sample"] .venue-card { grid-template-columns: 1fr; align-items: start; }
html[data-invitation-slug="homepage-sample"] .venue-actions { width: 100%; justify-items: center; }
html[data-invitation-slug="homepage-sample"] #venueMapLink {
  position: relative;
  width: min(760px, 100%);
  min-height: 0;
  aspect-ratio: 1959 / 803;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0 4% 0 34%;
  background: transparent;
  color: #72563a;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(.78rem, 2.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: none;
}
html[data-invitation-slug="homepage-sample"] #venueMapLink::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: url("../assets/gamze-mert-can-directions-transparent.png") center / contain no-repeat;
  background-image: image-set(url("../assets/gamze-mert-can-directions-transparent.webp") type("image/webp"), url("../assets/gamze-mert-can-directions-transparent.png") type("image/png"));
  pointer-events: none;
  transition: filter .25s ease;
}
html[data-invitation-slug="homepage-sample"] #venueMapLink::after { display: none; }
html[data-invitation-slug="homepage-sample"] #venueMapLink:hover { transform: translateY(-2px); background: transparent; box-shadow: none; }
html[data-invitation-slug="homepage-sample"] #venueMapLink:hover::before { filter: drop-shadow(0 10px 18px rgba(117,84,48,.1)); }
html[data-invitation-slug="homepage-sample"] #venueMapLink .venue-map-label { position: relative; z-index: 2; top: 6%; }
.outline-light-button { border: 1px solid rgba(255,255,255,.42); background: transparent; color: white; }
.outline-light-button:disabled { opacity: .45; cursor: not-allowed; }

.rsvp-section { --transition-from: var(--invitation-page-solid); display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(36px, 8vw, 100px); background: var(--invitation-surface-soft); }
.rsvp-intro p:not(.invitation-eyebrow) { color: #806764; line-height: 1.7; }
.rsvp-deadline { margin-top: 14px; color: var(--wine) !important; font-weight: 700; }
.rsvp-form { display: grid; gap: 20px; border: 1px solid rgba(75,37,45,.14); padding: clamp(22px, 5vw, 46px); background: rgba(255,255,255,.68); box-shadow: 0 28px 80px rgba(75,37,45,.08); }
.rsvp-form label, .rsvp-form fieldset, .memory-form label, .guestbook-form label { display: grid; gap: 9px; color: #5c3c40; font-size: .78rem; font-weight: 700; letter-spacing: .05em; }
.rsvp-form fieldset { border: 0; padding: 0; }
.bot-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rsvp-form legend { margin-bottom: 10px; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea, .memory-form input, .memory-form textarea, .guestbook-form input, .guestbook-form textarea { width: 100%; border: 1px solid rgba(75,37,45,.18); border-radius: 0; padding: 14px; background: white; color: var(--ink); }
.rsvp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rsvp-grid.single-field { grid-template-columns: 1fr; }
.rsvp-grid { transition: opacity .2s ease; }
.rsvp-grid.is-disabled { opacity: .45; }
.consent-option { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; gap: 10px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.5; }
.consent-option input { width: 18px !important; height: 18px; margin-top: 1px; padding: 0 !important; accent-color: var(--wine); }
.rsvp-form.is-submitting { opacity: .72; pointer-events: none; }
.attendance-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.attendance-options label { position: relative; }
.attendance-options input { position: absolute; opacity: 0; }
.attendance-options span { min-height: 72px; display: grid; place-items: center; border: 1px solid rgba(75,37,45,.16); padding: 12px; background: white; text-align: center; cursor: pointer; }
.attendance-options input:checked + span { border-color: var(--wine); background: #f1dedc; }
.attendance-options input:focus-visible + span { outline: 3px solid #e0b06e; outline-offset: 3px; }
.rsvp-status { min-height: 22px; margin: 0; color: #627a5e; font-weight: 700; }

.memories-section { --transition-from: var(--invitation-surface-soft); display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(42px, 8vw, 100px); background: var(--invitation-surface-deep); }
.memories-copy > p:not(.invitation-eyebrow), .guestbook-card > p { max-width: 620px; color: #73585a; line-height: 1.8; }
.memory-form, .guestbook-form { display: grid; gap: 18px; border: 1px solid rgba(75,37,45,.14); padding: clamp(22px, 5vw, 46px); background: rgba(255,255,255,.72); box-shadow: 0 28px 80px rgba(75,37,45,.08); }
.memory-form label > span { color: #967f7d; font-weight: 500; }
.memory-form label small { color: #8b7471; font-weight: 500; line-height: 1.5; }
.form-status { min-height: 22px; margin: 0; color: #627a5e; font-size: .82rem; font-weight: 700; line-height: 1.5; }
.memory-message-cloud { display: grid; gap: 12px; margin-top: 34px; }
.memory-message-cloud blockquote { margin: 0; border-left: 2px solid var(--gold); padding: 12px 0 12px 18px; color: #6e5355; font-family: "Cormorant Garamond", serif; font-size: 1.2rem; line-height: 1.5; }
.memory-message-cloud cite { display: block; margin-top: 7px; color: #947975; font-family: Inter, system-ui, sans-serif; font-size: .68rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.guestbook-section { --transition-from: var(--invitation-surface-deep); background: linear-gradient(145deg, var(--invitation-surface-soft), var(--invitation-page-solid)); }
.guestbook-card { width: min(820px, 100%); margin: 0 auto; text-align: center; }
.guestbook-card > p { margin-right: auto; margin-left: auto; }
.guestbook-form { margin-top: 38px; text-align: left; }

.gallery-section { --transition-from: var(--invitation-surface-soft); background: linear-gradient(var(--invitation-page-wash), var(--invitation-page-wash)), var(--invitation-page-art-a) center 52% / cover no-repeat; color: var(--invitation-page-ink); }
.gallery-heading { width: min(900px, 100%); margin: 0 auto 44px; text-align: center; }
.gallery-heading .invitation-eyebrow, .gallery-closing .invitation-eyebrow { color: var(--invitation-page-accent); }
.memory-gallery { width: min(1120px, 100%); margin: 0 auto; columns: 3 260px; column-gap: 16px; }
.memory-card { break-inside: avoid; margin: 0 0 16px; overflow: hidden; border: 1px solid var(--invitation-page-line); background: var(--invitation-page-panel); }
.memory-card img, .memory-card video { width: 100%; display: block; background: #160b0d; }
.memory-card figcaption { display: grid; gap: 5px; padding: 14px 16px; color: var(--invitation-page-muted); font-size: .8rem; line-height: 1.55; }
.memory-card figcaption strong { color: var(--invitation-page-ink); }
.gallery-empty { width: min(560px, 100%); margin: 0 auto; border: 1px solid var(--invitation-page-line); padding: 38px 24px; color: var(--invitation-page-muted); text-align: center; }
.gallery-empty strong { display: block; color: var(--invitation-page-ink); font-family: "Cormorant Garamond", serif; font-size: 2rem; font-weight: 500; }
.gallery-empty a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 14px; border: 1px solid var(--invitation-page-line); border-radius: 999px; padding: 0 24px; background: var(--invitation-page-panel); color: var(--invitation-page-accent); font-size: .82rem; font-weight: 700; text-decoration: none; touch-action: manipulation; transition: transform .2s ease, background .2s ease; }
.gallery-empty a:hover { transform: translateY(-2px); }
.gallery-closing { display: grid; justify-items: center; gap: 22px; margin-top: clamp(80px, 13vw, 150px); text-align: center; }
.gallery-closing h2 { max-width: 900px; margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(3rem, 8vw, 6.3rem); font-weight: 500; line-height: .92; letter-spacing: -.035em; }
.gallery-closing .share-button { position: relative; z-index: 21; border-color: var(--invitation-page-line); color: var(--invitation-page-ink); touch-action: manipulation; }

.share-panel[hidden] { display: none; }
.share-panel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: end center; padding: 12px; overscroll-behavior: contain; }
.share-panel-backdrop { position: absolute; inset: 0; border: 0; background: rgba(37, 27, 25, .52); cursor: default; touch-action: none; backdrop-filter: blur(8px); }
.share-sheet { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100svh - 24px); overflow: auto; border: 1px solid rgba(167, 129, 71, .22); border-radius: 28px 28px 18px 18px; padding: 28px 22px max(22px, env(safe-area-inset-bottom, 22px)); background: rgba(255, 252, 247, .98); color: #49392f; box-shadow: 0 24px 80px rgba(42, 30, 26, .3); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.share-sheet-close { position: absolute; top: 13px; right: 15px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid rgba(155, 117, 62, .2); border-radius: 50%; background: rgba(255,255,255,.72); color: #8a6a3d; font-size: 1.55rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.share-sheet-eyebrow { margin: 0 46px 6px 0; color: #aa7c3b; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.share-sheet h2 { max-width: 430px; margin: 0 46px 20px 0; font-family: "Cormorant Garamond", serif; font-size: clamp(1.8rem, 7vw, 2.45rem); font-weight: 500; line-height: 1; }
.story-share-option { display: grid; grid-template-columns: 112px 1fr; gap: 14px 16px; border: 1px solid rgba(169, 132, 69, .23); border-radius: 22px; padding: 14px; background: linear-gradient(145deg, rgba(247,238,227,.86), rgba(255,255,255,.94)); }
.story-share-option[hidden] { display: none; }
.story-share-option > img { grid-row: 1 / span 2; width: 112px; aspect-ratio: 9 / 16; display: block; border-radius: 14px; object-fit: contain; background: #eadfd2; box-shadow: 0 10px 30px rgba(94, 68, 47, .16); user-select: none; -webkit-user-drag: none; }
.story-share-copy { align-self: center; }
.story-share-copy strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.55rem; font-weight: 600; }
.story-share-copy p { margin: 5px 0 0; color: #76675e; font-size: .78rem; line-height: 1.5; }
.story-share-steps { display: grid; gap: 8px; }
.share-action { min-height: 48px; border: 1px solid rgba(160, 119, 60, .24); border-radius: 999px; padding: 0 17px; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: transform .18s ease, opacity .18s ease, background .18s ease; }
.share-action:hover { transform: translateY(-1px); }
.share-action:disabled { cursor: wait; opacity: .5; transform: none; }
.share-action span { width: 22px; height: 22px; display: inline-grid; place-items: center; margin-right: 8px; border-radius: 50%; background: rgba(255,255,255,.32); font-size: .68rem; }
.share-action.primary { border-color: #9d7138; background: linear-gradient(135deg, #b98d4f, #8d642f); color: white; box-shadow: 0 10px 24px rgba(132, 91, 41, .18); }
.share-action.secondary { background: rgba(255,255,255,.8); color: #79562e; }
.story-share-help { grid-column: 1 / -1; margin: 0; border-top: 1px solid rgba(169,132,69,.16); padding-top: 12px; color: #78695f; font-size: .7rem; line-height: 1.55; }
.regular-share-option { margin-top: 12px; }
.share-action.link-share { width: 100%; background: transparent; color: #65544a; }
.share-panel-status { min-height: 20px; margin: 12px 4px 0; color: #856130; font-size: .72rem; line-height: 1.45; text-align: center; }
body.share-panel-open { overscroll-behavior: none; }

html[data-invitation-slug="gamze-mert-can"] main { position: relative; isolation: isolate; }
html[data-invitation-slug="gamze-mert-can"] main::before { position: fixed; inset: 0; z-index: -1; content: ""; background: url("/assets/gamze-mert-can-countdown-pearl-clean.png") center / cover no-repeat; background-image: image-set(url("/assets/gamze-mert-can-countdown-pearl-clean.webp") type("image/webp"), url("/assets/gamze-mert-can-countdown-pearl-clean.png") type("image/png")); }
html[data-invitation-slug="gamze-mert-can"] .invitation-hero.hero-glass-layout { padding: 0; background: transparent; }
html[data-invitation-slug="gamze-mert-can"] .hero-glass-layout .hero-full-page-art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; image-rendering: auto; }
html[data-invitation-slug="gamze-mert-can"] .invitation-hero.hero-glass-layout::before,
html[data-invitation-slug="gamze-mert-can"] .invitation-hero.hero-glass-layout::after { display: none; }
html[data-invitation-slug="gamze-mert-can"] .hero-glass-layout .hero-full-page-art {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,.86) 86%, transparent 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,.86) 86%, transparent 96%, transparent 100%);
}
html[data-invitation-slug="gamze-mert-can"] .hero-glass-layout .hero-copy,
html[data-invitation-slug="gamze-mert-can"] .hero-glass-layout .hero-ornament { display: none; }
html[data-invitation-slug="gamze-mert-can"] .hero-glass-layout .page-scroll-cue { color: #8c6c42; }

html[data-invitation-slug="gamze-mert-can"] .invitation-section { --transition-from: transparent; background: transparent; }
html[data-invitation-slug="gamze-mert-can"] .invitation-section::before,
html[data-invitation-slug="gamze-mert-can"] .invitation-section::after { display: none; }

html[data-invitation-slug="homepage-sample"] {
  --invitation-page-art-a: url("/assets/sample-pearl-background.webp");
  --invitation-page-art-b: url("/assets/sample-pearl-background.webp");
  --invitation-page-wash: rgba(255, 251, 245, .64);
  --invitation-page-solid: #f6eee5;
}

html[data-invitation-layout="atelier-demo"] .invitation-opening {
  background: linear-gradient(var(--invitation-page-wash), var(--invitation-page-wash)), var(--hero-background) center / cover no-repeat;
}

html[data-invitation-layout="atelier-demo"] .opening-card {
  width: min(52vw, 540px);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-invitation-layout="atelier-demo"] .opening-card::before,
html[data-invitation-layout="atelier-demo"] .opening-card::after {
  display: none;
}

html[data-invitation-layout="atelier-demo"] .opening-card h1 {
  color: var(--invitation-page-ink);
}

html[data-invitation-layout="atelier-demo"] .opening-button {
  border: 1px solid var(--invitation-page-line);
  background: var(--invitation-page-panel);
  color: var(--invitation-page-ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  backdrop-filter: blur(12px);
}

/* Public demos use the same continuous, full-bleed page treatment as the protected invitation. */
html[data-invitation-layout="atelier-demo"] main {
  position: relative;
  isolation: isolate;
}

html[data-invitation-layout="atelier-demo"] main::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(var(--invitation-page-wash), var(--invitation-page-wash)), var(--hero-background) center / cover no-repeat;
}

html[data-invitation-layout="atelier-demo"] .invitation-hero.hero-glass-layout {
  background: transparent;
}

html[data-invitation-layout="atelier-demo"] .invitation-hero.hero-glass-layout::before {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background: var(--hero-background) center / cover no-repeat;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,.86) 86%, transparent 98%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,.86) 86%, transparent 98%, transparent 100%);
}

html[data-invitation-layout="atelier-demo"] .invitation-section,
html[data-invitation-layout="atelier-demo"] .countdown-section,
html[data-invitation-layout="atelier-demo"] .story-section,
html[data-invitation-layout="atelier-demo"] .schedule-section,
html[data-invitation-layout="atelier-demo"] .venue-section,
html[data-invitation-layout="atelier-demo"] .rsvp-section,
html[data-invitation-layout="atelier-demo"] .memories-section,
html[data-invitation-layout="atelier-demo"] .guestbook-section,
html[data-invitation-layout="atelier-demo"] .gallery-section,
html[data-invitation-layout="atelier-demo"] .invitation-closing {
  --transition-from: transparent;
  background: transparent !important;
}

html[data-invitation-layout="atelier-demo"] .invitation-section::before,
html[data-invitation-layout="atelier-demo"] .invitation-section::after {
  display: none !important;
}

html[data-invitation-layout="atelier-demo"] .countdown-section #countdownEyebrow {
  display: none;
}

html[data-invitation-layout="atelier-demo"] .countdown-section h2 {
  font-size: clamp(4rem, 10vw, 7.2rem);
}

html[data-invitation-layout="atelier-demo"] .countdown-section .scratch-card {
  margin-top: clamp(28px, 5vw, 46px);
}

html[data-invitation-layout="atelier-demo"] .story-card {
  border-left-color: var(--invitation-page-line);
}

html[data-invitation-layout="atelier-demo"] .story-card p:not(.invitation-eyebrow) {
  color: var(--invitation-page-muted);
}

html[data-invitation-layout="atelier-demo"] .signature {
  color: var(--invitation-page-ink);
}

html[data-invitation-layout="atelier-demo"] .schedule-list article {
  border-top-color: var(--invitation-page-line);
}

html[data-invitation-layout="atelier-demo"] .schedule-list article:last-child {
  border-bottom-color: var(--invitation-page-line);
}

html[data-invitation-layout="atelier-demo"] .schedule-list p {
  color: var(--invitation-page-muted);
}

html[data-invitation-layout="atelier-demo"] .rsvp-intro p:not(.invitation-eyebrow),
html[data-invitation-layout="atelier-demo"] .memories-copy > p:not(.invitation-eyebrow),
html[data-invitation-layout="atelier-demo"] .guestbook-card > p {
  color: var(--invitation-page-muted);
}

html[data-invitation-layout="atelier-demo"] .rsvp-form,
html[data-invitation-layout="atelier-demo"] .memory-form,
html[data-invitation-layout="atelier-demo"] .guestbook-form {
  border: 1px solid var(--invitation-page-line);
  background: var(--invitation-page-panel);
  box-shadow: 0 20px 60px rgba(75, 47, 52, .08);
  backdrop-filter: blur(12px);
}

html[data-invitation-layout="atelier-demo"] .rsvp-form input,
html[data-invitation-layout="atelier-demo"] .rsvp-form select,
html[data-invitation-layout="atelier-demo"] .rsvp-form textarea,
html[data-invitation-layout="atelier-demo"] .memory-form input,
html[data-invitation-layout="atelier-demo"] .memory-form textarea,
html[data-invitation-layout="atelier-demo"] .guestbook-form input,
html[data-invitation-layout="atelier-demo"] .guestbook-form textarea {
  border: 1px solid var(--invitation-page-line);
  background: rgba(255, 255, 255, .78);
  color: var(--invitation-page-ink);
}

html[data-invitation-layout="atelier-demo"] .attendance-options span {
  border: 1px solid var(--invitation-page-line);
  background: rgba(255, 255, 255, .75);
  color: var(--invitation-page-ink);
}

html[data-invitation-layout="atelier-demo"] .attendance-options input:checked + span {
  border-color: var(--invitation-page-accent);
  background: var(--invitation-page-panel);
}

html[data-invitation-layout="atelier-demo"] .venue-card {
  grid-template-columns: 1fr;
  align-items: start;
}

html[data-invitation-layout="atelier-demo"] .venue-actions {
  width: 100%;
  justify-items: center;
}

html[data-invitation-layout="atelier-demo"] #venueMapLink {
  position: relative;
  width: min(760px, 100%);
  min-height: 0;
  aspect-ratio: 1959 / 803;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0 4% 0 34%;
  background: transparent;
  color: #72563a;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(.78rem, 2.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: none;
}

html[data-invitation-layout="atelier-demo"] #venueMapLink::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: url("../assets/gamze-mert-can-directions-transparent.png") center / contain no-repeat;
  background-image: image-set(url("../assets/gamze-mert-can-directions-transparent.webp") type("image/webp"), url("../assets/gamze-mert-can-directions-transparent.png") type("image/png"));
  pointer-events: none;
  transition: filter .25s ease;
}

html[data-invitation-layout="atelier-demo"] #venueMapLink::after {
  display: none;
}

html[data-invitation-layout="atelier-demo"] #venueMapLink:hover {
  transform: translateY(-2px);
  background: transparent;
  box-shadow: none;
}

html[data-invitation-layout="atelier-demo"] #venueMapLink:hover::before {
  filter: drop-shadow(0 10px 18px rgba(117,84,48,.1));
}

html[data-invitation-layout="atelier-demo"] #venueMapLink .venue-map-label {
  position: relative;
  z-index: 2;
  top: 6%;
}

/* Dark tone models (Emerald / Blue / Plum) high-contrast, luminous typography and frosted glass boxes */
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .invitation-eyebrow,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .invitation-eyebrow,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .invitation-eyebrow {
  color: #ffe196;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-date,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-date,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .hero-glass-date,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-venue,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-venue,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .hero-glass-venue,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-venue strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-venue strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .hero-glass-venue strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .hero-glass-venue small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .hero-glass-venue small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .hero-glass-venue small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .family-names,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .family-names,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .family-names {
  color: #f7eedf;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .scratch-subtitle,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .scratch-subtitle,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .scratch-subtitle {
  color: #f7eedf;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .countdown-summary > p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .countdown-summary > p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .countdown-summary > p {
  color: #ffe196;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .countdown-summary-grid > span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .countdown-summary-grid > span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .countdown-summary-grid > span {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 238, 198, .4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 32px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .countdown-summary-grid strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .countdown-summary-grid strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .countdown-summary-grid strong {
  color: #ffffff;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .countdown-summary-grid small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .countdown-summary-grid small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .countdown-summary-grid small {
  color: #ffe196;
  font-weight: 800;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .scratch-reveal-button,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .scratch-reveal-button,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .scratch-reveal-button {
  color: #f7eedf;
  border-bottom: 1px solid rgba(255, 238, 198, .35);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .story-card p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .story-card p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .story-card p {
  color: #f7eedf !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .signature,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .signature,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .signature {
  color: #ffe196;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .schedule-list time,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .schedule-list time,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .schedule-list time {
  color: #ffe196;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .schedule-list h3,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .schedule-list h3,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .schedule-list h3 {
  color: #ffffff;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .schedule-list p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .schedule-list p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .schedule-list p {
  color: #f7eedf !important;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .schedule-list article,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .schedule-list article,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .schedule-list article {
  border-top-color: rgba(255, 238, 198, .22);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .venue-card p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .venue-card p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .venue-card p {
  color: #f7eedf;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-intro p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-intro p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-intro p {
  color: #f7eedf;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-deadline,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-deadline,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-deadline {
  color: #ffe196 !important;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .guestbook-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .guestbook-form,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .guestbook-form {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 238, 198, .32);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(16px);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-form legend,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-form legend,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-form legend,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .guestbook-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .guestbook-form label,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .guestbook-form label {
  color: #ffffff;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-form label > span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-form label > span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-form label > span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-form label small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-form label small,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-form label small {
  color: #f7eedf;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .consent-option,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .consent-option,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .consent-option {
  color: #f7eedf !important;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .attendance-options span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .attendance-options span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .attendance-options span {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 238, 198, .32);
  color: #ffffff;
  font-weight: 600;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .attendance-options input:checked + span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .attendance-options input:checked + span,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .attendance-options input:checked + span {
  border-color: #ffe196;
  background: rgba(255, 225, 150, .28);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 225, 150, .25);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-form select,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-form select,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-form select,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .rsvp-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .rsvp-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .rsvp-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .guestbook-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .guestbook-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .guestbook-form input,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .guestbook-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .guestbook-form textarea,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .guestbook-form textarea {
  border: 1px solid rgba(255, 238, 198, .35);
  background: rgba(255, 255, 255, .94);
  color: #1e1e1e;
  font-weight: 500;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memories-copy > p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memories-copy > p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memories-copy > p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .guestbook-card > p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .guestbook-card > p,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .guestbook-card > p {
  color: #f7eedf !important;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-message-cloud blockquote,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-message-cloud blockquote,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-message-cloud blockquote {
  border-left-color: #ffe196;
  color: #ffffff;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-message-cloud cite,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-message-cloud cite,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-message-cloud cite {
  color: #ffe196;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-card,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-card,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-card {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 238, 198, .3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-card figcaption,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-card figcaption,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-card figcaption {
  color: #f7eedf;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .memory-card figcaption strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .memory-card figcaption strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .memory-card figcaption strong {
  color: #ffffff;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .gallery-empty,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .gallery-empty,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .gallery-empty {
  border: 1px solid rgba(255, 238, 198, .3);
  background: rgba(255, 255, 255, .1);
  color: #f7eedf;
  backdrop-filter: blur(12px);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .gallery-empty strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .gallery-empty strong,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .gallery-empty strong {
  color: #ffffff;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .gallery-empty a,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .gallery-empty a,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .gallery-empty a {
  border: 1px solid rgba(255, 238, 198, .35);
  background: rgba(255, 255, 255, .15);
  color: #ffe196;
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .calendar-primary-button,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .calendar-primary-button,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .calendar-primary-button {
  background: linear-gradient(135deg, #f0ca7d, #c69443);
  border: 1px solid rgba(255, 240, 205, .5);
  color: #241406;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .share-button,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .share-button,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .share-button {
  background: linear-gradient(135deg, #f0ca7d, #c69443);
  border: 1px solid rgba(255, 240, 205, .5);
  color: #241406 !important;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] #rsvpSubmitButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] #rsvpSubmitButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] #rsvpSubmitButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] #memoryUploadButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] #memoryUploadButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] #memoryUploadButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] #guestbookSubmitButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] #guestbookSubmitButton,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] #guestbookSubmitButton {
  background: linear-gradient(135deg, #f0ca7d, #c69443);
  color: #241406;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] #venueMapLink,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] #venueMapLink,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] #venueMapLink {
  color: #ffe196;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .invitation-closing h2,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .invitation-closing h2,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .invitation-closing h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .audio-toggle,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .audio-toggle,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .audio-toggle {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 238, 198, .4);
  color: #ffffff;
  backdrop-filter: blur(12px);
}

html[data-invitation-layout="atelier-demo"][data-invitation-tone="emerald"] .back-to-top,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="blue"] .back-to-top,
html[data-invitation-layout="atelier-demo"][data-invitation-tone="plum"] .back-to-top {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 238, 198, .4);
  color: #ffe196;
  backdrop-filter: blur(12px);
}

@media (max-width: 720px) {
  html[data-invitation-slug="homepage-sample"] .opening-card {
    width: min(76vw, 340px);
    padding-inline: 20px;
  }
}

.invitation-closing { display: grid; justify-items: center; gap: 24px; padding: clamp(100px, 16vw, 190px) 24px; background: var(--cream); text-align: center; }
.invitation-closing h2 { max-width: 900px; }
.share-button { background: transparent; color: var(--wine); border: 1px solid rgba(75,37,45,.22); }
.audio-toggle { position: fixed; right: max(18px, env(safe-area-inset-right, 18px)); bottom: max(18px, env(safe-area-inset-bottom, 18px)); z-index: 20; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 0 18px; background: var(--wine-dark); color: white; font-size: .72rem; font-weight: 700; box-shadow: 0 12px 36px rgba(36,18,20,.25); cursor: pointer; touch-action: manipulation; }
.audio-toggle[hidden] { display: none; }
/* Package and host availability must win over themed grid/flex layouts. */
html body [hidden] { display: none !important; }
.invitation-closing-section { display: grid; place-items: center; text-align: center; }
html[data-invitation-slug="gamze-mert-can"] .audio-toggle { display: none; }
html[data-invitation-slug="homepage-sample"] .audio-toggle { display: none; }
.back-to-top { position: fixed; right: max(18px, env(safe-area-inset-right, 18px)); bottom: calc(max(18px, env(safe-area-inset-bottom, 18px)) + 54px); z-index: 19; width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: grid; place-items: center; transform: translateY(12px); opacity: 0; visibility: hidden; pointer-events: none; border: 1px solid rgba(169,132,69,.34); border-radius: 50%; background: rgba(255,252,248,.9); color: var(--invitation-page-accent); font-family: "Cormorant Garamond", serif; font-size: 1.5rem; line-height: 1; box-shadow: 0 12px 30px rgba(70,54,42,.16); cursor: pointer; touch-action: manipulation; backdrop-filter: blur(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
.back-to-top.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
  .scratch-card { width: min(500px, 100%); }
  .scratch-celebration { inset-inline: 0; }
  .countdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 8px; }
  .date-reveal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; padding: 0; }
  .countdown-heart { aspect-ratio: 704 / 628; }
  .heart-counter { inset: 14% 14% 11%; }
  .date-reveal-heart .heart-counter { inset: 15% 11% 10%; }
  .date-reveal-grid strong { font-size: clamp(1.45rem, 8vw, 2.35rem); }
  .date-reveal-grid .date-reveal-month { font-size: clamp(.92rem, 4.6vw, 1.35rem); }
  .countdown-summary-grid { gap: 6px; }
  .back-to-top { right: max(14px, env(safe-area-inset-right, 14px)); bottom: calc(max(14px, env(safe-area-inset-bottom, 14px)) + 52px); width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .venue-card, .rsvp-section, .memories-section { grid-template-columns: 1fr; }
  .venue-card { align-items: start; }
  .venue-actions { width: 100%; grid-template-columns: 1fr; }
  .schedule-list article { grid-template-columns: 82px 1fr; gap: 16px; }
  .attendance-options, .rsvp-grid { grid-template-columns: 1fr; }
  .share-sheet { padding: 26px 16px max(18px, env(safe-area-inset-bottom, 18px)); }
  .story-share-option { grid-template-columns: 92px 1fr; gap: 12px; padding: 12px; }
  .story-share-option > img { width: 92px; }
}

@media (max-width: 420px) {
  .story-share-copy strong { font-size: 1.35rem; }
  .story-share-copy p { font-size: .72rem; }
  .story-share-steps { grid-column: 1 / -1; }
  .story-share-option > img { grid-row: 1; }
}

@media (min-width: 721px) {
  .share-panel { place-items: center; }
  .share-sheet { border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}