/* KyndCreate blog. Served at kyndcreate.com/blog/ (see functions/_site/host-routing.mjs).
   Same palette and type as the studio (website/create/create.css): the studio is
   dark-only, so the blog is too. No web fonts and no JavaScript, on purpose. */
:root{
  --bg:#10121b;--panel:#171a25;--raised:#1e2230;--ink:#f4f2fa;--body:#cfcfdc;--muted:#a3a4b7;--subtle:#7b8095;
  --line:#ffffff14;--lilac:#c9b6ff;--mint:#a6d5c4;--sky:#a9c4f0;--amber:#eead74;
  --kimi:#c9b6ff;--glm:#a6d5c4;--deepseek:#a9c4f0;
  --font:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:17px/1.7 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--lilac);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#e2d8ff}
a:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:3px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{color:var(--ink);font-weight:500;line-height:1.2;margin:0}
p{margin:0 0 1.1em}
strong{color:var(--ink);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-80px;background:var(--lilac);color:#171126;padding:10px 16px;border-radius:8px;z-index:10}
.skip-link:focus{top:12px}

/* Header / footer */
.site-head{border-bottom:1px solid var(--line);background:#10121bd9}
.site-head-inner{max-width:1120px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:22px;letter-spacing:-1px;font-weight:650;line-height:1}
.brand img{width:30px;height:30px;filter:drop-shadow(0 4px 10px #725fe137)}
.brand-create{font-weight:400;color:#d9d8e8}
.site-nav{display:flex;align-items:center;gap:22px;font-size:14px}
.site-nav a{color:var(--muted);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:650;white-space:nowrap}
.btn-primary{background:linear-gradient(110deg,#d3baf5,#aabfea);color:#262339!important;border:1px solid #ffffff22}
.btn-primary:hover{filter:brightness(1.07)}
.btn-ghost{border:1px solid #ffffff1c;color:var(--ink)!important;background:#ffffff06}
.site-foot{border-top:1px solid var(--line);margin-top:72px}
.site-foot-inner{max-width:1120px;margin:0 auto;padding:28px 24px 44px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:13px;color:var(--subtle)}
.site-foot a{color:var(--muted)}

/* Page scaffolding */
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.wide{max-width:1120px;margin:0 auto;padding:0 24px}
.crumb{font-size:13px;color:var(--subtle);margin:40px 0 18px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb span{margin:0 8px;color:#4c5166}
.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#b3a1d0;font-weight:600;margin:0 0 10px}
.hero h1{font-size:clamp(34px,5.4vw,52px);letter-spacing:-1.6px;line-height:1.1;font-weight:450}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;background:linear-gradient(100deg,#d1b4f6,#c0c9f4 55%,#a9d3df);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:19px;color:var(--muted);margin:18px 0 14px}
.byline{font-size:13px;color:var(--subtle);margin:0 0 26px}
.byline b{color:var(--muted);font-weight:500}
article h2{font-size:clamp(25px,3.2vw,31px);letter-spacing:-.6px;margin:64px 0 16px;scroll-margin-top:20px}
article h3{font-size:20px;letter-spacing:-.2px;margin:34px 0 10px}
article ul,article ol{padding-left:22px;margin:0 0 1.2em}
article li{margin-bottom:.45em}
.muted{color:var(--muted)}
.small{font-size:14px}

/* Status + callouts */
.status{border:1px solid #eead7440;background:linear-gradient(120deg,#eead7412,#eead7404);border-radius:14px;padding:16px 20px;font-size:15px;color:#e8d6c4;margin:0 0 30px}
.status strong{color:#f4c89c}
.status p:last-child{margin:0}
.answer{border:1px solid #c9b6ff30;background:linear-gradient(120deg,#b59adb12,#86adc506);border-radius:16px;padding:22px 24px;margin:34px 0}
.answer p{color:var(--ink);font-size:18px}
.answer p:last-child{margin:0}
.note{border-left:2px solid var(--line);padding:2px 0 2px 16px;color:var(--muted);font-size:15px}
blockquote{margin:18px 0;padding:14px 18px;border-left:2px solid var(--lilac);background:#ffffff05;border-radius:0 10px 10px 0;color:var(--ink);font-size:16px}
blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--subtle)}

/* Hero frames */
.hero-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 10px}
.hero-frames figure{margin:0}
.hero-frames img{border-radius:10px;border:1px solid var(--line);aspect-ratio:960/536;object-fit:cover;width:100%}
.hero-frames figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.caption{font-size:13px;color:var(--subtle);margin:0 0 8px}

/* Model tags */
.tag{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot,#888)}
.m-kimi{--dot:var(--kimi)}
.m-glm{--dot:var(--glm)}
.m-deepseek{--dot:var(--deepseek)}
.pill{display:inline-block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid #eead7450;color:#f4c89c;vertical-align:middle}

/* Tables */
.table-scroll{overflow-x:auto;margin:18px 0 10px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:640px}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--subtle);font-weight:600;background:#ffffff04}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody th{color:var(--ink);font-weight:600;white-space:nowrap}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pending{color:var(--subtle);font-style:italic}
details{margin:14px 0;border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#ffffff03}
details summary{cursor:pointer;color:var(--ink);font-size:15px}
details[open] summary{margin-bottom:8px}

/* Side-by-side galleries: one column per director */
.lineup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 8px}
.entry{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.entry-head{padding:2px 2px 10px}
.entry-head .tag{font-size:15px}
.entry-stats{font-size:12.5px;color:var(--subtle);margin:6px 0 8px;line-height:1.5}
.logline{font-size:14px;color:var(--muted);font-style:italic;margin:0 0 4px;line-height:1.55}
.entry figure{margin:0 0 12px}
.entry figure:last-child{margin-bottom:0}
.entry img{border-radius:9px;border:1px solid #ffffff10;background:#1b202b;width:100%}
.entry figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.entry figcaption b{color:var(--ink);font-weight:600}
.entry-missing{display:flex;flex-direction:column;justify-content:center;min-height:220px;text-align:center;border-style:dashed;color:var(--subtle);font-size:14px}
.entry-missing .tag{justify-content:center;margin-bottom:10px}
.sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0}
.sheets figure{margin:0}
.sheets img{border-radius:10px;border:1px solid var(--line);width:100%}
.sheets figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* Model cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 18px 8px}
.card h3{margin:0 0 10px;font-size:18px}
.card ul{padding-left:18px;font-size:15px}

/* Call to action */
.cta{margin:56px 0 0;padding:30px 28px;border:1px solid #c9b6ff2e;border-radius:20px;background:radial-gradient(ellipse at 100% 0,#9f80ff1c,transparent 60%),linear-gradient(120deg,#1e2230,#171a25)}
.cta h2{margin:0 0 12px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* FAQ */
.faq h3{margin-top:28px}

/* Blog index */
.post-list{display:grid;gap:22px;margin:30px 0}
.post-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;transition:border-color .2s}
.post-card:hover{border-color:#c9b6ff55}
.post-card img{border-radius:12px;width:100%}
.post-card h2{font-size:26px;letter-spacing:-.5px;margin:10px 0 10px}
.post-card p{color:var(--muted);font-size:16px}
.post-meta{font-size:13px;color:var(--subtle);margin:0}
.read-more{color:var(--lilac);font-size:15px}

@media (max-width:900px){
  .lineup,.cards,.sheets{grid-template-columns:1fr}
  .post-card{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .site-nav .hide-sm{display:none}
  .hero-frames{grid-template-columns:1fr}
  .answer{padding:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}