/* Website Project - Main Stylesheet */

* {
    box-sizing: border-box;
}

:root {
    --site-header-height: 73px;
    color-scheme: light;
    --font-body: Arial, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --font-display: Helvetica, "Helvetica Neue", Arial, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --font-slogan: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;
    --font-weight-black: 900;
    --line-height-body: 1.5;
    --line-height-tight: 1.1;
    --line-height-ui: 1.25;
    --theme-page: #f2f4f7;
    --theme-surface: #ffffff;
    --theme-surface-alt: #e8ebef;
    --theme-surface-strong: #dde3ea;
    --theme-shell: var(--theme-surface);
    --theme-card: var(--theme-surface);
    --theme-control: #ffffff;
    --theme-input: var(--theme-control);
    --theme-control-hover: #eef3f8;
    --theme-border: #8793a1;
    --theme-text: #000000;
    --theme-body: #474747;
    --theme-muted: #626870;
    --theme-accent: #1b72e8;
    --theme-primary-action: #0c63d8;
    --theme-secondary-action: var(--theme-control);
    --theme-accent-contrast: #ffffff;
    --theme-link: #0c63d8;
    --theme-focus: #1b72e8;
    --theme-success: #157347;
    --theme-warning: #8a5a00;
    --theme-error: #b42318;
    --theme-info-surface: #e8f1ff;
    --theme-success-surface: #e9f8ef;
    --theme-warning-surface: #fff7df;
    --theme-error-surface: #fff0ef;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --theme-page: #1c1c1d;
    --theme-surface: #252728;
    --theme-surface-alt: #303334;
    --theme-surface-strong: #1f2122;
    --theme-shell: var(--theme-surface);
    --theme-card: var(--theme-surface);
    --theme-control: #1f2122;
    --theme-input: var(--theme-control);
    --theme-control-hover: #35393b;
    --theme-border: #62686b;
    --theme-text: #ffffff;
    --theme-body: #b0b3b8;
    --theme-muted: #b0b3b8;
    --theme-link: #8ab8ff;
    --theme-focus: #8ab8ff;
    --theme-success: #75d69c;
    --theme-warning: #ffd166;
    --theme-error: #ff9b92;
    --theme-info-surface: #1f3552;
    --theme-success-surface: #1f3d2b;
    --theme-warning-surface: #4a3a16;
    --theme-error-surface: #4b2525;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]),
    :root[data-theme="system"] {
        color-scheme: dark;
        --theme-page: #1c1c1d;
        --theme-surface: #252728;
        --theme-surface-alt: #303334;
        --theme-surface-strong: #1f2122;
        --theme-shell: var(--theme-surface);
        --theme-card: var(--theme-surface);
        --theme-control: #1f2122;
        --theme-input: var(--theme-control);
        --theme-control-hover: #35393b;
        --theme-border: #62686b;
        --theme-text: #ffffff;
        --theme-body: #b0b3b8;
        --theme-muted: #b0b3b8;
        --theme-link: #8ab8ff;
        --theme-focus: #8ab8ff;
        --theme-success: #75d69c;
        --theme-warning: #ffd166;
        --theme-error: #ff9b92;
        --theme-info-surface: #1f3552;
        --theme-success-surface: #1f3d2b;
        --theme-warning-surface: #4a3a16;
        --theme-error-surface: #4b2525;
    }
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--site-header-height) + 16px);
}

/* Keep fragment, programmatic-scroll, and focused targets clear of the sticky shell. */
main :where(h1, h2, h3, h4, [id], [role="alert"], .ui-alert, .lookup-result-message, :focus) {
    scroll-margin-top: calc(var(--site-header-height) + 16px);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    background: #ffffff;
    color: #111111;
}

main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

.country-flag {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 18px;
    max-width: none;
    object-fit: contain;
}

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

h1,
h2,
h3,
.site-logo {
    font-family: var(--font-display);
}

.header-menu-button,
.header-account-link,
.header-join-button,
.site-navigation a,
.footer-theme-controls button,
.footer-newsletter button,
.site-footer-language-mobile select,
.join-button,
.upload-submit {
    line-height: var(--line-height-ui);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #25282a;
    background: #0d0f10;
    color: #f5f5f5;
}

.site-header--mobile {
    display: none;
}

.site-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(100%, 1600px);
    min-height: 72px;
    margin: 0 auto;
    padding: 12px 24px;
}

.site-header-mobile-inner {
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 60px;
    padding: 10px 16px;
    direction: ltr;
}

.site-header-mobile-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.site-header-mobile-group--left {
    grid-column: 1;
}

.site-header-mobile-group--right {
    grid-column: 3;
}

.site-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

.site-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.site-logo--mobile {
    width: 40px;
    height: 40px;
}

.language-selector,
.site-language-control {
    display: inline-flex;
    align-items: center;
}

.language-selector-control {
    position: relative;
    display: inline-block;
    max-width: 100%;
    color: var(--theme-text);
}

.language-selector-native,
.language-selector-button {
    min-height: 40px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    background: var(--theme-control);
    color: var(--theme-text);
}

.language-selector-native {
    max-width: 100%;
    padding: 0 11px;
}

.language-selector-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 168px;
    padding: 0 11px;
    cursor: pointer;
    direction: ltr;
    text-align: start;
}

.language-selector-button:hover,
.language-selector-button[aria-expanded="true"] {
    background: var(--theme-control-hover);
}

.language-selector-button:focus-visible,
.language-selector-listbox:focus-visible {
    outline: 3px solid var(--theme-focus);
    outline-offset: 2px;
}

.language-selector-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: isolate;
}

.language-selector-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.language-selector-listbox {
    position: absolute;
    z-index: 1200;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    width: max(100%, 218px);
    max-width: min(280px, calc(100vw - 24px));
    max-height: min(60vh, 360px);
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    background: var(--theme-surface);
    box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
    color: var(--theme-text);
}

.language-selector-option {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 4px;
    cursor: pointer;
    text-align: start;
}

.language-selector-option-label {
    min-width: 0;
    justify-self: start;
    unicode-bidi: isolate;
}

.language-selector-option[data-active],
.language-selector-option:hover {
    background: var(--theme-control-hover);
}

.language-selector-option[aria-selected="true"] {
    color: var(--theme-link);
    font-weight: var(--font-weight-bold);
}

.language-selector-option[aria-selected="true"]::after {
    content: "\2713";
    grid-column: 3;
}

.language-selector-control--footer .language-selector-button {
    width: 220px;
}

.language-selector-control--footer .language-selector-listbox {
    inset-block: auto calc(100% + 6px);
}

.language-selector select,
.header-menu-button,
.header-find-photo input,
.header-find-photo button,
.header-join-button {
    min-height: 40px;
    border: 1px solid #3a3d3f;
    border-radius: 4px;
    background: #17191a;
    color: inherit;
}

