/* Final render-matched layout. Loaded last so it owns page geometry. */
:root {
    --render-gold: #c7943d;
    --render-gold-dark: #ae7725;
    --render-ink: #211d19;
    --render-muted: #665f56;
    --render-paper: #fdfaf5;
    --render-line: rgba(184, 134, 55, 0.22);
    --render-shadow: 0 10px 28px rgba(56, 43, 27, 0.07);
}

html { background: #f4eee5; }

body {
    min-height: 100vh;
    color: var(--render-ink);
    background:
        radial-gradient(circle at 12% 10%, rgba(199, 148, 61, 0.08), transparent 25rem),
        radial-gradient(circle at 88% 90%, rgba(199, 148, 61, 0.06), transparent 22rem),
        #f4eee5;
}

.page-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: rgba(255, 253, 249, 0.96);
    box-shadow: none;
}

.header {
    position: relative;
    inset: auto;
    z-index: 20;
    height: 72px;
    border: 0;
    background: rgba(255, 253, 249, 0.96);
    box-shadow: none;
    backdrop-filter: none;
}

.header__inner {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0 38px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.header__logo {
    width: 92px;
    height: 30px;
    justify-self: start;
    overflow: visible;
}
.header__brand-image {
    width: 84px;
    height: auto;
    max-width: 84px;
    display: block;
}
.header__nav { gap: clamp(26px, 2.5vw, 48px); justify-self: center; }
.header__link { padding: 8px 0; font-size: 12px; color: #4b4640; }
.header__link--active { color: var(--render-gold-dark); }
.header__link--active::after { bottom: 0; height: 1px; }
.header__cta {
    padding: 11px 18px;
    border-radius: 6px;
    background: linear-gradient(135deg, #d0a24f, #b77d29);
    font-size: 12px;
    box-shadow: 0 7px 16px rgba(183, 125, 41, 0.18);
}

.header__hamburger { grid-column: 3; justify-self: end; }

.mobile-nav { top: 72px; }

.render-main {
    min-height: calc(100vh - 72px);
    position: relative;
    z-index: 1;
    padding: 0 32px 34px;
    background-color: #fffdf9;
    background-image: url("../assets/images/decor/wedding-edge-frame-desktop.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}
.spa-view {
    transition: opacity 170ms ease, transform 220ms cubic-bezier(.22,.75,.28,1);
    will-change: opacity, transform;
}
.spa-view--booting { opacity: 1; transform: none; }
.spa-view--leaving { opacity: 0; transform: translateY(7px); }
.spa-view--entering { opacity: 0; transform: translateY(10px); }
.spa-loading {
    min-height: 420px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    text-align: center;
}
.spa-loading__mark {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(184, 134, 55, 0.25);
    border-top-color: rgba(184, 134, 55, 0.82);
    border-radius: 50%;
    animation: spa-spin 820ms linear infinite;
}
.spa-loading p {
    color: #7b7062;
    font-size: 12px;
}
.spa-error {
    min-height: 420px;
    display: grid;
    place-content: center;
    text-align: center;
}
.spa-error h1 { margin-bottom: 8px; font-family: var(--font-serif); font-size: 32px; font-weight: 500; }
.spa-error p,
.spa-inline-error { color: #786f65; font-size: 12px; }
.spa-inline-error { padding: 10px 14px; text-align: center; background: #fff3ef; }
@keyframes spa-spin {
    to { transform: rotate(360deg); }
}

.hero-stage {
    height: clamp(455px, 31vw, 595px);
    min-height: 0;
    display: grid;
    grid-template-columns: 44% 56%;
    gap: 0;
    align-items: stretch;
    margin: 0 0 22px;
    overflow: hidden;
}

.hero-copy {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 28px 6px 38px;
    background: linear-gradient(90deg, rgba(255,253,249,1) 0%, rgba(255,253,249,1) 80%, rgba(255,253,249,0.86) 100%);
}

.hero-title {
    max-width: 650px;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(48px, 3.55vw, 67px);
    font-weight: 500;
    line-height: 1.03;
    color: var(--render-ink);
}

.hero-title span {
    display: block;
    margin: 0 0 0 72px;
    color: var(--render-gold);
    font-family: var(--font-script);
    font-size: clamp(48px, 3.5vw, 66px);
    font-weight: 500;
    line-height: 1.02;
}

.heart-mark {
    color: var(--render-gold);
    font-family: Georgia, serif;
    line-height: 1;
}

.hero-copy .heart-mark {
    margin: 5px 0 13px 285px;
    font-size: 25px;
}

.hero-text {
    max-width: 555px;
    margin: 0;
    color: #524c45;
    font-size: 13px;
    line-height: 1.64;
}

.hero-art {
    min-height: 0;
    margin: 0;
    position: relative;
    background: url("../assets/images/hero/audi-rs3-wedding-hero.png") center center / cover no-repeat;
}

.hero-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,253,249,0.9) 0%, rgba(255,253,249,0.22) 14%, transparent 32%);
}

.home-card-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0 20px 18px;
    position: relative;
    z-index: 3;
}

.render-card {
    border: 1px solid var(--render-line);
    border-radius: 6px;
    background: rgba(255, 253, 249, 0.94);
    box-shadow: var(--render-shadow);
}

.feature-card {
    min-height: clamp(238px, 15.1vw, 290px);
    padding: 18px 20px 17px;
}

.fade-in-up,
.fade-in-up.visible { opacity: 1; transform: none; }

.circle-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border: 1px solid rgba(184, 134, 55, 0.42);
    border-radius: 50%;
    color: #2e2924;
}
.circle-icon svg { width: 21px; height: 21px; }

.feature-card h3 {
    margin: 0 0 10px;
    padding: 0 0 9px;
    border-bottom: 1px solid rgba(184, 134, 55, 0.28);
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}

.feature-card p,
.feature-card li { color: #5c554c; font-size: 12px; line-height: 1.6; }
.feature-card li { padding-left: 13px; position: relative; }
.feature-card li::before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 8px;
    border-radius: 50%;
    background: var(--render-gold);
}

.info-strip {
    min-height: clamp(67px, 4.25vw, 82px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 20px 18px;
    padding: 0;
}

.info-strip__item {
    min-height: clamp(67px, 4.25vw, 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-right: 1px solid var(--render-line);
}
.info-strip__item:last-child { border-right: 0; }
.info-strip .circle-icon { width: 43px; height: 43px; margin: 0; }
.info-strip strong { display: block; font-family: var(--font-serif); font-size: 16px; line-height: 1.15; }
.info-strip span { display: block; margin-top: 2px; color: #746c63; font-size: 12px; }

.home-actions {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin: 0;
}

@media (min-width: 1600px) {
    .render-main { padding-left: 42px; padding-right: 42px; }
    .hero-copy { padding-left: 52px; }
    .feature-card { padding: 24px 24px 20px; }
    .feature-card h3 { font-size: 18px; }
    .feature-card p,
    .feature-card li { font-size: 13px; }
    .render-btn { min-width: 300px; min-height: 58px; font-size: 18px; }
}

.render-btn {
    min-width: 270px;
    min-height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.render-btn:hover { transform: translateY(-1px); }
.render-btn svg { width: 22px; height: 22px; }
.render-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #d1a451, #b77b28);
    box-shadow: 0 11px 23px rgba(183, 123, 40, 0.23);
}
.render-btn--secondary {
    color: #2a2622;
    border: 1px solid rgba(184, 134, 55, 0.5);
    background: rgba(255, 253, 249, 0.9);
}

/* Shared page titles */
.page-head { padding: 25px 0 24px; text-align: center; }
.page-head h1 { margin: 0; font-family: var(--font-serif); font-size: 36px; font-weight: 500; line-height: 1.05; }
.page-head .heart-mark { margin-top: 5px; font-size: 22px; }

/* Gallery */
.sr-only {
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.gallery-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 30;
    gap: 28px;
    margin-bottom: 10px;
}
.pill-group {
    display: inline-flex;
    gap: 6px;
    padding: 3px;
    border: 1px solid rgba(184, 134, 55, 0.16);
    border-radius: 6px;
    background: rgba(255, 253, 249, 0.72);
}
.filter-pill {
    min-width: 104px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #6b6258;
    font-size: 11px;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.filter-pill span {
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 999px;
    color: #81766b;
    background: rgba(184, 134, 55, 0.1);
    font-size: 9px;
}
.filter-pill--active {
    color: #fff;
    background: linear-gradient(135deg, #d2aa5c, #b67c29);
    box-shadow: 0 6px 14px rgba(183,123,40,0.18);
}
.filter-pill--active span { color: #fff; background: rgba(255,255,255,0.18); }
.gallery-sort {
    width: 164px;
    position: relative;
    z-index: 12;
}
.gallery-bulk-download,
.gallery-admin-toggle {
    min-width: 116px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(184,134,55,0.3);
    border-radius: 5px;
    color: #655b50;
    background: rgba(255,253,249,0.96);
    font: 500 11px var(--font-sans);
}
.gallery-bulk-download svg,
.gallery-admin-toggle svg { width: 17px; height: 17px; color: #a16f28; }
.gallery-bulk-download:hover,
.gallery-admin-toggle:hover,
.gallery-admin-toggle[aria-pressed="true"] { border-color: rgba(184,134,55,0.65); color: #704b1d; background: rgba(201,151,65,0.12); }
.gallery-bulk-download:disabled {
    opacity: 0.55;
    cursor: progress;
}
.gallery-admin-toggle[hidden] { display: none; }
.gallery-sort__trigger {
    width: 100%;
    height: 42px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 13px 16px;
    align-items: center;
    padding: 5px 12px 5px 14px;
    border: 1px solid rgba(184,134,55,0.3);
    border-radius: 5px;
    color: #413a33;
    background: rgba(255,253,249,0.96);
    box-shadow: 0 4px 14px rgba(72,54,30,0.05);
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.gallery-sort__trigger:hover {
    border-color: rgba(184,134,55,0.58);
    background: #fffefa;
}
.gallery-sort__trigger:focus-visible {
    outline: 2px solid rgba(201,148,55,0.34);
    outline-offset: 2px;
}
.gallery-sort__caption {
    grid-column: 1;
    color: #978b7d;
    font: 500 8px var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0;
}
.gallery-sort__trigger strong {
    grid-column: 1;
    color: #4c443c;
    font: 500 11px var(--font-sans);
}
.gallery-sort__trigger svg {
    width: 17px;
    height: 17px;
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #a16f28;
    transition: transform 180ms ease;
}
.gallery-sort--open .gallery-sort__trigger {
    border-color: rgba(184,134,55,0.68);
    background: #fffefa;
    box-shadow: 0 6px 20px rgba(104,76,36,0.1);
}
.gallery-sort--open .gallery-sort__trigger > svg { transform: rotate(180deg); }
.gallery-sort__menu {
    width: 100%;
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 40;
    padding: 5px;
    border: 1px solid rgba(184,134,55,0.25);
    border-radius: 5px;
    background: rgba(255,254,250,0.98);
    box-shadow: 0 16px 36px rgba(63,47,27,0.16);
    backdrop-filter: blur(12px);
    transform-origin: top right;
    animation: gallery-sort-in 160ms ease both;
}
.gallery-sort__menu[hidden] { display: none; }
.gallery-sort__option {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border: 0;
    border-radius: 3px;
    color: #625950;
    background: transparent;
    font: 500 11px var(--font-sans);
    text-align: left;
    transition: color 140ms ease, background 140ms ease;
}
.gallery-sort__option:hover,
.gallery-sort__option:focus-visible {
    outline: 0;
    color: #7d531d;
    background: rgba(201,151,65,0.1);
}
.gallery-sort__option svg {
    width: 15px;
    height: 15px;
    color: #b77c29;
    opacity: 0;
}
.gallery-sort__option--active {
    color: #7d531d;
    background: rgba(201,151,65,0.14);
}
.gallery-sort__option--active svg { opacity: 1; }
@keyframes gallery-sort-in {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.gallery-summary {
    width: min(1320px, 100%);
    min-height: 22px;
    margin: 0 auto 12px;
    color: #8b8176;
    font-size: 10px;
    text-align: right;
}
.gallery-grid {
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 20px;
}
.media-card {
    overflow: hidden;
    animation: gallery-card-in 420ms ease both;
    animation-delay: var(--gallery-delay, 0ms);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.media-card:hover {
    transform: translateY(-3px);
    border-color: rgba(184,134,55,0.3);
    box-shadow: 0 15px 30px rgba(57,45,30,0.12);
}
.media-card__image {
    height: auto;
    aspect-ratio: 16 / 9.4;
    position: relative;
    overflow: hidden;
    background-image: url("../assets/images/gallery/audi-gallery-grid.png");
    background-repeat: no-repeat;
    background-size: 300% 200%;
}
.media-card__photo {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
    background: #171613;
}
.media-card__video {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    object-fit: cover;
    background: #171613;
}
.media-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(20,18,15,0.08), transparent 38%, rgba(20,18,15,0.12));
    transition: opacity 180ms ease;
}
.media-card:hover .media-card__image::after { opacity: 0.4; }
.gallery-source--sprite-0 { background-image: url("../assets/images/gallery/audi-gallery-grid.png"); background-size: 300% 200%; background-position: 0 0; }
.gallery-source--sprite-1 { background-image: url("../assets/images/gallery/audi-gallery-grid.png"); background-size: 300% 200%; background-position: 50% 0; }
.gallery-source--sprite-2 { background-image: url("../assets/images/gallery/audi-gallery-grid.png"); background-size: 300% 200%; background-position: 100% 0; }
.gallery-source--sprite-3 { background-image: url("../assets/images/gallery/audi-gallery-grid.png"); background-size: 300% 200%; background-position: 0 100%; }
.gallery-source--sprite-4 { background-image: url("../assets/images/gallery/audi-gallery-grid.png"); background-size: 300% 200%; background-position: 50% 100%; }
.gallery-source--sprite-5 { background-image: url("../assets/images/gallery/audi-gallery-grid.png"); background-size: 300% 200%; background-position: 100% 100%; }
.gallery-source--hero { background-image: url("../assets/images/hero/audi-wedding-hero.png"); background-size: cover; background-position: center; }
.gallery-source--convoy { background-image: url("../assets/images/info/audi-sunset-convoy.png"); background-size: cover; background-position: center; }
.media-card__badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.38);
    border-radius: 4px;
    color: #fff;
    background: rgba(25,22,18,0.52);
    backdrop-filter: blur(6px);
    font-size: 9px;
}
.media-card__open {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    background: transparent;
}
.media-card__open:focus-visible { outline: 3px solid rgba(199,148,61,0.9); outline-offset: -4px; }
.media-card__delete {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 52px;
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    color: #fff;
    background: rgba(108,38,31,0.72);
    backdrop-filter: blur(5px);
}
.media-card__delete:hover { background: rgba(139,43,34,0.96); transform: scale(1.06); }
.media-card__delete:disabled { opacity: 0.55; }
.media-card__delete svg { width: 16px; height: 16px; }
.play-dot {
    width: 46px;
    height: 46px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    background: rgba(20,18,15,0.42);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    backdrop-filter: blur(4px);
    transition: transform 180ms ease, background 180ms ease;
}
.media-card__open:hover .play-dot { transform: translate(-50%, -50%) scale(1.08); background: rgba(183,123,40,0.78); }
.play-dot::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 13px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 13px solid #fff;
}
.expand-dot {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    color: #fff;
    background: rgba(20,18,15,0.38);
    backdrop-filter: blur(5px);
    transition: transform 180ms ease, background 180ms ease;
}
.expand-dot svg { width: 16px; height: 16px; }
.media-card__open:hover .expand-dot { transform: scale(1.08); background: rgba(183,123,40,0.8); }
.media-card__body { min-height: 76px; padding: 12px 14px 13px; }
.media-card__body--compact { min-height: 56px; display: flex; align-items: center; }
.media-card__body--compact .media-card__meta { width: 100%; }
.media-card h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.media-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.media-card p { color: #5f5850; font-size: 11px; line-height: 1.4; }
.media-card small { color: #8a8177; font-size: 10px; white-space: nowrap; }
.load-more { display: flex; justify-content: center; margin-top: 32px; }
.load-more .render-btn { min-width: 230px; min-height: 43px; font-size: 12px; }
.load-more .render-btn[hidden] { display: none; }

.gallery-viewer {
    width: min(1480px, calc(100% - 24px));
    height: min(940px, calc(100dvh - 24px));
    max-width: none;
    max-height: calc(100vh - 24px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(208,168,98,0.35);
    border-radius: 7px;
    color: #f8f4ed;
    background: #171614;
    box-shadow: 0 28px 80px rgba(20,16,12,0.42);
}
.gallery-viewer::backdrop { background: rgba(24,21,18,0.72); backdrop-filter: blur(5px); }
.gallery-viewer__frame { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.gallery-viewer__header,
.gallery-viewer__footer {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 18px 11px 22px;
    background: #211f1c;
}
.gallery-viewer__header span { display: block; margin-bottom: 2px; color: #d7a952; font-size: 9px; text-transform: uppercase; }
.gallery-viewer__header h2 { margin: 0; font-family: var(--font-serif); font-size: 25px; font-weight: 500; line-height: 1.1; }
.gallery-viewer__actions { display: flex; align-items: center; gap: 8px; }
.gallery-viewer__action,
.gallery-viewer__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,0.04);
}
.gallery-viewer__action[hidden] { display: none; }
.gallery-viewer__action:hover,
.gallery-viewer__close:hover,
.gallery-viewer__action[aria-pressed="true"] { border-color: rgba(215,169,82,0.7); color: #f2c875; background: rgba(215,169,82,0.12); }
.gallery-viewer__action svg,
.gallery-viewer__close svg { width: 19px; height: 19px; }
.gallery-viewer__stage {
    min-height: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #0e0d0c;
    background-repeat: no-repeat;
}
.gallery-viewer__stage--zoomed { background-size: cover !important; cursor: zoom-out; }
.gallery-viewer__stage::before {
    content: "";
    position: absolute;
    inset: -3%;
    z-index: -2;
    background-image: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: inherit;
}
.gallery-viewer__video {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    object-fit: contain;
    background: #0e0d0c;
}
.gallery-viewer__video[hidden] { display: none; }
.gallery-viewer__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(12,11,10,0.26), transparent 17%, transparent 83%, rgba(12,11,10,0.26));
}
.gallery-viewer__stage--playing::before { animation: gallery-video-motion 7s ease-in-out infinite alternate; }
.gallery-viewer__nav {
    width: 48px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,0.26);
    color: #fff;
    background: rgba(18,16,14,0.42);
    backdrop-filter: blur(5px);
}
.gallery-viewer__nav:hover { border-color: rgba(215,169,82,0.8); background: rgba(157,106,37,0.58); }
.gallery-viewer__nav:disabled { opacity: 0.35; }
.gallery-viewer__nav svg { width: 25px; height: 25px; }
.gallery-viewer__nav--previous { left: 16px; }
.gallery-viewer__nav--next { right: 16px; }
.gallery-viewer__play {
    min-width: 134px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.64);
    border-radius: 5px;
    color: #fff;
    background: rgba(20,18,15,0.62);
    backdrop-filter: blur(7px);
    font-size: 11px;
}
.gallery-viewer__play[hidden],
.gallery-viewer__progress[hidden] { display: none; }
.gallery-viewer__play:hover { background: rgba(174,119,37,0.82); }
.gallery-viewer__play-icon {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid currentColor;
}
.gallery-viewer__play--playing { top: auto; bottom: 58px; min-width: 108px; min-height: 38px; }
.gallery-viewer__play--playing .gallery-viewer__play-icon { width: 10px; height: 13px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.gallery-viewer__progress {
    height: 46px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 0 18px;
    color: rgba(255,255,255,0.88);
    background: rgba(20,18,15,0.78);
    backdrop-filter: blur(8px);
    font: 500 10px var(--font-sans);
    font-variant-numeric: tabular-nums;
}
.gallery-viewer__progress span:last-child { text-align: right; }
.gallery-viewer__progress input {
    width: 100%;
    height: 18px;
    margin: 0;
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.gallery-viewer__progress input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #d7a952 0 var(--seek-progress, 0%), rgba(255,255,255,0.25) var(--seek-progress, 0%) 100%);
}
.gallery-viewer__progress input::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    margin-top: -5.5px;
    appearance: none;
    border: 2px solid #f7ead0;
    border-radius: 50%;
    background: #c88a32;
    box-shadow: 0 2px 8px rgba(0,0,0,0.32);
}
.gallery-viewer__progress input::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.25); }
.gallery-viewer__progress input::-moz-range-progress { height: 4px; border-radius: 999px; background: #d7a952; }
.gallery-viewer__progress input::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #f7ead0; border-radius: 50%; background: #c88a32; }
.gallery-viewer__progress input:focus-visible { outline: 2px solid rgba(215,169,82,0.85); outline-offset: 4px; }
.gallery-viewer__footer { min-height: 58px; color: #d9d4cc; font-size: 11px; }
.gallery-viewer__footer strong { display: block; margin-bottom: 2px; color: #fff; font-weight: 500; }
.gallery-viewer__footer div span { color: #958d83; font-size: 10px; }
.gallery-viewer__footer > span { color: #b2a99e; font-variant-numeric: tabular-nums; }

@keyframes gallery-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes gallery-video-motion {
    from { transform: scale(1.01) translate3d(-0.4%, 0, 0); }
    to { transform: scale(1.09) translate3d(1.2%, -0.8%, 0); }
}

/* Upload */
.upload-layout {
    width: min(1020px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.upload-picker { min-height: 403px; overflow: hidden; }
.upload-drop {
    min-height: 375px;
    margin: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed rgba(184, 134, 55, 0.38);
    border-radius: 5px;
    color: #5d554c;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.upload-drop:hover,
.upload-drop--dragging {
    border-color: rgba(184,134,55,0.78);
    background: rgba(208,164,82,0.06);
}
.upload-drop--dragging { transform: scale(0.985); }
.upload-drop__empty { pointer-events: none; }
.upload-drop svg { width: 66px; height: 66px; margin: 0 auto 18px; color: var(--render-gold); }
.upload-drop strong { display: block; margin-bottom: 14px; font-size: 12px; line-height: 1.7; }
.upload-drop small { display: block; color: #887f75; font-size: 10px; line-height: 1.55; }
.upload-form { padding: 14px 0; }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 7px; color: #423d37; font-size: 11px; font-weight: 600; }
.field textarea,
.field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(184, 134, 55, 0.19);
    border-radius: 5px;
    background: rgba(255,253,249,0.86);
    box-shadow: 0 5px 14px rgba(48,39,28,0.03);
    font-size: 12px;
}
.field textarea { min-height: 105px; resize: vertical; }
.field__count { margin-top: 5px; text-align: right; color: #a58e6c; font-size: 9px; }
.check-row { display: flex; gap: 10px; margin: 2px 0 22px; color: #625b53; font-size: 10px; line-height: 1.55; }
.check-row input { accent-color: var(--render-gold); }
.upload-form .render-btn { width: 100%; min-width: 0; min-height: 48px; font-size: 13px; }
.upload-preview {
    min-height: 401px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    background: #171613;
}
.upload-preview[hidden] { display: none; }
.upload-preview__stage {
    min-height: 337px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 28%),
        linear-gradient(135deg, #211c16 0%, #13110f 100%);
}
.upload-preview img {
    width: 100%;
    height: 337px;
    display: block;
    object-fit: cover;
    background: #171613;
}
.upload-preview img[hidden] { display: none; }
.upload-preview__video-card {
    width: 100%;
    height: 337px;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 28px;
    text-align: center;
    color: #f6efe5;
    background:
        linear-gradient(145deg, rgba(212,166,79,0.18), rgba(43,34,25,0.8)),
        linear-gradient(135deg, #1e1812, #12100e);
}
.upload-preview__video-card[hidden] { display: none; }
.upload-preview__video-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #f0c26d;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 16px 38px rgba(0,0,0,0.25);
}
.upload-preview__video-icon svg { width: 31px; height: 31px; }
.upload-preview__video-card strong {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 500;
}
.upload-preview__video-card p {
    max-width: 320px;
    color: rgba(247,242,235,0.82);
    font-size: 12px;
    line-height: 1.55;
}
.upload-preview__video-card small {
    color: #d8bf93;
    font-size: 11px;
}
.upload-preview__footer {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px 10px 16px;
    color: #f7f2eb;
    background: #211f1c;
}
.upload-preview__footer strong {
    max-width: 360px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
}
.upload-preview__footer span { display: block; margin-top: 3px; color: #aaa096; font-size: 9px; }
.upload-preview__footer small { display: block; margin-top: 5px; color: #d1bc9b; font-size: 10px; }
.upload-preview__footer button {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.17);
    border-radius: 50%;
    color: #fff;
    background: transparent;
}
.upload-preview__footer button:hover { color: #f0b5a8; border-color: rgba(240,181,168,0.55); }
.upload-preview__footer svg { width: 17px; height: 17px; }
.upload-selection {
    display: grid;
    gap: 8px;
    padding: 12px 12px 0;
    background: #161412;
}
.upload-selection__item {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #f8f1e7;
    background: rgba(255,255,255,0.03);
    text-align: left;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.upload-selection__item:hover,
.upload-selection__item--active {
    border-color: rgba(212,166,79,0.55);
    background: rgba(212,166,79,0.09);
}
.upload-selection__item--active { transform: translateY(-1px); }
.upload-selection__thumb {
    width: 58px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    background-size: cover;
    background-position: center;
    color: #f0c26d;
}
.upload-selection__thumb--video svg { width: 18px; height: 18px; }
.upload-selection__text {
    min-width: 0;
    display: block;
}
.upload-selection__text strong,
.upload-selection__text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-selection__text strong {
    font-size: 11px;
    font-weight: 500;
}
.upload-selection__text small {
    margin-top: 4px;
    color: #aa9f92;
    font-size: 9px;
}
.upload-selection__remove {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #f4d9d2;
    background: rgba(255,255,255,0.03);
}
.upload-selection__remove svg { width: 14px; height: 14px; }
.upload-add-more {
    margin: 0 12px 12px;
    padding: 12px 14px;
    display: block;
    border: 1px dashed rgba(212,166,79,0.34);
    border-radius: 6px;
    color: #dbc18d;
    text-align: center;
    font-size: 11px;
    cursor: pointer;
    background: rgba(212,166,79,0.05);
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.upload-add-more:hover {
    border-color: rgba(212,166,79,0.72);
    color: #f3d7a4;
    background: rgba(212,166,79,0.11);
}
.upload-submit:disabled { cursor: not-allowed; opacity: 0.48; box-shadow: none; transform: none; }
.upload-progress {
    margin: 0 0 16px;
    padding: 14px 15px;
    border: 1px solid rgba(184,134,55,0.2);
    border-radius: 5px;
    background: rgba(255,253,249,0.8);
}
.upload-progress[hidden] { display: none; }
.upload-progress__top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 9px; color: #5e564d; font-size: 10px; }
.upload-progress__top strong { color: #9b681f; font-size: 11px; font-variant-numeric: tabular-nums; }
.upload-progress__track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(184,134,55,0.14); }
.upload-progress__track span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #d4a64f, #b97924); transition: width 80ms linear; }
.upload-progress small { display: block; margin-top: 8px; color: #968b7e; font-size: 9px; }
.upload-status { min-height: 18px; margin: -5px 0 7px; color: #a14f3f; font-size: 10px; }
.upload-status--success { color: #56735a; }
.upload-success {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(92,130,94,0.2);
    border-radius: 6px;
    background: #f1f6ed;
}
.upload-success[hidden] { display: none; }
.upload-success__icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #78916f;
}
.upload-success__icon svg { width: 21px; height: 21px; }
.upload-success strong { color: #344b37; font-family: var(--font-serif); font-size: 18px; font-weight: 500; }
.upload-success p { margin-top: 2px; color: #6d7b6c; font-size: 10px; }
.upload-success .render-btn { grid-column: 1 / -1; min-height: 42px; }
.upload-confirm {
    width: min(720px, calc(100% - 28px));
    max-width: none;
    max-height: calc(100dvh - 28px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(184,134,55,0.42);
    border-radius: 7px;
    color: #342f29;
    background: #fffdf9;
    box-shadow: 0 28px 80px rgba(42,34,25,0.3);
}
.upload-confirm::backdrop { background: rgba(34,29,24,0.66); backdrop-filter: blur(5px); }
.upload-confirm__frame { max-height: calc(100dvh - 30px); overflow-y: auto; }
.upload-confirm__header {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 18px 12px 24px;
    border-bottom: 1px solid rgba(184,134,55,0.18);
}
.upload-confirm__header span { display: block; margin-bottom: 2px; color: #b27827; font-size: 9px; text-transform: uppercase; }
.upload-confirm__header h2 { margin: 0; font-family: var(--font-serif); font-size: 27px; font-weight: 500; }
.upload-confirm__header button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(184,134,55,0.3);
    border-radius: 50%;
    color: #665b50;
    background: transparent;
}
.upload-confirm__header button:hover { color: #9a641e; background: rgba(201,151,65,0.1); }
.upload-confirm__header svg { width: 18px; height: 18px; }
.upload-confirm__media { min-height: 300px; display: grid; place-items: center; overflow: hidden; background: #171513; }
.upload-confirm__media img,
.upload-confirm__media video { width: 100%; max-height: min(52vh, 440px); display: block; object-fit: contain; }
.upload-confirm__media img[hidden],
.upload-confirm__media video[hidden] { display: none; }
.upload-confirm__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    padding: 20px 24px 18px;
}
.upload-confirm__details span { display: block; margin-bottom: 5px; color: #968a7e; font-size: 9px; text-transform: uppercase; }
.upload-confirm__details strong { font-size: 12px; font-weight: 500; }
.upload-confirm__message { grid-column: 1 / -1; padding-top: 13px; border-top: 1px solid rgba(184,134,55,0.16); }
.upload-confirm__message p { color: #5f564c; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; }
.upload-confirm__actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; padding: 0 24px 22px; }
.upload-confirm__actions .render-btn { width: 100%; min-width: 0; min-height: 47px; }

/* Information */
.info-layout {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 30px;
    align-items: stretch;
}
.info-tabs {
    min-height: 510px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 0;
}
.info-tab {
    flex: 1;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    color: #5b554d;
    border-left: 3px solid transparent;
    font-size: 13px;
    font-weight: 600;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.info-tab:hover { color: var(--render-gold-dark); background: rgba(199,148,61,0.055); }
.info-tab svg { width: 25px; height: 25px; flex: 0 0 auto; color: #8b8175; }
.info-tab--active { border-left-color: var(--render-gold); color: #2e2924; background: rgba(199,148,61,0.1); }
.info-tab--active svg { color: var(--render-gold); }
.info-panel { min-height: 510px; padding: 31px 34px 32px; }
.info-panel h2 { margin: 0 0 15px; font-family: var(--font-serif); font-size: 31px; font-weight: 500; }
.info-panel p { max-width: 790px; min-height: 72px; color: #514b44; font-size: 14px; line-height: 1.72; }
.wide-photo {
    height: 300px;
    margin-top: 24px;
    border-radius: 5px;
    background: url("../assets/images/info/audi-sunset-convoy.png") center 59% / cover no-repeat;
}

/* Guestbook */
.guestbook-head { padding-bottom: 22px; }
.guestbook-head p {
    max-width: 620px;
    margin: 8px auto 0;
    color: #6a6259;
    font-size: 13px;
    line-height: 1.55;
}
.guestbook-layout {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.guestbook-form { overflow: hidden; }
.guestbook-form__visual {
    height: 178px;
    background:
        linear-gradient(180deg, rgba(29,24,18,0.02), rgba(29,24,18,0.18)),
        url("../assets/images/hero/audi-wedding-hero.png") center 52% / cover no-repeat;
}
.guestbook-form__body { padding: 24px 26px 22px; }
.guestbook-form__heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.guestbook-form__heading .circle-icon { width: 44px; height: 44px; margin: 0; flex: 0 0 auto; }
.guestbook-form__heading h2 {
    margin: 0 0 3px;
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.15;
}
.guestbook-form__heading p { color: #776f66; font-size: 10px; line-height: 1.45; }
.guestbook-form .field { margin-bottom: 17px; }
.guestbook-form .field label { font-size: 12px; }
.guestbook-form .field input,
.guestbook-form .field textarea { font-size: 13px; }
.guestbook-form .field textarea { min-height: 132px; }
.guestbook-message-field { position: relative; }
.guestbook-signature-field label span { color: #92887d; font-size: 9px; font-weight: 400; }
.guestbook-customization {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 18px;
}
.guestbook-option-group { min-width: 0; padding: 0; border: 0; }
.guestbook-option-group legend { margin-bottom: 8px; color: #423d37; font-size: 11px; font-weight: 600; }
.guestbook-color-picker { display: flex; align-items: center; gap: 5px; }
.guestbook-color {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(115,95,66,0.18);
    border-radius: 50%;
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.guestbook-color:hover { transform: translateY(-1px); }
.guestbook-color--active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--render-gold); }
.guestbook-color--random { color: #786c5c; background: #fff; }
.guestbook-color--random svg { width: 13px; height: 13px; }
.guestbook-color--champagne { background: #fff5d8; }
.guestbook-color--blush { background: #fff0ed; }
.guestbook-color--sage { background: #eef4ea; }
.guestbook-color--mist { background: #edf3f4; }
.guestbook-color--ivory { background: #fffaf0; }
.guestbook-color--lavender { background: #f3eef8; }
.guestbook-color--peach { background: #fff0e4; }
.guestbook-color--powder { background: #eef1fa; }
.guestbook-color--stone { background: #f0ece7; }
.guestbook-style-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid rgba(184,134,55,0.24);
    border-radius: 5px;
}
.guestbook-style {
    min-width: 0;
    height: 40px;
    padding: 0 7px;
    border-right: 1px solid rgba(184,134,55,0.2);
    border-bottom: 1px solid rgba(184,134,55,0.2);
    color: #6c645b;
    background: rgba(255,253,249,0.72);
    font-size: 12px;
    font-weight: 500;
}
.guestbook-style:nth-child(3n) { border-right: 0; }
.guestbook-style:nth-child(n + 4) { border-bottom: 0; }
.guestbook-style[data-font-style="elegant"] { font-family: var(--font-serif); }
.guestbook-style[data-font-style="handwritten"] { font-family: var(--font-script); font-size: 16px; }
.guestbook-style[data-font-style="simple"] { font-family: var(--font-sans); font-size: 11px; }
.guestbook-style[data-font-style="classic"] { font-family: var(--font-classic); font-size: 15px; }
.guestbook-style[data-font-style="letter"] { font-family: var(--font-letter); font-size: 12px; font-style: italic; }
.guestbook-style[data-font-style="note"] { font-family: var(--font-note); font-size: 17px; }
.guestbook-style--active { color: #fff; background: var(--render-gold); }
.guestbook-paper-group { grid-column: 1 / -1; }
.guestbook-paper-picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.guestbook-paper {
    height: 40px;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(137,108,69,0.2);
    border-radius: 4px;
    background: #fffaf0;
    box-shadow: 0 3px 7px rgba(70,55,37,0.05);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.guestbook-paper:hover { transform: translateY(-1px); }
.guestbook-paper--active { border-color: var(--render-gold); box-shadow: 0 0 0 2px rgba(199,148,61,0.18); }
.guestbook-paper::before,
.guestbook-paper::after { content: ""; position: absolute; pointer-events: none; }
.guestbook-paper[data-paper-style="tape"]::before { width: 20px; height: 6px; left: 50%; top: -1px; transform: translateX(-50%); background: rgba(213,184,128,0.55); }
.guestbook-paper[data-paper-style="pin"]::before { width: 8px; height: 8px; left: 50%; top: -2px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dc91, #9c6927 65%, #5b3b18); }
.guestbook-paper[data-paper-style="clip"]::before { width: 7px; height: 19px; right: 7px; top: -4px; border: 1.5px solid #b88b3d; border-radius: 6px; transform: rotate(-8deg); }
.guestbook-paper[data-paper-style="torn"] { clip-path: polygon(0 4%, 10% 0, 20% 5%, 30% 0, 40% 5%, 50% 0, 60% 5%, 70% 0, 80% 5%, 90% 0, 100% 4%, 100% 94%, 90% 100%, 80% 95%, 70% 100%, 60% 95%, 50% 100%, 40% 95%, 30% 100%, 20% 95%, 10% 100%, 0 95%); }
.guestbook-paper[data-paper-style="grid"] { background-color: #fff5f0; background-image: linear-gradient(rgba(190,149,111,0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(190,149,111,0.15) 1px, transparent 1px); background-size: 7px 7px; }
.guestbook-paper[data-paper-style="botanical"]::before { width: 25px; height: 30px; right: 1px; bottom: -7px; border-left: 1px solid rgba(131,147,104,0.6); transform: rotate(28deg); }
.guestbook-paper[data-paper-style="botanical"]::after { width: 8px; height: 13px; right: 8px; bottom: 4px; border: 1px solid rgba(131,147,104,0.6); border-radius: 100% 0 100% 0; transform: rotate(20deg); }
.guestbook-paper[data-paper-style="washi"]::before { width: 24px; height: 7px; left: 50%; top: -1px; transform: translateX(-50%) rotate(3deg); background: repeating-linear-gradient(135deg, rgba(213,177,111,0.65) 0 4px, rgba(242,220,176,0.72) 4px 8px); }
.guestbook-paper[data-paper-style="seal"]::before { width: 13px; height: 13px; right: 5px; bottom: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #c89064, #9c5542 48%, #632d22); }
.guestbook-paper[data-paper-style="ribbon"]::before { width: 8px; height: 100%; left: 7px; top: 0; background: linear-gradient(90deg, #d4aeb8, #f0d6d8, #c594a1); }
.guestbook-paper[data-paper-style="ribbon"]::after { width: 8px; height: 7px; left: 7px; bottom: 0; background: #d4aeb8; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 55%, 0 100%); }
.guestbook-paper[data-paper-style="lace"]::before { width: 100%; height: 9px; left: 0; top: -1px; background: radial-gradient(circle at 5px 0, transparent 4px, rgba(190,153,104,0.55) 4.5px 5.5px, transparent 6px) 0 0 / 10px 10px repeat-x; }
.guestbook-paper[data-paper-style="scrapbook"] {
    clip-path: polygon(0 3%, 8% 0, 16% 3%, 24% 0, 34% 3%, 43% 0, 53% 3%, 64% 0, 74% 3%, 84% 0, 93% 3%, 100% 1%, 100% 95%, 90% 100%, 80% 96%, 68% 100%, 56% 96%, 43% 100%, 31% 96%, 18% 100%, 8% 96%, 0 99%);
    background-color: #fff0ed;
    background-image: linear-gradient(rgba(190,149,111,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(190,149,111,0.14) 1px, transparent 1px);
    background-size: 7px 7px;
}
.guestbook-paper[data-paper-style="scrapbook"]::before { width: 23px; height: 7px; left: 50%; top: 0; transform: translateX(-50%) rotate(2deg); background: rgba(213,184,128,0.58); }
.guestbook-paper[data-paper-style="scrapbook"]::after { width: 18px; height: 21px; left: 2px; bottom: -5px; border-left: 1px solid rgba(125,145,103,0.62); border-bottom: 1px solid rgba(125,145,103,0.62); transform: rotate(-12deg); }
.guestbook-paper[data-paper-style="deckle-pin"] { clip-path: polygon(0 2%, 12% 0, 25% 2%, 39% 0, 52% 2%, 66% 0, 80% 2%, 92% 0, 100% 2%, 99% 92%, 91% 97%, 80% 94%, 69% 100%, 57% 95%, 45% 99%, 32% 94%, 20% 98%, 9% 94%, 0 97%); }
.guestbook-paper[data-paper-style="deckle-pin"]::before { width: 9px; height: 9px; left: 50%; top: -2px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #f8dc8b 0 14%, #b77b27 42%, #6c461b 78%); box-shadow: 0 2px 3px rgba(76,49,18,0.25); }
.guestbook-paper[data-paper-style="deckle-pin"]::after { content: "♡"; right: 4px; bottom: 1px; color: rgba(174,119,37,0.68); font: 9px/1 var(--font-serif); }
.guestbook-paper[data-paper-style="pressed-flower"]::before { width: 24px; height: 7px; left: 50%; top: -1px; transform: translateX(-50%) rotate(-2deg); background: rgba(213,184,128,0.48); }
.guestbook-paper[data-paper-style="pressed-flower"]::after { width: 22px; height: 31px; right: 3px; bottom: -9px; border-left: 1px solid rgba(126,143,99,0.7); border-radius: 50%; transform: rotate(28deg); box-shadow: -5px 5px 0 -4px rgba(126,143,99,0.7), 5px 10px 0 -4px rgba(126,143,99,0.7); }
.guestbook-paper[data-paper-style="stitched"] { border-style: dashed; border-color: rgba(184,134,55,0.48); background-color: #fff4ef; box-shadow: inset 0 0 0 4px #fffaf5; }
.guestbook-paper[data-paper-style="stitched"]::before { width: 18px; height: 18px; right: 4px; bottom: -8px; border: 1px solid rgba(194,126,111,0.45); border-radius: 50%; }
.guestbook-paper[data-paper-style="postcard"] { background: repeating-linear-gradient(135deg, #f4e4db 0 5px, #fffaf0 5px 10px, #dfe8e3 10px 15px, #fffaf0 15px 20px); }
.guestbook-paper[data-paper-style="postcard"]::before { width: 72%; height: 100%; right: 0; top: 0; background: #fffaf0; }
.guestbook-paper[data-paper-style="postcard"]::after { width: 12px; height: 12px; right: 4px; top: 4px; border: 1px solid rgba(184,134,55,0.42); border-radius: 50%; }
.guestbook-paper[data-paper-style="vellum"] { background-color: rgba(237,243,244,0.76); }
.guestbook-paper[data-paper-style="vellum"]::before { width: 100%; height: 15px; left: 0; top: 50%; transform: translateY(-50%); border-top: 1px solid rgba(184,134,55,0.18); border-bottom: 1px solid rgba(184,134,55,0.18); background: rgba(255,255,255,0.58); }
.guestbook-paper[data-paper-style="vellum"]::after { width: 7px; height: 7px; right: 6px; top: 4px; border-radius: 50%; background: #b9802d; }
.guestbook-submit { width: 100%; min-width: 0; min-height: 49px; font-size: 14px; }
.guestbook-status {
    min-height: 18px;
    margin-top: 10px;
    color: #806124;
    text-align: center;
    font-size: 10px;
    line-height: 1.4;
}
.guestbook-feed { min-width: 0; }
.guestbook-feed__header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}
.guestbook-eyebrow { display: block; margin-bottom: 3px; color: var(--render-gold-dark); font-size: 10px; font-weight: 600; }
.guestbook-feed__header h2 { margin: 0; font-family: var(--font-serif); font-size: 27px; font-weight: 500; line-height: 1.18; }
.guestbook-feed__tools { display: flex; align-items: center; gap: 9px; }
.guestbook-list {
    columns: 2;
    column-gap: 18px;
    padding: 5px 2px 0;
}
.guestbook-entry {
    width: calc(100% - 10px);
    min-height: 158px;
    display: inline-flex;
    align-items: center;
    margin: 5px 5px 18px;
    padding: 24px 20px 20px;
    position: relative;
    break-inside: avoid;
    border: 1px solid rgba(125,103,67,0.12);
    border-radius: 3px;
    box-shadow: 0 10px 22px rgba(70,55,37,0.09), 0 2px 5px rgba(70,55,37,0.05);
    transform: rotate(var(--note-tilt, 0deg));
    transform-origin: center center;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.guestbook-entry::before {
    content: "";
    width: 54px;
    height: 14px;
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%) rotate(-1deg);
    background: rgba(213,184,128,0.3);
    box-shadow: inset 0 0 0 1px rgba(172,137,74,0.08);
}
.guestbook-entry__ornament { position: absolute; pointer-events: none; }
.guestbook-entry--paper-pin::before {
    width: 17px;
    height: 17px;
    top: -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #f6dc91 0 14%, #bb8030 37%, #765020 75%, #4e3418 100%);
    box-shadow: 0 4px 7px rgba(65,43,20,0.28), inset -2px -2px 3px rgba(50,28,8,0.24);
}
.guestbook-entry--paper-clip::before {
    width: 15px;
    height: 48px;
    left: auto;
    right: 30px;
    top: -17px;
    border: 2px solid #b88b3d;
    border-bottom-color: #d6b36f;
    border-radius: 10px;
    transform: rotate(-7deg);
    background: transparent;
    box-shadow: none;
}
.guestbook-entry--paper-washi::before {
    width: 70px;
    height: 18px;
    top: -7px;
    transform: translateX(-50%) rotate(3deg);
    background: repeating-linear-gradient(135deg, rgba(213,177,111,0.42) 0 8px, rgba(242,220,176,0.55) 8px 16px);
}
.guestbook-entry--paper-torn {
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 2%, 5% 0, 11% 2%, 18% 0, 26% 2%, 34% 0, 43% 2%, 51% 0, 59% 2%, 68% 0, 77% 2%, 86% 0, 94% 2%, 100% 0, 99% 95%, 94% 98%, 87% 96%, 80% 100%, 72% 97%, 64% 100%, 55% 97%, 46% 100%, 37% 97%, 28% 100%, 20% 97%, 11% 100%, 4% 97%, 0 99%);
    filter: drop-shadow(0 10px 12px rgba(70,55,37,0.11));
}
.guestbook-entry--paper-grid {
    background-image:
        linear-gradient(rgba(190,149,111,0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(190,149,111,0.11) 1px, transparent 1px);
    background-size: 18px 18px;
}
.guestbook-entry--paper-botanical .guestbook-entry__ornament {
    width: 82px;
    height: 108px;
    right: -3px;
    bottom: -4px;
    opacity: 0.5;
    background: url('../assets/images/decorations/wedding-botanical-sprigs.png') 100% center / 400% 100% no-repeat;
    mix-blend-mode: multiply;
}
.guestbook-entry--paper-seal::before {
    width: 62px;
    height: 16px;
    top: -7px;
    background: rgba(213,184,128,0.28);
}
.guestbook-entry--paper-seal .guestbook-entry__ornament {
    width: 31px;
    height: 31px;
    right: 18px;
    bottom: -9px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgba(255,244,220,0.86);
    background: radial-gradient(circle at 35% 28%, #c89064 0 13%, #9c5542 42%, #713528 78%, #51251d 100%);
    box-shadow: 0 4px 8px rgba(76,39,29,0.24), inset 0 0 0 2px rgba(255,226,190,0.16);
}
.guestbook-entry--paper-seal .guestbook-entry__ornament::before { content: "♡"; font-family: var(--font-serif); font-size: 16px; line-height: 1; }
.guestbook-entry--paper-ribbon { padding-left: 38px !important; }
.guestbook-entry--paper-ribbon::before {
    width: 25px;
    height: calc(100% + 14px);
    left: 24px;
    top: -7px;
    transform: rotate(-2deg);
    background: linear-gradient(90deg, rgba(224,192,199,0.72), rgba(246,224,222,0.86) 48%, rgba(201,162,173,0.64));
    box-shadow: 2px 0 5px rgba(114,75,81,0.08);
}
.guestbook-entry--paper-ribbon .guestbook-entry__ornament {
    width: 25px;
    height: 18px;
    left: 20px;
    bottom: -12px;
    background: rgba(216,180,187,0.8);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 63%, 0 100%);
}
.guestbook-entry--paper-lace::before {
    width: 100%;
    height: 17px;
    left: 0;
    top: -2px;
    transform: none;
    background:
        radial-gradient(circle at 8px 0, transparent 7px, rgba(224,204,174,0.55) 7.5px 8.5px, transparent 9px) 0 0 / 16px 16px repeat-x;
    box-shadow: none;
}
.guestbook-entry--paper-lace { border-color: rgba(190,153,104,0.2); }
.guestbook-entry--paper-lace .guestbook-entry__ornament {
    width: 40px;
    height: 26px;
    right: 12px;
    bottom: 8px;
    opacity: 0.52;
    background:
        radial-gradient(circle at 7px 13px, transparent 5px, rgba(184,134,55,0.5) 5.5px 6.5px, transparent 7px) 0 0 / 14px 14px repeat-x;
}
.guestbook-entry--paper-scrapbook {
    border: 0;
    border-radius: 1px;
    clip-path: polygon(0 2%, 5% 0, 11% 2%, 18% 0, 26% 2%, 34% 0, 43% 2%, 51% 0, 59% 2%, 68% 0, 77% 2%, 86% 0, 94% 2%, 100% 0, 99% 95%, 94% 98%, 87% 96%, 80% 100%, 72% 97%, 64% 100%, 55% 97%, 46% 100%, 37% 97%, 28% 100%, 20% 97%, 11% 100%, 4% 97%, 0 99%);
    background-image: linear-gradient(rgba(190,149,111,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(190,149,111,0.1) 1px, transparent 1px);
    background-size: 17px 17px;
    filter: drop-shadow(0 10px 12px rgba(70,55,37,0.12));
}
.guestbook-entry--paper-scrapbook::before { width: 72px; height: 17px; top: -2px; transform: translateX(-50%) rotate(2deg); background: rgba(213,184,128,0.36); }
.guestbook-entry--paper-scrapbook .guestbook-entry__content { position: relative; z-index: 1; }
.guestbook-entry--paper-scrapbook .guestbook-entry__ornament {
    width: 88px;
    height: 112px;
    left: -5px;
    bottom: -9px;
    opacity: 0.45;
    background: url('../assets/images/decorations/wedding-botanical-sprigs.png') 0 center / 400% 100% no-repeat;
    mix-blend-mode: multiply;
}
.guestbook-entry--paper-deckle-pin {
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 2%, 7% 0, 14% 2%, 22% 0, 31% 2%, 40% 0, 49% 2%, 58% 0, 67% 2%, 76% 0, 85% 2%, 94% 0, 100% 2%, 99% 92%, 95% 95%, 89% 93%, 83% 98%, 76% 95%, 68% 100%, 59% 96%, 50% 99%, 41% 95%, 32% 98%, 23% 94%, 14% 97%, 6% 94%, 0 97%);
    background-image: radial-gradient(circle at 30% 20%, rgba(173,137,83,0.05) 0 1px, transparent 1.5px);
    background-size: 12px 12px;
    filter: drop-shadow(0 11px 13px rgba(70,55,37,0.12));
}
.guestbook-entry--paper-deckle-pin::before {
    width: 17px;
    height: 17px;
    top: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #f8dc8b 0 14%, #b77b27 40%, #70491d 78%, #4f3215 100%);
    box-shadow: 0 4px 7px rgba(65,43,20,0.28), inset -2px -2px 3px rgba(50,28,8,0.22);
}
.guestbook-entry--paper-deckle-pin .guestbook-entry__ornament { right: 15px; bottom: 12px; color: rgba(174,119,37,0.68); font: 17px/1 var(--font-serif); }
.guestbook-entry--paper-deckle-pin .guestbook-entry__ornament::before { content: "♡"; }
.guestbook-entry--paper-pressed-flower::before { width: 68px; height: 17px; top: -6px; transform: translateX(-50%) rotate(-2deg); background: rgba(213,184,128,0.3); }
.guestbook-entry--paper-pressed-flower .guestbook-entry__content,
.guestbook-entry--paper-stitched .guestbook-entry__content,
.guestbook-entry--paper-postcard .guestbook-entry__content,
.guestbook-entry--paper-vellum .guestbook-entry__content { position: relative; z-index: 1; }
.guestbook-entry--paper-pressed-flower .guestbook-entry__ornament {
    width: 94px;
    height: 126px;
    right: -10px;
    bottom: -13px;
    opacity: 0.5;
    background: url('../assets/images/decorations/wedding-botanical-sprigs.png') 100% center / 400% 100% no-repeat;
    mix-blend-mode: multiply;
}
.guestbook-entry--paper-stitched {
    border: 1px dashed rgba(184,134,55,0.42);
    box-shadow: inset 0 0 0 8px rgba(255,253,249,0.5), 0 10px 22px rgba(70,55,37,0.09);
}
.guestbook-entry--paper-stitched::before { width: 60px; height: 15px; background: rgba(220,188,142,0.28); }
.guestbook-entry--paper-stitched .guestbook-entry__ornament {
    width: 28px;
    height: 28px;
    right: 13px;
    bottom: 10px;
    border: 1px solid rgba(194,126,111,0.28);
    border-radius: 50%;
}
.guestbook-entry--paper-stitched .guestbook-entry__ornament::before { content: "♡"; display: grid; height: 100%; place-items: center; color: rgba(174,119,37,0.62); font: 15px/1 var(--font-serif); }
.guestbook-entry--paper-postcard { padding-left: 38px; }
.guestbook-entry--paper-postcard::before {
    width: 22px;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
    background: repeating-linear-gradient(135deg, #e5c8bc 0 8px, #fffaf0 8px 16px, #cddcd4 16px 24px, #fffaf0 24px 32px);
    box-shadow: none;
}
.guestbook-entry--paper-postcard .guestbook-entry__ornament {
    width: 34px;
    height: 34px;
    right: 14px;
    top: 13px;
    border: 1px solid rgba(184,134,55,0.34);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px rgba(255,253,249,0.34);
}
.guestbook-entry--paper-vellum { border-color: rgba(137,151,153,0.2); }
.guestbook-entry--paper-vellum::before {
    width: 100%;
    height: 54%;
    left: 0;
    top: 23%;
    transform: none;
    border-top: 1px solid rgba(184,134,55,0.16);
    border-bottom: 1px solid rgba(184,134,55,0.16);
    background: rgba(255,255,255,0.42);
    box-shadow: none;
}
.guestbook-entry--paper-vellum .guestbook-entry__ornament {
    width: 13px;
    height: 13px;
    right: 16px;
    top: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #f5d787 0 15%, #b77b27 48%, #6a441a 100%);
    box-shadow: 0 3px 5px rgba(72,47,18,0.22);
}
.guestbook-entry--paper-tape .guestbook-entry__ornament,
.guestbook-entry--paper-pin .guestbook-entry__ornament,
.guestbook-entry--paper-clip .guestbook-entry__ornament,
.guestbook-entry--paper-washi .guestbook-entry__ornament {
    width: 14px;
    height: 14px;
    right: 16px;
    bottom: 14px;
    border-right: 1.5px solid rgba(174,119,37,0.62);
    border-bottom: 1.5px solid rgba(174,119,37,0.62);
    transform: rotate(45deg);
    border-radius: 0 0 4px 0;
}
.guestbook-entry:hover {
    z-index: 2;
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 0 15px 28px rgba(70,55,37,0.13), 0 3px 7px rgba(70,55,37,0.06);
}
.guestbook-entry--champagne { background-color: #fff5d8; }
.guestbook-entry--blush { background-color: #fff0ed; }
.guestbook-entry--sage { background-color: #eef4ea; }
.guestbook-entry--mist { background-color: #edf3f4; }
.guestbook-entry--ivory { background-color: #fffaf0; }
.guestbook-entry--lavender { background-color: #f3eef8; }
.guestbook-entry--peach { background-color: #fff0e4; }
.guestbook-entry--powder { background-color: #eef1fa; }
.guestbook-entry--stone { background-color: #f0ece7; }
.guestbook-entry__content { min-width: 0; flex: 1; padding: 5px 2px; }
.guestbook-entry__delete {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 9px;
    bottom: 9px;
    border: 1px solid rgba(184,134,55,0.22);
    border-radius: 50%;
    color: #8a8177;
    background: rgba(255,253,249,0.8);
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.guestbook-entry__delete:hover { color: #9b432f; border-color: rgba(155,67,47,0.35); background: rgba(155,67,47,0.05); }
.guestbook-entry__delete svg { width: 14px; height: 14px; }
.guestbook-entry p {
    color: #4c463f;
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
}
.guestbook-entry--font-handwritten p {
    font-family: var(--font-script);
    font-size: 20px;
    line-height: 1.35;
}
.guestbook-entry--font-simple p {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.62;
}
.guestbook-entry--font-classic p {
    font-family: var(--font-classic);
    font-size: 18px;
    line-height: 1.42;
}
.guestbook-entry--font-letter p {
    font-family: var(--font-letter);
    font-size: 14px;
    font-style: italic;
    line-height: 1.55;
}
.guestbook-entry--font-note p {
    font-family: var(--font-note);
    font-size: 21px;
    line-height: 1.28;
}
.guestbook-entry__signature {
    display: block;
    margin-top: 13px;
    color: #9a7130;
    text-align: right;
    font-family: var(--font-script);
    font-size: 18px;
    line-height: 1.1;
}
.guestbook-entry--new { animation: guestbook-entry-in 420ms ease both; border-color: rgba(184,134,55,0.5); }
@keyframes guestbook-entry-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Guestbook board and composer dialog */
.guestbook-page .render-main { padding-left: 12px; padding-right: 12px; }
.guestbook-head {
    width: min(1500px, 100%);
    min-height: 104px;
    margin: 0 auto;
    padding: 14px 26px;
    display: grid;
    grid-template-columns: minmax(245px, auto) minmax(280px, 1fr) auto;
    align-items: center;
    gap: 34px;
    position: relative;
    text-align: left;
}
.guestbook-head__title > span { display: block; margin-bottom: 3px; color: var(--render-gold-dark); font-size: 9px; font-weight: 600; }
.guestbook-head__title > div { display: flex; align-items: center; gap: 10px; }
.guestbook-head__title h1 { font-size: 34px; white-space: nowrap; }
.guestbook-head .guestbook-head__title .heart-mark { margin: 0; color: var(--render-gold); font-size: 21px; font-style: normal; line-height: 1; }
.guestbook-head__intro { max-width: 520px; margin: 0; color: #6e665e; font-size: 12px; line-height: 1.55; }
.guestbook-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}
.guestbook-page-actions .guestbook-open-dialog {
    width: auto;
    min-width: 205px;
    min-height: 46px;
    font-size: 13px;
}
.guestbook-page-status {
    min-height: 0;
    margin: 0 !important;
    position: absolute;
    right: 28px;
    bottom: 2px;
    color: #8b682e !important;
    font-size: 10px !important;
}
.guestbook-board {
    width: 100vw;
    min-height: 580px;
    margin: 0 0 0 calc(50% - 50vw);
    padding: 22px 26px 30px;
    position: relative;
    border-top: 1px solid rgba(184,134,55,0.13);
    border-bottom: 1px solid rgba(184,134,55,0.1);
    background:
        linear-gradient(rgba(184,134,55,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184,134,55,0.035) 1px, transparent 1px),
        rgba(255,253,249,0.34);
    background-size: 44px 44px;
}
.guestbook-board__decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.guestbook-board__botanical {
    width: 170px;
    height: 300px;
    position: absolute;
    opacity: 0.28;
    background-image: url('../assets/images/decorations/wedding-botanical-sprigs.png');
    background-repeat: no-repeat;
    background-size: 400% 100%;
    mix-blend-mode: multiply;
    filter: saturate(0.8) contrast(0.95);
}
.guestbook-board__botanical--one { left: -24px; top: 2%; background-position: 0 center; transform: rotate(-12deg); }
.guestbook-board__botanical--two { right: -18px; top: 14%; background-position: 100% center; transform: rotate(10deg); }
.guestbook-board__botanical--three { left: 31%; top: 38%; width: 130px; height: 240px; background-position: 33.333% center; transform: rotate(18deg); opacity: 0.2; }
.guestbook-board__botanical--four { right: 24%; top: 59%; width: 150px; height: 270px; background-position: 66.666% center; transform: rotate(-14deg); opacity: 0.22; }
.guestbook-board__botanical--five { left: 5%; bottom: -38px; background-position: 100% center; transform: rotate(16deg) scaleX(-1); opacity: 0.23; }
.guestbook-board__ribbon {
    height: 34px;
    position: absolute;
    opacity: 0.16;
    clip-path: polygon(0 18%, 100% 0, 97% 82%, 2% 100%);
    background: linear-gradient(90deg, rgba(225,186,188,0.25), rgba(216,177,111,0.7), rgba(223,195,146,0.18));
    filter: blur(0.2px);
}
.guestbook-board__ribbon--one { width: 320px; left: 15%; top: 23%; transform: rotate(-9deg); }
.guestbook-board__ribbon--two { width: 270px; right: 8%; top: 47%; transform: rotate(12deg); background-color: rgba(203,218,203,0.45); }
.guestbook-board__ribbon--three { width: 360px; left: 36%; bottom: 12%; transform: rotate(-4deg); background-color: rgba(219,201,224,0.35); }
.guestbook-board__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 0 6px 24px;
    color: #796c5a;
    position: relative;
    z-index: 2;
}
.guestbook-board__label span { font-family: var(--font-serif); font-size: 18px; }
.guestbook-board__label small { color: #9a9085; font-size: 10px; }
.guestbook-board__toolbar { display: none; }
.guestbook-board__viewport { position: relative; overflow: visible; }
.guestbook-board__canvas {
    width: 100%;
    min-height: 470px;
    position: relative;
    transform-origin: 0 0;
}
.guestbook-board .guestbook-list {
    display: block;
    min-height: 470px;
    position: relative;
    columns: auto;
    padding: 8px 4px 20px;
    transition: height 260ms ease;
    z-index: 2;
}
.guestbook-board .guestbook-entry {
    width: 245px;
    min-height: 142px;
    padding: 21px 18px 17px;
    position: absolute;
    margin: 0;
    transform: rotate(var(--note-tilt, 0deg));
    transition: transform 180ms ease, box-shadow 180ms ease;
    cursor: pointer;
    contain: layout style;
    backface-visibility: hidden;
}
.guestbook-board .guestbook-entry:nth-child(3n + 2) { min-height: 160px; }
.guestbook-board .guestbook-entry:nth-child(4n) { min-height: 140px; }
.guestbook-board .guestbook-entry__content { max-height: 124px; overflow: hidden; }
.guestbook-board .guestbook-entry p { font-size: 14px; line-height: 1.48; }
.guestbook-board .guestbook-entry--font-handwritten p { font-size: 18px; line-height: 1.32; }
.guestbook-board .guestbook-entry--font-simple p { font-size: 12px; line-height: 1.5; }
.guestbook-board .guestbook-entry--font-classic p { font-size: 18px; line-height: 1.38; }
.guestbook-board .guestbook-entry--font-letter p { font-size: 12px; line-height: 1.5; }
.guestbook-board .guestbook-entry--font-note p { font-size: 19px; line-height: 1.28; }
.guestbook-board .guestbook-entry__signature { margin-top: 10px; font-size: 16px; }
.guestbook-board .guestbook-list--crowded .guestbook-entry {
    min-height: 92px;
    padding: 14px 12px 11px;
}
.guestbook-board .guestbook-list--crowded .guestbook-entry:nth-child(3n + 2) { min-height: 110px; }
.guestbook-board .guestbook-list--crowded .guestbook-entry:nth-child(4n) { min-height: 88px; }
.guestbook-board .guestbook-list--crowded .guestbook-entry__content { max-height: 76px; overflow: hidden; }
.guestbook-board .guestbook-list--crowded .guestbook-entry p { font-size: 10px; line-height: 1.38; }
.guestbook-board .guestbook-list--crowded .guestbook-entry--font-handwritten p { font-size: 13px; line-height: 1.25; }
.guestbook-board .guestbook-list--crowded .guestbook-entry--font-simple p { font-size: 9px; line-height: 1.38; }
.guestbook-board .guestbook-list--crowded .guestbook-entry__signature { margin-top: 6px; font-size: 12px; }
.guestbook-board .guestbook-entry:hover {
    z-index: 100 !important;
    transform: rotate(var(--note-tilt, 0deg)) translateY(-5px) scale(1.018);
    box-shadow: 0 18px 32px rgba(64,51,32,0.18);
}
.guestbook-entry--focus-origin { opacity: 0; }
.guestbook-focus-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(28,24,20,0.56);
    transition: opacity 340ms ease;
}
.guestbook-focus-overlay--visible { opacity: 1; }
body.guestbook-focus-open { overflow: hidden; }
.guestbook-entry-focus {
    min-height: 0;
    position: fixed;
    z-index: 1001 !important;
    margin: 0;
    overflow: visible;
    box-sizing: border-box;
    transform: none !important;
    transform-origin: center;
    cursor: zoom-out;
    transition:
        left 360ms cubic-bezier(.2,.78,.25,1),
        top 360ms cubic-bezier(.2,.78,.25,1),
        width 360ms cubic-bezier(.2,.78,.25,1),
        height 360ms cubic-bezier(.2,.78,.25,1),
        padding 360ms cubic-bezier(.2,.78,.25,1),
        box-shadow 260ms ease;
}
.guestbook-entry-focus .guestbook-entry__content {
    opacity: 0;
    transform: translateY(7px);
    transition:
        opacity 170ms ease 190ms,
        transform 220ms ease 165ms;
}
.guestbook-entry-focus--expanded {
    align-items: center;
    padding: 46px 42px 34px;
    box-shadow: 0 30px 76px rgba(51,39,24,0.25);
}
.guestbook-entry-focus--expanded .guestbook-entry__content {
    width: 100%;
    opacity: 1;
    transform: translateY(0);
}
.guestbook-entry-focus--closing .guestbook-entry__content {
    opacity: 0;
    transform: translateY(4px);
    transition-delay: 0s;
    transition-duration: 85ms;
}
.guestbook-entry-focus--expanded p { font-size: 22px; line-height: 1.55; }
.guestbook-entry-focus--expanded.guestbook-entry--font-handwritten p { font-size: 30px; line-height: 1.38; }
.guestbook-entry-focus--expanded.guestbook-entry--font-simple p { font-size: 17px; line-height: 1.65; }
.guestbook-entry-focus--expanded.guestbook-entry--font-classic p { font-size: 30px; line-height: 1.4; }
.guestbook-entry-focus--expanded.guestbook-entry--font-letter p { font-size: 20px; line-height: 1.62; }
.guestbook-entry-focus--expanded.guestbook-entry--font-note p { font-size: 34px; line-height: 1.3; }
.guestbook-entry-focus--expanded .guestbook-entry__signature { margin-top: 22px; font-size: 23px; }

@media (prefers-reduced-motion: reduce) {
    .guestbook-focus-overlay,
    .guestbook-entry-focus,
    .guestbook-entry-focus .guestbook-entry__content { transition: none; }
}

.guestbook-dialog {
    width: min(720px, calc(100% - 28px));
    max-height: calc(100vh - 30px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(184,134,55,0.24);
    border-radius: 8px;
    color: var(--render-ink);
    background: var(--render-paper);
    box-shadow: 0 28px 70px rgba(35,28,20,0.24);
}
.guestbook-dialog::backdrop { background: rgba(35,31,27,0.5); backdrop-filter: blur(3px); }
.guestbook-dialog__header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 20px 12px 24px;
    position: sticky;
    top: 0;
    z-index: 4;
    border-bottom: 1px solid rgba(184,134,55,0.16);
    background: rgba(255,253,249,0.96);
    backdrop-filter: blur(8px);
}
.guestbook-dialog__header span { display: block; margin-bottom: 2px; color: var(--render-gold-dark); font-size: 9px; font-weight: 600; }
.guestbook-dialog__header h2 { margin: 0; font-family: var(--font-serif); font-size: 25px; font-weight: 500; line-height: 1.1; }
.guestbook-dialog__close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(184,134,55,0.28);
    border-radius: 50%;
    color: #6f665c;
    background: #fff;
    transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.guestbook-dialog__close:hover { color: #a94e39; border-color: rgba(169,78,57,0.35); transform: rotate(5deg); }
.guestbook-dialog__close svg { width: 18px; height: 18px; }
.guestbook-dialog .guestbook-form__visual { height: 140px; }
.guestbook-dialog .guestbook-form__body { padding: 22px 26px 20px; }
.guestbook-dialog .guestbook-form__heading { margin-bottom: 18px; }
.guestbook-dialog .guestbook-form__heading h3 {
    margin: 0 0 3px;
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.15;
}
.guestbook-dialog .guestbook-form .field textarea { min-height: 112px; }
.guestbook-compose-preview { margin: -2px 0 18px; }
.guestbook-compose-preview__bar {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 2px;
    color: #7a7065;
    font-size: 10px;
    font-weight: 600;
}
.guestbook-live-note {
    min-height: 150px;
    display: flex;
    align-items: center;
    padding: 30px 36px 24px;
    position: relative;
    overflow: visible;
    border: 1px solid rgba(125,103,67,0.13);
    border-radius: 3px;
    box-shadow: 0 12px 25px rgba(70,55,37,0.1);
    transition: background 180ms ease, border-color 180ms ease;
}
.guestbook-live-note::before {
    content: "";
    width: 54px;
    height: 14px;
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    background: rgba(213,184,128,0.3);
}
.guestbook-live-note.guestbook-entry--paper-scrapbook::before { width: 72px; height: 17px; top: -2px; transform: translateX(-50%) rotate(2deg); background: rgba(213,184,128,0.36); }
.guestbook-live-note.guestbook-entry--paper-deckle-pin::before {
    width: 17px;
    height: 17px;
    top: -6px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #f8dc8b 0 14%, #b77b27 40%, #70491d 78%, #4f3215 100%);
}
.guestbook-live-note.guestbook-entry--paper-pressed-flower::before { width: 68px; height: 17px; top: -6px; transform: translateX(-50%) rotate(-2deg); background: rgba(213,184,128,0.3); }
.guestbook-live-note.guestbook-entry--paper-stitched::before { width: 60px; height: 15px; background: rgba(220,188,142,0.28); }
.guestbook-live-note.guestbook-entry--paper-postcard { padding-left: 48px; }
.guestbook-live-note.guestbook-entry--paper-postcard::before {
    width: 22px;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
    background: repeating-linear-gradient(135deg, #e5c8bc 0 8px, #fffaf0 8px 16px, #cddcd4 16px 24px, #fffaf0 24px 32px);
}
.guestbook-live-note.guestbook-entry--paper-vellum::before { width: 100%; height: 54%; left: 0; top: 23%; transform: none; border-top: 1px solid rgba(184,134,55,0.16); border-bottom: 1px solid rgba(184,134,55,0.16); background: rgba(255,255,255,0.42); }
.guestbook-live-note .guestbook-entry__content { width: 100%; }
.guestbook-live-note p { color: #4c463f; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; text-align: center; }
.guestbook-live-note.guestbook-entry--font-handwritten p { font-family: var(--font-script); font-size: 23px; line-height: 1.35; }
.guestbook-live-note.guestbook-entry--font-simple p { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; }
.guestbook-live-note.guestbook-entry--font-classic p { font-family: var(--font-classic); font-size: 24px; line-height: 1.4; }
.guestbook-live-note.guestbook-entry--font-letter p { font-family: var(--font-letter); font-size: 16px; font-style: italic; line-height: 1.6; }
.guestbook-live-note.guestbook-entry--font-note p { font-family: var(--font-note); font-size: 27px; line-height: 1.3; }
.guestbook-live-note .guestbook-entry__signature { margin-top: 12px; font-size: 18px; }
.guestbook-entry__signature--placeholder { opacity: 0.42; }


/* How it works */
.steps { width: min(1000px, 100%); margin: 0 auto; display: grid; gap: 10px; }
.step-card { min-height: 70px; display: flex; align-items: center; gap: 20px; padding: 10px 17px; }
.step-number {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(184,134,55,0.58);
    border-radius: 50%;
    color: #91651f;
    font-family: var(--font-serif);
    font-size: 20px;
}
.step-card h2 { margin: 0 0 2px; font-family: var(--font-serif); font-size: 18px; font-weight: 500; line-height: 1.15; }
.step-card p { color: #625a52; font-size: 11px; line-height: 1.45; }
.thanks-note {
    width: min(1000px, 100%);
    min-height: 80px;
    margin: 22px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #685d50;
}
.thanks-note svg { width: 48px; height: 48px; color: var(--render-gold); }
.thanks-note strong { display: block; font-family: var(--font-serif); font-size: 15px; font-weight: 500; }
.thanks-note span { display: block; margin-top: 2px; font-size: 11px; }

.footer { display: none; }

@media (max-width: 1180px) {
    .page-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
    .render-main { padding-left: 22px; padding-right: 22px; }
    .header__inner { padding: 0 22px; }
    .header__nav { gap: 22px; }
    .hero-stage { height: auto; grid-template-columns: 1fr; overflow: visible; }
    .hero-art { min-height: 390px; order: -1; margin: 0 -22px; background-position: center; }
    .hero-art::before { background: linear-gradient(180deg, transparent 70%, rgba(255,253,249,1)); }
    .hero-copy { padding: 18px 24px 12px; text-align: center; }
    .hero-title { margin: 0 auto; }
    .hero-title span,
    .hero-copy .heart-mark { margin-left: 0; }
    .hero-text { margin: 0 auto; }
    .home-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; margin-right: 0; }
    .info-strip { margin-left: 0; margin-right: 0; }
    .guestbook-layout { grid-template-columns: 400px minmax(0, 1fr); }
    .guestbook-board .guestbook-list { min-height: 470px; }
}

@media (max-width: 820px) {
    .header__nav,
    .header__cta { display: none; }
    .header__hamburger { display: flex; }
    .mobile-nav { background: rgba(255,253,249,0.99); }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-viewer { width: calc(100% - 16px); height: calc(100dvh - 16px); }
    .gallery-viewer__stage { min-height: 0; }
    .upload-layout,
    .info-layout,
    .guestbook-layout { grid-template-columns: 1fr; }
    .info-tabs {
        min-height: 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .info-tabs::-webkit-scrollbar { display: none; }
    .info-tab {
        min-width: 156px;
        min-height: 52px;
        flex: 0 0 auto;
        padding: 0 14px;
        border-left: 0;
        border-bottom: 3px solid transparent;
        scroll-snap-align: start;
    }
    .info-tab--active { border-bottom-color: var(--render-gold); }
    .info-panel { min-height: 0; }
    .wide-photo { height: auto; aspect-ratio: 16 / 9; }
    .guestbook-layout { width: min(680px, 100%); gap: 26px; }
    .guestbook-form__visual { height: 210px; }
    .guestbook-list { columns: 1; }
    .guestbook-head {
        min-height: 0;
        padding: 18px 8px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .guestbook-head__title > div { justify-content: center; }
    .guestbook-head__title h1 { font-size: 32px; }
    .guestbook-head__intro { max-width: 520px; }
    .guestbook-page-actions {
        width: min(360px, 100%);
        display: flex;
        justify-content: center;
    }
    .guestbook-page-actions .guestbook-open-dialog { width: 100%; min-width: 0; }
    .guestbook-page-status { position: static; }
    .guestbook-board { padding-left: 16px; padding-right: 16px; }
    .guestbook-board .guestbook-list { min-height: 500px; }
    .home-actions { gap: 14px; }
    .render-btn { min-width: 0; width: 100%; }
}

@media (max-width: 600px) {
    .render-main {
        padding: 0 14px 26px;
        background-image: url("../assets/images/decor/wedding-edge-frame-mobile-soft.webp");
        background-position: center top;
        background-size: 112% auto;
        background-repeat: repeat-y;
        background-attachment: scroll;
    }
    .header__inner { padding: 0 14px; }
    .hero-art { min-height: 270px; margin: 0 -14px; background-position: 47% center; }
    .hero-copy { padding: 14px 2px 8px; }
    .hero-title { font-size: 40px; }
    .hero-title span { font-size: 43px; }
    .hero-copy .heart-mark { margin-top: 7px; }
    .hero-text { font-size: 12px; }
    .home-card-row,
    .gallery-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: 0; }
    .info-strip { grid-template-columns: 1fr; }
    .info-strip__item { border-right: 0; border-bottom: 1px solid var(--render-line); }
    .info-strip__item:last-child { border-bottom: 0; }
    .home-actions,
    .gallery-tools { flex-direction: column; }
    .gallery-tools { gap: 10px; }
    .pill-group { width: 100%; }
    .filter-pill { min-width: 0; flex: 1; padding: 0 8px; }
    .gallery-sort { width: 100%; }
    .gallery-admin-toggle { width: 100%; }
    .gallery-summary { text-align: center; }
    .media-card__image { height: auto; }
    .gallery-viewer { width: calc(100% - 8px); height: calc(100dvh - 8px); max-height: calc(100vh - 8px); }
    .gallery-viewer__header { min-height: 60px; padding: 9px 10px 9px 15px; }
    .gallery-viewer__header { gap: 10px; }
    .gallery-viewer__header h2 { max-width: min(44vw, 240px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
    .gallery-viewer__actions { gap: 5px; }
    .gallery-viewer__action,
    .gallery-viewer__close { width: 38px; height: 38px; }
    .gallery-viewer__stage { min-height: 0; }
    .gallery-viewer__nav { width: 40px; height: 50px; }
    .gallery-viewer__nav--previous { left: 8px; }
    .gallery-viewer__nav--next { right: 8px; }
    .gallery-viewer__footer { min-height: 54px; padding: 9px 14px; }
    .upload-layout { gap: 18px; }
    .upload-picker { min-height: 286px; }
    .upload-drop { min-height: 262px; margin: 8px; }
    .upload-drop svg { width: 50px; height: 50px; margin-bottom: 12px; }
    .upload-drop strong { margin-bottom: 8px; line-height: 1.55; }
    .upload-form { padding: 0 0 8px; }
    .upload-form .field { margin-bottom: 16px; }
    .upload-preview { min-height: 286px; }
    .upload-preview__stage,
    .upload-preview img,
    .upload-preview__video-card { min-height: 228px; height: 228px; }
    .upload-selection { padding: 10px 10px 0; }
    .upload-selection__item { grid-template-columns: 50px minmax(0, 1fr) 26px; gap: 10px; }
    .upload-selection__thumb { width: 50px; height: 42px; }
    .upload-add-more { margin: 0 10px 10px; }
    .upload-confirm { width: calc(100% - 12px); max-height: calc(100dvh - 12px); }
    .upload-confirm__frame { max-height: calc(100dvh - 14px); }
    .upload-confirm__header { min-height: 66px; padding: 10px 12px 10px 17px; }
    .upload-confirm__header h2 { font-size: 23px; }
    .upload-confirm__media { min-height: 230px; }
    .upload-confirm__details { grid-template-columns: 1fr; gap: 12px; padding: 17px; }
    .upload-confirm__message { grid-column: 1; }
    .upload-confirm__actions { grid-template-columns: 1fr; padding: 0 17px 18px; }
    .info-panel { padding: 22px 20px; }
    .info-panel h2 { font-size: 27px; }
    .info-panel p { min-height: 0; font-size: 13px; }
    .guestbook-head p { font-size: 12px; }
    .guestbook-form__visual { height: 150px; }
    .guestbook-form__body { padding: 21px 18px 18px; }
    .guestbook-customization { grid-template-columns: 1fr; }
    .guestbook-paper-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .guestbook-feed__header h2 { font-size: 23px; }
    .guestbook-entry { min-height: 135px; padding: 20px 17px; }
    .guestbook-entry p { font-size: 14px; }
    .guestbook-page-actions .guestbook-open-dialog { min-width: 0; flex: 1; }
    .guestbook-board { min-height: 0; padding: 18px 10px 24px; }
    .guestbook-board__label { align-items: flex-start; flex-direction: column; gap: 2px; margin: 0 4px 12px; }
    .guestbook-board__toolbar {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
        padding: 4px 4px 4px 10px;
        border: 1px solid rgba(184,134,55,0.18);
        border-radius: 6px;
        color: #756b60;
        background: rgba(255,253,249,0.9);
        box-shadow: 0 5px 15px rgba(58,45,29,0.05);
        font-size: 9px;
    }
    .guestbook-board__controls { display: flex; align-items: center; gap: 3px; }
    .guestbook-board__control {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(184,134,55,0.24);
        border-radius: 50%;
        color: #5e554c;
        background: #fffdf9;
    }
    .guestbook-board__control:active { color: #96651e; background: #fbf2e2; }
    .guestbook-board__control svg { width: 16px; height: 16px; }
    .guestbook-board__zoom { width: 38px; color: #8b713f; font-size: 9px; text-align: center; }
    .guestbook-board__viewport {
        height: min(64vh, 540px);
        min-height: 430px;
        overflow: hidden;
        border: 1px solid rgba(184,134,55,0.2);
        border-radius: 6px;
        background:
            linear-gradient(rgba(184,134,55,0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(184,134,55,0.035) 1px, transparent 1px),
            rgba(255,253,249,0.72);
        background-size: 32px 32px;
        box-shadow: inset 0 0 30px rgba(103,80,45,0.04);
        touch-action: none;
        cursor: grab;
        overscroll-behavior: contain;
    }
    .guestbook-board__viewport:active { cursor: grabbing; }
    .guestbook-board__viewport:focus-visible { outline: 2px solid rgba(199,148,61,0.42); outline-offset: 2px; }
    .guestbook-board__canvas {
        width: 3000px;
        min-height: 0;
        position: absolute;
        left: 0;
        top: 0;
        will-change: transform;
    }
    .guestbook-board__canvas--animated { transition: transform 220ms cubic-bezier(.22,.75,.28,1); }
    .guestbook-board .guestbook-list { width: 100%; min-height: 0; }
    .guestbook-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
    .guestbook-dialog__header { min-height: 62px; padding: 9px 13px 9px 17px; }
    .guestbook-dialog .guestbook-form__visual { height: 105px; }
    .guestbook-dialog .guestbook-form__body { padding: 18px 16px 15px; }
    .guestbook-compose-preview { margin-bottom: 15px; }
    .guestbook-live-note { min-height: 132px; padding: 27px 18px 20px; }
    .guestbook-live-note p { font-size: 15px; }
    .guestbook-live-note.guestbook-entry--font-handwritten p { font-size: 20px; }
    .guestbook-live-note.guestbook-entry--font-simple p { font-size: 12px; }
    .guestbook-live-note.guestbook-entry--font-classic p { font-size: 21px; }
    .guestbook-live-note.guestbook-entry--font-letter p { font-size: 14px; }
    .guestbook-live-note.guestbook-entry--font-note p { font-size: 23px; }
    .guestbook-live-note .guestbook-entry__signature { font-size: 16px; }
    .guestbook-entry-focus--expanded { padding: 34px 24px 26px; }
    .guestbook-entry-focus--expanded p { font-size: 18px; }
    .guestbook-entry-focus--expanded.guestbook-entry--font-handwritten p { font-size: 24px; }
    .guestbook-entry-focus--expanded.guestbook-entry--font-simple p { font-size: 14px; }
    .guestbook-entry-focus--expanded.guestbook-entry--font-classic p { font-size: 25px; }
    .guestbook-entry-focus--expanded.guestbook-entry--font-letter p { font-size: 17px; }
    .guestbook-entry-focus--expanded.guestbook-entry--font-note p { font-size: 28px; }
    .guestbook-entry-focus--expanded .guestbook-entry__signature { font-size: 19px; }
    .page-head { padding-top: 20px; }
    .page-head h1 { font-size: 32px; }
    .step-card { align-items: flex-start; }
    .thanks-note { padding: 15px; justify-content: flex-start; }
}