/* R5 polish: appearance, landing, and certificate each have one styling source. */
:root {
    --muted: #94938b;
    --danger: #dfaaa5;
    --button-ink: #080808;
    --control-surface: rgba(10, 10, 10, .94);
}
html[data-theme="light"] {
    color-scheme: light;
    --black: #f6f3ed;
    --black-soft: #eee9e0;
    --panel: #fbf9f4;
    --panel-2: #eee9e0;
    --silver: #292b25;
    --silver-soft: #5c5e54;
    --muted: #68695e;
    --line: rgba(55, 58, 49, .18);
    --gold: #806135;
    --gold-soft: rgba(128, 97, 53, .46);
    --white: #25271f;
    --danger: #963d35;
    --button-ink: #fffaf1;
    --control-surface: rgba(246, 243, 237, .96);
}
html[data-theme="dark"] { color-scheme: dark; }
body { line-height: 1.6; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px;
}
.vault-button { line-height: 1.55; letter-spacing: .14em; }
.vault-button:hover { color: var(--button-ink); }
.prototype-notice {
    padding: 12px 360px 12px 24px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    font-size: .66rem;
    letter-spacing: .09em;
    line-height: 1.65;
}
.appearance-controls {
    position: fixed;
    top: 12px;
    right: max(20px, calc((100vw - 1120px) / 2));
    z-index: 10000;
    display: flex;
    align-items: center;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--control-surface);
    backdrop-filter: blur(12px);
}
.language-control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
}
.language-control label { color: var(--muted); font-size: .63rem; letter-spacing: .1em; }
.language-control select {
    min-width: 104px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--silver);
    color-scheme: inherit;
    font-size: .84rem;
    cursor: pointer;
}
.language-control option { background: var(--panel); color: var(--silver); }
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 40px;
    padding: 8px 11px;
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--silver-soft);
    font-size: .68rem;
    letter-spacing: .06em;
}
.theme-toggle:hover { color: var(--gold); }
.theme-toggle svg { width: 17px; height: 17px; flex: 0 0 17px; }
html[data-theme="dark"] .theme-icon-moon,
html[data-theme="light"] .theme-icon-sun { display: none; }
@media screen and (min-width: 561px) {
    .topbar { padding-right: 330px; }
}
@media screen and (min-width: 561px) and (max-width: 999px) {
    .topbar { padding-top: 72px; padding-right: 0; }
}
@media screen and (max-width: 780px) {
    .language-control label { display: none; }
    #theme-toggle-label { display: none; }
    .prototype-notice { padding-right: 195px; }
}
@media screen and (max-width: 560px) {
    .appearance-controls { top: 9px; right: 12px; }
    .language-control { padding: 5px 9px; }
    .language-control select { min-width: 97px; }
    .topbar { padding-right: 0; padding-top: 64px; }
    .prototype-notice { min-height: 58px; padding: 14px 180px 12px 18px; font-size: .6rem; }
}

