:root{--bg:#F4F3EF;--surface:#FFFFFF;--surface2:#FAF8F3;--border:#DDD7CB;--gold:#B5945A;--gold-dim:#8E7637;--gold-bright:#8B6A1F;--bordeaux:#8B2D2D;--text:#2A2826;--text-dim:#75716A;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Montserrat","DM Sans",system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
.header{padding:40px 40px 30px;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px}
.header h1{font-family:var(--serif);font-weight:300;font-size:2.4rem;letter-spacing:.04em;color:var(--gold)}
.header h1 span{color:var(--text-dim);font-size:.5em;letter-spacing:.15em;display:block;text-transform:uppercase;font-family:var(--sans);font-weight:400;margin-bottom:4px}
.stats{display:flex;gap:32px}.stat-item{text-align:center}
.stat-item .num{font-family:var(--serif);font-size:2rem;color:var(--gold);font-weight:300}
.stat-item .label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}
.search-area{padding:28px 40px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.search-area label{font-family:var(--serif);font-size:1.15rem;color:var(--gold-dim);letter-spacing:.03em;white-space:nowrap}
.search-input{background:var(--bg);border:1px solid var(--border);color:var(--gold-bright);font-family:var(--serif);font-size:1.5rem;padding:10px 20px;border-radius:4px;width:240px;letter-spacing:.08em;outline:none;transition:border-color .3s}
.search-input:focus{border-color:var(--gold)}.search-input::placeholder{color:var(--text-dim);font-size:1rem}
.search-result{font-size:.95rem;color:var(--text-dim);line-height:1.5;max-width:600px}
.search-result .found{color:#5BA55B}.search-result .estimated{color:var(--gold)}.search-result .detail{color:var(--text)}
.timeline-container{padding:20px 40px 40px}
.timeline-label{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.zoom-hint{font-style:italic;opacity:.7}
.timeline-wrap{position:relative;height:720px;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;cursor:crosshair}
.timeline-canvas{width:100%;height:100%;display:block}
.timeline-hover{position:absolute;top:8px;right:12px;font-family:var(--serif);font-size:1.8rem;color:var(--gold);pointer-events:none;opacity:0;transition:opacity .15s;text-align:right}
.timeline-hover.visible{opacity:1}
.reset-btn{position:absolute;top:8px;left:12px;background:rgba(255,255,255,0.92);border:1px solid var(--border);color:var(--gold-bright);box-shadow:0 1px 3px rgba(0,0,0,.04);font-family:var(--sans);font-size:.75rem;padding:5px 12px;border-radius:4px;cursor:pointer;transition:all .2s;opacity:0;pointer-events:none;z-index:2}
.reset-btn.visible{opacity:1;pointer-events:auto}
.reset-btn:hover{background:var(--surface2);color:var(--gold);border-color:var(--gold-dim)}
.timeline-hover .th-count{font-family:var(--sans);font-size:.75rem;color:var(--text-dim);display:block}
.detail-area{padding:10px 40px 40px;min-height:200px}
.detail-header{display:flex;align-items:flex-start;gap:24px;margin-bottom:20px;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap}
.detail-left{flex-shrink:0}.detail-year{font-family:var(--serif);font-size:4rem;font-weight:300;color:var(--gold);line-height:1}
.detail-count{color:var(--text-dim);font-size:.9rem;margin-top:4px}
.event-panel{flex:1;min-width:280px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:0;position:relative;overflow:hidden;display:flex}
.event-panel .event-img{width:140px;min-height:120px;background-size:cover;background-position:center;flex-shrink:0;border-right:1px solid var(--border)}
.event-panel .event-text{padding:16px 20px;flex:1}
.event-panel::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gold-dim);z-index:1}
.event-headline{font-family:var(--serif);font-size:1.2rem;color:var(--gold-bright);font-weight:400;margin-bottom:6px;font-style:italic}
.event-desc{font-size:.85rem;color:var(--text-dim);line-height:1.55}
.event-tag{display:inline-block;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-dim);border:1px solid var(--border);padding:2px 8px;border-radius:10px;margin-bottom:8px}
.entries-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.entry-card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:14px 16px;transition:border-color .2s,background .2s}
.entry-card:hover{border-color:var(--gold-dim);background:var(--surface2)}
.entry-card.highlighted{border-color:var(--gold);background:var(--surface2);box-shadow:0 0 18px rgba(139,45,45,.12);animation:pulse 1.5s ease-in-out 2}
@keyframes pulse{0%,100%{box-shadow:0 0 18px rgba(139,45,45,.12)}50%{box-shadow:0 0 35px rgba(201,169,110,.35)}}
.entry-serial{font-family:var(--serif);font-size:1.5rem;color:var(--gold-bright);letter-spacing:.05em}
.entry-meta{margin-top:6px;font-size:.8rem;color:var(--text-dim);line-height:1.5}
.entry-meta .cal{color:var(--text);font-weight:500}.entry-meta .model{color:var(--gold-dim)}
.welcome-msg{color:var(--text-dim);font-size:1.05rem;line-height:1.8;max-width:600px;padding:40px 0}
.welcome-msg strong{color:var(--gold-dim);font-weight:500}
.filter-bar{padding:12px 40px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-family:var(--sans);font-size:.78rem;padding:5px 14px;border-radius:20px;cursor:pointer;transition:all .2s}
.filter-btn:hover{border-color:var(--gold-dim);color:var(--text)}
.filter-btn.active{background:var(--gold-dim);color:var(--bg);border-color:var(--gold);font-weight:600}
@media(max-width:700px){.header{padding:20px}.header h1{font-size:1.6rem}.search-area{padding:16px 20px}.timeline-container,.detail-area,.filter-bar{padding-left:16px;padding-right:16px}.timeline-wrap{height:500px}.entries-grid{grid-template-columns:1fr}.detail-year{font-size:2.5rem}.stats{gap:16px}.event-panel .event-img{width:100px;min-height:90px}} .img-popover{position:fixed;z-index:1000;background:var(--surface2);border:1px solid var(--gold-dim);border-radius:6px;padding:10px;box-shadow:0 12px 36px rgba(60,40,20,.18),0 2px 8px rgba(60,40,20,.08);pointer-events:none;opacity:0;transition:opacity .15s;transform:translateY(4px)}
.img-popover.visible{opacity:1;transform:translateY(0)}
.img-popover .pop-img{width:240px;height:240px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--surface);border-radius:4px;border:1px solid var(--border)}
.img-popover .pop-img.no-img{display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-family:var(--serif);font-size:.85rem;font-style:italic;text-align:center;padding:12px}
.img-popover .pop-title{margin-top:8px;font-family:var(--serif);font-size:1rem;color:var(--gold-bright);text-align:center;font-style:italic;letter-spacing:.02em}
.img-popover .pop-sub{font-size:.7rem;color:var(--text-dim);text-align:center;margin-top:2px;text-transform:uppercase;letter-spacing:.12em}
.model-link{cursor:pointer;text-decoration:underline;text-decoration-color:var(--gold-dim);text-decoration-style:dotted;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.model-link:hover{color:var(--gold-bright);text-decoration-color:var(--gold-bright)}
.filter-btn[data-caliber]{cursor:pointer} .header h1{font-family:var(--sans)!important;font-weight:700!important;font-size:2.2rem!important;letter-spacing:.18em!important;color:var(--text)!important;text-transform:uppercase}
.header h1 span{font-family:var(--serif)!important;font-style:italic!important;font-weight:500!important;color:var(--bordeaux)!important;text-transform:none!important;letter-spacing:.02em!important;font-size:.7em!important;display:block!important;margin-bottom:0!important;margin-top:2px!important}
.header{background:var(--bg)!important;border-bottom:1px solid var(--border)!important}
.stat-item .num{font-family:var(--sans)!important;font-weight:300!important;color:var(--bordeaux)!important;letter-spacing:.02em}
.stat-item .label{color:var(--text-dim)!important;letter-spacing:.18em!important} .timeline-label{font-family:var(--sans)!important;font-weight:500!important;letter-spacing:.22em!important;color:var(--text)!important;padding-bottom:8px!important;border-bottom:1px solid var(--gold)!important;margin-bottom:14px!important} .search-input{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;font-family:var(--serif)!important}
.search-input:focus{border-color:var(--bordeaux)!important;box-shadow:0 0 0 3px rgba(139,45,45,.08)!important}
.search-area label{color:var(--bordeaux)!important;font-style:italic!important} .entry-card{background:var(--surface)!important;border-color:var(--border)!important;box-shadow:0 1px 2px rgba(60,40,20,.04)}
.entry-card:hover{background:var(--surface2)!important;border-color:var(--gold-dim)!important}
.entry-serial{color:var(--bordeaux)!important;font-style:italic}
.entry-meta .cal{color:var(--text)!important}
.entry-meta .model{color:var(--gold-bright)!important}
.event-headline{color:var(--bordeaux)!important}
.event-panel{background:var(--surface)!important;box-shadow:0 1px 3px rgba(60,40,20,.05)}
.event-panel::before{background:var(--gold)!important}
.event-tag{color:var(--gold-bright)!important;border-color:var(--gold-dim)!important;background:rgba(181,148,90,.06)}
.detail-year{color:var(--bordeaux)!important;font-style:italic}
.timeline-wrap{background:var(--surface)!important;box-shadow:0 1px 3px rgba(60,40,20,.04)}
.timeline-hover{color:var(--bordeaux)!important}
.filter-btn{background:var(--surface)!important;color:var(--text-dim)!important;border-color:var(--border)!important}
.filter-btn:hover{color:var(--text)!important;border-color:var(--gold-dim)!important}
.filter-btn.active{background:var(--bordeaux)!important;color:#fff!important;border-color:var(--bordeaux)!important}
.search-area{background:var(--surface)!important}
.welcome-msg{color:var(--text-dim)!important}
.welcome-msg strong{color:var(--bordeaux)!important}
.reset-btn:hover{background:var(--surface)!important;color:var(--bordeaux)!important;border-color:var(--bordeaux)!important}
.img-popover{background:var(--surface)!important;border-color:var(--gold-dim)!important}
.img-popover .pop-title{color:var(--bordeaux)!important}
.img-popover .pop-img.no-img{color:var(--text-dim)!important} .filter-bars{padding:0 40px 20px;display:flex;flex-direction:column;gap:8px}
.filter-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.filter-row-label{font-family:var(--sans);font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.18em;padding-top:7px;min-width:100px;flex-shrink:0}
.filter-row .filter-bar{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.filter-btn-mod{font-family:var(--serif);font-style:italic;letter-spacing:.02em}
@media(max-width:700px){.filter-bars{padding:0 16px 16px}.filter-row-label{min-width:auto;font-size:.65rem}} .search-area{display:block;padding:32px 40px}
.search-intro{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:var(--text);max-width:780px;margin-bottom:22px;font-weight:600;letter-spacing:.005em}
.search-field{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.search-field label{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--text-dim);white-space:nowrap}
.search-field .search-input{font-size:1.85rem;padding:14px 22px;width:280px;font-weight:500}
.search-result{margin-top:14px;max-width:740px}
@media(max-width:700px){.search-area{padding:20px 16px}.search-field .search-input{font-size:1.5rem;width:100%}.search-intro{font-size:.95rem}} .header{position:relative;overflow:hidden}
.header::after{content:'';position:absolute;top:0;right:0;width:55%;height:100%;background-image:var(--banner-bg,none);background-size:cover;background-position:center right;background-repeat:no-repeat;opacity:.85;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 25%,rgba(0,0,0,.85) 65%,rgba(0,0,0,1) 100%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 25%,rgba(0,0,0,.85) 65%,rgba(0,0,0,1) 100%)}
.header > *{position:relative;z-index:1}
.header .stats .num,.header .stats .label{text-shadow:0 1px 8px rgba(244,243,239,.9),0 0 20px rgba(244,243,239,.7)}
@media(max-width:900px){.header::after{display:none}} .search-area{position:relative}
.search-area-inner{flex:1;min-width:0}
.search-area .stats-right{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex-shrink:0;padding-top:4px}
.search-area .stats-right .stat-item{display:flex;align-items:baseline;gap:10px}
.search-area .stats-right .num{font-size:1.4rem}
.search-area .stats-right .label{font-size:.6rem}
.search-area{display:flex;align-items:flex-start;gap:30px}
@media(max-width:900px){.search-area{flex-direction:column}.search-area .stats-right{flex-direction:row;align-self:stretch;justify-content:space-between}.search-area .stats-right .stat-item{flex-direction:column;align-items:flex-start;gap:0}} .filter-btn-mod{font-family:var(--sans)!important;font-style:normal!important;letter-spacing:0!important;font-weight:500}