:root {
  --paper: #f8f6f1;
  --ink: #30372f;
  --muted: #7d8177;
  --line: #e2e3d9;
  --green: #51664b;
  --soft: #eaf0e3;
  --coral: #bd6551;
  --font: 'Be Vietnam Pro', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --hand: 'Patrick Hand', cursive
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 28px
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 13px/1.7 var(--font)
}

body:has(dialog[open]) {
  overflow: hidden
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation
}

button {
  cursor: pointer
}

a {
  color: inherit;
  text-decoration: none
}

button:disabled {
  cursor: wait;
  opacity: .55
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px
}

h1,
h2,
h3,
p {
  margin: 0
}

h1,
h2,
h3 {
  line-height: 1.25
}

img {
  display: block;
  max-width: 100%
}

[hidden] {
  display: none !important
}

.wrap {
  max-width: 1216px;
  width: calc(100% - 96px);
  margin-inline: auto
}

.eyebrow {
  font-size: 9px;
  letter-spacing: 1.9px;
  font-weight: 600
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  min-height: 43px;
  padding: 11px 19px;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
  transition: background .2s, transform .2s
}

.button:hover {
  transform: translateY(-2px)
}

.button-ink {
  background: var(--ink);
  color: var(--paper)
}

.button-ink:hover {
  background: var(--green)
}

.button-outline {
  border-color: var(--line);
  background: transparent
}

.button-outline:hover {
  background: var(--soft)
}

.full-width {
  width: 100%
}

em {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--green)
}

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 12px;
  background: var(--paper);
  z-index: 100;
  transform: translateY(-150%)
}

.skip:focus {
  transform: none
}

.studio-header {
  height: 88px;
  padding: 0 48px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  margin: auto
}

.logo {
  font-family: var(--serif);
  font-size: 25px;
  letter-spacing: -1px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  font-weight: 600
}

.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 37px;
  height: 42px;
  border-radius: 17px 17px 7px 7px;
  background: var(--green);
  font-family: var(--serif);
  font-size: 29px;
  font-style: italic;
  color: #fff7e7;
  letter-spacing: -2px;
  padding-right: 3px
}

.logo-dot {
  font: 11px var(--font);
  align-self: flex-start;
  margin-top: 6px;
  color: var(--coral)
}

.studio-header nav {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 11px
}

.nav-button {
  background: none;
  border: 0;
  padding: 12px 0;
  font-size: 11px
}

.studio-header nav a:hover,
.nav-button:hover {
  color: var(--coral)
}

.studio-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
  min-height: 560px;
  padding-block: 65px 76px
}

.hero-text .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px
}

.hero-text .eyebrow span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral)
}

.hero-text h1 {
  font-size: clamp(38px, 4.45vw, 60px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -2.8px;
  margin: 23px 0
}

.hero-text h1 em {
  display: inline-block;
  position: relative
}

.hero-text h1 em:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 9px;
  border-bottom: 2px solid #b9c69e;
  border-radius: 50%;
  transform: rotate(-2deg)
}

.hero-description {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.95
}

.hero-button {
  margin-top: 28px;
  min-height: 47px;
  padding-inline: 22px
}

.hero-footnote {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 25px;
  color: var(--muted);
  font-size: 9px
}

.mini-swatches {
  display: flex
}

.mini-swatches i {
  width: 22px;
  height: 22px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: #cbb0a6
}

.mini-swatches i+i {
  margin-left: -6px;
  background: #a6b4a0
}

.mini-swatches i:last-child {
  background: #c8ba92
}

.hero-cards {
  position: relative;
  min-width: 0;
  height: 415px;
  isolation: isolate
}

.hero-cards:before {
  content: '';
  position: absolute;
  inset: 5% 2%;
  background: #eeeede;
  border-radius: 50%;
  z-index: -1
}

.hero-sample {
  width: 235px;
  height: 315px;
  position: absolute;
  box-shadow: 0 16px 30px #343a2e1a;
  border: 7px solid #fffdf5;
  text-align: center;
  padding: 26px 18px
}

.hero-sample>span,
.hero-sample small {
  font-size: 6px;
  letter-spacing: 1.9px
}

.sample-party {
  left: 12px;
  top: 35px;
  transform: rotate(-11deg);
  background: #f0c9c0;
  color: #944d3b
}

.sample-party h2 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.03;
  margin: 13px 0 10px
}

.sample-party p {
  font: 19px var(--hand)
}

.party-doodle {
  position: absolute;
  right: 16px;
  top: 36px;
  font-size: 26px
}

.sample-candles {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 16px auto 12px
}

.sample-candles i {
  width: 8px;
  height: 29px;
  background: repeating-linear-gradient(35deg, #aa6d50 0 4px, #ffe4b2 4px 8px);
  position: relative
}

.sample-candles i:before {
  content: '';
  position: absolute;
  top: -10px;
  left: 2px;
  width: 5px;
  height: 8px;
  background: #be8a3c;
  border-radius: 50% 50% 20% 50%;
  transform: rotate(15deg)
}

.sample-wedding {
  right: 8px;
  top: 54px;
  background: #f6f4e8;
  color: #536345;
  transform: rotate(9deg)
}

.sample-arch {
  border: 1px solid #a2ad8d;
  border-radius: 80px 80px 0 0;
  width: 138px;
  height: 148px;
  margin: 17px auto 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font: 44px var(--serif);
  background: linear-gradient(160deg, #e4e7d4, #f8f4e9)
}

.sample-arch i {
  font-size: 27px;
  color: #91a078
}

.sample-wedding h2 {
  font: 25px var(--serif)
}

.sample-wedding p {
  font: 14px var(--hand);
  margin: 6px 0 13px
}

.hero-note {
  position: absolute;
  right: 30px;
  top: 0;
  font: 20px var(--hand);
  color: var(--muted);
  transform: rotate(7deg)
}

.hero-stamp {
  position: absolute;
  right: 2px;
  bottom: 19px;
  display: grid;
  place-content: center;
  width: 87px;
  height: 87px;
  border-radius: 50%;
  border: 1px dashed #748466;
  outline: 5px solid #e5ead8;
  background: #e5ead8;
  text-align: center;
  color: #59694b;
  font-size: 10px;
  line-height: 1.5;
  transform: rotate(13deg)
}

.hero-stamp b {
  font: 24px var(--serif)
}

.hero-caption {
  position: absolute;
  bottom: 4px;
  left: 25px;
  font: 18px var(--hand);
  transform: rotate(-5deg);
  color: var(--muted)
}

.promise-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 18px 24px;
  background: #eaeee0;
  border-block: 1px solid #e0e5d6;
  font-size: 9px;
  letter-spacing: 1.6px;
  overflow: hidden;
  white-space: nowrap
}

.promise-strip i {
  font-style: normal;
  color: #87976a;
  font-size: 17px
}

.library {
  padding-block: 65px 70px
}

.section-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
  margin-bottom: 30px
}

.section-top h2,
.how-it-works h2 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -1.2px;
  margin-top: 14px
}

.section-top>p {
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted)
}

.library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line)
}

.category-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.category-tabs button {
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 9px 15px;
  background: transparent;
  font-size: 10px;
  white-space: nowrap
}

.category-tabs button[aria-pressed=true] {
  background: var(--ink);
  color: var(--paper)
}

.category-tabs button:not([aria-pressed=true]):hover {
  background: #e9eddf
}

.search {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #eeeee6;
  border-radius: 6px;
  padding: 7px 12px;
  max-width: 230px
}

.search>span {
  font-size: 23px
}

.search input {
  width: 175px;
  background: transparent;
  border: 0;
  font-size: 10px;
  min-width: 0;
  padding: 5px 0
}

.search input:focus {
  outline: none
}

.search:focus-within {
  outline: 2px solid var(--green)
}

.results-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 23px 0;
  font-size: 10px;
  color: var(--muted)
}

.results-row>span>span {
  font-size: 20px;
  margin-left: 5px
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 22px
}

.template-card {
  min-width: 0
}

.template-preview {
  position: relative;
  padding: 20px;
  background: #eaeae2;
  aspect-ratio: 4/4.8;
  border-radius: 7px;
  overflow: hidden
}

.template-preview .mini-card {
  width: 100%;
  height: 100%;
  transition: transform .25s
}

.template-card:hover .mini-card {
  transform: translateY(-3px) rotate(-1deg)
}

.template-preview>.template-use {
  position: absolute;
  inset: auto 12px 12px;
  opacity: 0;
  transform: translateY(10px);
  transition: .2s
}

.template-card:hover .template-use,
.template-card:focus-within .template-use {
  opacity: 1;
  transform: none
}

.template-card-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding-top: 13px
}

.template-card-info h3 {
  font-size: 12px;
  font-weight: 600
}

.template-card-info p {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px
}

.template-card-info>button {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent
}

.template-card-info>button:hover {
  background: var(--ink);
  color: white
}

.template-card-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 1;
  padding: 3px 7px;
  background: #fffdf2e6;
  border-radius: 4px;
  font-size: 8px;
  color: #596150
}

.mini-card {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  color: var(--card-ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 15px;
  border: 1px solid #24282410;
  box-shadow: 0 7px 14px #27332a0c
}

.mini-card .mini-eyebrow {
  font-size: 5px;
  letter-spacing: 1.8px;
  max-width: 90%;
  line-height: 1.8
}

.mini-card h4 {
  font: 27px/1.05 var(--serif);
  margin: 16px 0 8px;
  letter-spacing: -1px;
  max-width: 100%;
  overflow-wrap: break-word
}

.mini-card .mini-name {
  font-size: 8px;
  line-height: 1.7;
  max-width: 95%
}

.mini-card .mini-date {
  font-size: 6px;
  letter-spacing: 1.6px;
  margin-top: 16px
}

.mini-card .mini-sign {
  font: 13px var(--hand);
  margin-top: 10px
}

.mini-card.mini-party h4 {
  font: 800 36px/.95 var(--font);
  letter-spacing: -2px;
  text-transform: uppercase;
  transform: rotate(-5deg);
  color: var(--card-accent)
}

.mini-party:before,
.mini-party:after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--card-accent);
  border-radius: 50%
}

.mini-party:before {
  top: 20px;
  right: -8px
}

.mini-party:after {
  bottom: 18px;
  left: -10px
}

.mini-party .mini-eyebrow {
  transform: rotate(5deg)
}

.mini-arch:before {
  content: '';
  position: absolute;
  inset: 20px 17px 16px;
  border: 1px solid var(--card-accent);
  border-radius: 90px 90px 0 0;
  opacity: .5
}

.mini-arch h4 {
  font-size: 35px;
  margin: 30px 0 12px
}

.mini-editorial {
  align-items: flex-start;
  text-align: left;
  padding: 18px
}

.mini-editorial .mini-eyebrow {
  border-bottom: 1px solid var(--card-accent);
  padding-bottom: 10px;
  width: 100%;
  max-width: 100%
}

.mini-editorial h4 {
  font-size: 31px;
  line-height: 1.1;
  margin: 18px 0
}

.mini-editorial .mini-sign {
  border-top: 1px solid var(--card-accent);
  padding-top: 10px;
  width: 100%;
  margin-top: auto
}

.mini-letter {
  background-image: repeating-linear-gradient(transparent 0 21px, #8b866614 21px 22px);
  align-items: flex-start;
  text-align: left
}

.mini-letter h4 {
  font: 35px/1.1 var(--hand);
  color: var(--card-accent);
  transform: rotate(-5deg)
}

.mini-letter .mini-sign {
  align-self: flex-end;
  transform: rotate(-8deg)
}

.mini-scrapbook {
  transform: rotate(-3deg);
  border: 7px solid #fffdf6;
  padding: 15px 8px
}

.mini-scrapbook:before {
  content: '';
  position: absolute;
  width: 62px;
  height: 20px;
  top: -8px;
  left: calc(50% - 31px);
  background: #d6bd8280;
  transform: rotate(-7deg)
}

.mini-scrapbook h4 {
  font: 32px var(--hand);
  color: var(--card-accent)
}

.mini-scrapbook .mini-name {
  padding: 10px 4px;
  border-top: 1px dashed var(--card-accent);
  border-bottom: 1px dashed var(--card-accent)
}

.mini-floral:before,
.mini-floral:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: .3;
  background: radial-gradient(ellipse at 50% 25%, var(--card-accent) 0 20%, transparent 21%), radial-gradient(ellipse at 25% 60%, var(--card-accent) 0 20%, transparent 21%), radial-gradient(ellipse at 75% 60%, var(--card-accent) 0 20%, transparent 21%)
}