/* Light surfaces cover all archive views, not only the public landing. */
@media screen {
    html[data-theme="light"] body { background: var(--black); }
    html[data-theme="light"] :is(.collection-search-control, .milestone-toggle, .purchase-panel) {
        background: var(--panel);
    }
    html[data-theme="light"] .collection-search-control:focus-within,
    html[data-theme="light"] :is(.vault-menu-item, .record-card, .timeline-milestone-card, .annual-milestone-card, .annual-reflection-card):hover,
    html[data-theme="light"] :is(.annual-year-tab:hover, .annual-year-tab.is-active) { background: var(--panel-2); }
    html[data-theme="light"] .collection-search-input::placeholder { color: var(--muted); }
    html[data-theme="light"] :is(.moment-gallery-main .detail-image, .gallery-draft-item, .gallery-draft-image, .moment-gallery-thumb img, .private-photo-frame, .private-photo-feedback) { background: var(--black-soft); }
    html[data-theme="light"] :is(.record-delete-dialog, #migration-dialog) { background: rgba(31, 32, 27, .55); }
    .room-display-image-tag { color: #eeeeea; }
    html[data-theme="light"] .vault-entry h1::before { opacity: .4; }
    html[data-theme="light"] .vault-entry h1::after { opacity: .25; }
}
@supports selector(:has(*)) {
    body:has([data-screen="landing"].is-active) #workspace-notice { display: none; }
}

/* LANDING: quiet typography and the story behind each achievement. */
[data-screen="landing"] .vault-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 730px;
    padding: 92px 24px 78px;
    text-align: center;
}
[data-screen="landing"] .vault-entry-crest { width: 52px; height: 52px; margin: 0 auto 25px; font: 400 1.55rem/1 Georgia, serif; }
[data-screen="landing"] .vault-entry > .eyebrow { color: var(--muted); font-size: .62rem; letter-spacing: .2em; }
[data-screen="landing"] .vault-entry h1 { margin: 25px 0 0; color: var(--silver); font: 400 clamp(2.7rem, 6vw, 4.5rem)/1.05 Georgia, serif; letter-spacing: .15em; }
.offer-heading {
    max-width: 690px;
    margin: 35px 0 20px;
    color: var(--silver);
    font: 400 clamp(1.85rem, 3.7vw, 3.05rem)/1.25 Georgia, serif;
    letter-spacing: -.025em;
    text-wrap: balance;
}
[data-screen="landing"] .vault-entry-subtitle {
    max-width: 590px;
    margin: 0;
    color: var(--silver-soft);
    font: 400 1.04rem/1.85 Arial, sans-serif;
    letter-spacing: 0;
    text-wrap: pretty;
}
.landing-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 34px; }
.landing-actions .vault-button { font-size: .73rem; letter-spacing: .12em; padding: 14px 24px; }
.landing-link { padding: 12px 4px; border: 0; background: transparent; color: var(--silver-soft); font-size: .72rem; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.landing-link:hover { background: transparent; color: var(--gold); }
.landing-edition { margin: 35px 0 0; color: var(--muted); font-size: .6rem; letter-spacing: .17em; }
.offer-layout { width: min(1060px, calc(100% - 80px)); margin: 0 auto; padding: 0 0 36px; }
.offer-section { padding: 82px 0; border-top: 1px solid var(--line); }
.offer-section .eyebrow { font-size: .65rem; letter-spacing: .17em; }
.offer-section h2 { margin: 20px 0 24px; color: var(--silver); font: 400 clamp(1.8rem, 3.4vw, 2.7rem)/1.25 Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.offer-section p { color: var(--silver-soft); font-size: .97rem; line-height: 1.9; }
.preview-section { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 7vw, 94px); align-items: center; }
.offer-features { margin: 32px 0 0; padding: 0; list-style: none; }
.offer-features li { display: flex; align-items: baseline; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line); }
.offer-number { color: var(--gold); font: 400 .9rem Georgia, serif; }
.offer-features strong { color: var(--silver); font-weight: 400; font-size: .73rem; letter-spacing: .1em; }
.offer-features small { display: block; margin-top: 5px; color: var(--muted); font-size: .83rem; line-height: 1.75; }
.product-preview { padding: 28px; border: 1px solid var(--line); background: var(--panel); }
.preview-heading { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 20px; color: var(--muted); font-size: .57rem; letter-spacing: .1em; }
.preview-room img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.preview-room h3 { margin: 24px 0 9px; color: var(--silver); font: 400 1.8rem/1.25 Georgia, serif; }
.preview-room p { margin: 0; font-size: .86rem; }
.preview-path { display: flex; justify-content: space-between; margin-top: 25px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font: .83rem Georgia, serif; }
.preview-caption { margin: 14px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.7; text-align: center; }
.offer-edition { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 64px; }
.offer-edition h2 { margin-bottom: 16px; }
.offer-edition p { max-width: 520px; margin: 0; }
.offer-allocation { padding-left: 40px; border-left: 1px solid var(--line); }
.offer-price { margin: 0 0 12px; color: var(--silver); font: 400 clamp(2.2rem, 4vw, 3.1rem)/1.15 Georgia, serif; }
.offer-meta { margin: 0; color: var(--muted); font-size: .64rem; letter-spacing: .11em; line-height: 1.8; }
.offer-allocation .launch-note { margin-top: 18px; color: var(--muted); font-size: .73rem; letter-spacing: .03em; }
.offer-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; }
.offer-faq h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.offer-faq details { border-bottom: 1px solid var(--line); }
.offer-faq summary { position: relative; padding: 22px 30px 22px 0; color: var(--silver); font-size: .95rem; line-height: 1.65; cursor: pointer; list-style: none; }
.offer-faq summary::-webkit-details-marker { display: none; }
.offer-faq summary::after { content: "+"; position: absolute; right: 2px; top: 20px; color: var(--gold); font-size: 1.1rem; }
.offer-faq details[open] summary::after { content: "−"; }
.offer-faq details p { margin: 0 0 22px; font-size: .9rem; }
.offer-faq .vault-button { max-width: 100%; margin-bottom: 22px; padding: 11px 15px; font-size: .7rem; white-space: normal; }
.offer-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding: 32px 0 16px; border-top: 1px solid var(--line); }
.offer-footer p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.8; }
.offer-footer .founder-line { margin-bottom: 3px; color: var(--silver-soft); font: 400 1.03rem/1.6 Georgia, serif; }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
@media screen and (max-width: 780px) {
    .offer-layout { width: calc(100% - 40px); }
    .offer-section { padding: 50px 0; }
    .preview-section, .offer-faq { grid-template-columns: 1fr; gap: 34px; }
    .offer-edition { grid-template-columns: 1fr; gap: 28px; }
    .offer-allocation { padding-left: 0; border-left: 0; }
    .preview-section .product-preview { max-width: 540px; margin: 0 auto; }
    [data-screen="landing"] .vault-entry { min-height: 660px; padding: 72px 24px 62px; }
    .offer-footer { align-items: flex-start; flex-direction: column; }
}
@media screen and (max-width: 400px) {
    [data-screen="landing"] .vault-entry { min-height: 0; padding: 66px 22px 58px; }
    [data-screen="landing"] .vault-entry h1 { font-size: 2.55rem; letter-spacing: .11em; }
    .offer-heading { margin-top: 30px; font-size: 1.9rem; }
    [data-screen="landing"] .vault-entry-subtitle { font-size: .97rem; }
    .landing-actions { gap: 7px; width: 100%; }
    .landing-actions .vault-button { width: 100%; font-size: .7rem; padding: 14px 12px; }
    .landing-edition { font-size: .56rem; letter-spacing: .12em; }
    .product-preview { padding: 20px; }
    .preview-heading { letter-spacing: .035em; font-size: .54rem; }
}

