/* Styles for the Ask The Dancing Sage advice pages. Matches the Wisdom Library look. */
* { box-sizing: border-box; }
:root { --sage:#6e9385; --deep-sage:#46665b; --cream:#fbf6ee; --blush:#e8c9bd; --clay:#b77b63; --ink:#2f3a35; --gold:#c7a76c; }
body { margin:0; font-family: Georgia, 'Times New Roman', serif; color:var(--ink); background: radial-gradient(circle at top left, rgba(232,201,189,.42), transparent 30%), radial-gradient(circle at bottom right, rgba(110,147,133,.22), transparent 28%), linear-gradient(180deg,#fbf6ee 0%,#f7eee6 60%,#f0e4d8 100%); }
.wrap { max-width: 980px; margin:0 auto; padding:22px; }
.hero, .card { background:rgba(255,255,255,.82); border:1px solid rgba(110,147,133,.22); border-radius:28px; padding:30px; box-shadow:0 16px 50px rgba(70,102,91,.12); margin-bottom:22px; }
.eyebrow { letter-spacing:.14em; text-transform:uppercase; font-family:Arial,sans-serif; color:var(--deep-sage); font-size:13px; font-weight:700; margin:0 0 12px; }
h1 { font-size:clamp(38px,6vw,62px); line-height:1; margin:0 0 16px; color:var(--deep-sage); }
h1.ask-h1 { font-size:clamp(32px,5vw,50px); line-height:1.1; }
h2, h3 { color:var(--deep-sage); }
p, li { font-family:Arial,sans-serif; line-height:1.75; color:#526059; font-size:17px; }
.lead { font-size:19px; max-width:760px; }
a { color:var(--deep-sage); font-weight:700; }
.button-link { display:inline-block; margin-top:14px; background:var(--clay); color:#fff; padding:12px 17px; border-radius:999px; text-decoration:none; font-family:Arial,sans-serif; }
.ask-secondary { background:var(--deep-sage); }
.ask-hero-buttons { display:flex; flex-wrap:wrap; gap:12px; }
.article-card { padding:24px; border-radius:22px; background:#fffaf4; border:1px solid rgba(110,147,133,.22); margin:16px 0; }
.article-card h2 { margin-top:0; }
.article { max-width:760px; margin:0 auto; }
.article p { font-size:18px; }
.article h2 { font-size:clamp(24px,3.4vw,30px); margin:30px 0 8px; }
.signature { font-family:Georgia,'Times New Roman',serif; color:var(--deep-sage); font-size:22px; }
.note { background:#fff7ed; border-left:4px solid var(--gold); padding:16px; border-radius:14px; margin-top:18px; }
.in-short { background:#f3f7f4; border-left:4px solid var(--sage); padding:14px 20px; border-radius:14px; margin:0 0 24px; }
.in-short p { margin:0; }
.ask-letter { background:#fdf3ee; border:1px dashed rgba(183,123,99,.55); border-radius:18px; padding:18px 22px; margin:0 0 22px; }
.ask-letter p { font-family:Georgia,'Times New Roman',serif; font-style:italic; color:#4b4440; }
.ask-letter .ask-sign { font-style:normal; font-weight:700; color:var(--clay); margin:4px 0 0; }
.ask-letter .ask-label, .ask-tag { font:700 12px/1.5 Arial,sans-serif; font-style:normal; text-transform:uppercase; letter-spacing:.12em; color:var(--clay); margin:0 0 6px; }
.ask-replies { font-family:Georgia,'Times New Roman',serif !important; font-size:22px !important; color:var(--deep-sage) !important; margin:8px 0 0; }
.ask-disclaimer { font-size:14px !important; color:#6a776f !important; border-top:1px solid rgba(110,147,133,.25); padding-top:14px; margin-top:24px; }
.library-tools { background:#f7fbf8; }
.search-label { display:block; margin-bottom:8px; color:var(--deep-sage); font:700 16px Arial,sans-serif; }
#askSearch { width:100%; padding:14px 16px; border:1px solid rgba(70,102,91,.4); border-radius:14px; background:white; color:var(--ink); font:17px Arial,sans-serif; }
#askSearch:focus { outline:3px solid rgba(110,147,133,.22); border-color:var(--deep-sage); }
.topic-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.topic-button { border:1px solid rgba(70,102,91,.28); border-radius:999px; padding:9px 13px; background:#fffaf4; color:var(--deep-sage); font:700 14px Arial,sans-serif; cursor:pointer; }
.topic-button:hover, .topic-button:focus, .topic-button[aria-pressed="true"] { background:var(--deep-sage); color:white; }
.topic-line { color:#6a776f; font-size:14px; margin:10px 0 0; }
.no-results { display:none; text-align:center; padding:28px 10px; }
.ask-form-card { background:#fffaf4; }
.ask-tips li { margin-bottom:6px; }
.xmas-promo { display:grid; grid-template-columns: 150px 1fr; gap:22px; align-items:center; background:#fffaf3; border:2px solid #7a2238; border-radius:22px; padding:18px 22px; margin:0 0 22px; box-shadow:0 10px 30px rgba(122,34,56,.12); }
.hero.article + .xmas-promo { max-width:760px; margin-left:auto; margin-right:auto; }
.xmas-promo img { width:100%; height:auto; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.16); }
.xmas-kicker { font:700 12px/1.4 Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#7a2238 !important; margin:0 0 4px; }
.xmas-promo h2 { color:#7a2238; font-size:clamp(21px,2.6vw,26px); line-height:1.2; margin:0 0 8px; }
.xmas-lead { font-size:16px !important; line-height:1.6 !important; margin:0 0 6px; color:#3f3a36 !important; }
.xmas-promo ul { margin:0 0 12px; padding-left:18px; }
.xmas-promo li { font-size:15px !important; line-height:1.55 !important; margin-bottom:2px; color:#3f3a36; }
.xmas-promo li::marker { content:"✦  "; color:#b8862f; }
.xmas-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.xmas-btn { display:inline-block; background:#7a2238; color:#fff !important; padding:11px 18px; border-radius:999px; text-decoration:none; font:700 15px Arial,sans-serif; box-shadow:0 6px 14px rgba(122,34,56,.25); }
.joys-promo { border-color:#46665b; box-shadow:0 10px 30px rgba(70,102,91,.14); }
.joys-promo h2, .joys-promo .xmas-kicker { color:#46665b !important; }
.joys-promo .xmas-btn { background:#46665b; box-shadow:0 6px 14px rgba(70,102,91,.25); }
.kids-promo { border-color:#2e9bb5; background:#f4fbfd; box-shadow:0 10px 30px rgba(46,155,181,.15); }
.kids-promo h2, .kids-promo .xmas-kicker { color:#7a3fa0 !important; }
.kids-promo .xmas-btn { background:#e07a1f; box-shadow:0 6px 14px rgba(224,122,31,.3); }
.meow-promo { border-color:#1f2f6b; background:#fff8ef; box-shadow:0 10px 30px rgba(31,47,107,.15); }
.meow-promo img { border-radius:12px; }
.meow-promo h2, .meow-promo .xmas-kicker { color:#1f2f6b !important; }
.meow-promo .xmas-btn { background:#d9661c; box-shadow:0 6px 14px rgba(217,102,28,.3); }
.xmas-btn:hover { filter:brightness(1.1); }
.xmas-btn-alt { background:#46665b; box-shadow:0 6px 14px rgba(70,102,91,.22); }
.xmas-note { font-size:13px !important; line-height:1.5 !important; color:#6a776f !important; margin:8px 0 0; }
@media (max-width:760px){ .xmas-promo{grid-template-columns:1fr; padding:18px; gap:14px} .xmas-promo img{max-width:150px; margin:0 auto} .xmas-btn{width:100%; text-align:center} }
@media (max-width:760px){ .wrap{padding:12px}.hero,.card{padding:22px;border-radius:22px} }