.mini-floral:before {
  top: -20px;
  left: -30px;
  transform: rotate(-25deg)
}

.mini-floral:after {
  bottom: -30px;
  right: -30px;
  transform: rotate(145deg)
}

.mini-floral h4 {
  font-size: 31px;
  position: relative
}

.empty-state {
  padding: 55px 20px;
  text-align: center;
  color: var(--muted)
}

.how-it-works {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  padding-block: 55px 70px
}

.how-it-works h2 {
  line-height: 1.5
}

.how-it-works ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px
}

.how-it-works li {
  display: flex;
  align-items: flex-start;
  gap: 18px
}

.how-it-works li>span {
  border: 1px solid #d6ddc9;
  min-width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 14px var(--serif);
  color: var(--green)
}

.how-it-works h3 {
  font-size: 13px;
  margin: 2px 0 6px
}

.how-it-works p:not(.eyebrow) {
  font-size: 11px;
  color: var(--muted)
}

.studio-footer {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 25px;
  font-size: 9px;
  color: var(--muted)
}

.studio-footer .logo {
  color: var(--ink);
  font-size: 22px
}

.dashboard {
  padding-block: 50px;
  min-height: 50vh
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px
}

.saved-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8
}

.saved-card-preview {
  height: 290px;
  display: flex;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #efeee8
}

.saved-card-art {
  height: 100%;
  aspect-ratio: 8 / 11;
  overflow: hidden;
  pointer-events: none;
  background: #fffdf8;
  box-shadow: 0 5px 18px #30392e17
}

.saved-card-art:has(.wd-cover) { aspect-ratio: 4 / 5 }
.saved-card-art { container-type: inline-size }
.saved-card-art>.design-swatch,
.saved-card-art>.october-swatch {
  width: 300px;
  height: 412.5px !important;
  min-height: 0 !important;
  transform: scale(calc(100cqw / 300px));
  transform-origin: top left
}

.saved-card-placeholder {
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  color: var(--green);
  background: #f8f4e9;
  font-family: 'Playfair Display', Georgia, serif
}

.saved-card-placeholder span { font-size: 12px }
.saved-card-placeholder b { font-size: 23px; font-weight: 400 }

.saved-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px
}

.saved-card-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px
}

.saved-card-occasion {
  border: 1px solid #d7ded2;
  border-radius: 5px;
  padding: 4px 8px;
  color: var(--green);
  font-size: 10px;
  font-weight: 600
}

.saved-card-body>h3 {
  font-size: 17px;
  line-height: 1.45;
  margin: 14px 0 5px;
  overflow-wrap: anywhere
}

.saved-card-template {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere
}

.saved-card-details {
  width: 100%;
  margin: 16px 0 0;
  font-size: 11px;
  line-height: 1.65
}

.saved-card-details:empty { display: none }
.saved-card-details>div { display: flex; gap: 10px; margin-bottom: 5px }
.saved-card-details dt { flex: 0 0 91px; color: var(--muted) }
.saved-card-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.saved-card-updated { font-size: 10px; color: var(--muted); margin: 12px 0 0 }

.saved-card .saved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px
}

.saved-card .button {
  font-size: 10px;
  padding: 8px 12px;
  min-height: 36px
}

.card-status {
  font-size: 9px;
  border-radius: 12px;
  padding: 4px 9px;
  background: #edece5;
  display: inline-block
}

.card-status.published {
  background: var(--soft);
  color: var(--green)
}

.saved-card .delete-card {
  border: 0;
  background: transparent;
  color: #a65c4c;
  font-size: 10px;
  margin-top: 15px
}

dialog::backdrop {
  background: #222b24a6;
  backdrop-filter: blur(6px)
}

.modal {
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  width: min(470px, calc(100% - 28px));
  max-height: calc(100dvh - 30px);
  overflow: auto
}

.modal h2 {
  font: 29px/1.3 var(--serif);
  margin: 20px 0 12px;
  letter-spacing: -.7px
}

.modal>p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px
}

.close-button {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 0;
  background: transparent;
  width: 35px;
  height: 35px;
  font-size: 28px;
  color: var(--muted)
}

label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  font-weight: 600
}

label small {
  font-size: 9px;
  font-weight: 400;
  color: var(--muted)
}

input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]),
textarea,
select {
  width: 100%;
  border: 1px solid #d9decf;
  border-radius: 6px;
  background: #fffdf8;
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1.6;
  min-width: 0
}

textarea {
  resize: vertical
}

.auth-modal form {
  display: grid;
  gap: 17px;
  margin-top: 23px
}

.form-status {
  font-size: 11px;
  white-space: pre-line
}

.form-status:empty {
  display: none
}

.form-status.error {
  color: #a54538
}

.auth-links {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  margin-top: 20px
}

.auth-links button {
  border: 0;
  background: none;
  font-size: 11px;
  color: var(--green)
}

.small-modal .button {
  margin-top: 20px
}

.share-modal {
  text-align: center;
  width: min(900px, calc(100% - 28px))
}

.share-modal .eyebrow {
  margin-top: 12px
}

.share-modal label {
  text-align: left
}

.share-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px
}

#share-status {
  margin: 15px 0 0;
  font-size: 11px
}

.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 15px);
  background: var(--ink);
  color: #fff9ed;
  font-size: 12px;
  padding: 13px 22px;
  border-radius: 8px;
  box-shadow: 0 5px 22px #30372f20;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  width: max-content;
  max-width: calc(100% - 30px);
  text-align: center;
  pointer-events: none
}

.toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0)
}

.editor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden
}

.editor[open] {
  display: flex;
  flex-direction: column
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 77px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  flex-shrink: 0
}

.editor-back {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  font-size: 12px;
  padding: 9px
}

.editor-header h2 {
  font-size: 13px;
  max-width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.editor-header p {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px
}

.editor-actions {
  display: flex;
  gap: 9px
}

.editor-actions .button {
  min-height: 39px;
  padding: 10px 14px;
  font-size: 10px
}

.editor-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  min-height: 0;
  flex: 1
}

.editor-sidebar {
  overflow-y: auto;
  background: #fffdf8;
  border-right: 1px solid var(--line);
  padding: 0 24px 35px;
  overscroll-behavior: contain
}

.editor-tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fffdf8;
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 21px
}

.editor-tabs button {
  flex: 1;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 10px;
  padding: 18px 0 13px
}

.editor-tabs button[aria-pressed=true] {
  border-bottom-color: var(--green);
  color: var(--green);
  font-weight: 600
}

#editor-form section {
  display: grid;
  gap: 19px
}

.panel-intro {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.check-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 400
}

.check-label input {
  accent-color: var(--green);
  width: 16px;
  height: 16px
}

.color-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.color-fields label {
  font-size: 10px
}

.color-fields input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  padding: 3px;
  cursor: pointer
}

.field-heading {
  font-size: 11px;
  font-weight: 600
}

.palette-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.palette-presets button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent
}

.palette-presets i {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid #00000010
}

.palette-presets i+i {
  margin-left: -5px
}

input[type=range] {
  width: 100%;
  accent-color: var(--green)
}

.text-button {
  border: 0;
  background: none;
  color: var(--green);
  font-size: 11px;
  text-align: left;
  padding: 0
}

.editor-canvas {
  padding: 20px 28px 18px;
  background-color: #eaece4;
  background-image: radial-gradient(#bcc3b4 0.6px, transparent .6px);
  background-size: 16px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  align-items: center
}

.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 18px
}

.preview-toolbar>div {
  display: flex;
  border: 1px solid #d1d7c8;
  border-radius: 7px;
  padding: 3px;
  background: #f7f8f1
}

.preview-toolbar button {
  font-size: 9px;
  border: 0;
  padding: 6px 10px;
  background: transparent;
  border-radius: 4px
}

.preview-toolbar button[aria-pressed=true] {
  background: var(--green);
  color: white
}

.preview-frame-wrap {
  width: 390px;
  max-width: 100%;
  flex: 1;
  min-height: 400px;
  box-shadow: 0 12px 32px #27332a16;
  border-radius: 18px;
  border: 7px solid #fffdf8;
  background: white;
  overflow: hidden;
  transition: width .25s
}

.preview-frame-wrap.desktop {
  width: 100%;
  border-radius: 8px
}

#editor-preview {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

.preview-note {
  font-size: 9px;
  color: var(--muted);
  margin-top: 15px;
  text-align: center
}

.upload-area {
  position: relative;
  text-align: center;
  align-items: center;
  padding: 24px 15px;
  border: 1px dashed #acb99b;
  border-radius: 10px;
  background: #f3f6ed;
  cursor: pointer
}

.upload-area input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer
}

.upload-symbol {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  background: #e6eddc;
  font-size: 26px;
  color: var(--green)
}

.upload-area strong {
  font-size: 12px;
  margin-top: 2px
}

.upload-area>span:last-of-type,
.field-help {
  font-size: 9px;
  color: var(--muted);
  font-weight: 400
}

.photo-list {
  display: grid;
  gap: 14px
}

.photo-item {
  display: grid;
  grid-template-columns: 63px 1fr;
  gap: 12px;
  align-items: center;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line)
}

.photo-item img {
  width: 63px;
  height: 78px;
  object-fit: cover;
  border-radius: 5px
}

.photo-item input {
  padding: 7px !important;
  font-size: 10px !important
}

.photo-item-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px
}

.photo-item button {
  font-size: 9px;
  border: 0;
  background: transparent;
  color: var(--green);
  padding: 3px 0
}

.photo-item button[data-remove-photo] {
  color: #a45c4c
}

.music-upload input {
  font-size: 10px;
  max-width: 100%
}

#audio-info {
  font-size: 11px;
  overflow-wrap: anywhere
}

#audio-info button {
  margin-top: 10px;
  display: block
}

.preview-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper)
}

.preview-modal[open] {
  display: flex;
  flex-direction: column
}

.preview-modal iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block
}

.preview-close {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #d0d5c6;
  border-radius: 20px;
  background: #fffdf3ed;
  color: var(--ink);
  font-size: 11px
}

.public-card-page {
  background: var(--paper)
}

.public-state {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 35px
}

.public-state h1 {
  font: 32px var(--serif);
  margin: 24px 0 13px
}

.public-state p {
  color: var(--muted);
  font-size: 13px;
  max-width: 500px
}

.public-state a {
  margin-top: 22px
}

#public-frame {
  display: block;
  width: 100%;
  height: 100dvh;
  border: 0
}

@media(min-width:1600px) {
  .studio-hero {
    min-height: 640px
  }

  .hero-cards {
    transform: scale(1.1);
    transform-origin: center
  }

  .hero-text h1 {
    font-size: 63px
  }
}

@media(max-width:1150px) {
  .wrap {
    width: calc(100% - 64px)
  }

  .studio-header {
    padding-inline: 32px
  }

  .studio-hero {
    gap: 30px
  }

  .hero-cards {
    transform: scale(.9);
    transform-origin: right center
  }

  .hero-sample {
    width: 215px
  }

  .hero-text h1 {
    font-size: 47px
  }

  .category-tabs button {
    padding: 8px 10px
  }

  .search {
    max-width: 190px
  }

  .search input {
    width: 145px
  }

  .template-grid {
    gap: 25px 16px
  }

  .template-preview {
    padding: 15px
  }

  .mini-card h4 {
    font-size: 24px
  }

  .mini-party h4 {
    font-size: 31px !important
  }

  .mini-editorial h4 {
    font-size: 26px
  }

  .hero-description {
    font-size: 11px
  }

  .promise-strip {
    gap: 25px
  }

  .editor-layout {
    grid-template-columns: 305px 1fr
  }

  .editor-sidebar {
    padding-inline: 20px
  }
}