/* CERTIFICATE: collection record and the original memories dedication. */
.certificate-card {
    position: relative;
    width: min(100%, 900px);
    margin: 30px auto 0;
    padding: clamp(38px, 7vw, 74px) clamp(26px, 8vw, 80px) 48px;
    border: 1px solid var(--gold-soft);
    outline: 1px solid var(--line);
    outline-offset: -14px;
    background: linear-gradient(145deg, rgba(200, 169, 107, .045), transparent 48%), var(--panel);
    text-align: center;
}
.certificate-card::before, .certificate-card::after { content: ""; position: absolute; width: 30px; height: 30px; pointer-events: none; }
.certificate-card::before { top: 22px; left: 22px; border-top: 1px solid var(--gold-soft); border-left: 1px solid var(--gold-soft); }
.certificate-card::after { right: 22px; bottom: 22px; border-right: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); }
.certificate-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; margin: 0 auto 28px; border: 1px solid var(--gold-soft); border-radius: 50%; color: var(--gold); font: 400 2.6rem/1 Georgia, serif; }
.certificate-mark::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold-soft); border-radius: 50%; opacity: .6; }
.certificate-card .certificate-kicker { color: var(--gold); font-size: .72rem; letter-spacing: .19em; line-height: 1.7; }
.certificate-card .certificate-title { max-width: 620px; margin: 18px auto 0; color: var(--silver); font: 400 clamp(1.65rem, 3.5vw, 2.6rem)/1.2 Georgia, serif; letter-spacing: .025em; text-wrap: balance; }
.certificate-card .certificate-presentation { margin: 38px 0 12px; color: var(--muted); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.certificate-card .certificate-owner { margin: 0; color: var(--silver); font: 400 clamp(2.1rem, 5vw, 4rem)/1.16 Georgia, serif; overflow-wrap: anywhere; text-wrap: balance; }
.certificate-entitlement { max-width: 520px; margin: 16px auto 0; color: var(--silver-soft); font: 400 .96rem/1.8 Georgia, serif; text-wrap: balance; }
.certificate-card .certificate-ceremony { max-width: 540px; margin: 32px auto 0; padding: 26px 0; border-top: 1px solid var(--line); letter-spacing: 0; text-transform: none; }
.certificate-message { max-width: 520px; margin: 0 auto; color: var(--silver); font: italic 400 1.17rem/1.8 Georgia, serif; text-wrap: balance; }
.certificate-seal { margin: 29px auto 18px; }
.certificate-card .certificate-seal-label { color: var(--muted); font-size: .68rem; letter-spacing: .16em; }
.certificate-seal-number { margin-top: 7px; color: var(--gold); font: 400 clamp(2rem, 5vw, 3rem)/1.2 Georgia, serif; }
.certificate-card .certificate-intro-copy { max-width: 540px; margin: 19px auto 0; color: var(--silver-soft); font-size: .85rem; line-height: 1.8; text-wrap: balance; }
.certificate-details { display: flex; margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.certificate-detail { flex: 1; min-width: 0; padding: 18px 12px; }
.certificate-detail + .certificate-detail { border-left: 1px solid var(--line); }
.certificate-card .certificate-detail-label { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .12em; line-height: 1.65; text-transform: uppercase; }
.certificate-card .certificate-detail-value { display: block; margin-top: 7px; color: var(--silver); font-size: .78rem; letter-spacing: .05em; line-height: 1.6; text-transform: uppercase; overflow-wrap: anywhere; }
.certificate-card .certificate-signature { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; color: var(--muted); font-size: .62rem; letter-spacing: .1em; line-height: 1.7; text-transform: uppercase; }
.certificate-signature-brand { color: var(--gold); }
.certificate-signature-divider { width: 24px; height: 1px; background: var(--gold-soft); }
.certificate-signature-status { color: var(--silver-soft); }
.certificate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.certificate-print-button { flex: 0 1 310px; max-width: 100%; white-space: normal; font-size: .72rem; }
.certificate-print-help { max-width: 670px; margin: 15px auto 0; color: var(--muted); font-size: .85rem; line-height: 1.7; text-align: center; }
@media screen and (max-width: 560px) {
    .certificate-card { padding: 38px 25px 32px; margin-top: 0; outline-offset: -10px; }
    .certificate-card::before { top: 16px; left: 16px; }
    .certificate-card::after { bottom: 16px; right: 16px; }
    .certificate-card .certificate-owner { font-size: clamp(1.8rem, 7vw, 2.6rem); }
    .certificate-details { display: block; margin-top: 24px; }
    .certificate-detail { padding: 12px 0; }
    .certificate-detail + .certificate-detail { border-left: 0; border-top: 1px solid var(--line); }
    .certificate-card .certificate-signature { flex-direction: column; gap: 9px; }
}

/* One A4 sheet; print palettes remain independent of the selected screen theme. */
@media print {
    @page { size: A4 portrait; margin: 0; }
    html, body { width: 210mm !important; height: 297mm !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #0e0e0e !important; color: #d8d8d8 !important; }
    .appearance-controls, #workspace-notice, #workspace-status, .topbar, .back-row, .certificate-actions, .certificate-print-help, #migration-dialog, .dialog-overlay, .record-delete-dialog { display: none !important; }
    .vault-screen, .vault-screen.is-active { display: none !important; }
    .vault-screen[data-screen="certificate"] { display: block !important; visibility: visible !important; opacity: 1 !important; width: 210mm !important; height: 297mm !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #0e0e0e !important; }
    [data-screen="certificate"] .screen-inner { width: 210mm !important; height: 297mm !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .certificate-card {
        --silver: #d8d8d8; --silver-soft: #b6b7b1; --muted: #aaa89e; --gold: #c8a96b; --gold-soft: rgba(200,169,107,.55); --line: rgba(216,216,216,.2);
        display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 210mm !important; height: 297mm !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 17mm 20mm 16mm !important; border: 0 !important; outline: 1px solid var(--gold-soft) !important; outline-offset: -8mm !important; background: #0e0e0e !important; color: var(--silver) !important; overflow: hidden !important; box-shadow: none !important; break-inside: avoid !important;
    }
    .certificate-card, .certificate-card *, .certificate-card::before, .certificate-card::after { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
    .certificate-card::before, .certificate-card::after { width: 13mm !important; height: 13mm !important; }
    .certificate-card::before { top: 11mm !important; left: 11mm !important; }
    .certificate-card::after { right: 11mm !important; bottom: 11mm !important; }
    .certificate-mark { flex: 0 0 auto !important; width: 22mm !important; height: 22mm !important; margin: 0 auto !important; font-size: 28pt !important; }
    .certificate-mark::before { inset: 2mm !important; }
    .certificate-card .certificate-kicker { margin: 0 !important; font-size: 8pt !important; }
    .certificate-card .certificate-title { margin: 0 auto !important; max-width: 160mm !important; font-size: 24pt !important; line-height: 1.22 !important; }
    .certificate-card .certificate-presentation { margin: 0 !important; font-size: 7.5pt !important; }
    .certificate-card .certificate-owner { margin: 0 !important; font-size: 30pt !important; line-height: 1.2 !important; }
    .certificate-entitlement { margin: 0 auto !important; max-width: 150mm !important; font-size: 10pt !important; line-height: 1.6 !important; }
    .certificate-card .certificate-ceremony { flex: 0 0 auto !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 6mm 0 !important; }
    .certificate-message { max-width: 148mm !important; margin: 0 auto !important; font-size: 11.5pt !important; line-height: 1.65 !important; }
    .certificate-seal { margin: 0 auto !important; }
    .certificate-card .certificate-seal-label { font-size: 7pt !important; }
    .certificate-seal-number { margin-top: 2mm !important; font-size: 25pt !important; }
    .certificate-card .certificate-intro-copy { margin: 0 auto !important; max-width: 158mm !important; font-size: 9pt !important; line-height: 1.6 !important; }
    .certificate-details { display: flex !important; flex: 0 0 auto !important; margin: 0 !important; }
    .certificate-detail { padding: 4mm 3mm !important; }
    .certificate-detail + .certificate-detail { border-top: 0 !important; border-left: 1px solid var(--line) !important; }
    .certificate-card .certificate-detail-label { font-size: 6.5pt !important; }
    .certificate-card .certificate-detail-value { margin-top: 2mm !important; font-size: 8pt !important; }
    .certificate-card .certificate-signature { flex-direction: row !important; margin: 0 !important; padding: 0 !important; font-size: 6.5pt !important; }
    html[data-certificate-print-style="reading-copy"], body[data-certificate-print-style="reading-copy"], html[data-certificate-print-style="reading-copy"] [data-screen="certificate"] { background: #fbfaf7 !important; color: #242321 !important; }
    html[data-certificate-print-style="reading-copy"] .certificate-card {
        --silver: #242321; --silver-soft: #53544c; --muted: #656257; --gold: #806135; --gold-soft: rgba(128,97,53,.6); --line: #d8d0c1;
        background: #fbfaf7 !important; color: var(--silver) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}