.language-selector select,
.header-menu-button,
.header-find-photo button {
    padding: 0 11px;
}

.header-menu {
    position: relative;
    flex: 0 0 auto;
}

.site-navigation {
    z-index: 1100;
    border: 1px solid #3a3d3f;
    border-radius: 4px;
    background: #17191a;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.site-navigation-links {
    display: flex;
}

.site-navigation a {
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    color: inherit;
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
    background: #25282a;
    outline: none;
}

.site-navigation--desktop {
    position: absolute;
    top: calc(100% + 8px);
    right: auto;
    left: auto;
    inset-inline-start: 0;
    min-width: 210px;
    max-width: min(360px, calc(100vw - 48px));
    padding: 6px;
}

.site-navigation--desktop:not([hidden]) {
    display: block;
}

.site-navigation--desktop .site-navigation-links {
    flex-direction: column;
}

.site-navigation--desktop a {
    padding: 0 10px;
}

.header-menu-button,
.header-find-photo button {
    cursor: pointer;
    font-weight: 700;
}

.header-photo-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1;
    white-space: nowrap;
}

.header-photo-counter,
.mobile-photo-counter {
    color: inherit;
    text-decoration: none;
}

.header-photo-counter-icon {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
}

.header-photo-counter-camera {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.header-photo-counter-camera--dark {
    display: none;
}

:root[data-theme="dark"] .header-photo-counter-camera--light {
    display: none;
}

:root[data-theme="dark"] .header-photo-counter-camera--dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .header-photo-counter-camera--light,
    :root[data-theme="system"] .header-photo-counter-camera--light {
        display: none;
    }

    :root:not([data-theme]) .header-photo-counter-camera--dark,
    :root[data-theme="system"] .header-photo-counter-camera--dark {
        display: block;
    }
}

.header-photo-counter-label,
.header-photo-counter strong,
.mobile-photo-counter strong {
    font-weight: var(--font-weight-bold);
}

.header-photo-counter-label,
.header-photo-counter-icon {
    color: var(--theme-muted);
}

.header-photo-counter strong,
.mobile-photo-counter strong {
    color: var(--theme-link);
}

.mobile-navigation-toggle {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid #3a3d3f;
    border-radius: 4px;
    background: #17191a;
    color: inherit;
    cursor: pointer;
    font-size: 1.35rem;
}

.mobile-photo-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1;
    white-space: nowrap;
}

.mobile-photo-counter .header-photo-counter-icon {
    width: 24px;
    height: 24px;
}

.mobile-photo-counter .header-photo-counter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mobile-photo-counter strong {
    font-variant-numeric: tabular-nums;
}

.header-photo-counter strong {
    font-variant-numeric: tabular-nums;
}

.header-find-photo {
    display: flex;
    align-items: stretch;
}

/* The desktop public-count unit is centred on the viewport, not flex remainder. */
@media (min-width: 1260px) {
    .header-photo-counter {
        position: absolute;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }

    .header-find-photo {
        margin-left: 0;
        margin-inline-start: auto;
    }
}

.header-find-photo input {
    width: 155px;
    padding: 0 11px;
    border-radius: 4px 0 0 4px;
}

.header-find-photo button {
    border-left: 1px solid var(--theme-border);
    border-inline-start: 0;
    border-radius: 0 4px 4px 0;
}

.header-account-link {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.header-account-avatar {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 40px;
    overflow: hidden;
    border: 1px solid #3a3d3f;
    border-radius: 50%;
    background: #17191a;
    color: inherit;
    text-decoration: none;
}

.header-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-account-avatar-fallback {
    font-size: 1.15rem;
}

.header-join-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 16px;
    border-color: #00f5a0;
    background: #00f5a0;
    color: #07100c;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.join-cta-content {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: .25em;
    direction: ltr;
    white-space: nowrap;
}

.join-label,
.join-price {
    display: inline-block;
}

/*
 * The button is a mixed-direction control: keep its physical children stable
 * regardless of the compact shell's structural direction. RTL labels remain
 * RTL, while the isolated price stays on their physical left.
 */
html[dir="rtl"] .join-label {
    direction: rtl;
    order: 2;
}

html[dir="rtl"] .join-price {
    direction: ltr;
    order: 1;
}

/* The compact header re-establishes RTL for button text; re-lock only this
 * CTA's inner physical sequence to the desktop reference. */
@media (max-width: 1259px) {
    html[dir="rtl"] .header-join-button--mobile .join-cta-content {
        direction: ltr;
        flex-direction: row;
    }

    html[dir="rtl"] .header-join-button--mobile .join-label {
        direction: rtl;
        order: 2;
    }

    html[dir="rtl"] .header-join-button--mobile .join-price {
        direction: ltr;
        order: 1;
    }
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible,
.site-header select:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-footer {
    flex-shrink: 0;
    border-top: 1px solid #25282a;
    background: #0d0f10;
    color: #f5f5f5;
}

.site-footer-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 56px;
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 48px 24px;
}