@media(max-width:900px) {
  .studio-hero {
    grid-template-columns: 1fr 1fr;
    padding-block: 50px;
    min-height: 510px;
    gap: 10px
  }

  .hero-text h1 {
    font-size: 41px;
    letter-spacing: -1.7px
  }

  .hero-cards {
    transform: scale(.8);
    width: 430px;
    max-width: 110%;
    transform-origin: right center;
    justify-self: end
  }

  .hero-sample {
    width: 215px
  }

  .hero-description br {
    display: none
  }

  .hero-description {
    max-width: 320px
  }

  .hero-text .eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px
  }

  .hero-footnote {
    font-size: 8px
  }

  .studio-header nav {
    gap: 18px
  }

  .library-toolbar {
    flex-wrap: wrap
  }

  .search {
    max-width: none;
    width: 100%
  }

  .search input {
    width: 100%
  }

  .template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .section-top h2,
  .how-it-works h2 {
    font-size: 29px
  }

  .section-top>p {
    font-size: 10px
  }

  .how-it-works {
    gap: 30px
  }

  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .editor-header {
    gap: 10px;
    padding: 12px 16px
  }

  .editor-header h2 {
    max-width: 180px
  }

  .editor-actions {
    gap: 6px
  }

  .editor-actions .button {
    padding: 9px 10px;
    font-size: 9px
  }

  .editor-layout {
    grid-template-columns: 285px 1fr
  }

  .editor-canvas {
    padding: 18px 16px
  }

  .preview-toolbar {
    flex-wrap: wrap;
    gap: 10px
  }

  .preview-frame-wrap {
    min-height: 370px
  }
}

@media(max-width:650px) {
  .wrap {
    width: calc(100% - 36px)
  }

  .studio-header {
    height: 73px;
    padding-inline: 18px;
    gap: 12px
  }

  .logo {
    font-size: 21px;
    gap: 7px
  }

  .logo-mark {
    width: 30px;
    height: 35px;
    font-size: 25px
  }

  .studio-header .nav-library {
    display: none
  }

  .studio-header nav {
    margin-left: auto
  }

  .studio-header #account-button {
    font-size: 9px;
    padding: 9px 11px;
    min-height: 38px;
    gap: 6px
  }

  .nav-button {
    font-size: 9px
  }

  .logo-dot {
    display: none
  }

  .studio-hero {
    grid-template-columns: 1fr;
    padding-block: 39px 25px;
    gap: 20px
  }

  .hero-text h1 {
    font-size: clamp(37px, 9.9vw, 58px);
    line-height: 1.22;
    margin: 21px 0
  }

  .hero-description {
    font-size: 12px;
    max-width: 350px
  }

  .hero-description br {
    display: initial
  }

  .hero-button {
    margin-top: 22px;
    font-size: 11px
  }

  .hero-footnote {
    font-size: 9px;
    margin-top: 19px
  }

  .hero-cards {
    height: 365px;
    width: min(430px, 100%);
    max-width: 100%;
    transform: none;
    justify-self: center
  }

  .hero-sample {
    width: 53%;
    height: 280px;
    padding: 22px 12px
  }

  .sample-party {
    left: 8px;
    top: 31px
  }

  .sample-wedding {
    right: 6px;
    top: 42px
  }

  .sample-party h2 {
    font-size: 42px
  }

  .sample-party p {
    font-size: 17px
  }

  .sample-arch {
    height: 122px;
    width: 115px;
    font-size: 37px;
    margin: 14px auto
  }

  .sample-wedding h2 {
    font-size: 21px
  }

  .sample-wedding p {
    font-size: 13px
  }

  .hero-note {
    font-size: 18px;
    top: 2px;
    right: 12px
  }

  .hero-stamp {
    width: 72px;
    height: 72px;
    right: 7px;
    bottom: 10px;
    font-size: 8px
  }

  .hero-stamp b {
    font-size: 20px
  }

  .hero-caption {
    font-size: 16px;
    left: 4px;
    bottom: 1px
  }

  .promise-strip {
    justify-content: flex-start;
    gap: 22px;
    padding: 16px 18px;
    font-size: 8px
  }

  .library {
    padding-block: 45px
  }

  .section-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 23px
  }

  .section-top h2,
  .how-it-works h2 {
    font-size: 29px;
    line-height: 1.4;
    letter-spacing: -.8px
  }

  .section-top>p br {
    display: none
  }

  .category-tabs {
    gap: 5px
  }

  .category-tabs button {
    font-size: 9px;
    padding: 8px 12px;
    border-color: var(--line)
  }

  .library-toolbar {
    gap: 15px;
    padding-bottom: 17px
  }

  .results-row {
    margin: 18px 0;
    font-size: 9px
  }

  .results-row>span {
    display: none
  }

  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 13px
  }

  .template-preview {
    padding: 13px;
    aspect-ratio: 4/5
  }

  .template-card-tag {
    font-size: 7px;
    padding: 3px 6px;
    left: 6px;
    top: 6px
  }

  .template-card-info h3 {
    font-size: 10px;
    line-height: 1.5
  }

  .template-card-info p {
    font-size: 8px
  }

  .template-card-info>button {
    width: 28px;
    height: 28px;
    flex-shrink: 0
  }

  .template-preview>.template-use {
    display: none
  }

  .mini-card {
    padding: 14px 10px
  }

  .mini-card h4 {
    font-size: 22px;
    letter-spacing: -.5px;
    margin: 13px 0 7px
  }

  .mini-card .mini-eyebrow {
    font-size: 4px;
    letter-spacing: 1.1px
  }

  .mini-card .mini-name {
    font-size: 6px
  }

  .mini-card .mini-date {
    font-size: 5px;
    letter-spacing: 1px;
    margin-top: 11px
  }

  .mini-card .mini-sign {
    font-size: 11px
  }

  .mini-party h4 {
    font-size: 26px !important;
    letter-spacing: -1px !important
  }

  .mini-editorial {
    padding: 12px
  }

  .mini-editorial h4 {
    font-size: 23px
  }

  .mini-letter h4,
  .mini-scrapbook h4 {
    font-size: 26px
  }

  .mini-scrapbook {
    border-width: 5px;
    padding-inline: 4px
  }

  .mini-arch:before {
    inset: 12px 10px
  }

  .how-it-works {
    grid-template-columns: 1fr;
    gap: 29px;
    padding-block: 40px 50px
  }

  .how-it-works h2 {
    margin-top: 10px
  }

  .how-it-works h3 {
    font-size: 12px
  }

  .how-it-works p:not(.eyebrow) {
    font-size: 10px
  }

  .studio-footer {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 8px;
    padding-block: 23px
  }

  .studio-footer>span {
    order: 3;
    width: 100%
  }

  .cards-grid {
    grid-template-columns: 1fr
  }

  .modal {
    padding: 30px 23px
  }

  .modal h2 {
    font-size: 26px
  }

  .editor-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 11px 14px
  }

  .editor-back {
    padding: 6px;
    font-size: 11px
  }

  .editor-header>div:first-of-type {
    flex: 1;
    text-align: right
  }

  .editor-header h2 {
    max-width: 230px;
    margin-left: auto;
    font-size: 12px
  }

  .editor-actions {
    width: 100%;
    justify-content: flex-end
  }

  .editor-actions .button {
    flex: 1;
    font-size: 10px;
    min-height: 37px
  }

  .editor-layout {
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0
  }

  .editor-canvas {
    order: 0;
    min-height: 340px;
    height: 360px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 12px 18px
  }

  .preview-toolbar {
    margin-bottom: 10px;
    font-size: 9px
  }

  .preview-frame-wrap {
    width: 330px;
    min-height: 250px;
    border-width: 4px;
    border-radius: 10px
  }

  .preview-note {
    font-size: 8px;
    margin-top: 8px
  }

  .editor-sidebar {
    order: 1;
    overflow: visible;
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 0 20px 35px
  }

  .editor-tabs {
    position: static;
    margin-bottom: 17px
  }

  #editor-form section {
    gap: 17px
  }

  .editor-tabs button {
    padding-top: 17px;
    font-size: 11px
  }

  .form-row {
    gap: 15px
  }

  .editor-sidebar input,
  .editor-sidebar textarea,
  .editor-sidebar select,
  .auth-modal input {
    font-size: 16px !important
  }

  .editor-sidebar label {
    font-size: 12px
  }

  .photo-item input {
    font-size: 14px !important
  }

  .public-state h1 {
    font-size: 28px
  }

  .toast {
    font-size: 11px;
    bottom: 15px
  }
}

@media(max-width:360px) {
  .studio-header {
    gap: 7px
  }

  .studio-header nav {
    display: none
  }

  .hero-sample {
    height: 260px
  }

  .hero-cards {
    height: 345px
  }

  .sample-party h2 {
    font-size: 36px
  }

  .sample-party p {
    font-size: 15px
  }

  .sample-arch {
    width: 97px;
    height: 110px
  }

  .sample-wedding h2 {
    font-size: 18px
  }

  .sample-wedding p {
    font-size: 11px
  }

  .hero-caption {
    font-size: 14px
  }

  .template-preview {
    padding: 10px
  }

  .mini-card h4 {
    font-size: 20px
  }

  .mini-party h4 {
    font-size: 24px !important
  }

  .mini-card .mini-sign {
    font-size: 10px
  }

  .category-tabs button {
    padding: 7px 10px
  }

  .editor-header h2 {
    max-width: 190px
  }

  .share-actions .button {
    padding: 10px 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important
  }
}

.replace-photo {
  position: relative;
  cursor: pointer !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--green);
  display: inline-block !important;
  padding: 4px 0
}

.replace-photo input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  opacity: 0;
  overflow: hidden
}

.replace-photo:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 3px
}

.design-label {
  display: inline-block;
  font-size: 8px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid #b5c3a7;
  margin-bottom: 6px;
  padding-bottom: 2px
}

.design-swatch {
  background: var(--swatch-bg);
  color: var(--swatch-ink);
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 6px 18px #25332916;
  position: relative;
  padding: 12px;
  font-size: 6px;
  line-height: 1.4;
  container-type: inline-size
}

.swatch-title {
  display: block;
  font: 500 23px/1.08 var(--serif);
  letter-spacing: -.6px;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1
}

/* Dinner catalog miniature mirrors the full invitation's sections. */
.design-swatch.swatch-dinner {
  display: grid;
  grid-template-rows: minmax(0, 2.3fr) minmax(0, .85fr) minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, .55fr);
  gap: 3%;
  padding: 8% 7% 5%;
  text-align: center
}

.swatch-dinner-bunting {
  position: absolute;
  inset: 0 0 auto;
  height: 4%;
  background: repeating-linear-gradient(90deg, var(--swatch-accent) 0 8%, transparent 8% 16%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 30%, 84% 100%, 76% 30%, 68% 100%, 60% 30%, 52% 100%, 44% 30%, 36% 100%, 28% 30%, 20% 100%, 12% 30%, 4% 100%, 0 30%)
}

.swatch-dinner-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5%;
  min-height: 0;
  min-width: 0
}

.swatch-dinner-hero .swatch-title {
  flex-shrink: 0;
  font-size: clamp(12px, 7cqw, 25px);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance
}

.swatch-dinner-hero .swatch-name {
  margin: 0;
  font-size: clamp(4px, 2.4cqw, 8px)
}

.swatch-dinner-hero .swatch-dinner-cover {
  flex: 1;
  min-height: 0;
  width: 78%;
  border: 1px solid var(--swatch-accent)
}

.swatch-dinner-invite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4%;
  width: 86%;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--swatch-accent) 55%, transparent);
  padding: 3% 5%;
  overflow: hidden
}

.swatch-dinner-invite b,
.swatch-dinner-menu>b {
  font: 500 clamp(6px, 3.1cqw, 11px)/1.3 var(--serif);
  color: var(--swatch-accent);
  text-wrap: balance
}

