:root{
  --paper:#f2ece0; --paper-2:#e9e0cf; --card:#fbf8f2; --ink:#2a2420; --ink-2:#5f564c; --line:#d8ccb8;
  --red:#9a2f22; --red-soft:#ecd3cb; --green:#2d6a4b; --green-soft:#d3e6da; --mat:#e6dcc8;
  --shadow:0 1px 2px rgb(50 35 20/.08),0 8px 22px rgb(50 35 20/.09);
  --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,40px); --max:1240px;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#1b1714; --paper-2:#25201c; --card:#2a2521; --ink:#efe7da; --ink-2:#b5aa9a; --line:#3d352d;
    --red:#e58a76; --red-soft:#4b2a24; --green:#74c9a0; --green-soft:#21392c; --mat:#332c25; --shadow:0 1px 2px rgb(0 0 0/.4),0 8px 22px rgb(0 0 0/.35)}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:6px;z-index:100}
.skip:focus{left:8px}

/* masthead */
.masthead{max-width:var(--max);margin:0 auto;padding:22px var(--gut) 8px}
.crumbs{display:flex;gap:8px;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.mast-grid{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:34px 0 18px}
.kicker{margin:0 0 10px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
h1{margin:0;font:600 clamp(38px,6.4vw,76px)/.98 var(--serif);letter-spacing:-.02em;font-variation-settings:'opsz' 144}
.lede{max-width:56ch;margin:18px 0 0;font-size:clamp(16px,1.6vw,18px);color:var(--ink-2)}
.stamp{width:clamp(110px,16vw,190px);color:var(--red);opacity:.78;transform:rotate(-9deg);mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.stamp{mix-blend-mode:normal;opacity:.7}}
.stats{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:flex-end;padding:18px 0 22px;border-top:1px solid var(--line)}
.stat b{display:block;font:600 34px/1 var(--serif);letter-spacing:-.01em}
.stat span{font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.prog{flex:1 1 220px;min-width:200px}
.prog .bar{height:8px;border-radius:5px;background:var(--paper-2);overflow:hidden;border:1px solid var(--line)}
.prog .bar i{display:block;height:100%;background:var(--green);border-radius:5px}
.prog span{display:block;margin-top:7px;font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* toolbar */
.toolbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toolbar-in{max-width:var(--max);margin:0 auto;padding:10px var(--gut);display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.tabs{display:flex;gap:4px}
.tabs button{border:0;background:none;padding:9px 14px;border-radius:8px;font:500 15px/1 var(--sans);color:var(--ink-2)}
.tabs button:hover{background:var(--paper-2);color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.count{font:500 12px/1 var(--mono);opacity:.7;margin-left:4px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.search input,.sort select,.year input[type=number]{font:400 14px/1 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.search input{width:min(190px,60vw)}
tr.flash td{background:var(--red-soft)}
.sort select{padding-right:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;padding:8px 13px;font:500 13.5px/1 var(--sans);color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--green-soft);color:var(--green)}
.seg button[data-status=want][aria-pressed=true]{background:var(--red-soft);color:var(--red)}
.year{display:flex;align-items:center;gap:8px;font:500 13.5px/1 var(--sans);color:var(--ink-2)}
.year input[type=number]{width:78px}
.year input[type=range]{width:96px;accent-color:var(--red)}
.x{border:1px solid var(--line);background:var(--card);border-radius:50%;width:26px;height:26px;line-height:1;font-size:16px}
body[data-tab=collection] #statusSeg{display:none}

main{max-width:var(--max);margin:0 auto;padding:28px var(--gut) 40px;min-height:50vh}
.empty{padding:50px 0;text-align:center;color:var(--ink-2)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:target,.card.flash{outline:2px solid var(--red);outline-offset:3px}
.mat{position:relative;display:block;width:100%;aspect-ratio:3/2;border:0;padding:14px;background:var(--mat);background-image:radial-gradient(circle at 30% 20%,rgb(255 255 255/.25),transparent 60%)}
.mat img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 5px rgb(30 20 10/.3));transition:transform .25s}
.mat:hover img{transform:scale(1.03)}
.chip{position:absolute;font:500 11px/1 var(--mono);letter-spacing:.05em;padding:5px 7px;border-radius:5px;background:rgb(30 22 14/.72);color:#fff}
.chip.bl{left:10px;bottom:10px}.chip.tr{right:10px;top:10px}
.strip{display:flex;gap:8px;padding:8px 14px 0;background:var(--card)}
.strip button{border:1px solid var(--line);background:var(--mat);border-radius:6px;padding:3px;height:54px;position:relative}
.strip img{height:100%;width:auto;display:block;border-radius:2px}
.strip span{position:absolute;left:3px;bottom:3px;font:500 9.5px/1 var(--mono);background:rgb(30 22 14/.75);color:#fff;padding:2px 4px;border-radius:3px}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font:600 24px/1.1 var(--serif);letter-spacing:-.01em}
.card h3 a{text-decoration:none}
.yrs{font:500 13px/1.3 var(--mono);color:var(--green)}
.det{margin:0;font-size:13.5px;color:var(--ink-2)}
.note{margin:0;font-size:13.5px;color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;padding-top:6px;font-size:13px}
.links a{color:var(--ink-2)}
.links a:hover{color:var(--red)}

/* timeline */
.tl{position:relative;height:8px;border-radius:4px;background:var(--paper-2);border:1px solid var(--line)}
.tl i{position:absolute;top:-1px;bottom:-1px;border-radius:3px;background:var(--ink-2);opacity:.75}
.have .tl i,.tl.have i{background:var(--green);opacity:1}
.tl b{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--red);border-radius:1px}

/* checklist */
.check-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.summary{margin:0;color:var(--ink-2);font-size:14.5px}
.btn{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:9px 14px;font:500 13.5px/1 var(--sans)}
.btn:hover{border-color:var(--ink-2)}
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.check{width:100%;border-collapse:collapse;font-size:14.5px}
.check th{text-align:left;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:12px 14px;border-bottom:1px solid var(--line);background:var(--paper-2);position:relative}
.check td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.check tr:last-child td{border-bottom:0}
.check tbody tr:hover{background:color-mix(in srgb,var(--paper-2) 55%,transparent)}
.c-stat{width:62px}.c-tl{width:26%;min-width:170px}
.tl-ticks{position:absolute;left:14px;right:14px;top:0;bottom:0;pointer-events:none}
.tl-ticks i{position:absolute;top:13px;font-style:normal;font-size:9px;letter-spacing:0;opacity:.8;transform:translateX(-50%)}
.tl-ticks i:nth-child(1){left:calc((1900 - 1859)/167*100%)}
.tl-ticks i:nth-child(2){left:calc((1950 - 1859)/167*100%)}
.tl-ticks i:nth-child(3){left:calc((2000 - 1859)/167*100%)}
.name{font:600 17px/1.2 var(--serif)}
.name small{display:block;font:400 12.5px/1.3 var(--sans);color:var(--ink-2);margin-top:2px}
.tag{display:inline-flex;align-items:center;gap:5px;font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap}
.tag.have{background:var(--green-soft);color:var(--green)}
.tag.want{background:var(--red-soft);color:var(--red)}
.tag.stn{background:var(--paper-2);color:var(--ink-2)}
.mini{border:1px solid var(--line);background:var(--mat);border-radius:5px;padding:2px;width:58px;height:40px;display:block}
.mini img{width:100%;height:100%;object-fit:contain;display:block}
.mono{font:500 13px/1.35 var(--mono)}
.cn{font-size:13.5px;color:var(--ink-2)}
.cn a{color:var(--ink-2);margin-right:10px;white-space:nowrap}.cn a:hover{color:var(--red)}
.dim{opacity:.4}

/* map */
#map{height:min(72vh,680px);min-height:420px;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
#map .leaflet-tile-pane{filter:saturate(.75) sepia(.18) contrast(.96)}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:12px;font-size:13.5px;color:var(--ink-2)}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.pin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgb(0 0 0/.45);background:var(--green)}
.pin.want{background:var(--red)}
.pin.mixed{background:linear-gradient(90deg,var(--green) 50%,var(--red) 50%)}
.pin.approx{border-style:dashed;border-color:#fff}
.leaflet-marker-icon.bcpin{background:none;border:0}
.maplabel{background:rgb(251 248 242/.9);border:0;box-shadow:0 1px 3px rgb(0 0 0/.25);color:#2a2420;font:500 11.5px/1 var(--sans);padding:3px 6px;border-radius:4px}
.maplabel:before{display:none}
#map:not(.z11) .lbl-want{display:none}
.pop{min-width:190px;max-width:260px;font-family:var(--sans)}
.pop h4{margin:0 0 6px;font:600 16px/1.2 var(--serif)}
.pop .it{padding:7px 0;border-top:1px solid #e3d9c6}
.pop .it:first-of-type{border-top:0;padding-top:0}
.pop .it b{font-weight:600}.pop .it small{display:block;color:#6a6055;font:400 12px/1.3 var(--sans)}
.pop .thumbs{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.pop .thumbs button{border:1px solid #d8ccb8;background:#e6dcc8;border-radius:4px;padding:2px;width:62px;height:44px}
.pop .thumbs img{width:100%;height:100%;object-fit:contain;display:block}
.unplaced{margin-top:18px;font-size:14px;color:var(--ink-2)}
.unplaced b{color:var(--ink)}
.unplaced span.u{display:inline-block;margin:3px 6px 3px 0;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:12.5px}

.foot{max-width:var(--max);margin:0 auto;padding:24px var(--gut) 56px;border-top:1px solid var(--line);color:var(--ink-2);font-size:13.5px}
.foot p{max-width:80ch;margin:6px 0}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;background:#100c09;color:#f3ece0;display:grid;grid-template-rows:auto 1fr auto;user-select:none}
.lb[hidden]{display:none}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px}
.lb-title strong{font:600 20px/1 var(--serif)}
.lb-side{margin-left:12px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#cdbfa9}
.lb-actions{display:flex;gap:8px}
.lb-btn{border:1px solid rgb(255 255 255/.25);background:rgb(255 255 255/.06);color:#f3ece0;border-radius:8px;padding:9px 13px;font:500 13.5px/1 var(--sans)}
.lb-btn:hover{background:rgb(255 255 255/.14)}
.lb-btn[hidden]{display:none}
.lb-stage{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;min-height:0;cursor:zoom-in}
.lb-stage.zoomed{cursor:grab}.lb-stage.drag{cursor:grabbing}
.lb-stage img{max-width:none;max-height:none;object-fit:contain;transform-origin:center;will-change:transform;box-shadow:0 10px 50px rgb(0 0 0/.6);background:#fff1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:70px;border:0;border-radius:8px;background:rgb(255 255 255/.08);color:#fff;font-size:34px;line-height:1}
.lb-nav:hover{background:rgb(255 255 255/.18)}
.lb-nav.prev{left:10px}.lb-nav.next{right:10px}
.lb-foot{display:flex;justify-content:space-between;gap:16px;padding:10px 18px 14px;font-size:13.5px;color:#d9ccb6;min-height:40px}
.lb-count{font:500 12px/1.6 var(--mono);white-space:nowrap}
@media (max-width:760px){
  .mast-grid{grid-template-columns:1fr}.mast-side{display:none}
  .c-tl,.check td:nth-child(4),.check th:nth-child(4){display:none}
  .lb-nav{width:38px;height:56px}
  .toolbar{position:static}
}
@media (max-width:560px){
  .crumbs{font-size:10.5px;gap:5px;white-space:nowrap}
  .stats{display:grid;grid-template-columns:repeat(3,auto);gap:14px 18px}
  .stat b{font-size:28px}.stat span{font-size:10px}
  .prog{grid-column:1/-1}
  .search{flex:1 1 100%}.search input{width:100%}
  .year input[type=range]{display:none}
  .filters{width:100%;gap:8px 10px}
  .toolbar-in{gap:8px}
  .check th:nth-child(3),.check td:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media print{
  body{background:#fff;color:#000}
  .toolbar,.mast-side,.stats,.lede,.crumbs,.check-head .btn,.foot,.lb,#tab-collection,#tab-map,.skip{display:none!important}
  #tab-checklist{display:block!important}
  .masthead{padding:0}.mast-grid{padding:0 0 10px}h1{font-size:26px}
  .table-wrap{box-shadow:none;border:0}
  .check th,.check td{padding:5px 8px;font-size:11px}
  .mini{display:none}.c-tl,.check td:nth-child(4),.check th:nth-child(4){display:none}
}