/* Blog (blog.html, blog/*.html). Loaded after site.css (and help.css on posts, for the article body and contents list). */
.blog-head{padding-bottom:72px}

/* post tiles */
.post{display:flex;flex-direction:column;gap:0;color:inherit}
.post .cover{display:block;border-radius:var(--r-xl);overflow:hidden;background:var(--sand);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s}
.post .cover > img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:scale .6s var(--ease-out)}
.post:hover .cover{box-shadow:var(--shadow)}
.post:hover .cover > img{scale:1.03}
.post .txt{display:flex;flex-direction:column;gap:10px;padding:24px 4px 0}
.post b{font-family:var(--head);font-weight:500;letter-spacing:-.02em;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em}
.post small{color:var(--muted);font-size:17px;line-height:1.5}
.meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.meta span:not(:first-child){color:var(--muted);font-weight:500}
.post.feat{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center;margin-bottom:96px}
.post.feat .txt{padding:0}
.post.feat b{font-size:clamp(34px,3.8vw,52px);line-height:1.05}
.post.feat small{font-size:19px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px}
.more-h{font-size:clamp(30px,3.4vw,44px);margin:0 0 40px}
/* "Keep reading": same width as the article grid below (reading column + contents list) */
.more-w{max-width:calc(1036px + 2 * var(--gutter))}
.more-w .posts{gap:48px 28px}
.more-w .post b{font-size:clamp(22px,1.9vw,26px)}

/* post page */
.post-head{padding:96px 0 56px;text-align:center}
.post-head .crumbs{justify-content:center}
.post-head h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02;max-width:16ch;margin:0 auto 20px}
.post-head .sub{color:var(--muted);font-size:clamp(18px,1.7vw,22px);line-height:1.5;max-width:36em;margin:0 auto}
.post-head .crumbs{color:var(--muted)}
.post-head .byline{margin-top:20px;font-size:14px;color:var(--muted)}
/* cover: as wide as the article grid, 21:9 so the text starts sooner */
.post-cover{margin:0 auto;max-width:1036px}
.post-cover > img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:32px;box-shadow:var(--shadow-lg)}
.post-head + .container + .art{padding-top:64px}
.art .body{margin-top:0}

/* article grid: a ~700px reading column next to the contents list */
.art .art-grid{grid-template-columns:minmax(0,700px) 240px}
.art .toc b{color:var(--muted)}

/* contents list on narrow screens: a collapsible "Contents" under the header */
.btoc{display:none;margin:28px auto 0;max-width:700px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.btoc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;cursor:pointer;list-style:none;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-radius:var(--r)}
.btoc summary::-webkit-details-marker{display:none}
.btoc summary svg{width:18px;height:18px;flex:none;transition:transform .25s var(--ease-out)}
.btoc[open] summary svg{transform:rotate(180deg)}
.btoc [data-langs]{padding:0 20px 14px}
.btoc a{display:block;padding:9px 0;border-top:1px solid var(--sand);color:var(--ink);font-size:16px;line-height:1.4}
.btoc a:hover{color:var(--coral-dark)}