.swatch-dinner-invite span {
  font-size: clamp(4px, 2.1cqw, 7px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.swatch-dinner-album {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 5%;
  min-height: 0
}

.swatch-dinner-album .swatch-photo {
  min-height: 0;
  border: 1px solid var(--swatch-accent)
}

.swatch-dinner-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  gap: 7%;
  padding-block: 1%
}

.swatch-dinner-menu>b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.swatch-dinner-menu>div {
  display: flex;
  align-items: baseline;
  gap: 4%;
  font-size: clamp(4px, 2.3cqw, 8px);
  min-width: 0
}

.swatch-dinner-menu>div>span {
  max-width: 66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.swatch-dinner-menu i {
  flex: 1;
  border-bottom: 1px dotted var(--swatch-accent)
}

.swatch-dinner-menu small {
  font-size: .8em;
  color: var(--swatch-accent);
  white-space: nowrap;
  max-width: 23%;
  overflow: hidden
}

.swatch-dinner-ending {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6%;
  border-top: 1px solid color-mix(in srgb, var(--swatch-accent) 40%, transparent);
  padding-top: 3%;
  min-height: 0
}

.swatch-dinner-ending>span {
  color: var(--swatch-accent);
  font-size: clamp(6px, 3cqw, 11px);
  line-height: 1
}

.swatch-dinner-ending>b {
  font: 500 clamp(6px, 3.7cqw, 13px)/1.2 var(--serif);
  text-wrap: balance
}

.design-swatch.swatch-dinner>.swatch-ornament,
.design-swatch.swatch-dinner>.swatch-hand-note {
  display: none
}

.swatch-name {
  display: block;
  font-size: 6px;
  line-height: 1.4;
  margin-top: 9px;
  overflow-wrap: anywhere
}

.swatch-photo {
  display: block;
  position: relative;
  background: color-mix(in srgb, var(--swatch-accent) 25%, var(--swatch-bg));
  overflow: hidden;
  min-height: 35px
}

.swatch-photo:before {
  content: '';
  position: absolute;
  border: 1px solid var(--swatch-accent);
  width: 65%;
  height: 90%;
  left: 18%;
  bottom: -20%;
  border-radius: 50% 50% 0 0;
  transform: rotate(-12deg);
  opacity: .5
}

.swatch-photo:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--swatch-accent);
  opacity: .13;
  width: 80%;
  height: 90%;
  top: -45%;
  right: -35%
}

.swatch-lines {
  display: block;
  height: 35px;
  background: repeating-linear-gradient(transparent 0 4px, color-mix(in srgb, var(--swatch-ink) 30%, transparent) 4px 5px);
  opacity: .7;
  min-width: 0
}

.swatch-scrap-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
  padding: 20px 0 15px;
  min-height: 42%
}

.swatch-scrap-hero .swatch-title {
  font: 600 19px/1.2 var(--font)
}

.swatch-scrap-hero>.swatch-photo {
  border: 5px solid #fffdf5;
  transform: rotate(6deg);
  align-self: center;
  height: 100px
}

.swatch-band {
  height: 17px;
  margin: 10px -12px;
  background: color-mix(in srgb, var(--swatch-accent) 17%, var(--swatch-bg))
}

.swatch-cards {
  display: flex;
  gap: 6px;
  margin: 15px 0
}

.swatch-cards i {
  flex: 1;
  height: 55px;
  border: 1px solid var(--swatch-accent);
  opacity: .45;
  border-radius: 4px
}

.swatch-ticket {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  align-items: center;
  padding: 10px 0
}

.swatch-ticket>i:last-child {
  height: 70px;
  border: 1px solid var(--swatch-accent);
  border-top: 10px solid var(--swatch-accent);
  border-radius: 5px
}

.swatch-film {
  display: flex;
  gap: 7px;
  margin-top: 15px
}

.swatch-film>.swatch-photo {
  flex: 1;
  height: 50px;
  border: 3px solid #fffdf5;
  transform: rotate(-4deg)
}

.swatch-film>.swatch-photo:nth-child(2) {
  transform: rotate(5deg)
}

.swatch-masthead {
  padding: 6px 0;
  border-block: 1px solid currentColor;
  letter-spacing: 1.1px;
  font-size: 5px;
  margin-bottom: 14px
}

.swatch-editorial>.swatch-title {
  font-size: 29px;
  letter-spacing: -1px
}

.swatch-editorial>.swatch-cover {
  height: 90px;
  margin-top: 15px
}

.swatch-editorial>.swatch-name {
  padding-block: 3px 12px;
  border-bottom: 1px solid currentColor
}

.swatch-mag-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  margin-top: 18px
}

.swatch-mag-grid>.swatch-photo:first-child {
  grid-row: span 2
}

.swatch-mag-grid>.swatch-photo {
  min-height: 37px
}

.swatch-columns {
  display: flex;
  gap: 10px;
  margin-top: 20px
}

.swatch-columns .swatch-lines {
  flex: 1;
  height: 60px
}

.swatch-letter {
  padding: 18px;
  background: color-mix(in srgb, var(--swatch-accent) 8%, var(--swatch-bg))
}

.swatch-postmark {
  border: 1px dashed var(--swatch-accent);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0 0 13px auto;
  font-size: 4px;
  transform: rotate(15deg)
}

.swatch-letter>.swatch-title {
  font: 29px/1.1 var(--hand);
  transform: rotate(-3deg)
}

.swatch-letter-body {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px
}

.swatch-letter-body aside {
  padding-top: 20px
}

.swatch-letter-body aside .swatch-photo {
  height: 40px;
  transform: rotate(-8deg);
  border: 3px solid #fffdf5
}

.swatch-letter-body aside .swatch-lines {
  height: 22px;
  margin-top: 15px
}

.swatch-letter-body article {
  padding: 15px 12px;
  background: var(--swatch-bg);
  border: 1px solid color-mix(in srgb, var(--swatch-accent) 22%, transparent);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--swatch-accent) 18%, var(--swatch-bg))
}

.swatch-letter-body article .swatch-lines {
  height: 30px;
  margin-bottom: 12px
}

.swatch-letter-body em {
  font: 12px var(--hand);
  color: var(--swatch-accent);
  display: block;
  text-align: right
}

.swatch-notes {
  display: grid;
  gap: 9px;
  margin: 20px 0 0 30px
}

.swatch-notes .swatch-lines {
  height: 18px
}

.swatch-letter .swatch-film {
  background: var(--swatch-ink);
  padding: 5px
}

.swatch-letter .swatch-film>.swatch-photo {
  border: 0;
  transform: none
}

.swatch-poster-kicker {
  border-bottom: 2px solid var(--swatch-accent);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 1px;
  padding-bottom: 8px;
  margin-bottom: 20px
}

.swatch-party>.swatch-title {
  font: 800 32px/.98 var(--font);
  text-transform: uppercase;
  color: var(--swatch-accent);
  letter-spacing: -1.5px
}

.swatch-party>.swatch-name {
  font-weight: 700;
  margin-bottom: 15px
}

.swatch-pass {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 15px;
  background: var(--swatch-accent);
  color: var(--swatch-bg);
  padding: 12px;
  border-radius: 4px
}

.swatch-pass .swatch-lines {
  background: repeating-linear-gradient(transparent 0 4px, var(--swatch-bg) 4px 5px);
  opacity: .6
}

.swatch-pass>b {
  font: 800 23px var(--font);
  border-left: 1px dashed currentColor;
  padding-left: 5px
}

.swatch-mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5px;
  margin-top: 15px
}

.swatch-mosaic>.swatch-photo:first-child {
  grid-row: span 2
}

.swatch-mosaic>.swatch-photo {
  min-height: 35px
}

.swatch-manifesto {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  margin-top: 20px
}

.swatch-manifesto .swatch-lines {
  height: 16px
}

.swatch-manifesto>b {
  font: 800 15px var(--font)
}

.swatch-arch {
  padding: 0
}

.swatch-cinema-cover {
  position: relative;
  isolation: isolate;
  min-height: 220px;
  height: 58%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px 17px;
  color: var(--swatch-bg)
}

.swatch-cinema-cover>.swatch-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--swatch-accent)
}

.swatch-cinema-cover:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--swatch-ink) 70%, transparent)
}

.swatch-cinema-cover .swatch-title {
  font-size: 28px;
  line-height: 1.25
}

.swatch-cinema-cover>.swatch-photo:before {
  border-color: var(--swatch-bg)
}

.swatch-cinema-cover>span {
  position: absolute;
  bottom: 15px;
  font-size: 4px;
  letter-spacing: 1px
}

.swatch-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 0
}

.swatch-chapter>.swatch-photo {
  height: 70px
}

.swatch-chapter>.swatch-lines {
  margin-inline: 8px;
  height: 30px
}

.swatch-exhibit-cover {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 13px;
  padding-top: 17px
}

.swatch-exhibit-cover>.swatch-title {
  grid-column: 1/-1;
  font-size: 28px;
  margin-bottom: 5px
}

.swatch-exhibit-cover>.swatch-photo {
  height: 110px;
  border-radius: 70px 70px 0 0;
  margin-left: 8px
}

.swatch-exhibit-cover>.swatch-name {
  align-self: end;
  border-bottom: 1px solid var(--swatch-accent);
  padding-bottom: 15px
}

.swatch-exhibit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: end;
  padding: 20px 6px 0
}

.swatch-exhibit>.swatch-photo {
  height: 75px;
  border: 5px solid var(--swatch-bg);
  outline: 1px solid color-mix(in srgb, var(--swatch-accent) 25%, transparent)
}

.swatch-exhibit>.swatch-lines {
  height: 17px
}

.swatch-dedication {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  color: var(--swatch-accent);
  font-size: 35px
}

.swatch-dedication>.swatch-lines {
  flex: 1;
  height: 30px
}

@media(max-width:650px) {
  .design-label {
    font-size: 7px
  }

  .design-swatch {
    padding: 8px
  }

  .swatch-title {
    font-size: 18px
  }

  .swatch-scrap-hero {
    gap: 7px;
    padding-top: 17px;
    min-height: 40%
  }

  .swatch-scrap-hero .swatch-title {
    font-size: 13px
  }

  .swatch-scrap-hero>.swatch-photo {
    height: 70px;
    border-width: 3px
  }

  .swatch-cards {
    gap: 4px;
    margin: 10px 0
  }

  .swatch-cards i {
    height: 35px
  }

  .swatch-ticket {
    gap: 8px
  }

  .swatch-ticket>i:last-child {
    height: 45px;
    border-top-width: 6px
  }

  .swatch-film>.swatch-photo {
    height: 35px
  }

  .swatch-editorial>.swatch-title {
    font-size: 22px
  }

  .swatch-masthead {
    font-size: 3px;
    letter-spacing: .6px;
    margin-bottom: 10px
  }

  .swatch-editorial>.swatch-cover {
    height: 70px;
    margin-top: 10px
  }

  .swatch-mag-grid {
    margin-top: 10px;
    gap: 5px
  }

  .swatch-mag-grid>.swatch-photo {
    min-height: 27px
  }

  .swatch-columns {
    gap: 5px;
    margin-top: 12px
  }

  .swatch-letter {
    padding: 12px
  }

  .swatch-letter>.swatch-title {
    font-size: 23px
  }

  .swatch-postmark {
    width: 28px;
    height: 28px;
    font-size: 3px;
    margin-bottom: 10px
  }

  .swatch-letter-body {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    margin-top: 12px
  }

  .swatch-letter-body article {
    padding: 10px 8px
  }

  .swatch-letter-body article .swatch-lines {
    height: 25px
  }

  .swatch-notes {
    margin-top: 14px;
    margin-left: 20px
  }

  .swatch-poster-kicker {
    font-size: 4px;
    margin-bottom: 15px
  }

  .swatch-party>.swatch-title {
    font-size: 24px;
    letter-spacing: -.7px
  }

  .swatch-pass {
    padding: 8px;
    gap: 8px;
    grid-template-columns: 1fr 22px
  }

  .swatch-pass>b {
    font-size: 17px
  }

  .swatch-mosaic {
    margin-top: 10px
  }

  .swatch-mosaic>.swatch-photo {
    min-height: 27px
  }

  .swatch-manifesto {
    gap: 7px;
    margin-top: 12px
  }

  .swatch-arch {
    padding: 0
  }

  .swatch-cinema-cover {
    padding: 25px 10px;
    min-height: 180px;
    height: 58%
  }

  .swatch-cinema-cover .swatch-title {
    font-size: 21px
  }

  .swatch-chapter {
    gap: 5px
  }

  .swatch-chapter>.swatch-photo {
    height: 50px
  }

  .swatch-chapter>.swatch-lines {
    height: 20px
  }

  .swatch-exhibit-cover {
    gap: 8px;
    padding-top: 15px
  }

  .swatch-exhibit-cover>.swatch-title {
    font-size: 21px
  }

  .swatch-exhibit-cover>.swatch-photo {
    height: 75px
  }

  .swatch-exhibit {
    padding-top: 15px;
    gap: 14px
  }

  .swatch-exhibit>.swatch-photo {
    height: 55px;
    border-width: 3px
  }

  .swatch-dedication {
    margin-top: 15px;
    font-size: 25px
  }

  .swatch-name {
    font-size: 5px
  }
}

