:root { --purple:#6d3b93; --purple-hover:#552c74; --plum:#2c1240; --ink:#1c0b2a; --lilac:#c8a9e0; --lilac-pale:#f3ecf9; --lilac-border:#dccbe9; --gold:#c9a44c; --surface:#fbfaf7; --surface-card:#fff; --text-body:#3e3348; --text-muted:#6e6479; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--surface); color:var(--text-body); font-family:"IBM Plex Sans",system-ui,sans-serif; line-height:1.6; }
a { color:inherit; }
.shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; }
.topbar { background:var(--plum); color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
.topbar__inner { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { text-decoration:none; }
.brand strong { display:block; font-family:Georgia,serif; font-size:1.35rem; font-weight:600; }
.brand span { color:#e7def0; font-size:.82rem; }
.back { text-decoration:none; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:9px 14px; font-size:.9rem; }
.back:hover { background:rgba(255,255,255,.08); }
main { padding-bottom:72px; }
.hero { background:linear-gradient(180deg,var(--plum),var(--ink)); color:#fff; padding:72px 0 78px; }
.eyebrow { margin:0 0 14px; color:var(--lilac); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { font-family:Georgia,serif; color:inherit; }
h1 { max-width:760px; margin:0; font-size:clamp(2.5rem,6vw,4.6rem); line-height:1.02; font-weight:500; }
.hero p:not(.eyebrow) { max-width:700px; margin:24px 0 0; color:#e8dff0; font-size:1.08rem; }
.content { padding:56px 0 0; }
.intro { max-width:760px; }
.intro h2 { margin:0 0 12px; color:var(--plum); font-size:clamp(1.8rem,4vw,2.7rem); font-weight:500; }
.intro p { margin:0; color:var(--text-muted); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:34px; }
.card__hint { margin:0 0 20px; font-size:.88rem; color:var(--text-muted); line-height:1.5; }
.card { display:flex; min-height:350px; flex-direction:column; padding:28px; background:var(--surface-card); border:1px solid var(--lilac-border); border-radius:18px; box-shadow:0 12px 30px rgba(44,18,64,.06); }
.card__tag { align-self:flex-start; margin-bottom:20px; padding:6px 10px; border-radius:999px; background:var(--lilac-pale); color:var(--purple); font-size:.76rem; font-weight:600; }
.card h3 { margin:0; color:var(--plum); font-size:1.75rem; line-height:1.1; font-weight:500; }
.card p { margin:16px 0 0; color:var(--text-muted); }
.card ul { margin:18px 0 24px; padding-left:20px; color:var(--text-body); }
.card li + li { margin-top:7px; }
.button { display:inline-flex; align-items:center; justify-content:center; margin-top:auto; min-height:48px; padding:12px 18px; border-radius:10px; background:var(--purple); color:#fff; text-decoration:none; font-weight:600; text-align:center; }
.button:hover { background:var(--purple-hover); }
.card--booklet .card__details { margin-bottom:24px; font-size:.9rem; }
a:focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
.topbar a:focus-visible { outline-color:var(--gold); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:8px; left:16px; z-index:10; transform:translateY(-150%); padding:12px 18px; background:var(--surface); color:var(--plum); }
.skip-link:focus { transform:translateY(0); }
.booklet-layout { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:56px; align-items:start; }
.booklet-cover { margin:0; }
.booklet-cover img { display:block; width:100%; max-width:360px; height:auto; margin:0 auto; border-radius:10px; box-shadow:0 12px 30px rgba(44,18,64,.06); }
.booklet-cover figcaption { margin-top:16px; color:var(--text-muted); font-size:.85rem; text-align:center; }
.booklet-topics { margin-top:32px; }
.booklet-topics h2 { color:var(--plum); font-size:1.6rem; font-weight:500; line-height:1.2; }
.booklet-topics ul { padding-left:22px; }
.booklet-topics li + li { margin-top:8px; }
.booklet-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.booklet-actions .button { margin-top:0; }
.button--secondary { background:transparent; color:var(--purple); border:1px solid var(--purple); }
.button--secondary:hover { background:var(--lilac-pale); }
.booklet-access { color:var(--text-muted); font-size:.9rem; }
.booklet-back { margin:28px 0 0; }
.booklet-back a { color:var(--purple); text-underline-offset:4px; }
.note { margin-top:30px; padding:20px 22px; border-left:4px solid var(--gold); background:#f6eedc; color:#5c4b2c; border-radius:0 10px 10px 0; }
footer { margin-top:48px; background:var(--ink); color:#d8cce4; padding:28px 0; }
footer p { margin:0; font-size:.9rem; }
@media (max-width:640px) { .topbar__inner{min-height:66px}.brand strong{font-size:1.15rem}.brand span{display:none}.back{padding:8px 11px;font-size:.82rem}.hero{padding:52px 0 58px}.content{padding-top:40px}.grid{grid-template-columns:1fr}.card{min-height:0;padding:22px} }
@media (max-width:800px) { .booklet-layout{grid-template-columns:1fr;gap:32px}.booklet-cover img{max-width:260px} }
@media (max-width:480px) { .booklet-actions{flex-direction:column}.booklet-actions .button{width:100%} }