/* ── Blog ─────────────────────────────────────────────────────────────────
   Transcribed from the live sociallite.app/blog, which is a React SPA whose
   posts live inside a JS bundle. Nothing is embedded or iframed: the prose is
   real HTML in this repo, wearing this site's type and colour.

   Page-scoped, loaded only by /blog/ and the posts, after info.css and before
   mobile.css - the slot parents.css and contact.css use. */

/* Index */
.blog-index{max-width:820px}
.blog-index .page-kicker{max-width:34em}
.blog-index h1{margin-bottom:44px}
.blog-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.blog-list a{display:block;padding:28px 30px;border:1px solid #ffffff1f;border-radius:20px;background:#ffffff06;text-decoration:none!important;color:inherit;transition:border-color .2s,background .2s,transform .2s}
.blog-list a:hover{border-color:#ffffff40;background:#ffffff0d;transform:translateY(-2px)}
.blog-list h2{font-size:clamp(20px,2.2vw,25px);font-weight:650;letter-spacing:-.02em;line-height:1.25;margin:0 0 10px}
.blog-list p{font-size:16px;line-height:1.65;color:#a4a4a4;margin:0 0 14px;max-width:52em}

/* Meta line, shared by the index and the posts */
.blog-meta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#8b8b8b;margin:0}
.blog-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}

/* Post */
.blog-post{max-width:720px}
.blog-back{display:inline-block;font-size:14.5px;color:#9a9a9a;margin:0 0 30px;text-decoration:none!important}
.blog-back:hover{color:#f3f3f3}
.blog-post h1{font-size:clamp(34px,4.6vw,52px);line-height:1.08;margin:0 0 16px}
.blog-post .blog-meta{margin-bottom:44px}
.blog-body{font-size:17.5px;line-height:1.8;color:#c4c4c4}
.blog-body p{margin:0 0 26px}
.blog-body h2{font-size:clamp(23px,2.6vw,29px);font-weight:650;letter-spacing:-.02em;line-height:1.3;color:#f3f3f3;margin:52px 0 18px}
.blog-body h3{font-size:20px;font-weight:650;color:#f3f3f3;margin:38px 0 14px}
.blog-body ul,.blog-body ul,.blog-body ol{margin:0 0 26px;padding-left:22px}
.blog-body li{margin:0 0 12px}
.blog-body strong{color:#f3f3f3;font-weight:650}
.blog-body blockquote{margin:0 0 26px;padding:4px 0 4px 22px;border-left:2px solid #ffffff2e;color:#b4b4b4;font-style:italic}
.blog-body a{text-decoration:underline;text-underline-offset:4px}

/* Closing call to action, same words the live post ends on */
.blog-cta{margin:64px 0 0;padding:44px 30px;border-top:1px solid #ffffff1f;text-align:center}
.blog-cta h2{font-size:clamp(23px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
.blog-cta p{font-size:16px;line-height:1.7;color:#a4a4a4;margin:0 auto 26px;max-width:30em}
.blog-cta .store-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

html[data-theme=light] .blog-list a{border-color:#00000018;background:#00000004}
html[data-theme=light] .blog-list a:hover{border-color:#00000038;background:#0000000a}
html[data-theme=light] .blog-list p{color:#5f5f5f}
html[data-theme=light] .blog-meta{color:#767676}
html[data-theme=light] .blog-back{color:#6b6b6b}
html[data-theme=light] .blog-back:hover{color:#151515}
html[data-theme=light] .blog-body{color:#3d3d3d}
html[data-theme=light] .blog-body h2,html[data-theme=light] .blog-body h3,html[data-theme=light] .blog-body strong{color:#151515}
html[data-theme=light] .blog-body blockquote{border-left-color:#00000026;color:#5f5f5f}
html[data-theme=light] .blog-cta{border-top-color:#00000018}
html[data-theme=light] .blog-cta p{color:#5f5f5f}

@media(prefers-reduced-motion:reduce){.blog-list a{transition:none}.blog-list a:hover{transform:none}}
@media(hover:none){.blog-list a:hover{transform:none}}
@media(max-width:600px){
  .blog-list a{padding:22px 20px;border-radius:16px}
  .blog-body{font-size:16.5px}
  .blog-body h2{margin-top:42px}
  .blog-cta{padding:36px 0 0}
}

/* ── "More reading" strip ─────────────────────────────────────────────────
   Sits at the foot of the marketing pages, above the footer. The blog does
   not need a nav slot of its own: someone reading about parental controls is
   a plausible reader of "why Reels are so addictive", and this catches them
   at the point they have finished the page, rather than asking them to
   notice a fourth nav item on the way in. "Read more" goes to /blog/, which
   is where all of the posts live. */
/* text-align is pinned because this strip drops into pages that centre
   their own sections - /students/ does - and the cards should not change
   alignment depending on which page they land on. */
.blog-teaser{width:min(100% - 48px,1180px);margin:0 auto;padding:76px 0 72px;border-top:1px solid #ffffff17;text-align:left}
.blog-teaser-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 28px}
.blog-teaser-head h2{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.03em;margin:0}
.blog-teaser-all{font-size:15px;color:#9a9a9a;white-space:nowrap;text-decoration:none!important;transition:color .2s}
.blog-teaser-all:hover{color:#f3f3f3}
.blog-teaser-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-teaser-list a{display:flex;flex-direction:column;height:100%;gap:8px;padding:24px 24px 22px;border:1px solid #ffffff1f;border-radius:18px;background:#ffffff06;color:inherit;text-decoration:none!important;transition:border-color .2s,background .2s,transform .2s}
.blog-teaser-list a:hover{border-color:#ffffff40;background:#ffffff0d;transform:translateY(-2px)}
.blog-teaser-list h3{font-size:18px;font-weight:650;letter-spacing:-.015em;line-height:1.3;margin:0}
.blog-teaser-list p{font-size:14.5px;line-height:1.55;color:#a0a0a0;margin:0}
.blog-teaser-meta{margin-top:auto;padding-top:12px;font-size:13px;color:#8b8b8b}
html[data-theme=light] .blog-teaser{border-top-color:#00000014}
html[data-theme=light] .blog-teaser-all{color:#6b6b6b}
html[data-theme=light] .blog-teaser-all:hover{color:#151515}
html[data-theme=light] .blog-teaser-list a{border-color:#00000018;background:#00000004}
html[data-theme=light] .blog-teaser-list a:hover{border-color:#00000038;background:#0000000a}
html[data-theme=light] .blog-teaser-list p{color:#5f5f5f}
html[data-theme=light] .blog-teaser-meta{color:#767676}
@media(prefers-reduced-motion:reduce){.blog-teaser-list a{transition:none}.blog-teaser-list a:hover{transform:none}}
@media(hover:none){.blog-teaser-list a:hover{transform:none}}
@media(max-width:900px){.blog-teaser-list{grid-template-columns:1fr;gap:12px}.blog-teaser{padding-top:56px;padding-bottom:52px}}
@media(max-width:600px){.blog-teaser-list a{padding:20px}.blog-teaser-head{margin-bottom:20px}}