.site-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.site-footer-column h2 {
    margin: 0 0 14px;
    color: var(--theme-text);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.site-footer-language-mobile {
    display: none;
}

.site-footer a {
    color: inherit;
}

.site-footer-links a {
    color: #dfe4e5;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: #00f5a0;
    text-decoration: underline;
}

.site-footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-newsletter {
    display: flex;
    width: 100%;
    max-width: 280px;
}

.footer-newsletter input,
.footer-newsletter button,
.footer-theme-controls button {
    min-height: 40px;
    border: 1px solid #3a3d3f;
    background: #17191a;
    color: inherit;
}

.footer-newsletter input {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 10px;
    border-radius: 4px 0 0 4px;
}

.footer-newsletter button {
    flex: 0 0 auto;
    padding: 0 10px;
    border-left: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.site-footer-language-mobile select {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #3a3d3f;
    border-radius: 4px;
    background: #17191a;
    color: inherit;
    cursor: pointer;
}

.footer-control-label {
    color: #aeb4b6;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.site-footer-theme {
    display: flex;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-theme-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.footer-theme-controls button {
    padding: 0 10px;
    border-radius: 4px;
    cursor: pointer;
}

.footer-theme-controls button[aria-pressed="true"] {
    border-color: #00f5a0;
    color: #00f5a0;
}

.site-footer-social ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.site-footer-social li {
    color: #aeb4b6;
}

.site-footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.site-footer-social a:hover .site-footer-social-label,
.site-footer-social a:focus-visible .site-footer-social-label {
    text-decoration: underline;
}

.site-footer-social-icon {
    display: block;
    width: 24px;
    height: 24px;
    max-width: none;
    flex: 0 0 auto;
    object-fit: contain;
}

.site-footer-bottom {
    border-top: 1px solid #25282a;
    padding: 18px 24px;
    color: #aeb4b6;
    font-size: .9rem;
}

.site-footer-bottom p {
    width: min(100%, 1600px);
    margin: 0 auto;
}

/* True-centred translated controls require the compact shell below 1260px. */
@media (max-width: 1259px) {
    :root {
        --site-header-height: 61px;
    }

    .site-header--desktop {
        display: none;
    }

    .site-header--mobile {
        display: block;
    }

    /* The footer selector is the sole language entry point in the compact shell. */
    .site-footer-language-mobile {
        display: flex;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: center;
        order: -1;
        gap: 12px;
    }

    .site-footer-language-mobile h2 {
        margin: 0;
        font-size: 1rem;
    }

    /* Keep RTL text inside controls while the compact shell stays physically ordered. */
    html[dir="rtl"] .site-header-mobile-inner .mobile-photo-counter,
    html[dir="rtl"] .site-header-mobile-inner .header-join-button--mobile,
    html[dir="rtl"] .site-header-mobile-inner .header-account-avatar--mobile {
        direction: rtl;
    }

    .site-navigation--mobile {
        width: 100%;
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    .site-navigation--mobile:not([hidden]) {
        display: block;
    }

    .site-navigation--mobile .site-navigation-links {
        flex-direction: column;
        padding: 8px 16px;
    }

    .site-navigation--mobile a {
        padding: 0 8px;
    }

    .site-navigation-language {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 58px;
        padding: 8px 24px 16px;
        border-top: 1px solid #25282a;
        font-weight: 700;
    }

    .site-navigation-language select {
        min-height: 40px;
        min-width: 150px;
        padding: 0 10px;
        border: 1px solid #3a3d3f;
        border-radius: 4px;
        background: #0d0f10;
        color: inherit;
    }

    .header-join-button--mobile {
        min-height: 40px;
        padding: 0 10px;
        font-size: .9rem;
    }

}

/* Footer and form spacing remains desktop-safe until the approved mobile width. */
@media (max-width: 768px) {
    .site-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
        padding: 38px 16px;
        text-align: center;
    }

    .site-footer-column,
    .site-footer-social {
        align-items: center;
    }

    .site-footer-links {
        align-items: center;
    }

    .site-footer-links[aria-labelledby="footer-website-heading"] {
        align-items: flex-start;
        text-align: start;
    }

    .site-footer-links[aria-labelledby="footer-legal-heading"] {
        align-items: flex-end;
        text-align: end;
    }

    .site-footer-social ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .site-footer-social li {
        display: inline-flex;
        align-items: center;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .site-footer-social a {
        width: 36px;
        height: 36px;
        justify-content: center;
    }

    .site-footer-social-icon {
        width: 24px;
        height: 24px;
    }

    .site-footer-social-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .site-footer-social {
        grid-column: 1 / -1;
        order: 2;
    }

    .footer-newsletter {
        display: none;
    }

    .site-footer-theme {
        order: 3;
    }

    .site-footer-bottom {
        padding: 18px 16px;
        text-align: center;
    }
}

/* Keep a six-digit counter alongside the compact controls on narrow phones. */
@media (max-width: 374px) {
    .site-header-mobile-inner {
        gap: 3px;
        padding-inline: 8px;
    }

    .site-logo--mobile {
        width: 36px;
        height: 36px;
    }

    .site-header-mobile-group {
        gap: 4px;
    }

    .mobile-photo-counter {
        font-size: 1rem;
    }

    .header-join-button--mobile {
        padding-inline: 4px;
        font-size: .78rem;
    }
}

/* Spanish CTA text needs a little more compact-row room on narrow phones. */
@media (max-width: 390px) {
    /* The two compact control groups exceed 390px by 3px with 16px gutters. */
    .site-header-mobile-inner {
        padding-inline: 14px;
    }

    .site-header-mobile-group {
        gap: 6px;
    }

    html[lang="es"] .header-join-button--mobile {
        padding-inline: 6px;
    }
}

@media (max-width: 374px) {
    html[lang="es"] .header-join-button--mobile {
        padding-inline: 5px;
    }
}

/* Preserve every control for a six-digit Spanish total on the narrowest row. */
@media (max-width: 390px) {
    html[lang="es"] .site-header-mobile-inner--long-counter .site-logo--mobile {
        width: 34px;
        height: 34px;
    }

    html[lang="es"] .site-header-mobile-inner--long-counter .mobile-photo-counter,
    html[lang="es"] .site-header-mobile-inner--long-counter .mobile-photo-counter strong {
        font-size: .8rem;
    }

    html[lang="es"] .site-header-mobile-inner--long-counter .header-join-button--mobile {
        padding-inline: 3px;
        font-size: .78rem;
    }
}

/* Hide the whole counter only when a long/localised compact row cannot remain usable. */
@media (max-width: 299px) {
    .mobile-photo-counter {
        display: none;
    }
}

/* Keep the shared upload/find form surfaces within the document theme. */
.form-section {
    border-color: var(--theme-border);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    border-color: var(--theme-border);
    background: var(--theme-control);
    color: var(--theme-text);
}

.field-help {
    color: var(--theme-muted);
}

/* Final palette precedence for legacy shared-page rules. */
.site-header,
.site-footer {
    background: var(--theme-surface);
    color: var(--theme-text);
}

.language-selector select,
.header-menu-button,
.header-find-photo input,
.header-find-photo button,
.mobile-navigation-toggle,
.header-account-avatar,
.site-navigation,
.footer-newsletter input,
.footer-theme-controls button,
.site-footer-language-mobile select,
.site-navigation-language select,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    border-color: var(--theme-border);
    background: var(--theme-control);
    color: var(--theme-text);
}

.header-find-photo input::placeholder,
.footer-newsletter input::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--theme-muted);
    opacity: 1;
}

.header-join-button,
.header-find-photo button,
.footer-newsletter button,
.join-button,
.upload-submit {
    border-color: var(--theme-primary-action);
    background: var(--theme-primary-action);
    color: var(--theme-accent-contrast);
}

.site-navigation a,
.site-footer-links a,
.million-panel-link,
.million-wall-cta a {
    color: var(--theme-link);
}

.site-navigation a:hover,
.site-navigation a:focus-visible,
.header-menu-button:hover,
.mobile-navigation-toggle:hover,
.footer-theme-controls button:hover,
.site-footer-language-mobile select:hover {
    background: var(--theme-control-hover);
}

.footer-theme-controls button[aria-pressed="true"] {
    border-color: var(--theme-accent);
    background: var(--theme-info-surface);
    color: var(--theme-link);
}

.lookup-result-message {
    margin-top: 18px;
    padding: 12px 16px;
    border: 1px solid var(--theme-error);
    border-radius: 6px;
    background: var(--theme-error-surface);
    color: var(--theme-error);
}

/* =========================================
   FIND PHOTO PAGE
   ========================================= */

.find-photo-page {
    width: min(100% - 56px, 920px);
    margin: 0 auto;
    padding: 42px 0 80px;
}

.find-photo-heading,
.find-photo-panel {
    width: min(100%, 680px);
    margin-inline: auto;
}

.find-photo-heading {
    margin-bottom: 26px;
    text-align: start;
}

.find-photo-heading h1 {
    margin: 0;
    font-size: clamp(1.65rem, 2.7vw, 2.35rem);
    line-height: 1.1;
}

.find-photo-heading p {
    margin: 8px 0 0;
    color: var(--theme-accent);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.find-photo-panel {
    padding: 28px;
    border-radius: 14px;
    background: var(--theme-surface);
}

.find-photo-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.find-photo-form .find-photo-field {
    min-width: 0;
    margin: 0;
}

.find-photo-field input {
    min-height: 48px;
    padding: 10px 12px;
}

.find-photo-form .find-photo-submit {
    min-height: 48px;
    min-width: 112px;
}

.find-photo-message {
    margin: 20px 0 0;
}

html[data-theme="dark"] .find-photo-heading p {
    color: var(--theme-link);
}

@media (max-width: 560px) {
    .find-photo-page {
        width: min(100% - 24px, 680px);
        padding-block: 30px 60px;
    }

    .find-photo-heading {
        margin-bottom: 20px;
    }

    .find-photo-panel {
        padding: 22px 16px;
    }

    .find-photo-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .find-photo-submit {
        width: 100%;
    }
}

.public-display-list {
    margin: 0;
    padding-inline-start: 1.4rem;
}

.public-display-list li + li {
    margin-top: 0.65rem;
}

/* Shared footer consent UI: every page that renders site-footer.php needs this. */
.cookie-banner {
    position: fixed;
    z-index: 1000;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    max-width: 760px;
    margin: auto;
    padding: 1rem;
    border-radius: .6rem;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-body);
    box-shadow: 0 5px 25px #0006;
}

.cookie-banner p {
    margin: 0 0 .75rem;
}

.cookie-banner button,
.cookie-modal button {
    margin: .2rem;
    padding: .55rem .7rem;
    border: 1px solid var(--theme-border);
    background: var(--theme-control);
    color: var(--theme-text);
}

.cookie-modal {
    position: fixed;
    z-index: 1001;
    inset: 0;
    padding: 10vh 1rem;
    background: #0008;
}

.cookie-modal > div {
    max-width: 580px;
    margin: auto;
    padding: 2rem;
    border-radius: .7rem;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-body);
}

