@import url('./case.css');
:root{color-scheme:dark;--paper:#161323;--ink:#f3eee9;--muted:#b7afc4;--accent:#b7aeed;--line:#fff2}

body{background:radial-gradient(ellipse at 75% 0,#39304d 0,transparent 48%),#161323}
.archive-hero{padding:100px 0 75px}
.archive-hero h1{max-width:900px;font-size:clamp(40px,5.8vw,82px);line-height:1.25;letter-spacing:-.05em}
.archive-hero h1 em{color:#c6b9df;font-weight:400;font-family:Georgia,'Songti SC',SimSun,serif;font-style:normal}
.archive-hero .intro{max-width:640px;color:var(--muted);margin:28px 0 45px}
.archive-count{display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:2px}
.archive-count strong{font-size:36px;font-family:Georgia,serif;color:#d6b487}
.archive-count i{height:1px;flex:1;background:var(--line)}

.archive-item{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:70px;padding:64px 0;border-top:1px solid var(--line);text-decoration:none}
.archive-item:nth-child(even){grid-template-columns:1.2fr 1fr}
.archive-item:nth-child(even) .archive-picture{order:-1}
.archive-item h2{font-size:clamp(28px,3.1vw,44px);margin:18px 0 13px}
.archive-item p,.archive-item .status{color:var(--muted);font-size:15px}
.archive-picture{padding:25px;background:var(--wash,#333);transform:rotate(-1deg);transition:transform .3s}
.archive-item:nth-child(even) .archive-picture{transform:rotate(1deg)}
.archive-picture img{width:100%;display:block;box-shadow:0 10px 25px #0004;aspect-ratio:1.52;object-fit:cover;object-position:top}
.archive-item:hover .archive-picture{transform:rotate(0deg) translateY(-6px)}
.archive-item .arrow-link{display:inline-block;margin-top:16px}
.archive-item .eyebrow{color:var(--glow,#c0b7de)}
.archive-item.record-entry .archive-picture{border-radius:0 70px 0 0}
.archive-item.reading-entry .archive-picture{border-radius:90px 90px 0 0}
.archive-item.film-entry .archive-picture{border-top:9px dotted #161323;border-bottom:9px dotted #161323}
.archive-item.travel-entry .archive-picture{border-radius:100px 100px 25px 25px}

@media(max-width:700px){.archive-hero{padding:65px 0 40px}
.archive-item,.archive-item:nth-child(even){grid-template-columns:1fr;gap:22px;padding:35px 0}
.archive-item:nth-child(even) .archive-picture{order:0}
.archive-picture{padding:16px}
.archive-item h2{font-size:30px}
.archive-hero .intro{margin-top:24px}
}