/* Small illustrations preview the occasion as well as its page composition. */
.design-swatch {
  position: relative
}

.design-swatch .doodle,
.thanh-ha-swatch .doodle {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.swatch-title .type-accent {
  font-family: var(--hand);
  font-weight: 400;
  text-transform: none;
  color: var(--swatch-accent)
}

.swatch-ornament {
  position: absolute;
  right: 8px;
  top: 6px;
  color: var(--swatch-accent);
  transform: rotate(13deg)
}

.swatch-ornament .doodle {
  width: 27px;
  height: 27px
}

.swatch-hand-note {
  display: block;
  font: 11px/1.2 var(--hand);
  color: var(--swatch-accent);
  transform: rotate(-4deg);
  margin-top: 14px;
  text-align: center
}

.swatch-editorial .swatch-ornament {
  top: 30%;
  right: 17px;
  background: var(--swatch-bg);
  border-radius: 50%;
  padding: 4px
}

.swatch-letter .swatch-ornament {
  top: 20px;
  left: 20px;
  right: auto
}

.swatch-party .swatch-ornament {
  top: 3px;
  background: var(--swatch-bg)
}

.swatch-arch .swatch-ornament {
  left: 15px;
  top: 20px;
  right: auto;
  color: var(--swatch-bg)
}

.swatch-arch .swatch-title .type-accent {
  color: inherit
}

.swatch-floral .swatch-ornament {
  top: 30%;
  right: 15px
}

.thanh-ha-swatch {
  --swatch-accent: #315b45;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 19px 14px;
  background: #f8f5eb;
  color: #263d34;
  box-shadow: 0 6px 18px #25332916;
  overflow: hidden
}

.swatch-original-label {
  display: block;
  border-bottom: 1px solid #315b452e;
  padding-bottom: 12px;
  font-size: 5px;
  letter-spacing: 1.2px;
  font-weight: 700
}

.thanh-ha-swatch-hero {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 32px 0 17px;
  min-height: 40%
}

.thanh-ha-swatch-hero h4 {
  font: 800 19px/1.35 var(--font);
  letter-spacing: -.6px;
  margin: 0;
  overflow-wrap: anywhere
}

.thanh-ha-swatch-hero h4 em {
  font: 24px/1.1 var(--hand);
  color: #d55f45
}

.thanh-ha-swatch-hero>div {
  position: relative;
  transform: rotate(5deg);
  background: #fffdf5;
  padding: 5px 5px 17px;
  box-shadow: 2px 5px 12px #315b4520
}

.thanh-ha-swatch-hero>div:before {
  content: '';
  position: absolute;
  top: -6px;
  left: 35%;
  width: 35px;
  height: 12px;
  background: #daca9999;
  transform: rotate(-10deg)
}

.thanh-ha-swatch-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 35%
}

.thanh-ha-swatch-hero>div>span {
  position: absolute;
  top: -17px;
  right: -5px;
  background: #e5ebdc;
  border: 1px solid #aabd9f;
  padding: 5px 7px;
  font-size: 4px;
  transform: rotate(10deg);
  border-radius: 3px;
  text-align: center
}

.thanh-ha-swatch-hero>div>span b {
  font: 700 15px var(--font)
}

.thanh-ha-swatch-hero .doodle {
  position: absolute;
  bottom: -10px;
  left: -15px;
  width: 26px;
  height: 26px;
  color: #d55f45
}

.thanh-ha-swatch-note {
  display: block;
  font: 15px var(--hand);
  text-align: center;
  color: #315b45;
  transform: rotate(-4deg);
  padding: 8px 0 13px;
  border-bottom: 6px solid #e5ebdc
}

.thanh-ha-swatch .swatch-cards {
  margin-block: 22px;
  gap: 7px
}

.thanh-ha-swatch .swatch-cards i {
  position: relative;
  background: #f1f1e4;
  opacity: 1;
  border-color: #c9d2bf;
  height: 59px;
  padding: 8px
}

.thanh-ha-swatch .swatch-cards i:before {
  content: '01';
  font: 19px var(--hand);
  color: #315b45
}

.thanh-ha-swatch .swatch-cards i:nth-child(2):before {
  content: '02'
}

.thanh-ha-swatch .swatch-cards i:nth-child(3):before {
  content: '03'
}

.thanh-ha-swatch .swatch-cards i:after {
  content: '';
  display: block;
  margin-top: 5px;
  border-block: 1px solid #315b4540;
  height: 6px
}

.thanh-ha-swatch-album {
  display: flex;
  gap: 8px;
  padding: 8px 2px 0
}

.thanh-ha-swatch-album img {
  width: calc((100% - 16px)/3);
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid #fffdf5;
  border-bottom-width: 13px;
  transform: rotate(-6deg);
  box-shadow: 1px 2px 6px #263d3420
}

.thanh-ha-swatch-album img:nth-child(2) {
  transform: rotate(5deg)
}

.thanh-ha-swatch>.swatch-flower {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 14px;
  right: 18px;
  color: #d55f45;
  transform: rotate(20deg)
}

@media(max-width:650px) {
  .swatch-ornament .doodle {
    width: 18px;
    height: 18px
  }

  .swatch-hand-note {
    font-size: 8px;
    margin-top: 9px
  }

  .swatch-letter .swatch-ornament {
    left: 10px;
    top: 15px
  }

  .thanh-ha-swatch {
    padding: 11px 8px
  }

  .swatch-original-label {
    font-size: 3px;
    letter-spacing: .5px;
    padding-bottom: 8px
  }

  .thanh-ha-swatch-hero {
    gap: 6px;
    padding-top: 25px;
    min-height: 39%
  }

  .thanh-ha-swatch-hero h4 {
    font-size: 12px;
    letter-spacing: -.3px
  }

  .thanh-ha-swatch-hero h4 em {
    font-size: 16px
  }

  .thanh-ha-swatch-hero>div {
    padding: 3px 3px 11px
  }

  .thanh-ha-swatch-hero>div>span {
    font-size: 3px;
    padding: 3px 5px;
    top: -12px;
    right: -3px
  }

  .thanh-ha-swatch-hero>div>span b {
    font-size: 10px
  }

  .thanh-ha-swatch-hero .doodle {
    width: 18px;
    height: 18px;
    left: -9px
  }

  .thanh-ha-swatch-hero>div:before {
    width: 23px;
    height: 8px;
    top: -4px
  }

  .thanh-ha-swatch-note {
    font-size: 10px;
    padding: 6px 0 9px
  }

  .thanh-ha-swatch .swatch-cards {
    margin-block: 14px;
    gap: 4px
  }

  .thanh-ha-swatch .swatch-cards i {
    height: 38px;
    padding: 4px
  }

  .thanh-ha-swatch .swatch-cards i:before {
    font-size: 13px
  }

  .thanh-ha-swatch .swatch-cards i:after {
    margin-top: 3px;
    height: 4px
  }

  .thanh-ha-swatch-album {
    gap: 5px;
    padding-top: 4px
  }

  .thanh-ha-swatch-album img {
    width: calc((100% - 10px)/3);
    border-width: 3px;
    border-bottom-width: 8px
  }

  .thanh-ha-swatch>.swatch-flower {
    width: 22px;
    height: 22px;
    bottom: 10px;
    right: 13px
  }
}

/* A complete, scrollable sample is visible on the home page before template selection. */
.featured-template {
  padding-block: 15px 65px
}

.featured-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 26px
}

.featured-heading h2 {
  font: 500 clamp(30px, 4vw, 45px)/1.25 var(--serif);
  letter-spacing: -1px;
  margin: 13px 0
}

.featured-heading p:not(.eyebrow) {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9
}

.featured-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0
}

.featured-browser {
  border: 1px solid #d8dfce;
  border-radius: 15px;
  overflow: hidden;
  background: #f8f5eb;
  box-shadow: 0 18px 50px #293d3010
}

.featured-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #d8dfce;
  background: #ecf0e5;
  font-size: 8px;
  letter-spacing: 1.1px
}

.featured-browser-dots {
  display: flex;
  gap: 5px
}

.featured-browser-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d8a89a
}

.featured-browser-dots i:nth-child(2) {
  background: #d3c294
}

.featured-browser-dots i:nth-child(3) {
  background: #a5b89a
}

.featured-toolbar>div {
  display: flex;
  gap: 6px
}

.featured-toolbar button {
  font-size: 10px;
  letter-spacing: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 7px 11px;
  min-height: 34px
}

.featured-toolbar button:hover {
  border-color: #bac8ad;
  background: #f8f5eb
}

#featured-preview {
  display: block;
  width: 100%;
  height: 740px;
  height: min(740px, 85dvh);
  min-height: 480px;
  border: 0;
  background: #f8f5eb
}

.featured-caption {
  font-size: 10px;
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.8
}

#agenda-settings {
  display: grid;
  gap: 17px;
  min-width: 0
}

#agenda-items {
  display: grid;
  gap: 18px;
  min-width: 0
}

.agenda-item .form-row {
  grid-template-columns: 105px minmax(0, 1fr)
}

.agenda-item-actions {
  display: flex;
  gap: 8px
}

.agenda-item-actions button {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  padding: 8px 12px;
  font-size: 10px;
  min-height: 36px
}

.agenda-item-actions button:last-child {
  margin-left: auto;
  color: var(--coral)
}

.agenda-item-actions button:disabled {
  cursor: default;
  opacity: .35
}

@media(max-width:650px) {
  .featured-template {
    padding-block: 15px 35px
  }

  .featured-heading {
    display: block;
    margin-bottom: 20px
  }

  .featured-heading h2 {
    font-size: 31px
  }

  .featured-heading .eyebrow {
    font-size: 8px
  }

  .featured-actions {
    margin-top: 20px
  }

  .featured-actions .button {
    flex: 1
  }

  .featured-toolbar {
    padding: 8px 10px;
    gap: 8px
  }

  .featured-toolbar>span:nth-child(2) {
    display: none
  }

  .featured-toolbar button {
    font-size: 10px;
    padding: 6px 9px;
    min-height: 36px
  }

  #featured-preview {
    height: 620px;
    height: 80dvh;
    min-height: 450px
  }

  .featured-caption {
    font-size: 10px
  }

  .agenda-item .form-row {
    grid-template-columns: 100px minmax(0, 1fr)
  }

  .agenda-item-actions button {
    min-height: 40px;
    font-size: 11px
  }
}

/* Browse whole page templates before filling their content slots. */
.template-preview {
  aspect-ratio: 3/4.8;
  padding: 18px;
  cursor: default
}

.template-preview .mini-page {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: 0 6px 18px #25332916
}

.mini-page-bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 20%, transparent);
  font-size: 5px
}

.mini-page-bar b {
  font: 12px var(--serif)
}

.mini-page .mini-card {
  height: 44%;
  padding: 15px 14px;
  min-height: 0;
  border: 0;
  box-shadow: none;
  transform: none;
  background: var(--card-bg)
}

.mini-page .mini-card h4 {
  font-size: 23px !important;
  line-height: 1.1;
  margin: 15px 0 9px;
  letter-spacing: -.7px
}

.mini-page .mini-card .mini-eyebrow {
  font-size: 4px
}

.mini-page .mini-card .mini-name {
  font-size: 7px
}

.mini-page .mini-card .mini-date {
  font-size: 5px;
  margin-top: 12px
}

.mini-page-strip {
  padding: 8px;
  background: var(--card-accent);
  color: var(--card-bg);
  text-align: center;
  font-size: 4px;
  letter-spacing: 1.1px
}

.mini-page-story {
  padding: 15px 13px
}

.mini-page-story>b {
  display: block;
  font: 12px/1.2 var(--serif);
  max-width: 80%
}

.mini-page-story>div {
  display: flex;
  gap: 5px;
  margin-top: 9px
}

.mini-page-story i {
  height: 33px;
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
  background: color-mix(in srgb, var(--card-accent) 6%, var(--card-bg));
  border-radius: 3px
}

.mini-page-event {
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--card-accent) 9%, var(--card-bg));
  padding: 12px
}

.mini-page-event span {
  font: 11px/1.3 var(--serif);
  flex: 1
}

.mini-page-event i {
  width: 38%;
  height: 48px;
  background: var(--card-bg);
  border: 1px solid var(--card-accent);
  border-top: 8px solid var(--card-accent);
  border-radius: 4px
}