.cookie-modal h2,
.cookie-preference-options label {
    color: var(--theme-text);
}

.cookie-preference-options {
    display: grid;
    gap: .5rem;
    margin: 1rem 0;
    padding: 0;
    border: 0;
}

.cookie-preference-options label {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.cookie-preference-options input {
    accent-color: var(--theme-accent);
}

.account-summary { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:24px 0; }
.account-summary div { padding:14px; border:1px solid var(--theme-border); border-radius:6px; background:var(--theme-surface); }
.account-summary dt { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--theme-text-muted); }
.account-summary dd { margin:6px 0 0; font-size:1.2rem; font-weight:700; }
.account-submission-image { display:block; width:min(100%, 320px); aspect-ratio:1; object-fit:cover; margin:20px 0; border-radius:6px; }
.account-submission-message { white-space:normal; overflow-wrap:anywhere; }
.account-milestone-note { color:var(--theme-text-muted); }
.account-milestones { margin-top:24px; padding-top:18px; border-top:1px solid var(--theme-border); }
.account-milestones ul { margin:0; padding-inline-start:20px; }
.account-area { width:min(1320px, calc(100% - 56px)); margin:0 auto; padding:42px 0 80px; }
.account-page-heading { margin:0 0 26px; margin-inline-start:282px; text-align:start; }
.account-page-heading h1 { margin:0; font-size:clamp(1.65rem, 2.7vw, 2.35rem); line-height:1.1; }
.account-page-heading p { margin:8px 0 0; color:var(--theme-accent); font-size:1rem; font-weight:700; line-height:1.35; }
.account-layout { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:32px; align-items:start; }
.account-sidebar { padding:18px 16px; border-radius:14px; background:color-mix(in srgb, var(--theme-surface) 62%, transparent); }
.account-sidebar h2 { margin:0 0 11px; color:var(--theme-accent); font-size:.82rem; font-weight:800; letter-spacing:.025em; line-height:1.15; text-transform:uppercase; }
.account-sidebar ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.account-sidebar a { display:block; padding:9px 10px; border-radius:6px; color:var(--theme-muted); font-size:.92rem; font-weight:650; line-height:1.25; text-decoration:none; }
.account-sidebar a:hover,
.account-sidebar a:focus-visible,
.account-sidebar a[aria-current="page"] { background:color-mix(in srgb, var(--theme-accent) 9%, transparent); color:var(--theme-accent); }
.account-sidebar a:focus-visible { outline:3px solid color-mix(in srgb, var(--theme-accent) 55%, transparent); outline-offset:2px; }
.account-main { min-width:0; padding:28px; border:0; border-radius:14px; background:var(--theme-surface); }
.account-main > :first-child { margin-top:0; }
.account-main > :last-child { margin-bottom:0; }
.account-deletion-form { display:grid; gap:16px; max-width:620px; margin-top:24px; }
.account-deletion-form .form-field { margin-bottom:0; }
.account-deletion-confirm label { display:flex; align-items:flex-start; gap:8px; }
.account-deletion-confirm input { flex:0 0 auto; margin-top:.2em; }
.account-deletion-submit { justify-self:start; margin-top:8px; }
html[data-theme="dark"] .account-area { color:var(--theme-text); }
html[data-theme="dark"] .account-sidebar,
html[data-theme="dark"] .account-main { background:var(--theme-surface); }
html[data-theme="dark"] .account-page-heading p,
html[data-theme="dark"] .account-sidebar h2,
html[data-theme="dark"] .account-sidebar a:hover,
html[data-theme="dark"] .account-sidebar a:focus-visible,
html[data-theme="dark"] .account-sidebar a[aria-current="page"] { color:var(--theme-link); }
html[data-theme="dark"] .account-sidebar a:hover,
html[data-theme="dark"] .account-sidebar a:focus-visible,
html[data-theme="dark"] .account-sidebar a[aria-current="page"] { background:color-mix(in srgb, var(--theme-link) 9%, transparent); }
html[data-theme="dark"] .account-sidebar a:focus-visible { outline-color:var(--theme-focus); }
@media (max-width: 850px) {
    .account-area { width:min(100% - 28px, 720px); padding-block:30px; }
    .account-page-heading { margin-inline-start:0; }
    .account-layout { grid-template-columns:1fr; }
    .account-sidebar ul { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) { .account-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    .account-sidebar ul { grid-template-columns:1fr; }
    .account-main { padding:22px 16px; }
    .account-summary { grid-template-columns:1fr; }
    .account-deletion-submit { width:100%; }
}

/* Final Arabic readability precedence over legacy page typography. */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family: Tahoma, "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
}