/* example box: a text to copy (a prompt, a notes template) */
.body .example{margin:32px 0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.example figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 22px;border-bottom:1px solid var(--line);background:var(--sand)}
.example figcaption > span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ex-copy{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:600 13px/1.2 var(--text);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ex-copy svg{width:15px;height:15px}
.ex-copy:hover{border-color:var(--coral);color:var(--coral-dark)}
.ex-copy.done{background:var(--coral-tint);border-color:var(--coral-tint);color:var(--coral-dark)}
.ex-copy[hidden]{display:none}
.ex-text{padding:20px 24px 22px;font-family:var(--text);font-size:16.5px;line-height:1.65;color:var(--ink)}
.ex-text p{margin:0 0 12px}
.ex-text > :last-child{margin-bottom:0}
.ex-text ol,.ex-text ul{margin:0;padding-left:1.3em}
.ex-text li{margin:8px 0}

/* focus and selection */
.post:focus-visible{outline:none}
.post:focus-visible .cover{outline:3px solid var(--coral);outline-offset:4px}
.toc a:focus-visible,.btoc a:focus-visible,.btoc summary:focus-visible,.crumbs a:focus-visible,.body a:focus-visible,.ex-copy:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
.ex-copy:focus-visible{border-radius:999px}
::selection{background:var(--coral-tint);color:var(--ink)}
.body blockquote{margin:40px 0;padding:0 0 0 28px;border-left:3px solid var(--coral);font-family:var(--head);font-size:clamp(24px,2.4vw,30px);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.body blockquote p{margin:0}

@media (max-width:1024px){
  .posts{grid-template-columns:1fr 1fr}
  .post.feat{grid-template-columns:1fr;gap:28px}
  .art .art-grid{grid-template-columns:minmax(0,700px)}
  .btoc{display:block}
}
@media (max-width:760px){
  .post-head{padding:56px 0 36px}
  .post-cover > img,.post-cover .cv-call{border-radius:24px}
  .post-head + .container + .art{padding-top:40px}
  /* index and "keep reading": compact rows, small cover on the left */
  .posts{grid-template-columns:1fr;gap:0}
  .posts .post{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
  .posts .post:last-child{border-bottom:1px solid var(--line)}
  .posts .post .cover{border-radius:14px;box-shadow:none}
  .posts .post .txt{padding:0;gap:6px}
  .posts .post b{font-size:19px;line-height:1.2}
  .posts .post small{display:none}
  .posts .post .meta{font-size:13px}
  .post.feat{margin-bottom:56px}
  .ex-text{padding:16px 18px 18px;font-size:16px}
  .example figcaption{padding-left:18px}
}

/* "call" cover: a live scene — real faces on a video call, the transcript forming on the Mac, Pip whispering.
   Sized with container units so the same scene works as a small tile and as the big cover of a post. */
.cv-call{position:relative;display:block;aspect-ratio:16/10;background:#0B1020;container-type:inline-size;overflow:hidden}
/* the photos are generated: said on the picture itself (AI Act) */
.cv-ai{position:absolute;left:4.2cqw;bottom:4.2cqw;z-index:3;padding:.3em .6em;border-radius:999px;background:rgba(11,16,32,.6);color:rgba(255,255,255,.82);font:500 max(9px,1.45cqw)/1.2 var(--text);letter-spacing:.01em}
.post-cover .cv-call{aspect-ratio:21/9;border-radius:32px;box-shadow:var(--shadow-lg)}
@media (max-width:760px){.post-cover .cv-call{aspect-ratio:16/10;border-radius:24px}}
.cv-grid{position:absolute;inset:3.2cqw;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.6cqw}
.cv-t{position:relative;border-radius:2.4cqw;overflow:hidden;background:#17181C}
.cv-t img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.cv-t::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 #AAB5F2}
.cv-t.on::after{animation:cvTalk 1.6s ease-in-out infinite}
.cv-av{display:grid;place-items:center;background:linear-gradient(160deg,#EBDDD4,#DFCFC4);container-type:size}
.cv-av>b{width:22cqmin;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#C98A58,#A4643A);color:#fff;font-family:var(--head);font-weight:600;font-size:9cqmin}
/* the transcript sits on the camera-off tile: each line arrives as a loading bar, then the words type into it */
.cv-panel{position:absolute;inset:6cqmin;display:flex;flex-direction:column;justify-content:center;gap:.6em;padding:.8em .9em;border-radius:.8em;background:rgba(255,253,249,.95);box-shadow:0 4cqmin 10cqmin -3cqmin rgba(15,17,21,.4);backdrop-filter:blur(8px);overflow:hidden;font-size:min(7.4cqh,4.3cqw);font-family:var(--body,inherit);font-weight:400}
.cv-head{display:flex;align-items:center;gap:.5em}
.cv-lock{flex:none;width:1.2em;height:1.2em;border-radius:50%;background:#E8573F;position:relative}
.cv-lock::before{content:"";position:absolute;left:28%;right:28%;bottom:24%;height:36%;border-radius:.15em;background:#fff}
.cv-lock::after{content:"";position:absolute;left:36%;right:36%;top:20%;height:30%;border:.16em solid #fff;border-bottom:0;border-radius:.3em .3em 0 0}
.cv-wave{display:flex;align-items:center;gap:.2em;height:1.2em}
.cv-wave i{width:.24em;height:30%;border-radius:.3em;background:#5468D4;animation:cvWave 1.1s ease-in-out infinite;animation-delay:var(--d)}
.cv-lines{display:grid;gap:.4em;justify-items:start}
.cv-lines i{position:relative;display:block;max-width:100%;padding:.28em .55em;border-radius:.5em;background:#ECEDF3;font-style:normal;font-size:1em;line-height:1.2;color:#2A2D36;white-space:nowrap;overflow:hidden;transform-origin:left center;opacity:0;animation:cvBar 7.2s ease-out infinite}
.cv-call .cv-lines i b{font:inherit;font-weight:600;color:#5468D4;margin:0 .25em 0 0;display:inline;letter-spacing:0}
.cv-call .cv-lines i:nth-child(2) b{color:#E8573F}
.cv-lines i>*{display:block;clip-path:inset(0 100% 0 0);animation:cvType 7.2s infinite}
.cv-lines i:nth-child(2)>*{animation-name:cvType2}
.cv-lines i:nth-child(2){animation-name:cvBar2}
.cv-lines i:nth-child(3){animation-name:cvBar3}
.cv-lines i:nth-child(3)>*{animation-name:cvType3}
.cv-lines i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);background-size:250% 100%;animation:cvShim 1.1s linear infinite;opacity:.9;mix-blend-mode:soft-light}
.cv-pip{position:absolute;right:5cqw;top:41%;width:10cqw}
.cv-pip img{width:100%;filter:drop-shadow(0 1cqw 1.4cqw rgba(15,17,21,.3));transform-origin:50% 90%;animation:cvLean 7.2s ease-in-out infinite}
.cv-bub{position:absolute;right:86%;bottom:78%;padding:.9cqw 1.6cqw 1.1cqw;border-radius:1.8cqw 1.8cqw .5cqw 1.8cqw;background:#fff;border:.25cqw solid #0F1115;color:#E8573F;font-family:var(--display);font-variation-settings:"SOFT" 100;font-style:italic;font-weight:600;font-size:2.4cqw;line-height:1;white-space:nowrap;transform-origin:bottom right;animation:cvPsst 7.2s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes cvTalk{0%,100%{box-shadow:inset 0 0 0 .35cqw rgba(174,187,149,.95)}50%{box-shadow:inset 0 0 0 .7cqw rgba(174,187,149,.5)}}
@keyframes cvWave{0%,100%{height:25%}50%{height:100%}}
@keyframes cvBar{0%,3%{opacity:0;transform:scaleX(.25)}8%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes cvBar2{0%,25%{opacity:0;transform:scaleX(.25)}30%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes cvBar3{0%,47%{opacity:0;transform:scaleX(.25)}52%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes cvType{0%,9%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(18,end)}22%,100%{clip-path:inset(0 0 0 0)}}
@keyframes cvType2{0%,31%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(18,end)}44%,100%{clip-path:inset(0 0 0 0)}}
@keyframes cvType3{0%,53%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(18,end)}66%,100%{clip-path:inset(0 0 0 0)}}
@keyframes cvShim{0%{background-position:100% 0}100%{background-position:-50% 0}}
@keyframes cvLean{0%,40%,90%,100%{transform:rotate(0)}48%,80%{transform:rotate(12deg) translateX(-.6cqw)}}
@keyframes cvPsst{0%,44%{opacity:0;transform:scale(.4) rotate(-8deg)}52%,82%{opacity:1;transform:scale(1) rotate(0)}90%,100%{opacity:0;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.cv-call *{animation:none !important}.cv-lines i,.cv-lines i>*{opacity:1;clip-path:none}.cv-bub{opacity:1}}