.mini-page-album {
  display: flex;
  gap: 7px;
  padding: 14px 12px
}

.mini-page-album i {
  flex: 1;
  height: 36px;
  background: color-mix(in srgb, var(--card-accent) 22%, var(--card-bg));
  border: 3px solid #fffdf6;
  transform: rotate(-4deg)
}

.mini-page-album i:nth-child(2) {
  transform: rotate(5deg)
}

.mini-page-ending {
  font: 11px/1.4 var(--serif);
  text-align: center;
  padding: 0 10px 14px
}

.template-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px
}

.template-actions .button {
  flex: 1;
  padding: 9px;
  font-size: 10px;
  min-height: 38px
}

.sample-dialog {
  position: fixed;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  background: var(--paper);
  color: var(--ink)
}

.sample-dialog[open] {
  display: flex;
  flex-direction: column
}

.sample-dialog>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 25px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0
}

.sample-dialog h2 {
  font: 26px var(--serif);
  margin: 5px 0
}

.sample-dialog header p:not(.eyebrow) {
  font-size: 10px;
  color: var(--muted)
}

.sample-dialog>header>div:last-child {
  display: flex;
  gap: 10px;
  flex-shrink: 0
}

.sample-dialog iframe {
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 0;
  background: var(--paper)
}

.sample-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 25px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0
}

.sample-device-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf8
}

.sample-device-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  white-space: nowrap
}

.sample-device-switch button[aria-pressed=true] {
  background: var(--green);
  color: #fff
}

.sample-device-switch svg {
  width: 18px;
  height: 18px
}

.sample-preview-toolbar>p {
  font-size: 10px;
  color: var(--muted)
}

.sample-preview-stage {
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  background: #e9e9e1
}

.sample-preview-viewport {
  position: relative;
  width: 390px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 8px 28px #27332a1a
}

.sample-preview-viewport[data-device=desktop] {
  width: 1280px;
  border-radius: 8px
}

.sample-preview-viewport iframe {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform-origin: top left
}

@media(max-width:650px) {
  .sample-preview-toolbar {padding: 8px 12px;justify-content: center}
  .sample-preview-toolbar>p {display: none}
  .sample-device-switch {width: 100%}
  .sample-device-switch button {flex: 1;min-height: 44px}
  .sample-preview-stage {padding: 10px}
  .preview-modal .sample-preview-toolbar {flex-wrap: wrap;justify-content: flex-end}
}

.content-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper)
}

.content-group>summary {
  padding: 15px 13px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  list-style-position: inside
}

.content-group[open]>summary {
  border-bottom: 1px solid var(--line);
  color: var(--green)
}

.content-group>div {
  display: grid;
  gap: 16px;
  padding: 18px 13px
}

.content-group textarea {
  resize: vertical
}

.moment-fields {
  border: 1px solid var(--line);
  padding: 13px 10px;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 13px
}

.moment-fields legend {
  font-size: 11px;
  padding: 0 5px;
  color: var(--green)
}

.section-jump {
  text-align: left;
  font-size: 10px
}

.editor-sidebar .content-group input,
.editor-sidebar .content-group textarea {
  width: 100%;
  min-width: 0
}

.editor-sidebar .content-group input[type=checkbox] {
  width: 16px
}

@media(max-width:650px) {
  .template-preview {
    aspect-ratio: 3/5;
    padding: 11px
  }

  .mini-page-bar {
    padding: 5px 7px
  }

  .mini-page .mini-card {
    padding: 10px 8px;
    height: 42%
  }

  .mini-page .mini-card h4 {
    font-size: 17px !important;
    letter-spacing: -.3px;
    margin-top: 11px
  }

  .mini-page .mini-card .mini-name {
    font-size: 5px
  }

  .mini-page .mini-card .mini-eyebrow {
    font-size: 3px;
    letter-spacing: .5px
  }

  .mini-page .mini-card .mini-date {
    font-size: 4px;
    margin-top: 7px
  }

  .mini-page-strip {
    font-size: 3px;
    padding: 6px;
    letter-spacing: .3px
  }

  .mini-page-story {
    padding: 10px 8px
  }

  .mini-page-story>b {
    font-size: 9px
  }

  .mini-page-story i {
    height: 22px
  }

  .mini-page-event {
    padding: 8px;
    gap: 6px
  }

  .mini-page-event span {
    font-size: 8px
  }

  .mini-page-event i {
    height: 32px;
    border-top-width: 6px
  }

  .mini-page-album {
    padding: 9px 8px;
    gap: 4px
  }

  .mini-page-album i {
    height: 27px
  }

  .mini-page-ending {
    font-size: 8px
  }

  .template-actions {
    gap: 5px
  }

  .template-actions .button {
    font-size: 9px;
    padding: 8px 5px;
    min-height: 38px
  }

  .sample-dialog>header {
    padding: 12px 15px;
    flex-wrap: wrap;
    gap: 12px
  }

  .sample-dialog h2 {
    font-size: 23px
  }

  .sample-dialog header p:not(.eyebrow) {
    max-width: 300px
  }

  .sample-dialog>header>div:last-child {
    width: 100%
  }

  .sample-dialog>header .button {
    flex: 1;
    font-size: 11px
  }

  .content-group>summary {
    font-size: 13px;
    padding: 16px 12px
  }

  .content-group>div {
    padding: 16px 12px
  }

  .content-group .section-jump {
    font-size: 12px;
    min-height: 40px
  }
}

/* The library uses the same supporting colors as the full invitation. */
.design-swatch .swatch-title .type-accent,
.design-swatch .swatch-ornament {
  color: var(--warm);
}

.design-swatch .swatch-hand-note {
  color: var(--cool);
}

.design-swatch .swatch-photo {
  background: var(--cool-paper);
}

.design-swatch .swatch-photo::before {
  border-color: var(--on-cool);
}

.design-swatch .swatch-photo::after {
  background: var(--on-cool);
}

.design-swatch :is(.swatch-film, .swatch-mag-grid, .swatch-mosaic) .swatch-photo:nth-child(2) {
  background: var(--warm-paper);
}

.design-swatch :is(.swatch-film, .swatch-mag-grid, .swatch-mosaic) .swatch-photo:nth-child(3) {
  background: var(--blue-paper);
}

.design-swatch .swatch-scrap-hero>.swatch-photo {
  border-color: var(--gold-paper);
}

.design-swatch .swatch-band {
  background: var(--gold-paper);
}

.design-swatch .swatch-cards i {
  opacity: 1;
  background: var(--cool-wash);
  border-color: var(--cool);
}

.design-swatch .swatch-cards i:nth-child(2) {
  background: var(--gold-wash);
  border-color: var(--gold);
}

.design-swatch .swatch-cards i:nth-child(3) {
  background: var(--warm-wash);
  border-color: var(--warm);
}

.design-swatch .swatch-film>.swatch-photo {
  border-color: var(--gold-paper);
}

.design-swatch .swatch-postmark {
  color: var(--blue);
  border-color: currentColor;
}

.design-swatch .swatch-letter-body article {
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 3px 3px 0 var(--cool-wash);
}

.design-swatch .swatch-pass {
  background: var(--cool-paper);
  color: var(--on-cool);
}

.design-swatch .swatch-pass .swatch-lines {
  background: repeating-linear-gradient(transparent 0 4px, var(--on-cool) 4px 5px);
}

.design-swatch .swatch-pass>b {
  background: var(--gold-paper);
  color: var(--on-gold);
}

.design-swatch .swatch-manifesto {
  background: var(--blue-paper);
  color: var(--on-blue);
}

.design-swatch .swatch-chapter {
  background: var(--warm-wash);
}

.design-swatch .swatch-chapter:nth-child(3) {
  background: var(--cool-wash);
}

.design-swatch .swatch-chapter:nth-child(4) {
  background: var(--gold-wash);
}

.design-swatch .swatch-exhibit:nth-child(2)>.swatch-photo {
  border-color: var(--gold-paper);
  background: var(--warm-paper);
}

.design-swatch .swatch-exhibit:nth-child(3)>.swatch-photo {
  border-color: var(--warm-paper);
  background: var(--blue-paper);
}

.design-swatch .swatch-dedication {
  background: var(--cool-wash);
  color: var(--cool-ink);
}

.design-swatch .swatch-cinema-cover>.swatch-photo {
  background: var(--swatch-accent);
}

.design-swatch .swatch-cinema-cover .type-accent {
  color: inherit;
}

.swatch-arch .swatch-ornament {
  color: var(--gold-paper);
}

.account-control {
  position: relative;
  flex-shrink: 0;
  z-index: 25
}

.account-control.is-authenticated {
  margin-left: auto
}

.account-avatar,
.account-chevron {
  display: none
}

.is-authenticated .account-avatar {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  color: var(--paper);
  font-size: 12px
}

.is-authenticated .account-chevron {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: rotate .2s
}

.account-control.is-authenticated #account-button {
  background: #edf0e6;
  color: var(--ink);
  border: 1px solid #d9dfd1;
  padding: 6px 11px 6px 7px;
  gap: 9px;
  min-height: 43px
}

#account-label {
  display: block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

#account-button[aria-expanded="true"] .account-chevron {
  rotate: 180deg
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(265px, calc(100vw - 40px));
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 14px 40px #283a2526;
  text-align: left;
  color: var(--ink)
}

.account-menu-heading {
  padding: 12px 11px 15px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px
}

.account-menu-heading strong {
  font-size: 12px
}

.account-menu-heading p {
  font-size: 10px;
  color: #62695d;
  margin-top: 5px;
  overflow-wrap: anywhere
}

.account-menu>:is(button,a) {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 7px;
  width: 100%;
  padding: 11px;
  min-height: 44px;
  background: transparent;
  text-align: left;
  font-size: 12px
}

.account-menu>:is(button,a) svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0
}

.account-menu>:is(button,a):hover,
.account-menu>:is(button,a):focus-visible {
  background: var(--soft)
}

.account-menu>.account-sign-out {
  color: #b33535
}

.account-menu>.account-sign-out:hover,
.account-menu>.account-sign-out:focus-visible {
  background: #fcecec
}

@media(max-width:650px) {
  #account-label {
    max-width: 95px
  }

  .account-control.is-authenticated #account-button {
    font-size: 11px;
    gap: 6px
  }

  .studio-header:has(.account-control.is-authenticated) {
    column-gap: 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  .account-chevron {
    transition: none
  }
}

/* Shared contact footer for the template library and pricing page. */
.studio-footer {
  display: block;
  padding-block: 54px 24px;
  color: #62695d;
  font-size: 12px
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: 60px;
  padding-bottom: 42px
}

.studio-footer .logo {
  font-size: 29px;
  gap: 10px
}

.studio-footer .logo-mark {
  width: 38px;
  height: 43px;
  font-size: 29px
}

.footer-intro>p {
  font: 500 25px/1.55 var(--serif);
  color: var(--ink);
  margin: 23px 0 12px
}

.footer-intro>span {
  display: block;
  max-width: 260px;
  font-size: 11px;
  line-height: 1.9
}

.studio-footer h2 {
  font: 600 10px/1.7 var(--font);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 8px 0 23px
}

.footer-navigation {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.footer-navigation>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
  width: 100%;
  max-width: 210px;
  font-size: 11px
}

.footer-navigation>a>span {
  color: var(--green)
}

.studio-footer a:hover {
  color: var(--green)
}

.footer-contact {
  min-width: 0
}

.footer-contact address {
  font-style: normal;
  display: grid;
  gap: 19px
}

.footer-contact address>div {
  display: flex;
  align-items: flex-start;
  gap: 13px
}

.footer-contact address svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--green)
}

.footer-contact address p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink);
  overflow-wrap: anywhere
}

.footer-contact address p>span {
  display: block;
  font-size: 10px;
  color: #62695d;
  margin-bottom: 3px
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: 10px;
  line-height: 1.9
}

.footer-bottom>span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap
}

.footer-bottom svg {
  width: 14px;
  height: 14px;
  color: var(--coral)
}

@media(max-width:900px) {
  .footer-main {
    grid-template-columns: 1.2fr 1fr;
    gap: 32px
  }

  .footer-intro {
    grid-column: 1/-1
  }

  .footer-intro>span {
    max-width: none
  }

  .footer-intro>p {
    margin-top: 17px
  }

  .footer-bottom {
    align-items: flex-start
  }
}