html[dir="rtl"] main {
    font-size: 18px;
}

html[dir="rtl"] .site-footer a,
html[dir="rtl"] .site-footer li {
    font-size: 1.0625em;
    line-height: 1.6;
}

html[dir="rtl"] .checkbox-field > span,
html[dir="rtl"] .ui-alert {
    line-height: 1.6;
}

html[dir="rtl"] .million-title-block p {
    font-family: inherit;
    font-size: 20px;
    line-height: 1.6;
}

/* Native script coverage for the controlled launch-language set. */
html[lang^="zh"],
html[lang="ja"],
html[lang="ko"] {
    font-family: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans", "Yu Gothic UI", "Malgun Gothic", "Noto Sans CJK", sans-serif;
}

html[lang="hi"] {
    font-family: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", Arial, sans-serif;
}

html[lang="bn"] {
    font-family: "Nirmala UI", "Noto Sans Bengali", Arial, sans-serif;
}

html[lang="ru"] {
    font-family: "Segoe UI", "Arial", "Noto Sans", sans-serif;
}

html[lang="ur"] body,
html[lang="ur"] input,
html[lang="ur"] select,
html[lang="ur"] textarea,
html[lang="ur"] button {
    font-family: Tahoma, "Segoe UI", "Noto Nastaliq Urdu", "Noto Naskh Arabic", Arial, sans-serif;
}

/* Longer launch-language controls move to the approved compact shell before overlap. */
@media (min-width: 1260px) and (max-width: 1359px) {
    html[lang="fr"] {
        --site-header-height: 61px;
    }

    html[lang="fr"] .site-header--desktop {
        display: none;
    }

    html[lang="fr"] .site-header--mobile {
        display: block;
    }

    html[lang="fr"] .site-footer-language-mobile {
        display: flex;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: center;
        order: -1;
        gap: 12px;
    }

    html[lang="fr"] .site-footer-language-mobile h2 {
        margin: 0;
        font-size: 1rem;
    }

    html[lang="fr"] .site-navigation--mobile {
        width: 100%;
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    html[lang="fr"] .site-navigation--mobile:not([hidden]) {
        display: block;
    }

    html[lang="fr"] .site-navigation--mobile .site-navigation-links {
        flex-direction: column;
        padding: 8px 16px;
    }
}

@media (min-width: 1260px) and (max-width: 1279px) {
    html[lang="tr"] {
        --site-header-height: 61px;
    }

    html[lang="tr"] .site-header--desktop {
        display: none;
    }

    html[lang="tr"] .site-header--mobile {
        display: block;
    }

    html[lang="tr"] .site-footer-language-mobile {
        display: flex;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: center;
        order: -1;
        gap: 12px;
    }

    html[lang="tr"] .site-footer-language-mobile h2 {
        margin: 0;
        font-size: 1rem;
    }

    html[lang="tr"] .site-navigation--mobile {
        width: 100%;
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    html[lang="tr"] .site-navigation--mobile:not([hidden]) {
        display: block;
    }

    html[lang="tr"] .site-navigation--mobile .site-navigation-links {
        flex-direction: column;
        padding: 8px 16px;
    }
}

@media (max-width: 390px) {
    html:is([lang="pt"], [lang="fr"], [lang="de"], [lang="ru"], [lang="id"], [lang="tr"], [lang="it"], [lang="ur"]) .site-header-mobile-inner {
        gap: 2px;
    }

    html:is([lang="pt"], [lang="fr"], [lang="de"], [lang="ru"], [lang="id"], [lang="tr"], [lang="it"], [lang="ur"]) .header-join-button--mobile {
        padding-inline: 0;
        font-size: .75rem;
    }
}

html[lang^="zh"] body,
html[lang^="zh"] input,
html[lang^="zh"] select,
html[lang^="zh"] textarea,
html[lang^="zh"] button,
html[lang="ja"] body,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea,
html[lang="ja"] button,
html[lang="ko"] body,
html[lang="ko"] input,
html[lang="ko"] select,
html[lang="ko"] textarea,
html[lang="ko"] button {
    font-family: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans", "Yu Gothic UI", "Malgun Gothic", "Noto Sans CJK", sans-serif;
}

html[lang="hi"] body,
html[lang="hi"] input,
html[lang="hi"] select,
html[lang="hi"] textarea,
html[lang="hi"] button {
    font-family: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", Arial, sans-serif;
}

html[lang="bn"] body,
html[lang="bn"] input,
html[lang="bn"] select,
html[lang="bn"] textarea,
html[lang="bn"] button {
    font-family: "Nirmala UI", "Noto Sans Bengali", Arial, sans-serif;
}

html[lang="ru"] body,
html[lang="ru"] input,
html[lang="ru"] select,
html[lang="ru"] textarea,
html[lang="ru"] button {
    font-family: "Segoe UI", Arial, "Noto Sans", sans-serif;
}

html[dir="rtl"] .million-wall-cta p {
    font-size: 14px;
    line-height: 1.6;
}

html[dir="rtl"] .million-info-card p,
html[dir="rtl"] .million-experiment p {
    font-size: 14px;
    line-height: 1.6;
}

html[dir="rtl"] .million-stat span {
    font-size: 11px;
    line-height: 1.6;
}

html[dir="rtl"] .field-help {
    font-size: 17px;
    line-height: 1.6;
}

/* Direction is supplied by the controlled interface-language registry. */
html[dir="rtl"],
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family: Tahoma, "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
}

html[dir="rtl"] .header-find-photo input {
    border-radius: 0 4px 4px 0;
}

html[dir="rtl"] .header-find-photo button {
    border-right: 0;
    border-left: 1px solid var(--theme-border);
    border-radius: 4px 0 0 4px;
}

@media (min-width: 1260px) {
    html[dir="rtl"] .header-find-photo input {
        border-radius: 0 6px 6px 0;
    }

    html[dir="rtl"] .header-find-photo button {
        border-radius: 6px 0 0 6px;
    }
}

/* Email addresses and public submission numbers remain intrinsically LTR. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[name="submission_number"] {
    direction: ltr;
    text-align: start;
    unicode-bidi: plaintext;
}

html[dir="rtl"] .header-photo-counter,
html[dir="rtl"] .mobile-photo-counter {
    unicode-bidi: plaintext;
}

html[dir="rtl"] .home-text-link::after {
    content: " ←";
}

/* File 2 hierarchy: desktop Find Photo is a compact secondary utility. */
@media (min-width: 1260px) {
    .header-find-photo input {
        border-radius: 6px 0 0 6px;
    }

    .header-find-photo .ui-button {
        border-color: var(--theme-border);
        border-radius: 0 6px 6px 0;
        background: var(--theme-control);
        color: var(--theme-text);
    }

    .header-find-photo .ui-button:hover,
    .header-find-photo .ui-button:focus-visible {
        background: var(--theme-control-hover);
    }
}

/* Shared customer-facing component primitives. */
.ui-card {
    padding: 24px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-card);
    color: var(--theme-text);
}

