.archive{padding-top:80px}
.archive .eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--turq);margin:0 0 18px}
.records{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:44px 0 28px;align-items:start}
.rec{margin:0}
.frame{display:block;width:100%;padding:14px;border:1px solid rgba(217,175,130,.55);border-radius:6px;cursor:zoom-in;
background:linear-gradient(145deg,#efe1c6,#d9c7a4);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 5px rgba(120,70,40,.18);transition:transform .2s,box-shadow .2s}
.frame:hover,.frame:focus-visible{transform:translateY(-4px);box-shadow:0 26px 54px rgba(0,0,0,.55),0 0 0 2px var(--turq);outline:none}
.frame img{display:block;width:100%;height:230px;object-fit:cover;object-position:left top;border:1px solid rgba(60,35,20,.35)}
figcaption{margin-top:16px}figcaption b{display:block;font:600 1.15rem 'Playfair Display',serif;color:var(--sand)}
figcaption span{display:block;font-size:.92rem;color:var(--muted);margin-top:4px}
.note{max-width:40em;color:var(--muted);font-size:.95rem;border-left:3px solid var(--turq);padding-left:18px;margin:8px 0 56px}
.book{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;padding:36px;border-radius:18px;background:linear-gradient(160deg,rgba(63,181,173,.12),rgba(40,22,14,.6));border:1px solid rgba(217,175,130,.28)}
.bookframe img{height:auto;object-fit:contain}
.book h3{font-size:1.7rem;margin:0 0 12px}.book p{color:var(--muted);margin:0 0 22px}
.btn.ghost{background:none;color:var(--sand);border:1px solid var(--accent);box-shadow:none}.btn.ghost:hover{background:rgba(217,130,91,.18)}
dialog{border:0;background:#120a06;color:var(--sand);padding:20px;max-width:94vw;max-height:94vh;border-radius:10px;overflow:auto}
dialog::backdrop{background:rgba(10,5,3,.88)}
dialog img{display:block;max-width:100%;max-height:78vh;margin:0 auto;border-radius:4px}
dialog p{max-width:46em;margin:16px auto 0;font-size:.95rem;color:var(--muted)}
.x{position:sticky;float:right;top:0;border:0;background:var(--clay);color:#fff;font-size:1.6rem;width:42px;height:42px;border-radius:50%;cursor:pointer}
@media(max-width:760px){.records{grid-template-columns:1fr}.frame img{height:auto;max-height:260px}.book{grid-template-columns:1fr;padding:24px}.bookframe{max-width:240px}}
.records{grid-template-columns:repeat(2,1fr)}

.frame img{height:auto!important;object-fit:contain!important}
@media(max-width:760px){.records{grid-template-columns:1fr}.rec:nth-child(3){max-width:none}}
.prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:20;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#b5543a,#3fb5ad,#9bb097)}
.bg{will-change:transform;inset:-10vh 0 -10vh 0!important}
.motion .rv{opacity:0;transform:translate3d(0,46px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.motion .rv.in{opacity:1;transform:none}
.motion .rec.rv{transform:translate3d(0,90px,0) scale(.94)}
.motion .rec.rv.in{transform:translate3d(0,var(--py,0),0) rotate(var(--pr,0)) scale(var(--ps,1));transition:opacity .9s ease var(--d,0ms),transform .12s linear}
.motion .rec.rv:not(.in){transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.wall{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;margin:56px 0 24px;align-items:start}
.rec{margin:0;will-change:transform}
.w1{grid-column:1/8;grid-row:1}
.w2{grid-column:6/13;grid-row:2;margin-top:-30px}
.w3{grid-column:2/8;grid-row:3;margin-top:30px}
.w4{grid-column:5/13;grid-row:4;margin-top:20px}
.w4 .frame img{max-height:none}
.w4 .frame{padding:16px}
.records{display:none}
.frame img{height:auto!important;object-fit:contain!important}
.big{max-width:40em}
@media(max-width:760px){
 .wall{display:block}.rec{margin:0 0 44px!important}.w2{margin-left:6%!important}.w3{margin-right:6%!important}
}
@media(prefers-reduced-motion:reduce){.bg{transform:none!important}.rec{transform:none!important}}
.w5{grid-column:2/9;grid-row:5;margin-top:30px}
.lawframe{text-decoration:none;color:#2b1a10;text-align:left;cursor:pointer}
.law{background:#f6ecd7;padding:30px 32px;border:1px solid rgba(60,35,20,.35);font-family:'Playfair Display',serif}
.law .lk{font:600 .68rem 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a4a30;margin:0 0 10px}
.law .lt{font-size:1.25rem;font-weight:600;line-height:1.3;margin:0 0 18px;color:#2b1a10}
.law .lq{font-size:.98rem;line-height:1.6;margin:0 0 12px;color:#3a2618}.law .lq b{color:#8a4a30}
@media(max-width:760px){.w5{margin-right:4%!important}.law{padding:22px}}