@media(max-width:650px) {
  .studio-footer {
    padding-block: 38px 22px
  }

  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding-bottom: 30px
  }

  .footer-intro {
    grid-column: auto
  }

  .studio-footer .logo {
    font-size: 27px
  }

  .footer-intro>p {
    font-size: 24px
  }

  .studio-footer h2 {
    margin-bottom: 15px
  }

  .footer-navigation>a {
    max-width: 280px;
    min-height: 44px;
    font-size: 12px
  }

  .footer-contact address p {
    font-size: 13px
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    font-size: 10px
  }


}


/* Equal side columns keep the navigation centered independently of account name length. */
.studio-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)
}

.studio-header>.logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start
}

.studio-header>nav {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  justify-content: center;
  margin: 0;
  white-space: nowrap
}

.studio-header>.account-control,
.studio-header>.button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end
}

@media(max-width:900px) {
  .studio-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: auto;
    min-height: 88px;
    padding-block: 16px;
    row-gap: 12px
  }

  .studio-header>nav {
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%;
    gap: 24px
  }

  .studio-header>.account-control,
  .studio-header>.button {
    grid-column: 2
  }

  .studio-header .nav-library {
    display: inline
  }
}

/* Hẹn ngày chung đôi: preview the complete champagne invitation. */
.design-swatch.swatch-gatefold {
  display: grid;
  grid-template-rows: minmax(0, 2.3fr) minmax(0, .85fr) minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, .55fr);
  gap: 3%;
  padding: 6% 7% 5%;
  text-align: center
}

.swatch-gatefold-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4%;
  min-height: 0;
  min-width: 0;
  border-top: 1px solid var(--swatch-accent);
  padding-top: 4%
}

.swatch-gatefold-hero>span:first-child {
  font-size: clamp(7px, 3cqw, 12px);
  color: var(--swatch-accent)
}

.swatch-gatefold-hero .swatch-title {
  flex-shrink: 0;
  font-size: clamp(12px, 7cqw, 25px);
  line-height: 1.15;
  text-wrap: balance;
  color: var(--swatch-accent)
}

.swatch-gatefold-hero .swatch-name {
  margin: 0;
  font-size: clamp(4px, 2.4cqw, 8px)
}

.swatch-gatefold-hero .swatch-gatefold-cover {
  flex: 1;
  min-height: 0;
  width: 88%;
  border: 1px solid var(--swatch-accent)
}

.swatch-gatefold-invite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4%;
  width: 86%;
  justify-self: center;
  border: 1px solid var(--swatch-accent);
  padding: 3% 5%;
  overflow: hidden
}

.swatch-gatefold-invite b,
.swatch-gatefold-story>b {
  font: 500 clamp(6px, 3.1cqw, 11px)/1.3 var(--serif);
  color: var(--swatch-accent);
  text-wrap: balance
}

