:root {
  --ink: #1b1d1c;
  --paper: #f4ead5;
  --paper-deep: #e9dcc0;
  --amber: #f5bd4f;
  --muted: #827e73;
  --line: rgba(27, 29, 28, .16);
  --white: #fffaf0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Space Grotesk", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { position: relative; max-width: 1220px; margin: auto; padding: 0 42px; }
.topbar { height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 11px; align-items: center; color: var(--ink); text-decoration: none; letter-spacing: -.03em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: var(--amber); font: 500 12px "DM Mono", monospace; transform: rotate(-4deg); }
.brand strong, .brand em { display: block; font-style: normal; line-height: .9; }.brand strong { font-size: 18px; }.brand em { margin-top: 5px; color: var(--muted); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.privacy-note { color: var(--muted); font: 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .05em; }.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #4f9b69; }
.intro { max-width: 690px; padding: 82px 0 65px; }.eyebrow, .section-kicker { margin: 0 0 17px; color: #a06c19; font: 500 11px "DM Mono", monospace; letter-spacing: .12em; }.intro h1 { margin: 0; font-size: clamp(48px, 7vw, 88px); line-height: .94; letter-spacing: -.075em; font-weight: 600; }.intro h1 span { color: #9a6b26; }.intro-copy { max-width: 470px; margin: 29px 0 0 4px; color: #69665d; font-size: 16px; line-height: 1.55; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(350px, .85fr); gap: 18px; align-items: start; }.panel { background: rgba(255,250,240,.6); border: 1px solid var(--line); padding: 27px; }.settings-panel { background: var(--ink); color: var(--paper); border-color: var(--ink); }.panel-heading, .results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.panel h2, .results-section h2 { margin: 0; font-size: 24px; letter-spacing: -.05em; }.counter { color: var(--muted); font: 11px "DM Mono", monospace; padding-top: 4px; }.settings-panel .section-kicker { color: var(--amber); }
.dropzone { min-height: 292px; margin-top: 31px; border: 1px dashed rgba(27,29,28,.35); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: background .2s, border-color .2s; }.dropzone:hover, .dropzone.dragover { background: rgba(245,189,79,.17); border-color: #a06c19; }.dropzone input { display: none; }.upload-icon { width: 52px; height: 52px; margin-bottom: 18px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 25px; }.dropzone strong { font-size: 17px; }.dropzone span:not(.upload-icon) { margin-top: 6px; color: var(--muted); font-size: 13px; }.dropzone small { margin-top: 23px; color: var(--muted); font: 10px "DM Mono", monospace; text-transform: uppercase; }
.file-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 18px; }.file-item { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-deep); cursor: pointer; outline: 1px solid transparent; outline-offset: 3px; }.file-item:hover, .file-item:focus-visible { outline-color: #a06c19; }.file-item.active { outline: 2px solid var(--amber); outline-offset: 3px; }.file-item img { width: 100%; height: 100%; display: block; object-fit: cover; }.file-item span { position: absolute; left: 5px; right: 5px; bottom: 5px; padding: 4px; overflow: hidden; background: rgba(27,29,28,.78); color: white; font: 9px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }.file-item b { position: absolute; top: 5px; right: 5px; padding: 4px; background: var(--amber); color: var(--ink); font: 8px "DM Mono", monospace; }.active-photo-hint { margin: 15px 0 0; color: var(--muted); font: 10px "DM Mono", monospace; }
.field-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; margin-top: 30px; }.field { display: block; }.field > span, .control-label { display: block; margin-bottom: 8px; color: #a9a399; font: 10px "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }.field input { width: 100%; border: 1px solid #4c4d47; outline: none; padding: 11px 10px; background: #292b29; color: var(--paper); font-size: 13px; }.field input:focus { border-color: var(--amber); }.input-with-suffix { display: flex; align-items: center; border: 1px solid #4c4d47; background: #292b29; }.input-with-suffix input { border: 0; min-width: 0; }.input-with-suffix b { padding-right: 10px; color: #a9a399; font: 10px "DM Mono", monospace; }
.metadata-fields { display: grid; gap: 12px; margin-top: 23px; padding-top: 22px; border-top: 1px solid #3d403c; }.metadata-fields .field-grid { margin-top: 0; }.coordinate-grid { grid-template-columns: 1fr 1fr; }.field textarea { width: 100%; resize: vertical; border: 1px solid #4c4d47; outline: none; padding: 11px 10px; background: #292b29; color: var(--paper); font-size: 13px; line-height: 1.4; }.field textarea:focus { border-color: var(--amber); }.field input::placeholder, .field textarea::placeholder { color: #77766e; }
.address-search-row { display: flex; gap: 7px; }.address-search-row input { min-width: 0; }.search-button { border: 1px solid var(--amber); padding: 0 13px; background: var(--amber); color: var(--ink); font-size: 11px; font-weight: 600; }.search-button:disabled { cursor: wait; opacity: .5; }.address-suggestions { position: relative; z-index: 3; display: grid; gap: 1px; margin-top: 4px; border: 1px solid #4c4d47; background: #4c4d47; }.address-suggestion { display: grid; gap: 4px; border: 0; padding: 10px; background: #292b29; color: var(--paper); text-align: left; }.address-suggestion:hover, .address-suggestion:focus { background: #3a3c38; outline: 0; }.address-suggestion strong { color: var(--amber); font-size: 11px; font-weight: 500; }.address-suggestion span { overflow: hidden; color: #b4b0a5; font: 9px "DM Mono", monospace; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }.search-status { display: block; margin-top: 7px; overflow: hidden; color: #918d82; font: 9px "DM Mono", monospace; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }.map-preview { height: 274px; margin-top: 12px; overflow: hidden; border: 1px solid #c8cbd0; border-radius: 4px; background: #dfe3e8; box-shadow: 0 2px 8px rgba(27,29,28,.22); }.map-preview #mapCanvas, .map-preview #mapFallback { width: 100%; height: 235px; }.map-preview #mapFallback { border: 0; }.map-preview #mapFallback[hidden] { display: none; }.map-preview .leaflet-control-zoom { margin: 12px !important; border: 0 !important; box-shadow: 0 1px 5px rgba(0,0,0,.28) !important; }.map-preview .leaflet-control-zoom a { width: 31px; height: 31px; border: 0 !important; color: #4d5156; background: #fff; line-height: 29px; }.map-preview .leaflet-control-zoom a:first-child { border-bottom: 1px solid #e2e4e7 !important; }.map-preview .leaflet-control-attribution { padding: 2px 5px; color: #666; background: rgba(255,255,255,.88); font-size: 8px; }.map-pick-button { width: 100%; height: 39px; border: 0; background: var(--amber); color: var(--ink); font: 500 10px "DM Mono", monospace; letter-spacing: .03em; }
.control-block { margin-top: 25px; }.segmented { display: flex; border: 1px solid #4c4d47; }.segment { flex: 1; border: 0; border-right: 1px solid #4c4d47; padding: 10px 6px; background: transparent; color: #aaa69c; font-size: 11px; }.segment:last-child { border-right: 0; }.segment.active { background: var(--amber); color: var(--ink); }.color-options { display: flex; gap: 10px; }.swatch { width: 27px; height: 27px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); }.swatch.active { outline: 1px solid var(--paper); outline-offset: 3px; }.primary-button { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 34px; border: 0; padding: 15px 16px; background: var(--amber); color: var(--ink); font-weight: 600; }.primary-button:hover:not(:disabled) { background: #ffd273; }.primary-button:disabled { cursor: not-allowed; opacity: .4; }.form-hint { margin: 13px 0 0; color: #918d82; font: 10px "DM Mono", monospace; }
.font-field { margin-top: 25px; }.font-field select { width: 100%; border: 1px solid #4c4d47; outline: none; padding: 11px 10px; background: #292b29; color: var(--paper); font-size: 13px; }.font-field select:focus { border-color: var(--amber); }
.results-section { padding: 76px 0 60px; }.results-heading { padding-bottom: 19px; border-bottom: 1px solid var(--line); }.text-button { border: 0; background: transparent; color: #8e621f; font-size: 13px; }.text-button span { margin-left: 8px; font-size: 18px; }.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 22px; }.result-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); }.result-card img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; }.result-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; }.result-meta div { min-width: 0; }.result-meta small { display: block; margin-bottom: 4px; color: #a06c19; font: 9px "DM Mono", monospace; }.result-meta strong { display: block; overflow: hidden; font: 10px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }.result-map { border-top: 1px solid var(--line); background: #edf1f4; }.result-map iframe { display: block; width: 100%; height: 150px; border: 0; background: #dfe3e8; }.download-button { flex: 0 0 auto; border: 1px solid var(--line); padding: 6px 8px; background: transparent; color: var(--ink); font: 10px "DM Mono", monospace; }.download-button:hover { background: var(--amber); border-color: var(--amber); }footer { display: flex; justify-content: space-between; padding: 20px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .06em; }
.result-card-error { min-height: 160px; display: grid; place-items: center; padding: 18px; background: #eee1c7; }.result-error { width: 100%; }.result-error small { display: block; margin-bottom: 8px; color: #a06c19; font: 9px "DM Mono", monospace; }.result-error strong { display: block; overflow: hidden; font: 11px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }.result-error span { display: block; margin-top: 10px; color: #827e73; font-size: 11px; line-height: 1.4; }
@media (max-width: 800px) { .page-shell { padding: 0 20px; }.topbar { height: 76px; }.privacy-note { font-size: 9px; }main { display: flex; flex-direction: column; }.intro { order: -2; padding: 60px 0 45px; }.workspace { display: contents; }.upload-panel { order: -1; }.settings-panel { order: 0; }.results-section { order: 1; }.dropzone { min-height: 220px; }.results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .privacy-note { max-width: 105px; line-height: 1.4; }.panel { padding: 19px; }.field-grid, .coordinate-grid { grid-template-columns: 1fr; }.segmented { display: grid; grid-template-columns: 1fr 1fr; }.segment:last-child { grid-column: span 2; border-top: 1px solid #4c4d47; }.file-list { grid-template-columns: repeat(3, 1fr); }footer { display: block; line-height: 2; } }