/* Photo-page-only responsive presentation; no shared stylesheet changes. */
* { box-sizing: border-box; }
html { height: auto; }
body.crf-photo-page { margin: 0; height: auto; background: #000; color: #eee; font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
a { color: #1763b1; } a:focus-visible { outline: 3px solid #ffa323; outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.site-header { background: #080808; padding-top: 8px; }
.site-brand { display: inline-block; color: #ffa323; font-size: clamp(1.2rem, 3.5vw, 2rem); font-weight: 900; font-style: italic; text-decoration: none; margin: 0 12px; }
.site-brand:hover { color: #ffc56a; }
.site-tagline { color: #ddd; font-size: .8rem; font-style: italic; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; background: #ffa323; padding: 0 8px; margin-top: 6px; }
.site-nav a { color: #141414; font-weight: 700; text-decoration: none; padding: 9px 12px; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a:hover { background: #ffd18a; color: #000; }
.site-nav .account-link { margin-left: auto; }
.photo-stage { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 20px; align-items: start; max-width: 1900px; margin: auto; padding: 20px; }
.photo-stage:not(:has(.photo-related)) { grid-template-columns: minmax(0, 1fr); }
.photo-main { margin: 0; min-width: 0; text-align: center; }
.photo-original { display: block; }
.main-image { display: block; width: auto; max-width: 100%; height: auto; margin: auto; }
.photo-main figcaption { font-size: .75rem; color: #ddd; padding: 5px; }
.photo-related { min-width: 0; }
.photo-related h2 { margin: 0 0 10px; color: #ccc; font-size: .8rem; font-weight: 400; }
.related-strip { display: flex; flex-direction: column; gap: 10px; }
.related-photo { display: block; }
.related-photo img { display: block; width: 100%; height: auto; border: 1px solid #444; }
.photo-details-background { background: #fafafa; color: #171717; padding: 28px 20px; }
.photo-details { max-width: 1280px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.photo-details section { min-width: 0; overflow-wrap: anywhere; }
.photo-details table { max-width: 100%; width: 100%; }
.photo-details td { vertical-align: top; }
.photo-details .caption-content { border-spacing: 0; }
.photo-details font[size="1"] { font-size: .75rem; }
.photo-details font[size="2"] { font-size: .875rem; }
.photo-details font[size="3"] { font-size: 1rem; }
.photo-details font[size="4"] { font-size: 1.1rem; }
.photo-details textarea, .photo-details select, .photo-details input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) { max-width: 100%; font: inherit; }
.photo-details textarea { width: 100%; min-height: 7rem; }
.photo-details input[type="submit"], .photo-details button { min-height: 44px; cursor: pointer; }
#map-canvas { width: 100%; height: 210px; min-width: 0; }
.photo-history { color: #171717; background: #fafafa; padding: 12px 20px 24px; overflow-x: auto; }
.photo-history > table { max-width: 1280px; margin: auto; }
.site-footer { border-top: 4px solid #ffa323; padding: 24px 16px; background: #101010; color: #ddd; font-size: .85rem; text-align: center; overflow-wrap: anywhere; }
.site-footer table { max-width: 100%; margin-left: auto; margin-right: auto; }
.site-footer > table:first-of-type { display: none; }
.site-footer input[type="image"] { max-width: 100%; }
@media (max-width: 1000px) {
 .photo-details { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 28px; }
 .photo-stage { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
 .related-strip { flex-direction: row; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
 .related-photo { flex: 0 0 132px; scroll-snap-align: start; }
 .photo-related h2 { margin-bottom: 6px; }
 .site-footer table, .site-footer tbody, .site-footer tr, .site-footer td { display: block; width: auto !important; max-width: 100%; height: auto; }
 .site-footer td { margin-bottom: 12px; }
}
@media (max-width: 600px) {
 .site-tagline { display: block; margin: 2px 12px 6px; font-size: .75rem; }
 .site-nav { gap: 0; padding: 0 4px; }
 .site-nav a { padding: 8px 9px; font-size: .85rem; }
 .site-nav .account-link { margin-left: 0; }
 .photo-stage { padding: 10px 0; }
 .photo-related { padding: 0 12px; }
 .photo-details-background { padding: 20px 14px; }
 .photo-facts table, .photo-facts tbody, .photo-facts tr, .photo-facts td { display: block; width: 100% !important; height: auto !important; }
 .photo-facts td { padding: 3px 0; text-align: left; }
 .photo-facts td[rowspan] { margin: 12px 0; }
 .photo-caption table { table-layout: fixed; }
 .photo-caption td { overflow-wrap: anywhere; }
 .photo-caption font[size="1"] { font-size: .8rem; }
 .photo-caption font[size="2"] { font-size: .9rem; }
 #map-canvas { height: 220px; }
 .photo-history { padding: 12px; }
 .photo-history table, .photo-history tbody, .photo-history tr, .photo-history td { display: block; width: auto !important; max-width: 100%; }
 .photo-history td { padding: 4px; }
}

/* Keep the original account graphic in the upper-right corner. */
.site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.site-branding {
    min-width: 0;
}

.site-account-logo {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    min-height: 45px;
    margin-right: 12px;
}

.site-account-logo img {
    display: block;
    width: 62px;
    height: 45px;
    max-width: 100%;
    border: 0;
}

.site-header > .site-nav {
    grid-column: 1 / -1;
    width: 100%;
}

/* Leave room for the graphic on narrow phones. */
@media (max-width: 600px) {
    .site-header {
        column-gap: 4px;
    }

    .site-branding .site-brand {
        font-size: clamp(1rem, 4.5vw, 1.5rem);
        margin-right: 0;
        overflow-wrap: anywhere;
    }

    .site-branding .site-tagline {
        margin-right: 0;
    }

    .site-account-logo {
        margin-right: 8px;
    }
}

/* The main photo is not a link on mouse/trackpad-oriented devices. */
.photo-original {
    cursor: default;
}

/* Show the link cursor only while a destination is present. */
.photo-original[href] {
    cursor: pointer;
}

/* Leaflet / OpenStreetMap: scoped to this page's location map. */
#map-canvas {
    width: 100%; height: 230px; min-width: 0;
    background: #e7e4dd; color: #222; text-align: left;
    line-height: normal; isolation: isolate; overflow: hidden;
}
#map-canvas[hidden] { display: none; }
#map-canvas img.leaflet-tile,
#map-canvas img.leaflet-marker-icon,
#map-canvas img.leaflet-marker-shadow {
    max-width: none !important; max-height: none !important;
}
#map-canvas .leaflet-control-attribution {
    font-size: 11px; line-height: 1.4; overflow-wrap: normal;
    background: rgba(255, 255, 255, 0.9);
}
#map-canvas .leaflet-control-attribution a { color: #1763b1; }
#map-canvas .leaflet-control-zoom a { color: #222; }
.photo-map-status, .photo-map-links {
    margin: 6px 0 0; font-size: .8rem; line-height: 1.4; text-align: left;
}
.photo-map-status { color: #555; }
.photo-map-status:empty { display: none; }
.photo-map-links[hidden] { display: none; }
.photo-map-links a { display: inline-block; padding: 6px 0; }
@media (max-width: 600px) { #map-canvas { height: 240px; } }