.ui-card--compact {
    padding: 16px;
}

.ui-card--elevated {
    background: var(--theme-surface-alt);
}

.ui-card--interactive {
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.ui-card--interactive:hover,
.ui-card--interactive:focus-within {
    border-color: var(--theme-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.ui-form-field,
.form-field {
    margin-bottom: 22px;
}

.ui-form-field > label,
.form-field > label {
    display: block;
    margin-bottom: 8px;
    color: var(--theme-text);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.ui-control,
.ui-form-field input:not([type="checkbox"]),
.ui-form-field select,
.ui-form-field textarea,
.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    background: var(--theme-input);
    color: var(--theme-text);
    font: inherit;
}

.ui-control:focus-visible,
.ui-form-field input:focus-visible,
.ui-form-field select:focus-visible,
.ui-form-field textarea:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: 3px solid var(--theme-focus);
    outline-offset: 2px;
}

.ui-control:disabled,
.ui-button:disabled,
.ui-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .58;
}

.ui-control[readonly] {
    background: var(--theme-surface-alt);
}

.ui-form-field--invalid .ui-control,
.ui-form-field--invalid input,
.ui-form-field--invalid select,
.ui-form-field--invalid textarea,
.ui-control[aria-invalid="true"] {
    border-color: var(--theme-error);
}

.ui-field-error {
    margin: 8px 0 0;
    color: var(--theme-error);
    font-size: .9rem;
    line-height: var(--line-height-body);
}

.ui-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-ui);
    text-decoration: none;
    cursor: pointer;
}

.ui-button--primary {
    border-color: var(--theme-primary-action);
    background: var(--theme-primary-action);
    color: var(--theme-accent-contrast);
}

.ui-button--secondary {
    border-color: var(--theme-accent);
    background: transparent;
    color: var(--theme-link);
}

.ui-button--destructive {
    border-color: var(--theme-error);
    background: var(--theme-error);
    color: var(--theme-accent-contrast);
}

.ui-button--compact {
    min-height: 40px;
    padding-inline: 10px;
}

.ui-button:hover:not(:disabled),
.ui-button:focus-visible {
    filter: brightness(.96);
}

.ui-button[aria-busy="true"] {
    cursor: progress;
}

.ui-button[aria-busy="true"]::after {
    width: .8em;
    height: .8em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: ui-spinner .7s linear infinite;
}

.ui-alert {
    padding: 12px 16px;
    border: 1px solid currentColor;
    border-radius: 6px;
    line-height: var(--line-height-body);
    overflow-wrap: anywhere;
}

.ui-alert--info {
    background: var(--theme-info-surface);
    color: var(--theme-link);
}

.ui-alert--success {
    background: var(--theme-success-surface);
    color: var(--theme-success);
}

.ui-alert--warning {
    background: var(--theme-warning-surface);
    color: var(--theme-warning);
}

.ui-alert--error {
    background: var(--theme-error-surface);
    color: var(--theme-error);
}

.ui-page-state,
.ui-empty-state {
    padding: 32px 24px;
    border: 1px dashed var(--theme-border);
    border-radius: 8px;
    background: var(--theme-surface);
    color: var(--theme-body);
    text-align: center;
}

.ui-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-body);
}

.ui-loading::before {
    width: 1em;
    height: 1em;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-accent);
    border-radius: 50%;
    content: "";
    animation: ui-spinner .7s linear infinite;
}

@keyframes ui-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-card--interactive,
    .ui-button,
    .ui-loading::before,
    .ui-button[aria-busy="true"]::after {
        animation: none;
        transition: none;
    }
}

/* Approved customer-facing palette roles. */
.site-header,
.site-footer {
    background: var(--theme-surface);
    color: var(--theme-text);
}

.site-navigation,
.language-selector select,
.header-menu-button,
.header-find-photo input,
.header-find-photo button,
.mobile-navigation-toggle,
.header-account-avatar,
.footer-newsletter input,
.footer-theme-controls button,
.site-footer-language-mobile select,
.site-navigation-language select,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    background: var(--theme-control);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.header-find-photo input::placeholder,
.footer-newsletter input::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--theme-muted);
    opacity: 1;
}

.header-find-photo button,
.footer-newsletter button,
.join-button,
.upload-submit {
    border-color: var(--theme-accent);
    background: var(--theme-accent);
    color: var(--theme-accent-contrast);
}

.site-navigation a,
.site-footer-links a,
.million-panel-link,
.million-wall-cta a {
    color: var(--theme-link);
}

.site-navigation a:hover,
.site-navigation a:focus-visible,
.header-menu-button:hover,
.mobile-navigation-toggle:hover,
.footer-theme-controls button:hover,
.site-footer-language-mobile select:hover {
    background: var(--theme-control-hover);
}

.footer-theme-controls button[aria-pressed="true"] {
    border-color: var(--theme-accent);
    background: var(--theme-info-surface);
    color: var(--theme-link);
}

.lookup-result-message {
    margin-top: 18px;
    padding: 12px 16px;
    border: 1px solid var(--theme-error);
    border-radius: 6px;
    background: var(--theme-error-surface);
    color: var(--theme-error);
}

/* Customer-facing text may expand in future supported interface languages. */
.field-help,
.checkbox-field > span,
.home-text-link {
    overflow-wrap: anywhere;
}

.home-text-link {
    white-space: normal;
}

/* Shared customer theme mappings. */
body {
    background: var(--theme-page);
    color: var(--theme-body);
}

.site-header,
.site-footer {
    border-color: var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text);
}

.language-selector select,
.header-menu-button,
.header-find-photo input,
.header-find-photo button,
.header-join-button,
.mobile-navigation-toggle,
.header-account-avatar,
.site-navigation,
.footer-newsletter input,
.footer-newsletter button,
.footer-theme-controls button,
.site-footer-language-mobile select,
.site-navigation-language select,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    border-color: var(--theme-border);
    background: var(--theme-control);
    color: var(--theme-text);
}

