/* The blog: the list at /blog and each post at /blog/<slug>. build.py writes
   the pages from posts/*.md; this is their look. The theme tokens are the home
   page's, so the header (/nav.css) and footer (/footer.css) match it. */

[data-theme="dark"]{
  --bg:#0f0c1a;--bg2:#160f2a;
  --card:rgba(255,255,255,0.04);--card2:rgba(255,255,255,0.07);
  --line:rgba(255,255,255,0.07);--line2:rgba(255,255,255,0.13);
  --text:#ffffff;--text2:#e2e8f0;--muted:#94a3b8;--faint:#7c8aa0;
  --link:#c084fc;--eyebrow:#06d6f5;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f8f7ff;--bg2:#f0eeff;
  --card:rgba(124,58,237,0.05);--card2:rgba(124,58,237,0.09);
  --line:rgba(0,0,0,0.07);--line2:rgba(0,0,0,0.13);
  --text:#0f0c1a;--text2:#1e1b4b;--muted:#4b5563;--faint:#6b7280;
  --link:#6d28d9;--eyebrow:#0891b2;
  color-scheme:light;
}
:root{
  --purple:#7c3aed;--purple2:#9d5cf5;--purple3:#c084fc;
  --cyan:#06d6f5;--cyan2:#67e8f9;--pink:#e879f9;--green:#22c55e;
}
[data-theme="light"]{--purple3:#7c3aed;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
button{font:inherit;}

/* The home page's ambient light and fading grid, quieter. */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(90px);}
.orb1{width:700px;height:700px;background:rgba(124,58,237,0.11);top:-260px;left:-220px;}
.orb2{width:500px;height:500px;background:rgba(6,214,245,0.06);top:40%;right:-180px;}
[data-theme="light"] .orb1{background:rgba(124,58,237,0.07);}
[data-theme="light"] .orb2{background:rgba(6,214,245,0.045);}
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(124,58,237,0.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,0.07) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 80% at 30% 0%,black 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 30% 0%,black 10%,transparent 75%);
}

