:root {
    color-scheme: light;
    --ink: #30372e;
    --paper: #ffffff;
    --white: #ffffff;
    --acid: #edf1e7;
    --rust: #8e6558;
    --muted: #656e60;
    --line: #dfe4da;
    --sage: #738563;
    --soft: #f5f6f2;
    --serif: Georgia, 'Times New Roman', serif;
}

body { background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }
[hidden] { display: none !important; }
.eyebrow { font: 600 10px/1.5 Arial, sans-serif; letter-spacing: .16em; }
.button, .primary, .complete-button {
    min-height: 44px; border-width: 1px; border-radius: 4px;
    font-weight: 600; letter-spacing: .01em; transition: background .15s;
}
.button:hover, .primary:hover, .complete-button:hover { transform: none; box-shadow: none; filter: brightness(.95); }
.button.light { background: #fff; }
.button:disabled, .primary:disabled { cursor: not-allowed; opacity: .5; }
.panel, .card { border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: none; }
.field, .check, .template-label, .feature-toggle strong { font-weight: 600; }
.field input, .field select, .field textarea, .category-select, .card input {
    border: 1px solid #b9c2b1; background: #fff; border-radius: 4px;
    color: var(--ink); font-weight: 400;
}
.site-header, .mobile-header { background: #fffffff5; }
.site-header .logo { width: 175px; }
.actions { flex-wrap: wrap; }
.ornament { display: block; width: 30px; height: 30px; margin: 0 auto 20px; }

/* The host workspace shares the calm typography and paper of the wedding signs. */
.sr-host .sidebar { background: #fff; padding-top: 30px; }
.sr-host .shell-logo { width: 165px; margin-bottom: 42px; }
.sr-host .main-nav a { font-weight: 500; }
.sr-host .main-nav a.active, .sr-host .mobile-links a.active { background: var(--acid); }
.sr-host .main-nav a:hover, .sr-host .account-link:hover { background: var(--soft); }
.sr-host .page { padding-top: 48px; }
.sr-host .page-head h1, .sr-host .event-copy h1 {
    font: 400 clamp(38px, 5vw, 66px)/1.07 var(--serif); letter-spacing: -.04em;
}
.sr-host .section-title, .sr-host .editor-controls h1, .sr-host .event-title h2,
.sr-host .promise h2, .sr-host .empty h2, .sr-host .billing-empty h2 {
    font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -.025em;
}
.sr-host .event-context strong, .sr-host .mobile-menu-context strong {
    font: 400 23px/1.15 var(--serif); overflow-wrap: anywhere;
}
.sr-host .summary strong, .sr-host .metric strong, .sr-host .quick strong,
.sr-host .billing-stat strong, .sr-host .billing-amount, .sr-host .section-number {
    font-family: var(--serif); font-weight: 400;
}
.sr-host .event-head, .sr-host .event-cover { background: var(--soft); }
.sr-host .event-head:not(:has(img)):after, .sr-host .event-cover:not(:has(img)):after { background: none; }
.sr-host .event-head:not(:has(img)) { border: 1px solid var(--line); }
.sr-host .event-head, .sr-host .event-cover { border-radius: 6px; }
.sr-host .event-title h2, .sr-host .event-copy h1 { overflow-wrap: anywhere; }
.sr-host .promise { background: var(--soft); border: 1px solid var(--line); box-shadow: none; border-radius: 7px; }
.sr-host .promise small { color: var(--muted); }
.sr-host .invite { background: var(--soft); border: 1px solid var(--line); border-radius: 5px; }
.sr-host .mobile-menu { border-color: var(--line); box-shadow: 0 12px 35px #30372e14; }
.sr-host .template-option span, .sr-host .choice span { border-radius: 4px; font-weight: 500; }
.sr-host .template-option input:checked + span, .sr-host .choice input:checked + span { border: 1px solid var(--sage); }
.sr-host .template-option input:focus-visible + span, .sr-host .choice input:focus-visible + span,
.sr-host .palette-option input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 3px; }
.sr-host .palette-option.ivory span { background: #738563; }
.sr-host .palette-option.blush span { background: #9a6470; }
.sr-host .palette-option.midnight span { background: #384956; }
.sr-host .sign-preview { --sign-bg: #fff; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 28px #30372e12; }
.sr-host .sign-canvas { background: #fff; }
.sr-host .asset-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 380px); }
.sr-host .preview-hero { background: var(--soft); }
.sr-host .preview-copy h2 { font: 500 clamp(36px, 5vw, 66px)/1.08 Arial, sans-serif; letter-spacing: -.04em; overflow-wrap: anywhere; }
.sr-host .preview-hero.serif .preview-copy h2 { font-family: var(--serif); font-weight: 400; }
.sr-host .preview-hero:has(img[hidden]) .preview-shade { display: none; }
.sr-host .preview-hero:has(img[hidden]) .preview-copy { color: var(--ink); }
.sr-host .preview-hero:has(img[hidden]) .focal-dot,
.sr-host .preview-hero:has(img[hidden]) .focal-note { display: none; }
.sr-host .focal-note { border-color: var(--line); border-radius: 4px; font-weight: 500; }
.sr-host .preview-hero:hover .focal-dot { box-shadow: 0 0 0 7px #73856366; }
.sr-host .feature-toggle small { font-size: 11px; }
.sr-host .print-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.sr-host .print-error { color: #91372e; }

/* Camera controls are white; the live viewfinder stays dark for photography. */
.sr-camera .card h1, .sr-camera .camera-empty h1, .sr-camera .camera-complete h1 {
    font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.035em;
    overflow-wrap: anywhere;
}
.sr-camera .gate { background: var(--soft); }
.sr-camera .card .logo { margin-bottom: 32px; }
.sr-camera .card .ornament { margin: 0 0 22px; }
.sr-camera .camera { background: #fff; color: var(--ink); }
.sr-camera .camera-top { background: #fff; border-bottom: 1px solid var(--line); gap: 12px; }
.sr-camera .camera-top small { color: var(--muted); max-width: 180px; text-align: center; overflow-wrap: anywhere; }
.sr-camera .gallery-link { color: var(--ink); border-color: var(--line); font: 500 11px Arial, sans-serif; min-height: 40px; display: inline-flex; align-items: center; }
.sr-camera .count { font: 500 12px Arial, sans-serif; white-space: nowrap; }
.sr-camera .camera-empty { background: #20271f; color: #fff; }
.sr-camera .camera-empty p { color: #d9e0d4; }
.sr-camera .camera-empty .open { background: #edf1e7; color: #30372e; }
.sr-camera .camera-controls { background: #fff; border-top: 1px solid var(--line); }
.sr-camera .filter-row { flex-wrap: wrap; overflow: visible; }
.sr-camera .filter-row button { min-height: 40px; border-color: var(--line); color: var(--muted); }
.sr-camera .filter-row button.active { background: var(--ink); color: #fff; }
.sr-camera .shutter { border: 4px solid #fff; background: var(--ink); box-shadow: 0 0 0 2px var(--sage); }
.sr-camera .shots-left strong { font: 400 28px var(--serif); }
.sr-camera .shots-left small, .sr-camera .saved { color: var(--muted); }
.sr-camera .saved strong { color: var(--ink); }
.sr-camera .camera-flash span { font-family: var(--serif); font-weight: 400; }
.sr-camera .complete-mark { border: 1px solid var(--line); box-shadow: none; transform: none; background: var(--soft); font-family: var(--serif); }
.sr-camera .complete-total strong { font-family: var(--serif); font-weight: 400; }
.sr-camera .skip { color: var(--muted); }

/* Preserve saved gallery layout choices while refining both type styles. */
.sr-gallery .top { border-color: var(--line); }
.sr-gallery .hero { margin: 18px; background: var(--soft); border-radius: 5px; }
.sr-gallery .hero h1 { font: 500 clamp(38px, 7vw, 82px)/1.08 Arial, sans-serif; letter-spacing: -.045em; overflow-wrap: anywhere; }
.sr-gallery.type-serif .hero h1 { font-family: var(--serif); font-weight: 400; }
.sr-gallery .hero-content > .ornament { margin-bottom: 14px; }
.sr-gallery .hero-cover .ornament { filter: brightness(0) invert(1); }
.sr-gallery .event-date, .sr-gallery .hero-stats, .sr-gallery .viewer-count { font-family: Arial, sans-serif; font-weight: 500; }
.sr-gallery .hero-stats strong { font-family: var(--serif); font-weight: 400; }
.sr-gallery .empty h2, .sr-gallery .locked h2 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
.sr-gallery .host-note { border: 1px solid var(--line); border-radius: 3px; font-family: Arial, sans-serif; }
.sr-gallery .host-tools { gap: 16px; }
.sr-gallery .toast { border-radius: 5px; }
.sr-gallery .shot { border-radius: 3px; }
.sr-gallery .icon-button:focus-visible { outline: 2px solid var(--sage); }

.sr-pricing .hero h1, .sr-pricing .plan-name, .sr-pricing .price strong,
.sr-pricing .clarifier h2, .sr-pricing .faq h2, .sr-pricing .final h2 {
    font-family: var(--serif); font-weight: 400; line-height: 1.07; letter-spacing: -.035em;
}
.sr-pricing .hero h1 { font-size: clamp(45px, 7vw, 80px); }
.sr-pricing .hero h1 span:after { display: none; }
.sr-pricing .plan.featured { border: 1px solid var(--sage); box-shadow: 0 6px 24px #30372e0a; }
.sr-pricing .badge { background: var(--acid); font-family: Arial, sans-serif; font-weight: 600; }
.sr-pricing .plan li, .sr-pricing .faq summary { font-weight: 500; }
.sr-pricing .clarifier, .sr-pricing .final { background: var(--soft); color: var(--ink); }
.sr-pricing .detail { border-color: var(--line); }
.sr-pricing .detail:last-child { border-color: var(--line); }
.sr-pricing .detail p { color: var(--muted); }
.sr-pricing footer { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }

@media (min-width: 800px) {
    body.sr-camera:has(.camera) { background: var(--soft); }
    .sr-camera .camera { box-shadow: 0 12px 40px #30372e14; border: 1px solid var(--line); }
}
@media (max-width: 1050px) { .sr-host .asset-grid { grid-template-columns: minmax(0, 1fr); } .sr-host .sign-preview { width: min(100%, 430px); margin-inline: auto; } }
@media (max-width: 820px) { .sr-host .page { padding-top: 30px; } }
@media (max-width: 600px) {
    .sr-gallery .hero { margin: 8px; }
    .sr-gallery .top { align-items: center; gap: 10px; }
    .sr-camera .camera-top { padding-inline: 12px; }
    .sr-camera .camera-top img { width: 130px; }
    .sr-host .page-head h1 { font-size: 42px; }
    input, select, textarea, .field input, .field select, .field textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; } }