.header-join-button {
    border-color: var(--theme-accent);
    background: var(--theme-accent);
    color: var(--theme-accent-contrast);
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
    background: var(--theme-surface-alt);
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible,
.site-header select:focus-visible {
    outline-color: var(--theme-focus);
}

.site-footer-links a {
    color: var(--theme-body);
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible,
.footer-theme-controls button[aria-pressed="true"] {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}

.footer-control-label,
.site-footer-social li,
.site-footer-bottom,
.field-help {
    color: var(--theme-muted);
}

.site-footer-bottom,
.form-section {
    border-color: var(--theme-border);
}

/* =========================================
   HOMEPAGE — THE MILLION PROJECT
   ========================================= */

.home-page { min-height: 100vh; background: #0a0a0a; color: #f5f5f5; }

.home-hero {
    position: relative; overflow: hidden; min-height: 720px;
    display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr);
    align-items: center; gap: 48px;
    padding: 96px clamp(24px,6vw,96px);
    background:
        radial-gradient(circle at 70% 35%, rgba(255,255,255,.12), transparent 28%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,.06), transparent 32%), #0a0a0a;
}
.home-hero::after {
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.08;
    background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);
    background-size:44px 44px;
}
.home-hero-content,.home-hero-stat { position:relative; z-index:1; }
.home-hero-content { max-width:820px; }
.home-eyebrow,.home-section-kicker { margin:0 0 14px; font-size:.78rem; line-height:1.2; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:#a9a9a9; }
.home-hero h1 { margin:0; font-size:clamp(3.2rem,10vw,8.5rem); line-height:.88; letter-spacing:-.06em; font-weight:900; }
.home-hero-lead { max-width:680px; margin:32px 0 0; font-size:clamp(1.15rem,2.2vw,1.65rem); line-height:1.5; color:#d0d0d0; }
.home-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.home-button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:14px 24px; border-radius:999px; text-decoration:none; font-weight:800; transition:transform .18s ease,opacity .18s ease; }
.home-button:hover { transform:translateY(-2px); opacity:.92; }
.home-button-primary { background:#fff; color:#0a0a0a; }
.home-button-secondary { border:1px solid rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.04); }
.home-hero-stat { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; }
.home-hero-stat-number { font-size:clamp(4rem,9vw,8rem); line-height:.9; letter-spacing:-.06em; font-weight:900; }
.home-hero-stat-label { margin-top:14px; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:#aaa; }
.home-hero-stat-goal { margin-top:8px; color:#666; font-size:1.1rem; }

.home-wall-section,.home-latest-section,.home-concept-section,.home-experiment-section,.home-final-cta { padding:88px clamp(20px,5vw,80px); }
.home-wall-section { background:#111; }
.home-section-heading { max-width:1180px; margin:0 auto 32px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.home-section-heading h2,.home-concept-intro h2,.home-experiment-section h2,.home-final-cta h2 { margin:0; font-size:clamp(2rem,5vw,4rem); line-height:1; letter-spacing:-.04em; }
.home-section-heading p:not(.home-section-kicker) { max-width:650px; margin:16px 0 0; color:#a9a9a9; line-height:1.6; }
.home-text-link { flex:0 0 auto; color:#fff; font-weight:800; text-decoration:none; white-space:nowrap; }
.home-text-link::after { content:" →"; }

.home-mosaic { width:100%; max-width:1500px; margin:0 auto; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; background:#000; }
.home-mosaic-tile { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#202020; }
.home-mosaic-tile img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.home-mosaic-tile:hover img { transform:scale(1.04); }
.home-mosaic-overlay { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:2px; padding:34px 12px 10px; background:linear-gradient(transparent,rgba(0,0,0,.82)); color:#fff; opacity:0; transition:opacity .2s ease; }
.home-mosaic-tile:hover .home-mosaic-overlay,.home-mosaic-tile:focus-visible .home-mosaic-overlay { opacity:1; }
.home-mosaic-overlay strong { font-size:.9rem; }
.home-mosaic-overlay span { font-size:.78rem; color:#ccc; }
.home-mosaic-empty { max-width:1500px; min-height:280px; margin:0 auto; display:grid; place-items:center; border:1px solid #2c2c2c; color:#777; }

.home-latest-section { background:#f4f4f4; color:#111; }
.home-section-heading-compact { margin-bottom:24px; }
.home-latest-list { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #d5d5d5; }
.home-latest-item { min-width:0; display:flex; align-items:center; gap:18px; padding:18px 10px; border-bottom:1px solid #d5d5d5; color:#111; text-decoration:none; }
.home-latest-item:nth-child(odd) { border-right:1px solid #d5d5d5; padding-right:22px; }
.home-latest-item:nth-child(even) { padding-left:22px; }
.home-latest-item:hover { background:#fff; }
.home-latest-item strong { min-width:90px; font-variant-numeric:tabular-nums; }
.home-latest-item span { min-width:0; display:flex; flex-direction:column; gap:3px; }
.home-latest-item small { color:#777; }

.home-concept-section { background:#fff; color:#111; }
.home-concept-intro { max-width:850px; margin:0 auto 58px; text-align:center; }
.home-concept-intro p:last-child { margin:22px auto 0; max-width:720px; color:#555; font-size:1.15rem; line-height:1.7; }
.home-steps { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#d8d8d8; border:1px solid #d8d8d8; }
.home-step { min-height:260px; padding:30px; background:#fff; }
.home-step > span { display:block; margin-bottom:46px; color:#888; font-weight:800; letter-spacing:.08em; }
.home-step h3 { margin:0 0 12px; font-size:1.4rem; }
.home-step p { margin:0; color:#666; line-height:1.6; }

.home-experiment-section { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:50px; align-items:center; background:#161616; }
.home-experiment-section > div:first-child { max-width:820px; }
.home-experiment-section h2 { color:#fff; }
.home-experiment-section p:not(.home-section-kicker) { margin:22px 0 0; color:#aaa; line-height:1.7; font-size:1.1rem; }
.home-experiment-counter { padding:30px; border:1px solid #333; text-align:center; }
.home-experiment-counter strong { display:block; font-size:3.5rem; letter-spacing:-.04em; }
.home-experiment-counter span { display:block; margin-top:8px; color:#888; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }

.home-final-cta { text-align:center; background:#fff; color:#111; }
.home-final-cta > * { max-width:760px; margin-left:auto; margin-right:auto; }
.home-final-cta p:not(.home-section-kicker) { margin-top:18px; margin-bottom:30px; color:#666; line-height:1.6; }

@media (max-width:900px) {
    .home-hero { min-height:auto; grid-template-columns:1fr; padding-top:72px; padding-bottom:72px; }
    .home-hero-stat { align-items:flex-start; text-align:left; }
    .home-mosaic { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .home-latest-list { grid-template-columns:1fr; }
    .home-latest-item:nth-child(odd) { border-right:0; padding-right:10px; }
    .home-latest-item:nth-child(even) { padding-left:10px; }
    .home-steps { grid-template-columns:1fr; }
    .home-experiment-section { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .home-hero { padding:54px 18px; }
    .home-hero-actions { flex-direction:column; align-items:stretch; }
    .home-button { width:100%; }
    .home-wall-section,.home-latest-section,.home-concept-section,.home-experiment-section,.home-final-cta { padding:64px 18px; }
    .home-section-heading { align-items:flex-start; flex-direction:column; }
    .home-mosaic { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .home-mosaic-overlay { opacity:1; padding-top:26px; }
    .home-latest-item strong { min-width:72px; font-size:.9rem; }
}
/* =========================================
   UPLOAD PAGE
   ========================================= */

.upload-page {
    padding: 40px 20px 80px;
}

.upload-container {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.upload-header {
    text-align: center;
    margin-bottom: 40px;
}

.upload-header h1 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 6vw, 3.5rem);
}

.upload-header p {
    margin: 10px auto;
    max-width: 650px;
}

.upload-terms-notice {
    font-weight: 700;
}

.upload-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.upload-review-stage {
    max-width: 640px;
    margin: 0 auto;
}

.upload-account-notice {
    margin: 0 auto;
    text-align: center;
}

.upload-review-photo {
    display: block;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    margin: 24px 0;
    object-fit: cover;
    border: 1px solid #dddddd;
    border-radius: 8px;
}

.upload-review-summary {
    margin: 24px 0;
}

.upload-review-summary > div {
    padding: 14px 0;
    border-top: 1px solid #dddddd;
}

.upload-review-summary dt {
    font-weight: 700;
}

.upload-review-summary dd {
    margin: 6px 0 0;
    white-space: pre-wrap;
}

.upload-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.form-section {
    padding: 28px 0;
    border-top: 1px solid #dddddd;
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.auth-registration-notice {
    margin: 0 0 24px;
}

.auth-registration-notice h2,
.auth-registration-notice p {
    margin: 0;
}

.auth-registration-notice h2 {
    margin-bottom: 6px;
    font-size: 1.15rem;
}

.auth-page .form-section,
.upload-page[aria-labelledby="login-title"] .form-section {
    border-top: 0;
}

.upload-page[aria-labelledby="login-title"] .form-section {
    border-top: 0;
}

.form-section h2 {
    margin: 0 0 24px;
    font-size: 1.35rem;
}

.form-field {
    margin-bottom: 22px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.form-field label span {
    font-weight: 400;
    font-size: 0.9rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #bbbbbb;
    border-radius: 6px;
    background: #ffffff;
}

.form-field textarea {
    min-height: 150px;
    resize: vertical;
}

.field-help {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: #666666;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    cursor: pointer;
}

.checkbox-field input {
    margin-top: 4px;
    flex: 0 0 auto;
}

.upload-submit {
    border: 0;
    cursor: pointer;
    margin-top: 20px;
}

.photo-preview-container {
    margin-top: 24px;
}

.photo-preview-container h3 {
    margin-bottom: 12px;
}

.photo-cropper {
    max-width: 520px;
}

.photo-cropper > .field-help {
    margin-block: 6px;
}

.photo-crop-frame {
    position: relative;
    inline-size: min(100%, 500px);
    aspect-ratio: 1;
    margin-block: 16px;
    overflow: hidden;
    border-radius: 10px;
    background: #101010;
    cursor: grab;
    direction: ltr;
    touch-action: none;
    user-select: none;
}

.photo-crop-frame:active {
    cursor: grabbing;
}

.photo-crop-frame:focus-visible {
    outline: 3px solid var(--theme-focus);
    outline-offset: 3px;
}

.photo-crop-frame > img {
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    max-inline-size: none;
    max-block-size: none;
    pointer-events: none;
    transform-origin: center;
    will-change: width, height, transform;
}

.photo-crop-boundary {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 3px solid #ffffff;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .65);
}

.photo-crop-zoom-control {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) 4ch;
    align-items: center;
    gap: 10px;
    margin-block: 14px;
}

.photo-crop-zoom-control label {
    font-weight: 700;
}

.photo-crop-zoom-control input {
    inline-size: 100%;
    accent-color: var(--theme-accent);
}

.photo-crop-zoom-control input:focus-visible,
#photo-crop-confirm:focus-visible {
    outline: 3px solid var(--theme-focus);
    outline-offset: 3px;
}

.photo-crop-status {
    min-block-size: 1.5em;
    margin: 10px 0 0;
    color: var(--theme-muted);
    font-weight: 700;
}

.photo-cropper[data-state="error"] .photo-crop-status {
    color: var(--theme-error);
}

.photo-cropper[data-confirmed="true"] .photo-crop-status {
    color: var(--theme-success);
}

.photo-crop-confirmed-preview[hidden] {
    display: none;
}

@media (max-width: 768px) {

    .upload-page {
        padding: 30px 16px 60px;
    }

    .form-section {
        padding: 24px 0;
    }

    .photo-crop-frame {
        inline-size: 100%;
    }

}

@media (max-width: 360px) {
    .photo-crop-zoom-control {
        grid-template-columns: 1fr 4ch;
    }

    .photo-crop-zoom-control label {
        grid-column: 1 / -1;
    }
}

/* Theme mapping kept after the legacy upload styles for cascade precedence. */
.form-section {
    border-color: var(--theme-border);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    border-color: var(--theme-border);
    background: var(--theme-control);
    color: var(--theme-text);
}

.field-help {
    color: var(--theme-muted);
}

/* Final palette precedence for legacy shared-page rules. */
.header-join-button,
.header-find-photo button,
.footer-newsletter button,
.join-button,
.upload-submit {
    border-color: var(--theme-primary-action);
    background: var(--theme-primary-action);
    color: var(--theme-accent-contrast);
}

.site-navigation a,
.site-footer-links a,
.million-panel-link,
.million-wall-cta a {
    color: var(--theme-link);
}

.footer-theme-controls button[aria-pressed="true"] {
    border-color: var(--theme-accent);
    background: var(--theme-info-surface);
    color: var(--theme-link);
}

.lookup-result-message {
    margin-top: 18px;
    padding: 12px 16px;
    border: 1px solid var(--theme-error);
    border-radius: 6px;
    background: var(--theme-error-surface);
    color: var(--theme-error);
}