*{box-sizing:border-box}
body{margin:0;background:#f7f5ee;color:#253b34;font-family:Arial,Helvetica,sans-serif}
header,main,footer{max-width:1120px;margin:auto}
header{padding:30px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9ded4}
.brand{text-decoration:none;color:inherit;font-size:12px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:14px}
.mark{display:grid;place-items:center;background:#28483e;color:#faf7ec;border-radius:50%;height:38px;width:38px;font:italic 30px Georgia;letter-spacing:-3px;padding-right:4px}
.header-note{font-size:10px;letter-spacing:2px;color:#67766b}
main{padding:0 32px}
.intro{position:relative;padding:76px 0 70px;overflow:hidden}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;line-height:1.6;color:#687966}
h1{font:normal clamp(44px,6vw,76px)/1.06 Georgia,serif;letter-spacing:-3px;margin:24px 0}
h1 em{font-weight:normal;color:#6f7e58}
.lead{font-size:16px;line-height:1.8;max-width:400px;color:#647168}
.decoration{position:absolute;right:65px;top:70px;width:260px;height:250px}
.frame{position:absolute;width:170px;height:210px;padding:15px 15px 45px;background:#fffdf8;box-shadow:0 12px 35px #233c3420}
.frame span{display:grid;place-items:center;height:100%;font:70px Georgia}
.one{transform:rotate(-14deg);background:#fcfaf2}
.one span{background:#dce2ce;color:#72856a}
.two{right:0;top:45px;transform:rotate(12deg)}
.two span{background:#dfbba5;color:#8c594c}
.section-heading{border-top:1px solid #d9ded4;padding:26px 0;display:flex;align-items:center;justify-content:space-between}
h2{font:normal 25px Georgia;margin:0}
#count{font-size:12px;color:#6a776c}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:27px;background:#eeeee2;border:1px solid #dedfd0;border-radius:5px;color:inherit;text-decoration:none;display:flex;flex-direction:column;min-height:305px;transition:transform .2s,box-shadow .2s}
.card:nth-child(3n+2){background:#f1e4d9;border-color:#e3d8ca}
.card:nth-child(3n){background:#e2e9e2;border-color:#d0ded3}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #253b3410}
.card:focus-visible,.brand:focus-visible{outline:3px solid #835742;outline-offset:5px}
.card-top{display:flex;justify-content:space-between;font-size:20px;margin-bottom:32px}
.card-top span:first-child{font:italic 22px Georgia;color:#778070}
.card .eyebrow{margin:0 0 12px}
h3{font:normal 29px/1.15 Georgia;margin:0;overflow-wrap:anywhere}
.description{font-size:14px;line-height:1.7;color:#677267;flex:1}
.action{font-size:12px;font-weight:bold;padding-top:16px}
.empty{border:1px dashed #c8cebf;border-radius:5px;padding:45px 24px;text-align:center;font:24px/1.7 Georgia;margin:0}
.empty span{font:14px Arial;color:#687568}
aside{margin:65px 0;display:flex;align-items:center;gap:22px}
.spark{font-size:46px;color:#89936e}
aside h2{font-size:23px}
aside p{font-size:13px;line-height:1.7;color:#687568}
footer{border-top:1px solid #d9ded4;padding:25px 32px 35px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#6e7a70}
footer span:last-child{letter-spacing:0}
@media(max-width:850px){
.decoration{right:15px;opacity:.55;transform:scale(.8);transform-origin:right center}
.intro .lead{max-width:350px}
.grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
header,main,footer{padding-left:22px;padding-right:22px}
.header-note,.decoration{display:none}
.intro{padding:48px 0}
h1{letter-spacing:-2px}
.grid{grid-template-columns:1fr}
.card{min-height:270px}
.card-top{margin-bottom:24px}
aside{margin:42px 0}
footer{gap:20px}
.lead{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.card{transition:none}}