:root { --ink:#241a31; --plum:#542267; --violet:#7a3d92; --lilac:#f1e8f5; --cream:#fffdf9; --gold:#d48b45; --muted:#655d69; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font:400 1rem/1.65 "DM Sans",sans-serif; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:3; background:#fff; padding:.5rem 1rem; }
.site-header { min-height:76px; display:flex; justify-content:space-between; align-items:center; gap:1rem; max-width:1180px; margin:auto; padding:1rem 1.5rem; } .brand { color:var(--ink); display:flex; align-items:center; gap:.55rem; font:600 1.2rem/1 "Playfair Display",serif; text-decoration:none; } .brand img { width:48px; height:48px; border-radius:50%; object-fit:cover; } .brand em { color:var(--violet); } nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem 1.25rem; } nav a { color:var(--ink); font-size:.92rem; text-decoration:none; } nav a:hover { color:var(--violet); }
.hero { max-width:1180px; margin:0 auto; padding:2.5rem 1.5rem 5rem; display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:3.5rem; } .eyebrow { color:var(--violet); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0:.7rem; } h1,h2,h3,p { margin-top:0; } h1 { font:700 clamp(3.1rem,7vw,6.2rem)/.98 "Playfair Display",serif; letter-spacing:-.04em; margin-bottom:1.2rem; } h1 em { color:var(--violet); } .tagline { font:600 clamp(1.18rem,2vw,1.5rem)/1.35 "DM Sans",sans-serif; margin-bottom:1rem; } .intro { color:var(--muted); max-width:560px; } .button { display:inline-block; margin-top:.8rem; background:var(--plum); border-radius:999px; color:#fff; padding:.82rem 1.35rem; font-weight:700; text-decoration:none; } .button:hover { background:var(--violet); transform:translateY(-1px); } .hero-art { margin:0; position:relative; } .hero-art:before { content:""; position:absolute; width:92%; height:92%; right:-4%; bottom:-4%; background:var(--lilac); border-radius:31% 69% 61% 39%/38% 42% 58% 62%; z-index:-1; } .hero-art img { display:block; width:100%; border-radius:24px; box-shadow:0 22px 48px rgba(52,24,64,.18); }
.home-page-bubbles { max-width:1080px; margin:-2.4rem auto 5.2rem; padding:0 1.5rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; } .home-page-bubbles a { min-width:150px; display:flex; align-items:center; justify-content:center; gap:.55rem; padding:.72rem 1rem; border:1px solid #e4cde9; border-radius:999px; background:linear-gradient(135deg,#fff 0%,#f8effb 100%); box-shadow:0 8px 20px rgba(58,30,69,.08); color:var(--plum); font-weight:700; text-align:center; text-decoration:none; } .home-page-bubbles a:hover { transform:translateY(-3px); border-color:var(--violet); background:#fff; } .bubble-icon { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#f0dff5; font-size:1.05rem; }
.about { background:#f8f2f8; display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; padding:5.5rem max(1.5rem,calc((100vw - 1000px)/2)); } h2 { font:700 clamp(2rem,4vw,3.3rem)/1.1 "Playfair Display",serif; letter-spacing:-.035em; margin-bottom:1rem; } .about p:last-child { color:var(--muted); font-size:1.08rem; }
.read { max-width:1180px; margin:auto; padding:5.7rem 1.5rem; } .read > h2 { max-width:690px; } .featured-post { max-width:800px; margin-top:2.4rem; border:1px solid #e7dbea; border-left:5px solid var(--violet); border-radius:18px; padding:2rem; background:#fff; box-shadow:0 12px 32px rgba(58,30,69,.08); } .post-label,.post-date { color:var(--violet); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; } .post-label span { color:var(--gold); padding:0 .3rem; } .featured-post h3 { font:700 clamp(1.65rem,3vw,2.35rem)/1.12 "Playfair Display",serif; margin:.45rem 0 .8rem; } .featured-post p { color:var(--muted); max-width:650px; } .text-link { color:var(--plum); font-weight:700; text-decoration-thickness:2px; text-underline-offset:4px; }
.page-links { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; max-width:1050px; } .page-links a { color:var(--ink); background:#faf5fb; border:1px solid #e7dbea; border-radius:14px; padding:1.15rem; text-decoration:none; } .page-links a:hover { border-color:var(--violet); transform:translateY(-2px); } .page-links strong,.page-links span { display:block; } .page-links strong { font:600 1.08rem "Playfair Display",serif; margin-bottom:.25rem; } .page-links span { color:var(--muted); font-size:.86rem; line-height:1.45; }
.post-shell { padding:3.5rem 1.5rem 5.5rem; background:linear-gradient(180deg,#fbf7fc 0%,var(--cream) 32%); } .post { max-width:760px; margin:auto; background:#fff; border-radius:24px; padding:clamp(1.7rem,5vw,4.5rem); box-shadow:0 18px 45px rgba(58,30,69,.1); } .post h1 { font-size:clamp(2.55rem,6vw,4.65rem); } .post p { font-size:1.08rem; line-height:1.83; } .post .post-date { margin:1.2rem 0 2.4rem; } .post .post-closing { color:var(--plum); font:600 clamp(1.45rem,3vw,2rem)/1.35 "Playfair Display",serif; margin:2rem 0; } .post .signature { color:var(--violet); font:1.7rem "Shadows Into Light",cursive; margin-top:2rem; }
.prayer-card,.crisis-card { margin-top:2.8rem; padding:clamp(1.35rem,4vw,2.4rem); border-radius:18px; } .prayer-card { background:#faf3fc; border:1px solid #ead7ef; } .prayer-card h2 { font-size:2.2rem; } .prayer-card h3 { font:700 1.3rem/1.2 "Playfair Display",serif; color:var(--plum); margin:1.5rem 0 .55rem; } .crisis-card { background:#fff8ef; border-left:5px solid var(--gold); } .crisis-card h2 { font-size:2.1rem; } .crisis-card ul { padding-left:1.25rem; } .crisis-card li { margin:.9rem 0; line-height:1.65; } .crisis-card a { color:var(--plum); font-weight:700; }
.page-shell { min-height:calc(100vh - 150px); padding:4rem 1.5rem 5.5rem; background:linear-gradient(180deg,#fbf7fc 0%,var(--cream) 48%); } .page-intro,.private-card,.thought-card { max-width:760px; margin-inline:auto; } .page-intro { text-align:center; margin-bottom:2.2rem; } .page-intro h1 { font-size:clamp(2.8rem,6vw,4.7rem); } .page-intro > p:last-child { color:var(--muted); font-size:1.1rem; max-width:640px; margin-inline:auto; } .private-card,.thought-card { background:#fff; border-radius:22px; padding:clamp(1.5rem,4vw,3rem); box-shadow:0 18px 45px rgba(58,30,69,.1); } .private-card h2,.thought-card h2 { font-size:clamp(1.8rem,4vw,2.6rem); } .private-card p,.thought-card p { color:var(--muted); font-size:1.04rem; } form { display:grid; gap:.65rem; margin-top:1.8rem; } label { font-weight:700; font-size:.93rem; } label span { color:var(--muted); font-weight:400; } input,textarea { width:100%; border:1px solid #cfc1d4; border-radius:10px; color:var(--ink); font:inherit; padding:.75rem; } textarea { min-height:160px; resize:vertical; } form .button { border:0; cursor:pointer; justify-self:start; } .small-note { font-size:.84rem !important; line-height:1.55; margin-top:1.25rem; } .fun-intro .eyebrow { color:var(--gold); } .thought-card { border:2px dashed #caa3d5; text-align:center; background:linear-gradient(135deg,#fff 0%,#faf1fd 100%); } .thought-mark { color:var(--violet) !important; font:6rem/.5 "Playfair Display",serif; margin:.4rem 0 .6rem; } .thought-signoff { color:var(--violet) !important; font:1.5rem "Shadows Into Light",cursive; margin-top:2rem; }
.heart { background:var(--plum); color:#fff; text-align:center; padding:5rem 1.5rem; } .heart .eyebrow { color:#e9c5f4; } .heart h2 { max-width:780px; margin-inline:auto; } .heart p:last-child { max-width:760px; margin:1.2rem auto 0; color:#f3eaf5; font-size:.9rem; } footer { padding:1.7rem 1rem; background:#2c1733; color:#fbf4fd; text-align:center; font-size:.88rem; } footer span { color:#c879db; padding:0 .35rem; }
.merch-preview { max-width:1180px; margin:auto; padding:5.5rem 1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; } .merch-preview > div:first-child p:not(.eyebrow) { color:var(--muted); max-width:580px; font-size:1.05rem; } .merch-bubbles { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } .merch-bubbles span { min-height:148px; display:grid; place-items:center; padding:1rem; text-align:center; color:var(--plum); font:700 clamp(1.2rem,2.6vw,1.75rem)/1.05 "Playfair Display",serif; border:2px solid #e4cde9; border-radius:29px 45px 34px 42px; background:linear-gradient(145deg,#fff 0%,#f7eafa 100%); box-shadow:0 10px 25px rgba(58,30,69,.08); } .merch-bubbles span:nth-child(2) { color:#bf6e36; background:#fff4e8; border-color:#f1d5bd; transform:rotate(3deg); } .merch-bubbles span:nth-child(3) { color:#376a72; background:#eaf8f8; border-color:#c4e4e3; transform:rotate(-2deg); } .merch-bubbles span:nth-child(4) { color:#6c4980; background:#f2eafa; border-color:#ddc9ed; transform:rotate(2deg); }
.merch-grid { max-width:1040px; margin:2.5rem auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; } .merch-card { background:#fff; border:1px solid #e7dbea; border-radius:18px; padding:1.5rem; box-shadow:0 12px 30px rgba(58,30,69,.07); } .merch-card h2 { font-size:1.65rem; margin:.35rem 0 .65rem; } .merch-card p { color:var(--muted); font-size:.96rem; } .merch-icon { width:48px; height:48px; display:grid; place-items:center; background:var(--lilac); border-radius:50%; font-size:1.5rem; } .coming-note { max-width:760px; margin:2.5rem auto 0; padding:1.25rem 1.5rem; border-left:5px solid var(--gold); background:#fffaf3; color:#5f4a3b; border-radius:12px; }
.shop-grid { max-width:1080px; margin:2.5rem auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; } .shop-card { overflow:hidden; background:#fff; border:1px solid #e7dbea; border-radius:20px; padding:0 1.35rem 1.5rem; box-shadow:0 12px 30px rgba(58,30,69,.08); } .shop-card h2 { font-size:1.65rem; margin:.35rem 0 .65rem; } .shop-card > p:not(.product-type) { color:var(--muted); min-height:100px; font-size:.96rem; } .product-art { height:225px; margin:0 -1.35rem 1.3rem; padding:1.35rem; display:flex; align-items:center; justify-content:space-between; font:700 1.6rem/1.05 "Playfair Display",serif; } .product-art i { font-size:4.2rem; font-style:normal; } .chicken-art { color:#fff; background:linear-gradient(135deg,#6e3b93,#aa70c1); } .chicken-art strong { color:#ffe5a5; } .tumbler-art { color:#fff; background:linear-gradient(135deg,#3b8290,#9ccfd6); } .squirrel-art { color:#59334e; background:linear-gradient(135deg,#ffd5c7,#ffefd2); } .squirrel-art strong { color:#a65b4b; } .product-type { margin:0; color:var(--violet); font-weight:700; font-size:.73rem; letter-spacing:.1em; text-transform:uppercase; } .button-disabled { width:100%; cursor:not-allowed; opacity:.68; border:0; font:700 .92rem "DM Sans",sans-serif; } .shop-note { max-width:780px; margin:3.5rem auto 0; padding:2rem; background:#f8f2f8; border-radius:20px; text-align:center; } .shop-note h2 { font-size:2rem; } .shop-note p { color:var(--muted); }
@media (max-width:760px) { .site-header { align-items:flex-start; flex-direction:column; } nav { gap:1rem; flex-wrap:wrap; } .hero { grid-template-columns:1fr; padding-top:2rem; gap:2rem; } .hero-copy { order:1; } .hero-art { order:2; } .about { grid-template-columns:1fr; gap:1rem; padding-block:4rem; } .topic-grid { grid-template-columns:1fr 1fr; } .page-links { grid-template-columns:1fr; } }
@media (max-width:760px) { .merch-preview { grid-template-columns:1fr; padding-block:4rem; } .merch-grid,.shop-grid { grid-template-columns:1fr; } }
@media (max-width:430px) { nav { font-size:.9rem; } .topic-grid { grid-template-columns:1fr; } }
.post-hero { width:100%; height:auto; margin:1.2rem 0 2.2rem; display:block; border-radius:18px; box-shadow:0 14px 30px rgba(58,30,69,.12); }
.boundaries-poster { display:block; width:100%; max-width:760px; height:auto; margin:0 auto 2.2rem; border-radius:20px; box-shadow:0 16px 36px rgba(58,30,69,.14); }
.adhd-humor-photo { max-width:656px; margin:1.5rem auto 0; }
.adhd-humor-photo img { display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 14px 30px rgba(58,30,69,.14); }
.post-page { max-width:820px; margin:0 auto; }
.post-page h1 { font-size:clamp(2.55rem,6vw,4.65rem); }
.post-page > p { font-size:1.08rem; line-height:1.83; }
.post-image { display:block; width:100%; height:auto; margin:1.2rem auto 2.2rem; border-radius:20px; box-shadow:0 16px 36px rgba(58,30,69,.14); }