.booklets-page { --booklet-rust: #a35d45; }
.booklets-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 60px; padding-block: 82px 95px; }
.booklets-intro h1 { font-size: clamp(48px, 5.1vw, 78px); line-height: 1.06; letter-spacing: -.055em; margin: 22px 0 28px; }
.booklets-intro h1 em, .booklets-page h2 em { color: var(--booklet-rust); }
.booklets-lead { max-width: 530px; font-size: 19px; line-height: 1.75; color: var(--muted); margin-bottom: 32px; }
.booklets-promise { font-size: 13px; margin-top: 19px; color: var(--muted); }
.booklets-resource-link { display: inline-block; margin: 16px 0 0 18px; font-size: 13px; color: var(--booklet-rust); text-decoration: underline; text-underline-offset: 4px; }
.booklets-resources { border-top: 1px solid var(--line); padding-block: 65px 85px; }
.booklets-promise span { color: var(--booklet-rust); margin-right: 7px; font-size: 19px; }
.booklets-hero-art { position: relative; height: 440px; }
.booklets-mini { position: absolute; width: 235px; padding: 13px 13px 17px; border: 1px solid #e5dbcc; border-radius: 7px; background: #fffdf8; box-shadow: 0 18px 42px #51433718; }
.booklets-mini img { display: block; width: 100%; height: auto; border-radius: 2px; }
.booklets-mini span { display: block; font-family: var(--serif); font-size: 18px; text-align: center; padding-top: 13px; color: var(--booklet-rust); }
.mini-back { top: 10px; right: 3%; transform: rotate(12deg); }
.mini-middle { top: 82px; right: 31%; transform: rotate(-12deg); }
.mini-front { top: 158px; right: 7%; transform: rotate(4deg); }
.booklets-art-note { position: absolute; bottom: -10px; left: 4%; font-family: var(--serif); font-style: italic; color: var(--booklet-rust); font-size: 24px; line-height: 1.3; transform: rotate(-7deg); }
.booklets-ribbon { background: var(--mint); border-block: 1px solid #cadcd6; padding: 20px; }
.booklets-ribbon p { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 0; font-size: 14px; }
.booklets-ribbon span { color: var(--booklet-rust); font-size: 23px; }
.booklets-collection { padding-block: 85px 90px; }
.booklets-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 42px; }
.booklets-page h2 { font-size: clamp(36px, 4vw, 53px); line-height: 1.12; letter-spacing: -.04em; margin: 15px 0 0; }
.booklets-section-heading > p { color: var(--muted); max-width: 410px; justify-self: end; margin: 0 0 4px; }
.booklets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.booklets-age-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.booklets-age-links a { padding: 10px 16px; border: 1px solid var(--line); border-radius: 30px; font-size: 13px; color: var(--booklet-rust); background: var(--raised); }
.booklets-age-links a:hover { background: var(--mint); }
.booklet-card { scroll-margin-top: 100px; }
.booklet-card { overflow: hidden; background: var(--raised); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; }
.booklet-art { position: relative; border-bottom: 1px solid #ebe2d6; }
.booklet-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.booklet-year { position: absolute; left: 19px; top: 19px; border: 1px solid #20324720; border-radius: 50px; background: #fffdf5ee; padding: 5px 13px; font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.booklet-copy { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.booklet-age { font-size: 11px; letter-spacing: .045em; color: var(--booklet-rust); margin: 0 0 10px; }
.booklet-age span { margin: 0 5px; }
.booklet-copy h3 { font-size: 30px; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 15px; }
.booklet-description { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 23px; flex: 1; }
.booklet-format { font-size: 11px; color: var(--muted); margin-bottom: 18px; }
.booklet-format span { margin: 0 5px; }
.booklet-free { color: #31574c; font-size: 12px; font-weight: 600; background: #e7f0e9; padding: 4px 11px; border-radius: 50px; align-self: flex-start; margin-bottom: 13px; }
.booklet-download { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.booklet-download span { font-size: 22px; color: var(--booklet-rust); line-height: 1; }
.booklet-download:hover { color: var(--booklet-rust); }
.booklet-card.design-gentle { --activity-accent: #197b69; --activity-tint: #e5f4ed; --pattern-colour: #56b89b; }
.booklet-card.design-playful { --activity-accent: #2452ad; --activity-tint: #e9f0ff; --pattern-colour: #3e78df; }
.booklet-card.design-bold { --activity-accent: #5140a6; --activity-tint: #f0ebff; --pattern-colour: #7761d5; }
.booklet-card.design-studio { --activity-accent: #274aaf; --activity-tint: #e9eeff; --pattern-colour: #009d9d; }
.booklet-card[class*="design-"]:not(.design-keepsake) .booklet-age,
.booklet-card[class*="design-"]:not(.design-keepsake) .booklet-download span { color: var(--activity-accent); }
.booklet-card[class*="design-"]:not(.design-keepsake) .booklet-year { color: var(--activity-accent); background: var(--activity-tint); border-color: var(--activity-accent); }
.booklet-card[class*="design-"]:not(.design-keepsake) .booklet-art::after { content: ""; display: block; height: 10px; background-color: var(--activity-tint); }
.design-gentle .booklet-art::after { background-image: radial-gradient(circle, var(--pattern-colour) 2px, transparent 3px); background-size: 18px 10px; }
.design-playful .booklet-art::after { background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--pattern-colour) 9px 12px, transparent 12px 20px); }
.design-bold .booklet-art::after { background-image: conic-gradient(var(--pattern-colour) 25%, transparent 0 50%, var(--pattern-colour) 0 75%, transparent 0); background-size: 20px 20px; }
.design-studio .booklet-art::after { background-image: repeating-linear-gradient(65deg, transparent 0 14px, var(--pattern-colour) 14px 17px, transparent 17px 28px); }
.design-playful .booklet-copy h3, .design-bold .booklet-copy h3, .design-studio .booklet-copy h3 { font-family: inherit; font-weight: 750; font-size: 27px; letter-spacing: -.045em; }
.booklet-activity { color: var(--activity-accent); background: var(--activity-tint); padding: 10px 12px; border-radius: 8px; font-size: 11px; line-height: 1.5; font-weight: 600; margin: 0 0 18px; }
.booklets-page a:focus-visible { outline: 3px solid var(--coral); outline-offset: 5px; }
.booklets-how { border-block: 1px solid var(--line); padding-block: 60px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; }
.booklets-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 27px; }
.booklets-how li { display: flex; gap: 23px; }
.booklets-how li > span { font: 25px var(--serif); color: var(--booklet-rust); padding-top: 4px; }
.booklets-how h3 { font-size: 22px; margin-bottom: 4px; }
.booklets-how p { font-size: 15px; color: var(--muted); margin: 0; max-width: 460px; }
.booklets-closing { text-align: center; padding-block: 90px 100px; }
.booklets-closing > p:not(.eyebrow) { max-width: 540px; margin: 25px auto 30px; color: var(--muted); }
@media (max-width: 1100px) { .booklets-hero { gap: 30px; } .booklets-mini { width: 205px; } .booklets-hero-art { height: 420px; } .booklets-grid { gap: 20px; } .booklet-copy { padding: 21px; } .booklet-copy h3 { font-size: 26px; } }
@media (max-width: 1000px) { .booklets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .booklets-hero { grid-template-columns: 1.1fr .9fr; } .booklets-mini { width: 175px; } .booklets-hero-art { height: 390px; } .booklets-art-note { font-size: 21px; bottom: 5px; } }
@media (max-width: 650px) { .booklets-hero { grid-template-columns: 1fr; padding-block: 40px 48px; gap: 30px; } .booklets-intro h1 { font-size: clamp(40px, 10.4vw, 65px); margin-top: 18px; } .booklets-lead { font-size: 17px; } .booklets-hero-art { width: min(360px,100%); height: 325px; margin-inline: auto; } .booklets-mini { width: 165px; } .mini-back { top: 0; right: 3%; } .mini-middle { top: 45px; right: 44%; } .mini-front { top: 105px; right: 12%; } .booklets-art-note { left: 0; bottom: -1px; font-size: 19px; } .booklets-ribbon { padding: 18px 20px; } .booklets-ribbon p { display: block; font-size: 12px; line-height: 2; text-align: center; max-width: 260px; margin: auto; } .booklets-ribbon span { font-size: 15px; margin: 0 7px; } .booklets-collection { padding-block: 55px; } .booklets-section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; } .booklets-section-heading > p { justify-self: start; font-size: 15px; } .booklets-grid { grid-template-columns: 1fr; gap: 28px; } .booklet-copy { padding: 24px; } .booklet-copy h3 { font-size: 30px; } .booklets-how { grid-template-columns: 1fr; gap: 32px; padding-block: 45px; } .booklets-closing { padding-block: 60px 70px; } }

.keepsake-email { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 42px; border: 1px solid #dfd5c6; border-radius: 24px; color: var(--ink); background: #fff9ef; box-shadow: 0 24px 90px #20324733; }
.keepsake-email::backdrop { background: #20324788; }
.keepsake-email h2 { font: 42px/1.1 var(--serif); margin: 15px 0 20px; letter-spacing: -.035em; }
.keepsake-email > p:not(.eyebrow) { color: var(--muted); font-size: 15px; }
.keepsake-email-close { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border: 0; background: transparent; color: #696057; font-size: 27px; cursor: pointer; }
.keepsake-consent { display: flex; gap: 12px; align-items: flex-start; border-block: 1px solid #dfd5c6; padding-block: 22px; margin-block: 24px 20px; font-size: 14px; line-height: 1.65; cursor: pointer; }
.keepsake-consent input { appearance: auto; flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #a35d45; }
.keepsake-email [data-email-fields] label { display: block; font-size: 13px; margin-bottom: 8px; }
.keepsake-email [type=email] { box-sizing: border-box; width: 100%; background: #fffdf8; border: 1px solid #b8aca0; border-radius: 10px; padding: 13px; color: #203247; font: inherit; margin-bottom: 16px; }
.keepsake-email [type=submit] { width: 100%; justify-content: center; cursor: pointer; }
.keepsake-email [type=submit]:disabled { opacity: .6; cursor: wait; }
.keepsake-privacy { font-size: 12px; color: #696057; margin-block: 15px; }
.keepsake-email a { color: #a35d45; text-decoration: underline; text-underline-offset: 3px; }
.keepsake-status:empty { display: none; }
.keepsake-status { background: #edf3ed; padding: 15px; border-radius: 10px; }
.keepsake-dismiss { display: block; border: 0; padding: 10px 0; background: transparent; font: inherit; font-size: 14px; cursor: pointer; color: #203247; }
.keepsake-retry { display: inline-block; font-size: 12px; margin-top: 6px; }
.keepsake-email [hidden] { display: none !important; }
.keepsake-email :focus-visible { outline: 3px solid #a35d45; outline-offset: 4px; }
@media (max-width: 650px) { .keepsake-email { padding: 34px 24px 28px; } .keepsake-email h2 { font-size: 36px; } }