:root { font-family: Georgia, 'Times New Roman', serif; color: #12364d; background: #e8f4f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: linear-gradient(#d9ecf7, #fffaf0 30rem); }
a { color: #07593e; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #d9a62f; outline-offset: 4px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem max(1rem, calc((100vw - 1200px)/2)); color: #fffbe9; background: #063d35; border-bottom: 4px solid #d8ad4d; }
.site-header a { color: inherit; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; border: 2px solid #e6c66e; border-radius: 50%; color: #f4da88; font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand small { font-size: .75rem; color: #d7e6db; }
.site-header nav { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .9rem; }
main { width: min(100% - 2rem, 1160px); margin: 0 auto; }
.hero { position: relative; overflow: hidden; margin: 2rem auto; padding: clamp(2rem, 5vw, 4rem); border: 3px solid #d7af50; border-radius: 26px; background: #fffdf4; box-shadow: 0 14px 38px #14384920; }
.hero::after { content: '✦'; position: absolute; right: 3%; top: -2rem; color: #e9c76a; font-size: 11rem; opacity: .18; }
.eyebrow { color: #a1392d; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 780px; margin: .35rem 0 1rem; color: #073d30; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; }
.hero p:last-child { max-width: 760px; font-size: 1.15rem; line-height: 1.6; }
h2 { color: #093e33; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem auto 4rem; }
.card { min-height: 230px; padding: 1.5rem; border: 2px solid #d7b75b; border-radius: 20px; background: #fffdfa; box-shadow: 0 9px 24px #103c5419; }
.book-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.book-card { padding: .75rem .75rem 1.25rem; }
.book-card img { display: block; width: 100%; height: auto; aspect-ratio: 1971 / 2000; object-fit: contain; border-radius: 10px; background: #f1eadb; }
.book-card .book-copy { padding: .4rem .45rem 0; }
.book-card h2 { font-size: clamp(1.12rem, 1.8vw, 1.45rem); line-height: 1.18; }
.card .number { color: #ad4a35; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card h2 { margin: .5rem 0 .7rem; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.card p { line-height: 1.55; }
.card .status { display: inline-block; padding: .3rem .65rem; border-radius: 999px; background: #e8f3e5; color: #25533f; font-size: .82rem; font-weight: 700; }
.card a { display: inline-block; margin-top: .45rem; font-weight: 700; }
.book-card .preview-link { padding: .7rem 1rem; border-radius: 9px; background: #07593e; color: white; text-decoration: none; }
.book-card .preview-link:hover { background: #073d30; }
.book-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; margin-top: auto; }
.book-card { display: flex; flex-direction: column; }
.book-card .book-copy { display: flex; flex-direction: column; flex: 1; }
.book-card .amazon-pending { padding: .7rem 1rem; border: 2px solid #bb8e35; border-radius: 9px; color: #073d30; background: #fff4cf; font: 700 .95rem Georgia, serif; cursor: pointer; }
.book-card .amazon-pending:hover { background: #ffe7a3; }
button:focus-visible { outline: 3px solid #d9a62f; outline-offset: 4px; }
#amazon-dialog { width: min(92vw, 440px); padding: 1.5rem; border: 3px solid #d7b75b; border-radius: 16px; color: #12364d; background: #fffdf4; box-shadow: 0 15px 40px #12364d55; }
#amazon-dialog::backdrop { background: #062d40aa; }
#amazon-close { min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: 8px; color: white; background: #07593e; font: 700 1rem Georgia, serif; cursor: pointer; }
.note { margin: 0 auto 3rem; padding: 1.5rem; border-left: 5px solid #cfa044; border-radius: 0 14px 14px 0; background: #fff9e8; line-height: 1.6; }
.reader { width: min(100% - 2rem, 1160px); }
.back-link { display: inline-block; margin: 1.4rem 0 .4rem; font-weight: 700; }
.reader-back-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.reader-heading { display: flex; align-items: center; gap: 2rem; justify-content: space-between; padding: 1rem 0 1.5rem; }
.reader-heading h1 { font-size: clamp(2rem, 5vw, 4rem); }
.reader-heading p:last-child { line-height: 1.6; }
.reader-cover { width: min(23vw, 155px); height: auto; border-radius: 7px; box-shadow: 0 7px 20px #12364d33; }
.reader-panel { padding: 1rem; border: 2px solid #d7b75b; border-radius: 18px; background: #fffaf0; box-shadow: 0 12px 30px #12364d25; }
.reader-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem .25rem 1rem; }
.reader-controls p { margin: 0; text-align: center; font-weight: 700; }
.reader-controls button { min-width: 120px; padding: .7rem .9rem; border: 0; border-radius: 9px; color: white; background: #07593e; font: inherit; font-weight: 700; cursor: pointer; }
.reader-controls button:hover:not(:disabled) { background: #073d30; }
.reader-controls button:disabled { opacity: .4; cursor: default; }
.book-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; align-items: start; }
.book-spread a { display: block; min-width: 0; }
.book-spread img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 3px 12px #12364d28; }
.reader-hint { margin: 1rem .25rem .25rem; font-size: .9rem; line-height: 1.5; }
.reader-bottom { margin: 1.5rem 0 3rem; font-weight: 700; }
footer { padding: 2rem 1rem; text-align: center; color: #f7f0da; background: #063d35; }
footer a { color: #fff4bd; }
@media (max-width: 900px) { .book-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } .book-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-header { padding: 1rem; } .hero { margin-top: 1rem; } }
@media (max-width: 480px) { .book-cards { grid-template-columns: 1fr; } .book-card { max-width: 340px; margin: 0 auto; } }
@media (max-width: 600px) { .reader-heading { gap: 1rem; } .reader-cover { width: 80px; } .reader-panel { padding: .45rem; } .reader-controls { flex-wrap: wrap; } .reader-controls p { order: -1; flex: 1 0 100%; } .reader-controls button { flex: 1; min-width: 0; } .book-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; } .book-spread img { box-shadow: 0 2px 7px #12364d28; } }

html { scroll-padding-top: 1rem; }
.resource-links { display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; position:relative; z-index:1; }
.resource-links a, .back-link, .site-header nav a { display:inline-flex; align-items:center; min-height:44px; }
.section-intro { max-width:800px; line-height:1.65; }
.objective-cards { grid-template-columns:repeat(2,minmax(0,1fr)); margin:1.5rem 0 3rem; }
.objective-cards .card { min-height:0; }
.objective-cards h3 { font-size:1.4rem; color:#093e33; margin:.2rem 0 .7rem; }
.objective-cards a { min-height:44px; display:inline-flex; align-items:center; }
.practical-list { margin:1rem 0; }
.practical-list > div { display:grid; grid-template-columns:180px minmax(0,1fr); gap:1rem; padding:.8rem 0; border-top:1px solid #d9cba9; }
.practical-list dt { font-weight:700; color:#093e33; }
.practical-list dd { margin:0; }
.family-tradition { padding:1rem 0 2rem; }
.tradition-heading-row { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; }
.tradition-heading-row h2 { margin:.25rem 0; font-size:clamp(2rem,4vw,3.5rem); }
.christmas-countdown { flex:0 0 190px; padding:.8rem 1rem; border:2px solid #d7b75b; border-radius:18px; color:#fff8dc; background:#7a1e20; text-align:center; box-shadow:0 8px 18px #12364d20; }
.christmas-countdown strong,.christmas-countdown span { display:block; }
.christmas-countdown strong { font-size:1.15rem; }
.christmas-countdown span { margin-top:.2rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.setup-details { padding:1rem 1.3rem; border:2px solid #d7b75b; border-radius:16px; background:#fffdf4; line-height:1.65; }
.setup-details summary { font-size:1.2rem; font-weight:700; color:#093e33; cursor:pointer; min-height:44px; }
.setup-details summary:focus-visible { outline:3px solid #d9a62f; outline-offset:4px; }
.tradition-timeline { padding-left:1.6rem; }
.tradition-timeline li { padding:.8rem .3rem 1rem .8rem; border-bottom:1px solid #e4d7b8; }
.tradition-timeline h3 { margin:.25rem 0; color:#093e33; }
.timeline-time { font-size:.85rem; font-weight:700; color:#96382d; }
.setup-checklist { display:grid; gap:.45rem; padding-left:1.25rem; }
.countdown-timeline { position:relative; display:grid; gap:1rem; margin:1.4rem 0; padding:0; list-style:none; }
.countdown-timeline::before { content:""; position:absolute; top:2rem; bottom:2rem; left:2rem; width:4px; border-radius:4px; background:linear-gradient(#c89a3e,#9f3030,#0b5a43); }
.countdown-card { position:relative; display:grid; grid-template-columns:4rem minmax(0,1fr); gap:1rem; align-items:start; padding:1.15rem 1.2rem 1.15rem 0; border:2px solid #d7b75b; border-radius:18px; background:#fffdf4; box-shadow:0 8px 22px #12364d14; }
.countdown-marker { position:relative; z-index:1; display:grid; place-items:center; width:2.7rem; height:2.7rem; margin:.1rem auto 0; border:3px solid #f2d889; border-radius:50%; color:#fff9df; background:#07593e; font-weight:700; box-shadow:0 0 0 4px #fffdf4; }
.countdown-card h3 { margin:.22rem 0 .35rem; color:#093e33; font-size:1.35rem; }
.countdown-card p { margin:.2rem 0 .65rem; line-height:1.55; }
.countdown-card small { display:block; margin-top:.45rem; color:#7a1e20; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.countdown-card.featured-letter { border-color:#a93b36; background:#fff7e8; }
.countdown-card.christmas-card { border-color:#0b6045; background:#f5fbf4; }
.countdown-card.christmas-card .countdown-marker { background:#9b272b; }
.printable-link { display:inline-flex; align-items:center; min-height:44px; padding:.65rem .85rem; border-radius:9px; color:#fff; background:#07593e; font-weight:700; text-decoration:none; }
.printable-link:hover { background:#073d30; }
.coming-note { display:inline-block; padding:.45rem .65rem; border-radius:8px; color:#694412; background:#fff0bf; font-size:.9rem; font-weight:700; }
.tradition-note { padding:.8rem 1rem; border-left:4px solid #c89a3e; background:#fff9e8; line-height:1.5; }
.end-links { margin:1.5rem 0 3rem; }
.mystery-feature { display:grid; grid-template-columns:180px minmax(0,1fr); gap:1.5rem; align-items:center; margin:0 0 3rem; padding:1.5rem; border:2px solid #d7b75b; border-radius:20px; background:#fff9e8; }
.mystery-pieces { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
.mystery-pieces span { display:grid; place-items:center; min-height:70px; border:2px solid #d7b75b; border-radius:13px; background:#e8f3e5; color:#07593e; font-size:2rem; font-weight:700; }
.mystery-feature-copy h2 { margin:.4rem 0; font-size:clamp(1.7rem,3vw,2.3rem); }
.mystery-feature-copy p { line-height:1.6; }
.mystery-entry-link { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.8rem 1rem; border-radius:9px; background:#07593e; color:white; text-decoration:none; font-weight:700; }
.mystery-entry-link:hover { background:#073d30; }
@media(max-width:600px) { .mystery-feature { grid-template-columns:1fr; gap:.6rem; } .mystery-pieces { grid-template-columns:repeat(4,1fr); max-width:300px; } .mystery-pieces span { min-height:50px; font-size:1.5rem; } }
@media(max-width:600px) { .objective-cards { grid-template-columns:1fr; } .practical-list > div { grid-template-columns:1fr; gap:.25rem; } }
@media(max-width:700px) { .tradition-heading-row { align-items:stretch; flex-direction:column; } .christmas-countdown { flex:auto; width:100%; } .countdown-card { grid-template-columns:3.3rem minmax(0,1fr); gap:.5rem; padding:1rem .8rem 1rem 0; } .countdown-timeline::before { left:1.62rem; } .countdown-marker { width:2.4rem; height:2.4rem; } .printable-link { width:100%; justify-content:center; text-align:center; } }