/* White Pixies — Journal / blog article styles. Relies on /src/style.css variables. */
.article { background: var(--cream); }
.article-shell { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px); }
.article-hero { padding: 110px 0 28px; }
.article-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); font-weight: 600; }
.article-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(34px, 6vw, 56px); line-height: 1.08; color: var(--ink-light); margin: 14px 0 18px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-muted); align-items: center; }
.article-meta strong { color: var(--ink-light); font-weight: 600; }
.article-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; margin: 26px 0 8px; }
.article-body { padding-bottom: 56px; }
.article-body p, .article-body li { font-size: 17px; line-height: 1.78; color: var(--ink-light); max-width: 68ch; }
.article-body h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(26px, 4vw, 34px); color: var(--ink-light); margin: 44px 0 12px; line-height: 1.2; }
.article-body h3 { font-size: 18px; font-weight: 600; color: var(--ink-light); margin: 26px 0 6px; }
.article-body p { margin: 0 0 16px; }
.article-body ul { margin: 0 0 16px; padding-left: 22px; }
.article-body li { margin: 0 0 8px; }
.article-body a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }
.lede { font-size: 19px !important; color: var(--ink) !important; }
.finder { background: #fff; border: 1px solid var(--border, #e7e3da); border-radius: 16px; padding: 24px; margin: 32px 0; }
.finder h3 { margin: 0 0 4px; font-size: 18px; }
.finder p.sub { font-size: 14px !important; color: var(--ink-muted); margin: 0 0 16px; }
.finder__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.finder__opt { border: 1px solid var(--sage); background: var(--cream); color: var(--ink-light); border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 14px; cursor: pointer; transition: all .18s ease; }
.finder__opt:hover { background: var(--sage-light); }
.finder__opt[aria-pressed="true"] { background: var(--sage); color: var(--cream); border-color: var(--sage); }
.finder__result { margin-top: 18px; font-size: 15px !important; color: var(--ink-light); min-height: 1.5em; }
.finder__result strong { color: var(--sage); }
.callout { background: var(--sage-light); border-radius: 14px; padding: 22px 24px; margin: 30px 0; }
.callout p { margin: 0; }
.related { border-top: 1px solid var(--border, #e7e3da); margin-top: 44px; padding-top: 26px; }
.related h2 { margin-top: 0; }
.related ul { list-style: none; padding: 0; }
.related a { font-weight: 600; }
.article-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--sage); color: var(--cream); padding: 13px 28px; border-radius: var(--radius-sm, 10px); font-weight: 600; text-decoration: none !important; margin-top: 6px; }
/* Blog index */
.blog-index { max-width: 1040px; margin: 0 auto; padding: 110px clamp(20px,5vw,32px) 64px; }
.blog-index__head { text-align: center; margin-bottom: 40px; }
.blog-index__title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(36px,6vw,56px); color: var(--ink-light); margin: 10px 0 8px; }
.blog-index__intro { color: var(--ink-muted); max-width: 56ch; margin: 0 auto; font-size: 16px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border, #e7e3da); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.post-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card__body { padding: 20px 22px 24px; }
.post-card__tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); font-weight: 600; }
.post-card__title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--ink-light); margin: 8px 0 8px; line-height: 1.2; }
.post-card__excerpt { font-size: 14px; color: var(--ink-muted); line-height: 1.6; margin: 0; }
.post-card--feature { grid-column: 1 / -1; }
@media (min-width: 760px) { .post-card--feature { flex-direction: row; } .post-card--feature .post-card__img { width: 46%; aspect-ratio: auto; } .post-card--feature .post-card__body { padding: 32px; align-self: center; } .post-card--feature .post-card__title { font-size: 30px; } }
@media (max-width: 768px) { .article-hero { padding: 92px 0 18px; } }

.blog-foot { border-top: 1px solid var(--border, #e7e3da); padding: 26px 20px 40px; text-align: center; background: var(--cream); }
.blog-foot a { color: var(--sage); font-size: 13px; font-weight: 600; text-decoration: none; }
.blog-foot a:hover { text-decoration: underline; }
.blog-foot__sep { color: var(--ink-muted); margin: 0 8px; }
/* Clear the floating menu button (fixed, bottom-centre, shown ≤900px) so it
   never sits on top of the footer links. Mirrors .footer in /src/style.css;
   defined here because blog.css loads after style.css and would otherwise win. */
@media (max-width: 900px) { .blog-foot { padding-bottom: 116px; } }