.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}}
@media(min-width:1024px){
.top{max-width:1320px;margin:0 auto;padding:34px 5vw}
.mark{font-size:1.15rem}
main{max-width:1320px;padding:0 5vw}
.hero{padding:clamp(96px,13vh,150px) 0 clamp(96px,13vh,150px)}
h1{font-size:clamp(4rem,5.8vw,6.4rem);max-width:13em;margin-bottom:32px}
.lede{font-size:1.65rem;max-width:30em;margin-bottom:44px}
.eyebrow,.archive .eyebrow{font-size:.88rem}
.btn{font-size:1.02rem;padding:19px 40px}
.block{padding:104px 0}
h2{font-size:3.1rem;margin-bottom:28px}
.big{font-size:1.4rem;max-width:44em}
.pillars{gap:36px}
.pillars article{padding:44px 38px}
h3{font-size:1.8rem}
.pillars p{font-size:1.12rem}
.join p{font-size:1.15rem;max-width:36em}
.form{max-width:680px}
.wall{margin-top:72px;gap:0 32px}
.book{grid-template-columns:340px 1fr;gap:64px;padding:52px}
.book h3{font-size:2.1rem}.book p{font-size:1.12rem}
.note{font-size:1.05rem;max-width:46em}
figcaption b{font-size:1.3rem}figcaption span{font-size:1rem}
.law .lt{font-size:1.45rem}.law .lq{font-size:1.05rem}
footer{font-size:.88rem}
}
@media(min-width:1024px){
.wall{grid-template-columns:repeat(2,1fr);gap:64px 56px;align-items:start}
.wall .w1{grid-column:1;grid-row:1;margin:0}
.wall .w2{grid-column:2;grid-row:1;margin:48px 0 0}
.wall .w3{grid-column:1;grid-row:2;margin:0}
.wall .w5{grid-column:2;grid-row:2;margin:48px 0 0}
.wall .w4{grid-column:1/-1;grid-row:3;margin:0 auto;max-width:1000px}
.note{margin-top:24px}
}
@media(min-width:1024px){
.motion .wall,.motion .pillars,.motion main{perspective:1600px;perspective-origin:50% 40%}
.motion h1,.motion .lede{transform-origin:50% 100%;will-change:transform}
.motion h2.rv:not(.in),.motion .big.rv:not(.in){transform:perspective(1000px) translate3d(0,56px,-90px) rotateX(-12deg);transform-origin:50% 100%}
.d3.motion .rec.rv.in{transform:translate3d(0,var(--py,0),0) rotate(var(--pr,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ps,1));transform-style:preserve-3d}
.d3.motion .pillars article.rv.in{transform:perspective(1200px) translate3d(0,0,var(--tz,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .9s ease var(--d,0ms),transform .14s linear;transform-origin:50% 100%}
.d3.motion .book.rv.in{transform:perspective(1400px) translate3d(0,0,var(--tz,0)) rotateX(var(--rx,0deg));transition:opacity .9s ease,transform .14s linear;transform-origin:50% 100%}
.d3 .frame:hover{transform:translateZ(40px) translateY(-6px)}
}