.swatch-gatefold-invite span {
  font-size: clamp(4px, 2.1cqw, 7px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.swatch-gatefold-album {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 5%;
  min-height: 0
}

.swatch-gatefold-album .swatch-photo {
  min-height: 0;
  border: 1px solid var(--swatch-accent)
}

.swatch-gatefold-story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  gap: 7%;
  overflow: hidden
}

.swatch-gatefold-story>div {
  display: flex;
  justify-content: space-between;
  gap: 4%;
  font-size: clamp(4px, 2.3cqw, 8px);
  border-top: 1px solid color-mix(in srgb, var(--swatch-accent) 30%, transparent);
  padding-top: 2%
}

.swatch-gatefold-story>div>* {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%
}

.swatch-gatefold-ending {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6%;
  border-top: 1px solid var(--swatch-accent);
  padding-top: 3%;
  min-height: 0
}

.swatch-gatefold-ending>span {
  color: var(--swatch-accent);
  font-size: clamp(6px, 3cqw, 11px);
  line-height: 1
}

.swatch-gatefold-ending>b {
  font: 500 clamp(6px, 3.7cqw, 13px)/1.2 var(--serif);
  text-wrap: balance
}

.design-swatch.swatch-gatefold>.swatch-ornament,
.design-swatch.swatch-gatefold>.swatch-hand-note {
  display: none
}

.gift-upload-preview {
  display: block;
  width: min(100%, 240px);
  height: auto;
  object-fit: contain;
  background: #fff;
  padding: 12px;
  border: 1px solid #dedbd3;
  margin: 16px auto
}

[data-gift-settings][hidden],
[data-gift-remove][hidden] {
  display: none
}

.photo-slot-title{font-size:14px;font-weight:600;margin:0 0 5px}
.photo-slot{align-items:start;padding:14px 8px;border:1px solid var(--line);border-radius:10px;background:#fffdf9}.photo-slot.is-selected{border:2px solid var(--green);background:#f0f3e9}.photo-slot-empty{display:grid;place-items:center;width:63px;height:78px;border:1px dashed #8b9b80;border-radius:6px;background:#edf0e6;color:var(--green);font:26px Georgia,serif}.photo-slot-status{display:block;font:10px/1.8 'Be Vietnam Pro',sans-serif;color:var(--muted)}
.photo-item>div{min-width:0}.photo-role{line-height:1.7;overflow-wrap:anywhere}
.photo-location-actions{display:flex;flex-wrap:wrap;gap:5px 12px;margin-bottom:10px}
.photo-item .photo-location-actions button{font-size:11px;color:var(--green)}
.photo-item-actions{flex-wrap:wrap;align-items:center}
.photo-position-guide{padding:14px;border:1px solid var(--line);border-radius:10px;margin-top:10px}
.photo-position-guide summary{font-size:12px;font-weight:600;cursor:pointer}
.photo-position-guide ol{list-style:none;padding:0;margin:12px 0;display:grid;gap:12px}
.photo-position-guide li{display:grid;gap:4px;font-size:11px;line-height:1.7}
.photo-position-guide li span{color:var(--muted)}
/* Garden miniature follows the cover, folded notes and letter in the full card. */
.design-swatch.swatch-accordion { display: grid; grid-template-rows: 2fr 1fr 1fr auto; gap: 5%; padding: 8%; text-align: center; }
.swatch-accordion-hero > span:first-child { font-size: 7px; letter-spacing: 2px; }
.swatch-accordion-hero .swatch-title { font: 28px/1.1 var(--hand); color: var(--swatch-accent); margin: 12px auto 6px; }
.swatch-accordion-hero .swatch-accordion-photo { display: block; width: 35%; height: 65px; margin: 12px auto 0; border: 5px solid #fffdf8; border-bottom-width: 12px; transform: rotate(-3deg); box-shadow: 0 4px 10px #60463218; }
.swatch-accordion .swatch-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #89775a26; }
.swatch-accordion .swatch-panels > div { min-width: 0; padding: 10px 7px; background: linear-gradient(90deg, #8060440c, #fff5, #80604408); }
.swatch-accordion .swatch-panels > div + div { border-left: 1px dashed #89775a40; }
.swatch-accordion .swatch-panels span { display: block; font: 20px var(--hand); color: var(--swatch-accent); }
.swatch-accordion .swatch-panels b { display: block; font: 12px/1.25 var(--hand); margin-block: 6px; overflow-wrap: anywhere; }
.swatch-accordion-letter { width: 85%; margin: auto; padding: 12px; background: #fff9; border: 1px solid #89775a26; text-align: left; }
.swatch-accordion-letter > b { font: 15px/1.2 var(--hand); color: var(--swatch-accent); }
.swatch-accordion-letter > em { display: block; font: 10px var(--hand); text-align: right; margin-top: 8px; }
.swatch-accordion .swatch-floral-footer { display: flex; justify-content: space-around; color: var(--swatch-accent); opacity: .65; }
.swatch-accordion .swatch-floral-footer svg { width: 24px; height: 24px; }
.design-swatch.swatch-accordion > .swatch-ornament,.design-swatch.swatch-accordion > .swatch-hand-note { display: none; }

/* Burgundy Bloom miniature. */
.design-swatch.swatch-wedding-burgundy{position:relative;display:grid;grid-template-columns:1fr 1.45fr .8fr;gap:3%;padding:8%;overflow:hidden;background:linear-gradient(135deg,#f7f0e9,#efe1d7);color:#432622}
.swatch-burgundy-art{position:absolute;inset:0;pointer-events:none}.swatch-burgundy-art i{position:absolute;display:block;background-repeat:no-repeat;background-position:center;background-size:contain}.swatch-burgundy-corner{width:62%;height:43%;left:-9%;top:-3%;background-image:url('/assets/wedding-assets-webp/red-white-flower-corner.webp')}.swatch-burgundy-branch{width:64%;height:40%;right:-20%;bottom:-5%;background-image:url('/assets/wedding-assets-webp/flower-branch.webp')}.swatch-burgundy-petals{width:36%;height:26%;right:-2%;top:25%;background-image:url('/assets/wedding-assets-webp/loose-red-petals.webp');opacity:.6}.swatch-burgundy-copy{position:relative;z-index:1;grid-column:2;align-self:center;text-align:center;padding-top:12%;font-size:7px;letter-spacing:1.6px}.swatch-burgundy-copy .swatch-title{display:block;font:italic 28px/1 var(--serif);letter-spacing:-1px;color:#8f1f1d;margin:14px auto 4px}.swatch-burgundy-copy>em{display:block;font:italic 16px var(--serif);color:#8f1f1d;margin:3px}.swatch-burgundy-copy .swatch-name{display:block;font:italic 18px/1.1 var(--serif);color:#8f1f1d}.swatch-burgundy-copy .swatch-burgundy-photo{display:block;width:42px;height:42px;margin:10px auto 5px;border-radius:50%;border:1px solid #8f1f1d;overflow:hidden}.swatch-burgundy-copy .swatch-burgundy-photo>img{width:100%;height:100%;object-fit:cover}.swatch-burgundy-copy>b{display:block;font:9px var(--serif);color:#8f1f1d;margin-top:7px}.swatch-burgundy-rsvp{position:relative;z-index:1;grid-column:3;align-self:center;display:grid;gap:5px;padding:15px 10px;background:#fffaf0e8;border:1px solid #8f1f1d66;text-align:center}.swatch-burgundy-rsvp>span{color:#8f1f1d;font-size:14px}.swatch-burgundy-rsvp>b{font:8px/1.25 var(--serif);letter-spacing:.4px}.swatch-burgundy-rsvp>i{height:1px;background:#8f1f1d44;margin:3px}.swatch-burgundy-rsvp>button{border:1px solid #8f1f1d;border-radius:20px;background:#8f1f1d;color:#fffaf0;font:7px var(--sans);padding:5px}.swatch-burgundy-rsvp>button+button{background:transparent;color:#8f1f1d}

.footer-policies{display:flex;flex-wrap:wrap;gap:12px 24px;padding:24px 0;border-top:1px solid var(--line);font-size:11px;line-height:1.8;grid-column:1/-1}.footer-policies a{color:var(--green);text-underline-offset:4px}.footer-policies a:hover{text-decoration:underline}.footer-policies a:first-child{font-weight:600}.auth-policy-note,.pricing-policy-note{font-size:11px;line-height:1.8;color:var(--muted);margin-top:18px}.auth-policy-note a,.pricing-policy-note a{text-decoration:underline;text-underline-offset:3px;color:var(--green)}

.studio-footer.site-footer{display:grid;grid-template-columns:1fr auto;gap:28px}.site-footer nav.footer-policies{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px 24px}@media(max-width:760px){.studio-footer.site-footer{grid-template-columns:1fr}}

/* Independent content accordions and per-image framing controls. */
.content-group>summary{cursor:pointer;min-height:44px;display:list-item;list-style-position:inside;padding-block:12px}
.content-group:not([open])>div{display:none}
.photo-slot-tools{grid-column:1/-1;min-width:0}
.photo-crop-controls{margin:0 0 12px}
.photo-item button.photo-crop-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;padding:11px 16px;border:1px solid var(--green);border-radius:8px;background:var(--green);color:#fffdf7;font-size:14px;font-weight:600;line-height:1.5;cursor:pointer}
.photo-item button.photo-crop-button:hover:enabled{background:var(--ink);border-color:var(--ink)}
.photo-item button.photo-crop-button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.photo-item button.photo-crop-button:disabled{opacity:.55;cursor:wait}
.photo-crop-button svg{width:20px;height:20px;flex-shrink:0}
.photo-crop-controls .field-help{margin:7px 0 0;font-size:11px;line-height:1.6;text-align:center}
.photo-slot-tools .photo-item-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.photo-item .photo-item-actions :is(.replace-photo,button){display:flex!important;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fffdf9;font-size:12px!important;line-height:1.5;text-align:center;cursor:pointer}
.photo-item .photo-item-actions .replace-photo{color:var(--green);margin:0}
.photo-item-actions .replace-photo:only-child{grid-column:1/-1}
.photo-item .photo-item-actions [data-remove-photo]{color:#a45c4c}
.photo-item .photo-item-actions :is(.replace-photo,button):hover{background:#f1f2e9}
.photo-crop-dialog{width:min(780px,calc(100vw - 24px));max-height:94dvh;overflow:auto;padding:24px;border:0;border-radius:18px;background:#faf8f1;color:#354536}
.photo-crop-dialog::backdrop{background:#17231dc9}.photo-crop-dialog header,.photo-crop-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.photo-crop-dialog h2{margin:0;font-size:25px}.photo-crop-dialog p{font-size:13px;line-height:1.6}.photo-crop-dialog header button{font-size:26px}.photo-crop-dialog button{cursor:pointer}.photo-crop-dialog label{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:13px}.photo-crop-dialog select{padding:8px;border:1px solid #c9cebf;border-radius:8px;background:white}.photo-crop-dialog footer{flex-wrap:wrap}.photo-crop-dialog footer button:not(.button){border:1px solid #c9cebf;border-radius:8px;background:white;padding:10px 14px}
.crop-stage{position:relative;margin:20px auto;overflow:hidden;width:100%;background:#20251f;user-select:none}.crop-stage>img{display:block;width:100%;height:auto;pointer-events:none}.crop-selection{position:absolute;border:2px solid white;box-shadow:0 0 0 2000px #0009;cursor:move;touch-action:none;box-sizing:border-box}.crop-selection:focus-visible{outline:3px solid #d9ee9d;outline-offset:-4px}.crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33%,#fff5 33%,#fff5 33.5%,transparent 33.5%,transparent 66%,#fff5 66%,#fff5 66.5%,transparent 66.5%),linear-gradient(to bottom,transparent 33%,#fff5 33%,#fff5 33.5%,transparent 33.5%,transparent 66%,#fff5 66%,#fff5 66.5%,transparent 66.5%)}.crop-selection .crop-resize{position:absolute;right:0;bottom:0;width:34px;height:34px;border:0;border-radius:8px 0 0 0;background:white;color:#263c2b;font-size:22px;cursor:nwse-resize;touch-action:none}.crop-status{min-height:22px}

/* Compact mobile editing: long titles and field rows get the space they need. */
.editor-sidebar,.editor-sidebar label,.editor-sidebar .form-row>*{min-width:0}
.editor-sidebar :is(input,textarea,select){max-width:100%;box-sizing:border-box}
.preview-toolbar>span{min-width:0;overflow-wrap:break-word;line-height:1.6}
.preview-toolbar>div{flex-shrink:0}
@media(max-width:650px){
 .editor-sidebar{padding-inline:16px}
 .editor-header{gap:8px 12px;padding:10px 14px}
 .editor-header>div:first-of-type{flex:1;min-width:0}
 .editor-header h2{max-width:none;white-space:normal;overflow:visible;font-size:11px;line-height:1.5;text-align:right}
 .editor-header p{font-size:9px;line-height:1.6;text-align:right}
 .editor-back{font-size:11px;min-height:44px;padding:6px}
 .editor-actions .button{min-height:44px;padding:8px;font-size:10px}
 .editor-canvas{padding-inline:12px}
 .preview-toolbar{align-items:flex-start;gap:8px;font-size:9px}
 .preview-toolbar>span{flex:1}
 .preview-toolbar>div{display:flex;gap:3px}
 .preview-toolbar button{font-size:9px;min-height:36px;padding:6px 8px}
 .preview-frame-wrap{max-width:100%}
 #editor-form section{gap:15px}
 .editor-sidebar label{font-size:11px;line-height:1.65}
 .editor-sidebar .panel-intro,.editor-sidebar .field-help{font-size:11px;line-height:1.75}
 .editor-sidebar .content-group>summary{font-size:11px;line-height:1.65;padding:12px}
 .editor-sidebar .content-group>div{padding:15px 12px;gap:14px}
 .editor-sidebar .form-row{grid-template-columns:minmax(0,1fr);gap:14px}
 .editor-sidebar .color-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
 .editor-tabs button{font-size:10px;min-height:44px}
 .editor-sidebar .section-jump{font-size:10px;line-height:1.6;min-height:40px;white-space:normal}
 /* Keep editable controls at 16px to prevent focus zoom on iOS. */
 .editor-sidebar :is(input,textarea,select){line-height:1.5;min-height:44px;padding:10px 11px}
 .editor-sidebar :is(input[type=checkbox],input[type=range],input[type=color],input[type=file]){min-height:initial;padding:0}
 .editor-sidebar input[type=color]{min-height:40px;width:100%}
 .editor-sidebar .photo-item input{font-size:16px!important}
 .editor-sidebar .check-label{align-items:flex-start}
 .editor-sidebar .check-label input{flex-shrink:0;margin-top:3px}
 .editor-sidebar .upload-area{padding:20px 12px}
 .editor-sidebar .upload-area>span:last-of-type{font-size:10px;line-height:1.7}
}
@media(max-width:650px){
 .editor-sidebar :is(input,textarea,select){font-weight:400;letter-spacing:normal}
 .editor-sidebar input[type=range]{margin-inline:0}
}

/* Centered website notifications and confirmations. */
.toast{top:50%;bottom:auto!important;left:50%;transform:translate(-50%,-40%);max-width:min(430px,calc(100% - 40px));padding:22px 28px;border:1px solid #64725c;background:#fffdf6;color:#354631;border-radius:18px;box-shadow:0 16px 60px #23311c30;font-size:13px;line-height:1.7}
.toast.visible{transform:translate(-50%,-50%)}
.studio-confirm{width:min(460px,calc(100vw - 32px));margin:auto;padding:32px;border:1px solid #d6dccb;border-radius:20px;background:#fffdf6;color:#303d2d;text-align:center;box-shadow:0 24px 80px #16221233}
.studio-confirm::backdrop{background:#1d2d244d;backdrop-filter:blur(4px)}.confirm-mark{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;margin:0 auto 15px;background:#e6eddd;color:#4c6641;font:italic 30px Georgia,serif}
.studio-confirm h2{font:500 27px/1.3 var(--serif,Georgia,serif);margin:12px 0}.studio-confirm #confirm-message{font-size:13px;line-height:1.9;margin:0}.confirm-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}.confirm-actions button{flex:1;min-width:150px}

/* QR designer: the same styles remain available for every occasion. */
.qr-designer{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:30px;margin:25px 0;text-align:left;align-items:start}
.qr-preview-panel{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.qr-preview-surface{width:100%;aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:grid;place-items:center}
.qr-preview-surface.is-transparent{background-color:#fff;background-image:conic-gradient(#e8e8e8 25%,transparent 0 50%,#e8e8e8 0 75%,transparent 0);background-size:20px 20px}
.qr-preview-surface img{display:block;width:100%;height:100%;object-fit:contain}
#qr-placeholder{padding:24px;color:var(--muted);font-size:12px;text-align:center}
.qr-export-info{font-size:10px;color:var(--muted);letter-spacing:.5px}
.qr-status{font-size:11px;line-height:1.65;text-align:center;min-height:36px}
.qr-status.is-ready{color:var(--green)}.qr-status.is-error{color:#9f3e35}
.qr-preview-panel>.button{width:100%;min-height:46px}
.qr-options{min-width:0}.qr-options fieldset{padding:0;margin:0;border:0;min-width:0}
.qr-options legend{font-size:13px;font-weight:600;margin-bottom:3px}
.qr-hint{font-size:10px;line-height:1.7;color:var(--muted);margin:5px 0 10px}
.qr-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qr-style-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;padding:10px 5px;border:1px solid var(--line);border-radius:10px;background:#fffdf8;text-align:center}
.qr-style-grid button[aria-pressed=true]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:var(--soft)}
.qr-style-grid button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.qr-style-symbol{font:32px/1.1 Georgia,serif;color:var(--green);height:37px}.qr-style-grid strong{font-size:11px;font-weight:600}
.qr-style-grid button>span:not(.qr-style-symbol){font-size:8px;color:var(--muted);margin-top:3px}.qr-style-grid small{min-height:17px;font-size:8px;color:var(--green);margin-top:3px}
#qr-customization{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
#qr-customization summary{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;cursor:pointer;list-style:none;min-height:30px}
#qr-customization summary::-webkit-details-marker{display:none}#qr-customization[open] summary{margin-bottom:15px}
.qr-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.share-modal .qr-options label{display:flex;flex-direction:column;gap:7px;font-size:11px;min-width:0}
.qr-options select,.qr-options input:not([type=file]){width:100%;min-width:0;min-height:42px;border:1px solid var(--line);border-radius:7px;background:#fffdf8;padding:8px;font:11px var(--font)}
.qr-options input[type=color]{padding:4px;cursor:pointer}.qr-options input[type=file]{max-width:100%;font-size:11px}
#qr-custom-logo{margin-top:15px}.qr-share-link{border-top:1px solid var(--line);padding-top:20px}.qr-share-link>.qr-hint{text-align:left}
@media(max-width:650px){.qr-designer{grid-template-columns:1fr;gap:22px}.qr-preview-panel{width:min(100%,320px);margin:auto}.qr-style-grid button{min-height:110px}.share-modal{padding:30px 18px}.qr-style-grid button>span:not(.qr-style-symbol){font-size:9px}.qr-style-grid small{font-size:9px}.qr-option-grid{gap:12px}.qr-options select{font-size:12px}}

/* Personal card links: keep editing separate from the link currently shared. */
.qr-share-link{display:grid;gap:24px;text-align:left;padding-top:28px}
.custom-link-form{display:grid;gap:14px;min-width:0;margin:0;padding:22px;border:1px solid var(--line);border-radius:12px;background:#fffdf8}
.share-modal .custom-link-form>label,.share-modal #share-url-label{display:block;font-size:12px;font-weight:600;margin:0}
.custom-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;min-width:0}
.custom-link-input{display:flex;align-items:center;min-width:0;min-height:46px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff}
#card-link-prefix{flex-shrink:0;padding-left:12px;white-space:nowrap;color:var(--muted);font-size:11px}
.share-modal #card-link-slug{flex:1;width:100%;min-width:0;min-height:44px;margin:0;border:0;background:transparent;padding:12px 8px;font-size:12px;border-radius:0}
.custom-link-input:focus-within{outline:2px solid var(--green);outline-offset:2px}
.share-modal #card-link-slug:focus{outline:none}
#save-card-link{min-height:46px;margin:0;padding:12px 18px;white-space:nowrap;font-size:11px}
.custom-link-form .qr-hint,.active-share-link .qr-hint{margin:0;text-align:left}
.card-link-status{margin:0;font-size:11px;line-height:1.7;color:var(--green);overflow-wrap:anywhere;min-height:19px}
.card-link-status.is-error{color:#9f3e35}
.active-share-link{display:grid;gap:12px;min-width:0;padding:0 2px}
.share-modal #share-url{width:100%;min-width:0;min-height:46px;margin:0;font-size:12px}
.active-share-link .share-privacy-note{margin-top:-5px}
.qr-share-link .share-actions{justify-content:flex-start;gap:12px;margin:0}
.qr-share-link #share-status{margin:0}
.qr-share-link #share-status:empty{display:none}
@media(max-width:650px){
 .qr-share-link{gap:24px}
 .custom-link-form{padding:18px 14px;gap:14px}
 .custom-link-row{grid-template-columns:minmax(0,1fr);gap:14px}
 .custom-link-input{flex-wrap:wrap}
 #card-link-prefix{padding-top:10px;max-width:100%;overflow-wrap:anywhere;white-space:normal}
 .share-modal #card-link-slug{flex-basis:100%;padding:8px 12px}
 #save-card-link{width:100%}
 .qr-share-link .share-actions>*{flex:1;justify-content:center}
}