:root { --paper:#f5f1e8; --cream:#fffcf6; --ink:#2f3630; --muted:#686b60; --line:#d8d2c5; --olive:#3e5046; --gold:#92794e; --soft:#e9e5d9; --serif:Georgia,'Times New Roman',serif; --sans:'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:25px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.6; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.4; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #9d793a; outline-offset:4px; }
[hidden] { display:none!important; }
.wrap { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
.skip { position:fixed; left:20px; top:-100px; z-index:100; background:var(--cream); padding:12px; }
.skip:focus { top:12px; }
.masthead { min-height:98px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:flex; align-items:center; gap:16px; text-decoration:none; font-family:var(--serif); font-size:31px; letter-spacing:-1px; }
.brand small { display:block; font:9px/1.6 var(--sans); letter-spacing:1.5px; color:var(--muted); margin-top:2px; }
.brand-mark { position:relative; border:1px solid var(--gold); height:44px; width:42px; display:grid; place-items:center; font-size:27px; color:var(--gold); padding-right:10px; }
.brand-mark span { position:absolute; font-size:20px; right:3px; bottom:0; }
.masthead nav { display:flex; align-items:center; gap:30px; font-size:13px; }
.masthead nav a { text-decoration:none; }
.masthead nav a:hover { text-decoration:underline; text-underline-offset:5px; }
#background-toggle { border:1px solid var(--line); background:transparent; padding:8px 13px; color:var(--muted); font-size:12px; border-radius:3px; }
#background-toggle span { margin-left:8px; }
.hero { position:relative; overflow:hidden; background:#e9e5da; border-block:1px solid var(--line); }
.hero-wash { position:absolute; inset:0; background-size:cover; background-position:center 53%; filter:grayscale(1) sepia(.22); opacity:.29; }
.hero:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#f1eee5 4%,rgba(241,238,229,.94) 30%,rgba(241,238,229,.34) 70%,rgba(241,238,229,.22)); pointer-events:none; }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:438px; padding-block:43px 29px; }
.eyebrow { font-size:10px; letter-spacing:2.2px; font-weight:600; color:var(--gold); margin:0 0 15px; }
.eyebrow>span { display:inline-block; width:21px; height:1px; background:var(--gold); vertical-align:middle; margin-right:9px; }
.hero h1 { font-family:var(--serif); font-weight:400; line-height:1.04; font-size:clamp(43px,4.8vw,69px); letter-spacing:-2px; margin:0 0 22px; }
.hero h1 em { font-weight:400; color:#7e704f; }
.intro { font-size:15px; line-height:1.8; color:#5e655c; margin:0 0 22px; }
.hero-link { display:inline-flex; gap:40px; text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:6px; font-size:13px; font-weight:600; }
.hero-link:hover { color:var(--gold); }
.hero-credit { position:relative; z-index:1; text-align:right; font-size:9px; color:#687064; padding-bottom:11px; letter-spacing:.2px; }
.hero-album { height:365px; position:relative; max-width:490px; width:100%; justify-self:end; }
.print { position:absolute; margin:0; background:#f9f4e7; padding:10px 10px 0; border:1px solid #d3ccbb; box-shadow:0 16px 26px rgba(49,46,36,.16); width:207px; filter:grayscale(.82) sepia(.15); opacity:.94; }
.print img { width:100%; height:275px; object-fit:contain; display:block; }
.print figcaption { font-size:8px; text-align:center; letter-spacing:2px; padding:9px 0; color:#7c7564; }
.print-back { right:9px; top:11px; transform:rotate(8deg); }
.print-front { left:42px; top:34px; transform:rotate(-8deg); width:217px; }
.album-note { position:absolute; bottom:1px; right:32px; font-family:var(--serif); font-style:italic; color:#6a705f; font-size:17px; transform:rotate(-3deg); }
.no-photo-background .decoration,.no-photo-background .hero-credit { visibility:hidden; }
.collection-bar { display:flex; align-items:center; gap:53px; border-bottom:1px solid var(--line); padding:25px 0; }
.collection-bar>div { display:flex; align-items:center; gap:13px; }
.collection-bar strong { font-family:var(--serif); font-weight:400; font-size:29px; line-height:1; }
.collection-bar span { font-size:11px; line-height:1.5; color:var(--muted); max-width:100px; }
.collection-bar p { margin:0 0 0 auto; font-size:9px; letter-spacing:1.2px; color:var(--muted); }
.collection-bar b { display:block; font-size:11px; font-weight:400; letter-spacing:0; text-align:right; margin-top:2px; }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:100%; background:#8b9677; margin-right:7px; }
.catalog { padding-block:43px 46px; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:23px; }
.section-head .eyebrow { margin-bottom:7px; }
.section-head h2,.about h2 { font:400 35px/1.2 var(--serif); letter-spacing:-.6px; margin:0; }
.view-switch { display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.view-switch button { padding:8px 15px; border:0; background:transparent; color:var(--muted); font-size:12px; }
.view-switch button[aria-pressed=true] { background:var(--olive); color:white; }
.search-panel { padding:23px 28px 0; background:rgba(255,252,246,.96); border:1px solid var(--line); box-shadow:0 5px 15px rgba(59,54,40,.035); border-radius:5px; }
.search-label { display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.search-line { display:flex; gap:12px; }
.search-input { flex:1; display:flex; align-items:center; border:1px solid #c8c4b8; background:white; border-radius:3px; }
.search-input>span { font-size:28px; line-height:1; padding:0 15px; color:#758074; }
.search-input input { border:0; background:transparent; min-width:0; flex:1; width:100%; font-size:16px; color:var(--ink); padding:12px 13px 12px 0; }
.search-input:focus-within { outline:2px solid var(--gold); outline-offset:2px; }
.search-input input:focus-visible { outline:0; }
.primary,.secondary { border-radius:3px; border:1px solid var(--olive); padding:10px 20px; line-height:1.5; font-size:13px; }
.primary { background:var(--olive); color:white; }
.primary:hover { background:#2a3c31; }
.primary>span { padding-left:25px; }
.secondary { background:var(--cream); border-color:var(--line); color:var(--ink); }
.secondary:hover { background:var(--soft); }
.text-button { border:0; background:transparent; padding:5px; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.search-tools { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:57px; }
.quick-search { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.quick-search>span { font-size:11px; color:var(--muted); margin-right:5px; }
.quick-search button { background:transparent; border:1px solid #ded9cd; border-radius:20px; padding:3px 11px; font-size:11px; color:#566052; }
.quick-search button:hover { background:var(--soft); }
#advanced-toggle { font-size:12px; background:transparent; border:0; color:var(--olive); padding:8px 0; white-space:nowrap; }
#advanced-toggle span { padding-left:12px; }
#advanced { padding:22px 0; border-top:1px solid var(--line); }
.advanced-intro { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:18px; }
.advanced-intro h3 { margin:0; font:400 23px var(--serif); }
.advanced-intro p,.hint { font-size:12px; color:var(--muted); margin:7px 0; }
.advanced-intro label { font-size:11px; min-width:180px; }
.advanced-intro label select { display:block; width:100%; margin-top:3px; }
select { padding:7px 28px 7px 9px; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:3px; font-size:12px; max-width:100%; }
.condition-group { padding:15px; background:#f1eee6; border:1px solid var(--line); margin-block:12px; border-radius:3px; }
.group-header { display:flex; align-items:center; gap:15px; justify-content:space-between; margin-bottom:12px; }
.group-header strong { font-size:12px; }
.group-header label { font-size:11px; }
.group-remove,.row-remove { border:0; background:transparent; color:var(--muted); font-size:21px; }
.condition-row { display:grid; grid-template-columns:1fr 1fr 2fr 30px; gap:8px; margin:7px 0; }
.condition-row input { min-width:0; width:100%; border:1px solid var(--line); border-radius:3px; padding:7px 10px; background:white; font-size:13px; }
.add-condition { border:0; color:var(--olive); font-size:12px; background:transparent; padding:5px 0; }
.advanced-actions { display:flex; align-items:center; gap:17px; }
.advanced-actions .primary { margin-left:auto; }
.hint { margin-top:15px; }
.results-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:23px 0 18px; font-size:13px; }
#counter { font-weight:500; font-variant-numeric:tabular-nums; }
#query-state { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.filters { display:flex; align-items:center; gap:15px; }
.filters label { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.filters select { max-width:220px; background:transparent; }
.notice { padding:14px 18px; background:#f0e7d6; border-left:3px solid var(--gold); font-size:13px; color:#5c533e; }
.photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.photo-card { background:var(--cream); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s,transform .18s; }
.photo-card:hover { box-shadow:0 8px 22px #423c2c14; transform:translateY(-3px); }
.photo-button { width:100%; padding:15px 20px; display:block; background:#e9e5da; border:0; border-bottom:1px solid var(--line); height:258px; position:relative; overflow:hidden; }
.photo-button img { display:block; width:100%; height:100%; object-fit:contain; filter:none; opacity:1; }
.photo-placeholder { display:grid; place-items:center; height:100%; padding:20px; font-family:var(--serif); font-size:20px; color:#897d63; background:repeating-linear-gradient(135deg,transparent,transparent 8px,#d9d2c733 8px,#d9d2c733 9px); }
.photo-placeholder small { display:block; font:10px var(--sans); letter-spacing:1px; margin-top:10px; }
.card-content { padding:17px 18px 16px; display:flex; flex-direction:column; flex:1; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10px; color:var(--muted); margin-bottom:8px; }
.card-meta strong { font-size:12px; letter-spacing:.8px; color:var(--ink); }
.card-meta span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70%; }
.card-content h3 { font:400 18px/1.4 var(--serif); margin:0 0 10px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.card-studio { font-size:10px; color:var(--muted); margin:0 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-open { border:0; border-top:1px solid #e5e0d5; background:none; color:var(--olive); width:100%; padding:10px 0 0; text-align:left; font-size:11px; margin-top:auto; display:flex; justify-content:space-between; }
.card-tag { font-size:10px; color:#8b5c2c; padding:4px 0; margin:0 0 7px; }
.card-tag.muted { color:var(--muted); }
.photo-grid.list-view { grid-template-columns:1fr; gap:15px; }
.list-view .photo-card { flex-direction:row; }
.list-view .photo-button { width:150px; flex-shrink:0; height:195px; border-bottom:0; border-right:1px solid var(--line); padding:10px; }
.list-view .card-content h3 { font-size:19px; -webkit-line-clamp:3; }
.list-view .card-content { min-width:0; }
.empty { grid-column:1/-1; text-align:center; padding:65px 25px; border:1px dashed var(--line); color:var(--muted); }
.empty h3 { font:400 25px var(--serif); color:var(--ink); }
.pagination { display:flex; justify-content:center; align-items:center; gap:30px; margin-top:30px; }
.pagination span { font-size:12px; color:var(--muted); }
.catalog-note { text-align:center; font-size:11px; color:var(--muted); margin-top:23px; }
.about { position:relative; overflow:hidden; background:#e9e5da; border:1px solid var(--line); padding:40px 46px; }
.about-wash { position:absolute; inset:0 0 0 42%; background-size:cover; background-position:center; filter:grayscale(1); opacity:.2; }
.about:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#e9e5da 15%,#e9e5daeb 47%,transparent); pointer-events:none; }
.about-content { position:relative; z-index:1; max-width:660px; }
.about-content p:not(.eyebrow) { font-size:13px; color:#5f675d; }
.about-content a { display:inline-block; text-decoration:none; font-size:12px; border-bottom:1px solid var(--gold); margin-top:7px; padding-bottom:4px; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-block:35px; }
.footer-brand { font:25px var(--serif); }.footer-brand span { display:block; font:11px/1.5 var(--sans); color:var(--muted); margin-top:7px; }.footer p { font-size:10px; text-align:right; color:var(--muted); }
#record-dialog { width:min(1220px,calc(100% - 48px)); max-height:92vh; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--cream); color:var(--ink); }
#record-dialog::backdrop { background:rgba(24,32,26,.77); }
.dialog-close { position:sticky; top:12px; left:calc(100% - 49px); z-index:4; width:35px; height:35px; border:1px solid var(--line); border-radius:50%; background:var(--cream); color:var(--ink); font-size:24px; line-height:1; margin:12px 12px -47px auto; display:block; }
.record-layout { display:grid; grid-template-columns:1.15fr 1fr; min-height:600px; }
.record-visual { background:#e7e3d9; padding:30px 24px; display:flex; flex-direction:column; align-items:center; }
.record-visual>img { width:100%; height:65vh; object-fit:contain; filter:none; opacity:1; }
.image-tabs { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:18px 0 12px; }
.image-tabs button { padding:6px 12px; font-size:12px; background:var(--cream); border:1px solid var(--line); border-radius:3px; }
.image-tabs button[aria-pressed=true] { color:white; background:var(--olive); }
.original-link { font-size:12px; text-underline-offset:3px; }
.image-notice { font-size:11px; color:var(--muted); text-align:center; margin-bottom:0; }
.record-text { padding:38px 36px; overflow-wrap:anywhere; }
.record-text h2 { font:400 39px var(--serif); margin:0 0 5px; }
.record-source { color:var(--muted); font-size:11px; margin:0 0 22px; }
.record-desc { font:400 18px/1.7 var(--serif); margin:20px 0; }
.record-fields { border-top:1px solid var(--line); }
.record-field { padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; }
.record-field strong { display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.record-status { font-size:11px; padding:9px 12px; background:var(--soft); color:var(--muted); }
.record-status.held,.record-status.mapping { background:#eee0c8; color:#755325; }
.reference-note { padding:14px; background:#eee8d9; font-size:12px; }.reference-note button { display:block; margin-top:8px; }
@media(min-width:1500px) { .hero-inner { min-height:470px; }.hero h1 { font-size:72px; }.hero-album { margin-right:30px; } }
@media(max-width:1100px) { .wrap { width:calc(100% - 56px); }.photo-grid { gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }.collection-bar { gap:30px; }.hero-album { transform:scale(.86); transform-origin:right center; }.print-front { left:0; }.masthead nav { gap:18px; }.brand small { font-size:8px; letter-spacing:1px; }.record-text { padding:35px 25px; } }
@media(max-width:760px) { .wrap { width:calc(100% - 32px); }.masthead { min-height:83px; }.brand { font-size:27px; gap:10px; }.brand small { font-size:7px; max-width:195px; }.brand-mark { height:37px; width:35px; }.masthead nav { gap:0; }.masthead nav a { display:none; }#background-toggle { font-size:0; padding:8px 10px; }#background-toggle span { margin:0; font-size:20px; }.hero-inner { min-height:405px; padding-top:35px; grid-template-columns:1fr; }.hero-copy { position:relative; z-index:2; }.hero h1 { font-size:51px; }.hero-album { position:absolute; right:0; top:14px; width:270px; opacity:.32; transform:scale(.73); transform-origin:right top; }.hero:after { background:linear-gradient(90deg,#f1eee5f5,#f1eee599); }.hero-credit { font-size:8px; }.collection-bar { flex-wrap:wrap; gap:19px; padding-block:20px; }.collection-bar>div { gap:8px; }.collection-bar strong { font-size:23px; }.collection-bar span { font-size:9px; max-width:73px; }.collection-bar p { display:none; }.section-head h2 { font-size:29px; }.view-switch button { padding:7px 9px; font-size:11px; }.catalog { padding-top:30px; }.search-panel { padding:18px 16px 0; }.search-tools { align-items:start; flex-direction:column; gap:3px; padding:13px 0; }.search-line { gap:8px; }.search-line .primary { padding:10px 13px; }.primary>span { padding-left:5px; }.search-input input { font-size:14px; }.search-input>span { padding:0 10px; }.results-toolbar { flex-direction:column; align-items:start; }.filters { width:100%; gap:9px; flex-wrap:wrap; }.filters label { flex:1; }.filters select { max-width:180px; }.photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.photo-button { height:224px; padding:12px; }.card-content { padding:13px 12px; }.card-content h3 { font-size:17px; }.about { padding:30px 24px; }.about h2 { font-size:30px; }.footer { align-items:start; flex-direction:column; gap:8px; }.footer p { text-align:left; }.advanced-intro { flex-direction:column; }.advanced-intro label { width:100%; }.condition-row { grid-template-columns:1fr 1fr 28px; }.condition-row input { grid-column:1/3; grid-row:2; }.row-remove { grid-column:3; grid-row:1/3; }.advanced-actions { gap:8px; flex-wrap:wrap; }.advanced-actions .primary { margin-left:0; }.group-header { flex-wrap:wrap; gap:8px; }#record-dialog { width:calc(100% - 20px); max-height:95vh; }.record-layout { grid-template-columns:1fr; }.record-visual { padding:22px 15px; }.record-visual>img { height:56vh; }.record-text { padding:27px 23px; }.record-text h2 { font-size:32px; }.record-desc { font-size:17px; } }
@media(max-width:380px) { .hero h1 { font-size:43px; }.hero-album { opacity:.18; }.photo-grid { grid-template-columns:1fr; }.photo-button { height:280px; }.collection-bar { gap:13px; }.collection-bar strong { font-size:20px; }.section-head { gap:10px; align-items:center; }.section-head h2 { font-size:26px; }.view-switch button { font-size:10px; }.search-input input { font-size:12px; }.pagination { gap:12px; }.pagination button { padding:8px 10px; }.list-view .photo-button { width:105px; height:180px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.photo-card { transition:none; }.photo-card:hover { transform:none; } }
@media print { .masthead nav,.hero,.search-panel,.filters,.pagination,.view-switch,.about,.footer { display:none!important; }.wrap { width:100%; }.photo-grid { grid-template-columns:repeat(3,1fr); }.photo-card { break-inside:avoid; }.photo-button { height:180px; }.catalog { padding:0; } }
/* The handwritten decoration must not compete with text on small screens. */
@media(max-width:760px) { .hero-album .album-note { display:none; } }
/* Permit native selects to shrink inside the mobile condition grid. */
.condition-row select { min-width:0; width:100%; }
@media(max-width:760px) { .condition-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px; } }