:root {
    --cream: #faf6ee;
    --gold-light: #d9bd7a;
    --gold-grad: linear-gradient(135deg, #c9a24d 0%, #e6cc8e 45%, #b38a38 100%);
    --paper: #ffffff;
    --ink: #2a2622;
    --muted: #6f665c;
    --gold: #a8833a;
    --gold-dark: #7d6127;
    --line: #e7dfd0;
    --strong: #2f6b45;
    --possible: #8a6a1f;
    --weak: #8b8178;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font: 16px/1.6 var(--sans);
}

a { color: var(--gold-dark); }

h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0.2em 0; }
h2 { font-size: 1.7rem; margin: 1.8em 0 0.6em; letter-spacing: 0.02em; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.page { padding-top: 24px; padding-bottom: 48px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.small { font-size: 0.85rem; color: var(--muted); }

/* Header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent); }
.header-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 10px; }
.home-icon { justify-self: start; display: flex; align-items: center; gap: 10px; line-height: 1.2; text-decoration: none; color: var(--ink); }
.home-icon img { height: 34px; width: auto; display: block; }
.home-label { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold-dark); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.home-icon:hover .home-label { border-bottom-color: var(--gold); }
.home-label .short { display: none; }
.brand { justify-self: center; display: block; line-height: 0; }
.brand-logo { height: 80px; width: auto; display: block; }
.site-header .wrap { max-width: 1160px; }
.site-header nav { justify-self: end; display: flex; gap: 20px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; white-space: nowrap; }
.site-header nav a { text-decoration: none; color: var(--muted); padding: 4px 0; border-bottom: 1px solid transparent; }
.site-header nav a:hover { color: var(--gold-dark); border-bottom-color: var(--gold); }
.site-header nav .nav-shop { color: var(--gold-dark); font-weight: 600; }

/* Hero + search */
.hero { padding: 44px 0 44px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #fffdf8 0%, var(--cream) 70%); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.72rem; color: var(--gold-dark); margin: 0; }
.hero h1 { font-weight: 500; letter-spacing: 0.01em; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 40em; }
.hero .lede { max-width: 36em; margin-left: auto; margin-right: auto; }

.searchbox { display: flex; gap: 8px; margin: 22px auto; flex-wrap: wrap; max-width: 680px; }
.searchbox input { flex: 1 1 260px; padding: 15px 18px; font: inherit; border: 1px solid var(--gold-light); border-radius: 999px; background: var(--paper); box-shadow: 0 2px 14px rgba(168, 131, 58, 0.10); }
.searchbox input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 131, 58, 0.18); }
.searchbox button, #scan-form button, .button {
    padding: 14px 28px; font: 600 0.8rem var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
    border: 0; border-radius: 999px; background: var(--gold-grad); color: #fff; cursor: pointer;
    text-decoration: none; display: inline-block; box-shadow: 0 2px 10px rgba(125, 97, 39, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.searchbox button:hover, #scan-form button:hover, .button:hover { filter: brightness(1.06) saturate(1.05); }

.hero .scan { max-width: 680px; margin-left: auto; margin-right: auto; }
.hero #scan-form { justify-content: center; }
.hero .scan-stage { text-align: left; }
.hero .disclaimer { text-align: left; }

.tips ol { padding-left: 1.2em; color: var(--muted); }

/* Lists */
.maker-list, .results, .listings { list-style: none; padding: 0; margin: 0; }
.maker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.maker-list a, .result a {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; text-decoration: none; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
.maker-list a:hover, .result a:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(168, 131, 58, 0.14); }
.maker-name, .result-name { font-weight: 600; }
.maker-meta { font-size: 0.85rem; color: var(--muted); }

.stamp { font-family: var(--mono); letter-spacing: 0.08em; background: #efe8da; padding: 2px 8px; border-radius: 4px; }
.stamp.big { font-size: 1.15rem; display: inline-block; margin: 0 0 8px; }

/* Search results */
.results-heading { font-size: 1.8rem; }
.results { display: grid; gap: 10px; }
.result a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.result-detail { width: 100%; font-size: 0.9rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.badge { font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; color: #fff; }
.badge.strong { background: var(--strong); }
.badge.possible { background: var(--possible); }
.badge.weak { background: var(--weak); }
.empty { background: var(--paper); border: 1px dashed var(--line); padding: 16px; border-radius: 10px; color: var(--muted); }

/* Maker page */
.crumbs { font-size: 0.85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.facts { display: flex; gap: 14px; color: var(--muted); margin: 0; font-size: 0.95rem; }

.shop { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px 20px; margin-top: 24px; }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.shop-head h2 { margin: 0.8em 0 0.4em; font-size: 1.45rem; }
.listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.listings a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.listings img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--cream); height: auto; }
.listing-title { font-size: 0.9rem; line-height: 1.35; }
.listing-price { font-weight: 600; color: var(--gold-dark); }
.shop-empty { color: var(--muted); }

.marks { display: grid; gap: 14px; }
.mark { display: grid; grid-template-columns: 160px 1fr; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.mark img, .mark-photo-missing { width: 160px; height: 160px; object-fit: contain; background: var(--cream); border-radius: 8px; }
.mark-photo-missing { display: grid; place-items: center; background: var(--cream); color: var(--muted); font-size: 0.85rem; text-align: center; }
.mark dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 0.95rem; }
.mark dt { color: var(--muted); }
.mark dd { margin: 0; }
.notes { font-size: 0.92rem; color: var(--muted); margin-bottom: 0; }

.sell { margin-top: 32px; padding: 4px 20px 24px; border-radius: 14px; background: #f3ecdd; }

.site-footer { text-align: center; border-top: 1px solid var(--gold-light); padding: 24px 0; margin-top: 40px; color: var(--muted); font-size: 0.95rem; }

@media (max-width: 560px) {
    .mark { grid-template-columns: 1fr; }
    .mark img, .mark-photo-missing { width: 100%; height: 200px; }
    .site-header nav { gap: 14px; letter-spacing: 0.08em; font-size: 0.7rem; }
    .brand-logo { height: 68px; }
    .home-label .long { display: none; }
    .home-label .short { display: inline; }
}

/* Narrower than a laptop: icon and links on one row, logo centered underneath */
@media (max-width: 1000px) {
    .header-row { grid-template-columns: auto 1fr; grid-template-areas: "icon nav" "logo logo"; }
    .home-icon { grid-area: icon; }
    .site-header nav { grid-area: nav; }
    .brand { grid-area: logo; }
}

/* Photo scanner */
.scan { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.scan h2 { font-size: 1.35rem; margin: 0 0 6px; }
.scan-help, .scan-status { color: var(--muted); font-size: 0.95rem; }
.scan-pick { display: inline-block; cursor: pointer; }
.scan-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scan-pick span { display: inline-block; padding: 10px 18px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-dark); font-weight: 600; background: var(--paper); }
.scan-pick input:focus-visible + span, .scan-pick:hover span { background: #f3ecdd; outline: 2px solid var(--gold); outline-offset: 2px; }
.scan-cropper { margin-top: 14px; }
.scan-stage { position: relative; display: inline-block; max-width: 100%; touch-action: none; cursor: crosshair; user-select: none; line-height: 0; }
.scan-stage img { display: block; max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid var(--line); }
.scan-sel { position: absolute; border: 2px solid var(--gold); background: rgba(168, 131, 58, 0.15); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); pointer-events: none; }
.scan-sel[hidden], .scan-cropper[hidden] { display: none; }
.scan-read { display: block; margin: 10px auto 0; padding: 10px 24px; font: inherit; font-weight: 600; color: #fff; background: var(--gold-grad); border: 0; border-radius: 999px; cursor: pointer; }
.scan-read:hover:not(:disabled) { filter: brightness(1.06); }
.scan-read:disabled { opacity: 0.5; cursor: default; }
#scan-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#scan-form[hidden] { display: none; }
#scan-text { flex: 1 1 220px; padding: 10px 12px; font: inherit; font-family: var(--mono); border: 1px solid var(--line); border-radius: 8px; }
.disclaimer { margin: 14px 0; padding: 12px 14px; font-size: 0.9rem; color: var(--ink); background: #f3ecdd; border-left: 4px solid var(--gold); border-radius: 6px; }

/* Add a mark */
.addmark { max-width: 680px; }
.addmark-form { display: grid; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin-top: 18px; }
.addmark-form label { font-weight: 600; margin-top: 10px; }
.addmark-form .req, .addmark-form .opt { font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-left: 6px; }
.addmark-form input[type=text], .addmark-form input[type=email], .addmark-form textarea, .addmark-form input[type=file] {
    width: 100%; padding: 12px 14px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.addmark-form input:focus, .addmark-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 131, 58, 0.18); }
.addmark-form button { justify-self: start; margin-top: 12px; padding: 14px 28px; font: 600 0.8rem var(--sans); text-transform: uppercase; letter-spacing: 0.16em; border: 0; border-radius: 999px; background: var(--gold-grad); color: #fff; cursor: pointer; box-shadow: 0 2px 10px rgba(125, 97, 39, 0.25); }
.hint { font-size: 0.85rem; color: var(--muted); margin: 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 12px 16px; border-radius: 10px; margin: 14px 0; }
.notice.ok { background: #e8f2ea; color: #1f4d33; border: 1px solid #b9d7c2; }
.notice.bad { background: #f8ece8; color: #6b2d1d; border: 1px solid #e3c0b6; }
.cta-add { text-align: center; margin-top: 8px; }
.cta-add p { color: var(--muted); }

.copyright { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Maker families (e.g. Coleman Co. under Black Hills Gold) */
.family-note { color: var(--muted); margin: -4px 0 14px; }
.family h2 { font-size: 1.35rem; margin: 1.2em 0 0.5em; }
.family-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.family-list a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.family-list a:hover { border-color: var(--gold); }

.copyright a { color: inherit; }
.legal { max-width: 720px; }
.legal h2 { font-size: 1.3rem; margin: 1.6em 0 0.4em; }
.legal p { color: var(--ink); }

/* Cookie consent banner */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 2px solid var(--gold); box-shadow: 0 -4px 18px rgba(42, 38, 34, 0.12); }
.consent[hidden] { display: none; }
.consent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; text-align: left; }
.consent p { flex: 1 1 320px; margin: 0; font-size: 0.9rem; color: var(--ink); }
.consent-actions { display: flex; gap: 10px; }
.consent button { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 9px 18px; border-radius: 8px; border: 1px solid var(--gold-dark); cursor: pointer; }
.consent-accept { background: var(--gold-dark); color: #fff; }
.consent-decline { background: transparent; color: var(--gold-dark); }