@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');

.memories-page { background: #f6f0e7; color: #302319; }
.memories-page h1,.memories-page h2,.memories-page h3,.memories-page p { margin-top: 0; }
.memories-hero { position: relative; min-height: 350px; display: flex; align-items: center; background: linear-gradient(90deg,rgba(249,243,233,.79),rgba(249,243,233,.3) 49%,transparent 68%),url('../images/memories-book-hero-people.png') center 54%/cover no-repeat; }
.memories-hero-copy { position: relative; z-index: 1; width: calc(100% - 8vw); margin: auto; padding: 35px 0; }
@media (min-width: 901px) {
    .memories-hero-copy { width: min(1080px, calc(100% - 16vw)); }
}
.memories-hero-book-writing { position: absolute; top: 15%; left: 57%; width: 15%; margin: 0; transform: rotate(7deg); color: #39291c; font: italic 600 clamp(12px,1.25vw,19px)/1.13 var(--font-heading); text-align: center; text-shadow: 0 1px 3px #f7eee5; }
@media (min-width: 901px) {
    .memories-page .memories-hero-book-writing {
        top: calc(15% - 30px);
        left: 57%;
        width: 18%;
        padding: 0 25px;
        transform: rotate(7deg) skewX(-10deg);
        color: #705039;
        font: 600 22px/1.05 'Caveat', 'Segoe Print', cursive;
        text-align: center;
        text-shadow: 0 1px 0 rgba(255,250,230,.9), 0 -1px 1px rgba(65,38,18,.35);
    }
    .memories-hero-book-writing span { display: block; }
    .memories-library,.memories-join { display: none; }
}
.memories-kicker { margin-bottom: 10px; color: #8e5236; font: 600 12px/1.2 var(--font-body); letter-spacing: .18em; }
.memories-hero h1 { max-width: 620px; margin-bottom: 9px; font: 600 clamp(48px,5.8vw,76px)/.95 var(--font-heading); letter-spacing: -.045em; }
.memories-hero-quote { max-width: 550px; margin-bottom: 12px; font: italic 600 clamp(20px,2.1vw,27px)/1.14 var(--font-heading); }
.memories-hero-intro { max-width: 480px; margin-bottom: 20px; font: 500 15px/1.45 var(--font-body); }
.memories-button { display: inline-flex; align-items: center; gap: 14px; padding: 12px 25px; border-radius: 5px; background: #ae6848; color: #fff !important; text-decoration: none; font: 600 15px/1.2 var(--font-body); box-shadow: 0 5px 15px #4b25131c; }
.memories-button:hover,.memories-button:focus-visible { background: #925239; }
.memories-library { width: calc(100% - 5vw); margin: auto; padding: 30px 0 35px; }
.memories-library-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.memories-library-heading h2,.memories-shelf-heading h2 { margin-bottom: 3px; color: #251c17; font: 600 clamp(34px,3.5vw,46px)/1 var(--font-heading); }
.memories-library-heading p { margin-bottom: 0; font: 500 15px/1.4 var(--font-body); }
.memories-search { display: flex; align-items: center; gap: 8px; width: min(280px,100%); min-height: 42px; padding: 0 12px; border: 1px solid #d8c7b4; border-radius: 8px; background: #f8f3eb; }
.memories-search svg { flex: none; width: 19px; height: 19px; }
.memories-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #33261f; font: 14px var(--font-body); }
.memories-search:focus-within { outline: 2px solid #a56848; outline-offset: 2px; }
.memories-featured { --selected-cover: #b39173; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 510px; padding: 45px 7.5% 56px; background: url('../images/memories-open-book.png') center/cover no-repeat; filter: drop-shadow(0 15px 17px #563c2670); }
.memories-featured-left,.memories-featured-right { min-width: 0; text-align: center; }
.memories-featured-left { padding: 0 11% 0 3%; }
.memories-featured-right { padding: 0 2% 0 13%; text-align: left; }
.memories-featured-portrait { display: grid; place-items: center; width: min(88%,210px); height: 165px; margin: 0 auto 15px; border: 5px solid #f5e9d7; outline: 1px solid #baa387; background: radial-gradient(circle at 35% 25%,#f2e4ce,var(--selected-cover)); box-shadow: 0 5px 15px #4d332226; }
.memories-featured-portrait span { color: #fff9ee; font: 600 80px/1 var(--font-heading); text-shadow: 0 3px 9px #4d332240; }
.memories-featured h3 { margin-bottom: 0; font: 600 clamp(30px,3vw,45px)/1 var(--font-heading); }
.memories-featured-years { display: table; margin: 5px auto 0; font: 600 13px/1.3 var(--font-body); letter-spacing: .19em; }
.memories-featured-years::after { content: ''; display: block; width: 100%; height: 1px; margin: 4px auto 0; background: #a36d46; }
.memories-featured blockquote { margin: 0 0 18px; font: italic 600 clamp(25px,2.55vw,37px)/1.08 var(--font-heading); }
.memories-featured-right p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px; font: 500 15px/1.5 var(--font-body); }
.memories-featured-right a,.memories-empty-copy a { color: #82472e; font: 600 17px/1.2 var(--font-heading); text-decoration: none; border-bottom: 1px solid currentColor; }
.memories-featured-right a:hover,.memories-featured-right a:focus-visible,.memories-empty-copy a:hover { color: #a86642; }
.memories-shelf-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 22px 0 18px; }
.memories-shelf-heading span { color: #755e4a; font: 500 13px/1.3 var(--font-body); }
.memories-shelf { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 18px; }
.memories-book { --book-cover: #b09274; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 210px; padding: 17px 10px 12px 16px; border: 1px solid #977a5f; border-radius: 3px 7px 7px 3px; background: linear-gradient(90deg,#735b463b 0 7px,transparent 8px),linear-gradient(135deg,#e3d1b6,var(--book-cover)); color: #251c17; box-shadow: inset 5px 0 6px #3821122b,4px 8px 12px #4d301e31; cursor: pointer; text-align: center; transition: transform .2s,box-shadow .2s; }
.memories-book--1 { --book-cover: #c9b094; }.memories-book--2 { --book-cover: #55636a; }.memories-book--3 { --book-cover: #c7aa8d; }.memories-book--4 { --book-cover: #a66c51; }.memories-book--5 { --book-cover: #d3b9a2; }
.memories-book:hover,.memories-book:focus-visible { transform: translateY(-5px); box-shadow: inset 5px 0 6px #3821122b,5px 13px 16px #4d301e48; }
.memories-book:focus-visible { outline: 2px solid #934f34; outline-offset: 4px; }
.memories-book[aria-pressed=true] { outline: 2px solid #9b6a3e; outline-offset: 3px; }
.memories-book-image { display: grid; place-items: center; width: 100%; flex: 1; min-height: 110px; margin-bottom: 10px; border: 5px solid #eee2cf; background: radial-gradient(circle at 40% 30%,#e8d9bf,var(--book-cover)); box-shadow: 0 1px 7px #40291840; }
.memories-book-image span { color: #fff9ec; font: 600 62px/1 var(--font-heading); text-shadow: 0 2px 5px #38261c45; }
.memories-book-name { font: 600 19px/1 var(--font-heading); overflow-wrap: anywhere; }
.memories-book-years { margin-top: 5px; font: 600 10px/1.2 var(--font-body); letter-spacing: .08em; }
.memories-sample-note { color: #765f4d; font: 500 12px/1.35 var(--font-body) !important; }
.memories-photo,.memories-tile-photo { background-image: url('../images/memories-reference-preview.png'); background-repeat: no-repeat; }
.memories-photo--mira { background-size: 614px 922px; background-position: -69px -294px; }
.memories-photo--arben,.memories-photo--elena,.memories-photo--ilir,.memories-photo--fatmira,.memories-photo--sokol,.memories-photo--luljeta { background-size: 2027px 3041px; }
.memories-photo--arben { background-position: -125px -2033px; }
.memories-photo--elena { background-position: -436px -2033px; }
.memories-photo--ilir { background-position: -758px -2033px; }
.memories-photo--fatmira { background-position: -1079px -2033px; }
.memories-photo--sokol { background-position: -1402px -2033px; }
.memories-photo--luljeta { background-position: -1723px -2033px; }
.memories-tile-photo { min-height: 0; aspect-ratio: 1 / 1; flex: none; background-size: 1536px 2304px; }
.memories-tile-photo--arben { background-position: -95px -1540px; }
.memories-tile-photo--elena { background-position: -330px -1540px; }
.memories-tile-photo--ilir { background-position: -574px -1540px; }
.memories-tile-photo--fatmira { background-position: -817px -1540px; }
.memories-tile-photo--sokol { background-position: -1060px -1540px; }
.memories-tile-photo--luljeta { background-position: -1303px -1540px; }
.memories-pagination { margin-top: 25px; }
.memories-featured--empty { display: grid; grid-template-columns: 1fr; text-align: center; }
.memories-empty-copy { max-width: 480px; margin: auto; padding: 20px; }
.memories-empty-copy h3 { margin-bottom: 10px; font: 600 clamp(30px,3vw,42px)/1 var(--font-heading); }
.memories-empty-copy p { font: 500 16px/1.5 var(--font-body); }
.memories-join { padding: 32px 20px 35px; background: linear-gradient(#f7ede0d9,#f7ede0e8),url('../images/memories-book-hero-people.png') left 74%/cover no-repeat; text-align: center; }
.memories-join h2 { margin-bottom: 8px; font: 600 clamp(30px,3.2vw,44px)/1 var(--font-heading); }
.memories-join p { margin-bottom: 17px; font: 500 15px/1.4 var(--font-body); }
@media(max-width:1000px) { .memories-shelf { grid-template-columns: repeat(4,minmax(0,1fr)); }.memories-featured { min-height: 440px; padding-inline: 6%; }.memories-featured-portrait { height: 165px; }.memories-featured-portrait span { font-size: 80px; } }
@media(max-width:700px) { .memories-hero { min-height: 520px; flex-direction: column; align-items: stretch; justify-content: space-between; background-position: 64% center; }.memories-hero-book-writing { position: relative; top: auto; left: auto; align-self: flex-end; width: min(42%,190px); margin: 0 8% 25px 0; transform: none; font-size: 13px; }.memories-hero-copy { width: calc(100% - 36px); }.memories-hero h1 { max-width: 410px; font-size: clamp(45px,10vw,62px); }.memories-hero-quote { max-width: 360px; }.memories-hero-intro { max-width: 350px; }.memories-library { width: calc(100% - 28px); }.memories-library-heading { align-items: stretch; flex-direction: column; }.memories-search { width: 100%; }.memories-featured { display: block; min-height: 0; padding: 30px 22px; background: #f8efe2; border: 8px solid #c7ad8d; border-radius: 10px; filter: drop-shadow(0 10px 12px #563c2640); }.memories-featured-left { padding: 0 0 22px; border-bottom: 1px solid #d2b99b; }.memories-featured-right { padding: 22px 0 0; }.memories-featured-portrait { max-width: 210px; }.memories-shelf { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.memories-book { min-height: 180px; padding: 12px 7px 9px 12px; }.memories-book-image { min-height: 85px; }.memories-book-image span { font-size: 48px; }.memories-book-name { font-size: 17px; }.memories-shelf-heading { align-items: flex-start; flex-direction: column; } }
@media(max-width:420px) { .memories-hero { background-position: 57% center; }.memories-hero-copy { padding: 24px 0; }.memories-hero h1 { font-size: 45px; }.memories-hero-quote br { display: none; }.memories-shelf { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .memories-book { transition: none; } }