.ey{
  display:inline-block;
  font-family:'DM Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--eyebrow);
}
.grad{
  background:linear-gradient(110deg,var(--purple2) 0%,var(--cyan) 60%,var(--pink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="light"] .grad{background-image:linear-gradient(110deg,#6d28d9 0%,#0891b2 70%);}
a:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px;}
/* The wordmark is pale artwork for a dark background; the light theme swaps in
   the dark version, as on the other pages. */
[data-theme="light"] img.wordmark{content:url("/img/vythos-wordmark-dark.png");}

/* ── THE LIST ── */
.blog-top{position:relative;z-index:1;overflow:hidden;}
.blog-hero{position:relative;max-width:1120px;margin:0 auto;padding:156px 48px 48px;}
.blog-hero h1{
  margin-top:14px;max-width:820px;
  font-size:clamp(38px,5.2vw,68px);font-weight:900;line-height:1.03;letter-spacing:-.04em;
  text-wrap:balance;
}
.blog-hero h1 .grad{display:block;}
.blog-lead{margin-top:20px;max-width:600px;font-size:clamp(17px,1.6vw,19px);line-height:1.7;color:var(--muted);}
.blog-follow{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:14px;}
.blog-follow a{display:inline-flex;align-items:center;gap:7px;color:var(--link);font-weight:600;text-decoration:none;}
.blog-follow a:hover{text-decoration:underline;}
.blog-follow svg{width:15px;height:15px;flex:none;}

/* The newest post across the page; the rest share rows of up to three, and
   two of them fill a row between them. */
.featured-post{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:8px 48px 24px;}
.cards{
  position:relative;z-index:1;
  max-width:1120px;margin:0 auto;padding:0 48px 112px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
}
.card{
  position:relative;display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:var(--card);border:1px solid var(--line2);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
[data-theme="light"] .card{background:rgba(255,255,255,0.72);border-color:rgba(124,58,237,0.12);}
.card:hover{transform:translateY(-3px);border-color:rgba(124,58,237,0.45);box-shadow:0 22px 60px rgba(124,58,237,0.14);}
.card-img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:#0f0c1a;border-bottom:1px solid var(--line);}
.card-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px;}
.card h2,.card h3{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--text);text-wrap:balance;}
.card h2 a,.card h3 a{color:inherit;text-decoration:none;}
/* The whole card is the link, through the title's link. */
.card h2 a::after,.card h3 a::after{content:"";position:absolute;inset:0;border-radius:20px;}
.card p{font-size:14.5px;line-height:1.6;color:var(--muted);}
.card .meta{margin-top:auto;padding-top:6px;font-size:13px;color:var(--faint);}
/* The cover fills its half. The words beside it are sized to about the
   picture's height, so at most a little of each side of the cover is
   trimmed, and covers keep their words clear of the edges. */
.card.featured{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
.card.featured .card-img{height:100%;border-bottom:0;border-right:1px solid var(--line);}
.card.featured .card-body{justify-content:center;gap:12px;padding:30px 36px;}
.card.featured h2{font-size:clamp(22px,2.3vw,30px);letter-spacing:-.03em;}
.card.featured p{font-size:15px;}
.card.featured .card-body>p:not(.meta){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card .meta,.post-meta{font-variant-numeric:tabular-nums;}

/* ── A POST ── */
.post-top{position:relative;z-index:1;overflow:hidden;}
.post-head{position:relative;max-width:760px;margin:0 auto;padding:148px 24px 0;}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:26px;}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6;}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs a:hover{color:var(--text);text-decoration:underline;}
.post-head h1{
  margin:14px 0 18px;
  font-size:clamp(34px,4.6vw,54px);font-weight:900;line-height:1.07;letter-spacing:-.035em;
  text-wrap:balance;
}
.dek{font-size:clamp(18px,1.8vw,20px);line-height:1.6;color:var(--muted);}
.byline{
  display:flex;align-items:center;gap:12px;margin-top:30px;padding-bottom:30px;
  border-bottom:1px solid var(--line2);font-size:14px;color:var(--muted);
}
.avatar{
  flex:none;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;
}
.byline b{display:block;color:var(--text);font-weight:600;}

.prose{
  position:relative;z-index:1;max-width:760px;margin:0 auto;padding:36px 24px 0;
  font-size:18px;line-height:1.75;color:var(--text2);
}
.prose>*+*{margin-top:1.15em;}
.prose h2{
  margin-top:2.1em;
  font-size:clamp(24px,2.6vw,30px);font-weight:800;line-height:1.2;letter-spacing:-.025em;
  color:var(--text);scroll-margin-top:100px;text-wrap:balance;
}
.prose h3{margin-top:1.8em;font-size:20px;font-weight:700;line-height:1.35;color:var(--text);scroll-margin-top:100px;}
.prose h2+*,.prose h3+*{margin-top:.6em;}
.prose a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.prose a:hover{text-decoration-thickness:2px;}
.prose strong{color:var(--text);font-weight:700;}
.prose ul,.prose ol{padding-left:1.35em;}
.prose li+li{margin-top:.55em;}
.prose li::marker{color:var(--purple2);font-weight:700;}
.prose blockquote{
  padding:18px 22px;border-radius:14px;
  background:var(--card);border:1px solid var(--line2);border-left:3px solid var(--purple2);
}
.prose blockquote>*+*{margin-top:.8em;}
.prose code{font-family:'DM Mono',ui-monospace,monospace;font-size:.86em;background:var(--card2);padding:.12em .38em;border-radius:5px;}
.prose figure img{display:block;max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line2);}
.prose hr{border:0;height:1px;background:var(--line2);margin:2.4em 0;}
.prose .table{overflow-x:auto;border:1px solid var(--line2);border-radius:14px;}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.5;}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--line);}
.prose th{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.prose tr:last-child td{border-bottom:0;}
.prose .cta{margin-top:2em;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;font-size:15px;font-weight:700;line-height:1.2;
  padding:15px 28px;border-radius:12px;text-decoration:none;
  box-shadow:0 8px 32px rgba(124,58,237,0.35);transition:transform .2s,box-shadow .2s;
}
.prose a.btn{color:#fff;text-decoration:none;}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(124,58,237,0.5);}

.share{
  max-width:760px;margin:44px auto 0;padding:22px 24px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-size:14px;color:var(--faint);
}
.share-in{display:flex;flex-wrap:wrap;gap:8px 18px;width:100%;padding-top:22px;border-top:1px solid var(--line2);}
.share a{color:var(--muted);font-weight:600;text-decoration:none;}
.share a:hover{color:var(--text);text-decoration:underline;}

/* What Vythos is, under every post. */
.about{
  position:relative;z-index:1;
  max-width:760px;margin:40px auto 0;padding:0 24px;
}
.about-box{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;
  padding:28px 30px;border-radius:20px;
  background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(6,214,245,0.06));
  border:1px solid rgba(124,58,237,0.3);
}
[data-theme="light"] .about-box{background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(6,214,245,0.05));border-color:rgba(124,58,237,0.2);}
.about-box img{width:72px;height:72px;}
.about-box h2{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--text);}
.about-box p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--muted);}
.about-box .btn{margin-top:16px;padding:12px 22px;font-size:14px;}

.more{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:88px 48px 112px;}
.more>h2{font-size:clamp(24px,2.6vw,32px);font-weight:900;letter-spacing:-.03em;margin-bottom:24px;}
.more .cards{padding:0;}

/* Too narrow for the cover and its words side by side without trimming it. */
@media(max-width:1100px){
  .card.featured{grid-template-columns:1fr;}
  .card.featured .card-img{height:auto;border-right:0;border-bottom:1px solid var(--line);}
  .card.featured .card-body{padding:28px 28px 30px;}
}
@media(max-width:960px){
  .featured-post{padding:8px 24px 24px;}
  .cards{padding:0 24px 88px;}
  .blog-hero{padding:132px 24px 40px;}
  .more{padding:72px 24px 88px;}
}
@media(max-width:640px){
  .featured-post{padding:4px 16px 18px;}
  .cards{grid-template-columns:1fr;padding:0 16px 72px;gap:18px;}
  .blog-hero{padding:116px 16px 32px;}
  .post-head{padding:116px 16px 0;}
  .prose{padding:28px 16px 0;font-size:17px;}
  .share{padding:20px 16px 0;}
  .about{padding:0 16px;}
  .about-box{grid-template-columns:1fr;padding:24px 22px;gap:14px;}
  .about-box img{width:56px;height:56px;}
  .more{padding:64px 16px 72px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;}
  html{scroll-behavior:auto;}
}