/* =====================================================
   LATEST INSIGHTS — edge-to-edge photo grid + article reader
   Layers on top of style.css (theme tokens, header, nav, footer)
   ===================================================== */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  --cyan:#0284c7;
  --bar-h:88px;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em;}
.w > span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease-out);transition-delay:calc(.15s + var(--i) * .06s);}

/* ---------- POST GRID ---------- */
.posts{padding-top:var(--bar-h);}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bg);}
.post{
  position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;cursor:pointer;
  border:none;text-align:left;font-family:inherit;color:#fff;background:#0a0a0a;
  animation:postIn .9s var(--ease-out) both;animation-delay:var(--d,0s);
}
@keyframes postIn{from{opacity:0;transform:translateY(36px);}to{opacity:1;transform:none;}}
.post-img{position:absolute;inset:0;overflow:hidden;}
.post-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.4s var(--ease-out),filter .6s ease;}
.post:hover .post-img img{transform:scale(1.07);}
.post::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,14,.38) 0%,rgba(6,8,14,0) 28%,rgba(6,8,14,.12) 52%,rgba(6,8,14,.86) 100%);
  transition:background .5s ease;
}
.post:hover::after{background:linear-gradient(180deg,rgba(6,8,14,.45) 0%,rgba(6,8,14,.08) 28%,rgba(6,8,14,.3) 52%,rgba(6,8,14,.92) 100%);}
.post-author{position:absolute;z-index:3;top:26px;left:26px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;}
.post-author .av{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.3);
}
.post-body{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 26px 26px;}
.post-meta{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:8px;}
.post-meta i{width:5px;height:5px;border-radius:50%;background:var(--blue-light);}
.post-title{
  font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(22px,2.05vw,32px);margin-bottom:18px;max-width:92%;
}
.post-title span{
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 98%;background-size:0 2px;
  transition:background-size .8s var(--ease-out);padding-bottom:2px;
}
.post:hover .post-title span{background-size:100% 2px;}
.cats{display:flex;flex-wrap:wrap;gap:6px;}
.cat{
  font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff;
  background:rgba(120,122,128,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:100px;padding:7px 16px;border:none;transition:background .3s ease;
}
.post:hover .cat{background:rgba(120,122,128,.7);}
.post .cat:hover{background:var(--blue);}
.post:focus-visible{outline:2px solid var(--blue-light);outline-offset:-4px;}

/* shared meta (used by the article reader) */
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font-size:13px;color:rgba(255,255,255,.78);margin-bottom:16px;}
.meta .av{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;
}
.meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.55);}

/* vertical "Follow Us" on the right edge */
.follow{
  position:fixed;right:22px;top:50%;z-index:60;display:flex;align-items:center;gap:8px;
  writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
  font-size:13px;font-weight:600;color:#fff;mix-blend-mode:difference;white-space:nowrap;
}
.follow i{display:block;width:1px;height:34px;background:currentColor;opacity:.7;}
.follow a{transition:opacity .25s ease;}
.follow a:hover{opacity:.55;}

/* =====================================================
   ARTICLE READER (overlay)
   ===================================================== */
.ar{
  position:fixed;inset:0;z-index:300;background:var(--bg);color:var(--text);visibility:hidden;
  clip-path:circle(0px at var(--cx,50%) var(--cy,50%));
  transition:clip-path .95s var(--ease-io),visibility 0s linear .95s;
}
.ar.open{
  visibility:visible;clip-path:circle(150vmax at var(--cx,50%) var(--cy,50%));
  transition:clip-path 1.15s var(--ease-io),visibility 0s;
}
.ar-bar{
  position:absolute;top:0;left:0;right:0;height:var(--bar-h);z-index:6;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 40px;
  background:var(--header-bg);border-bottom:1px solid var(--header-line);
  transform:translateY(-100%);transition:transform .6s var(--ease-out);
}
.ar.open .ar-bar{transform:none;transition-delay:.55s;}
.ar-close{
  justify-self:start;display:inline-flex;align-items:center;gap:12px;background:none;border:1px solid var(--line);border-radius:100px;
  padding:8px 22px 8px 8px;color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.ar-close-icon{
  width:32px;height:32px;border-radius:50%;background:var(--text);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:13px;
  transition:transform .5s var(--ease-out),background .3s ease,color .3s ease;
}
.ar-close:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
.ar-close:hover .ar-close-icon{transform:rotate(180deg);background:#fff;color:var(--blue);}
.ar-bar-title{font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--muted);max-width:44vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ar-bar-nav{justify-self:end;display:flex;gap:10px;}
.ar-bar-nav button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer;font-size:15px;transition:.3s var(--ease-out);
}
.ar-bar-nav button:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.1);}
.ar-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));transform:scaleX(var(--p,0));transform-origin:left;}

.ar-scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-top:var(--bar-h);overscroll-behavior:contain;
  transition:opacity .45s ease,transform .45s ease;
}
.ar-scroll.swapping{opacity:0;transform:translateY(30px);}
.ar-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}

/* article head */
.ar-head{padding:90px 0 54px;max-width:960px;}
.ar-head .cats{margin-bottom:30px;}
.ar-head .cat{border-color:var(--line);background:none;color:var(--text);backdrop-filter:none;}
.ar-head h1{font-size:clamp(34px,5.4vw,84px);line-height:1.04;letter-spacing:-.04em;margin-bottom:34px;}
.ar-head h1 .w > span{transform:translateY(112%);transition:transform 0s;}
.ar.open .ar-head h1 .w > span{transform:none;transition:transform 1.1s var(--ease-out);transition-delay:calc(.85s + var(--i) * .06s);}
.ar-head .cats,.ar-head .meta{opacity:0;transform:translateY(16px);}
.ar.open .ar-head .cats,.ar.open .ar-head .meta{opacity:1;transform:none;transition:opacity .8s ease .75s,transform .8s var(--ease-out) .75s;}
.ar.open .ar-head .meta{transition-delay:1.3s;}
.ar-head .meta{color:var(--muted);margin-bottom:0;}
.ar-head .meta .dot{background:var(--muted-2);}
.ar-head .meta b{color:var(--text);font-weight:600;}

.ar-cover{border-radius:calc(var(--radius) * 1.6);overflow:hidden;aspect-ratio:21/9;background:var(--card);}
.ar-cover img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);transition:transform 0s;}
.ar.open .ar-cover img{transform:scale(1);transition:transform 2.4s var(--ease-out) .5s;}

/* layout with TOC */
.ar-layout{display:grid;grid-template-columns:230px minmax(0,740px);gap:90px;justify-content:center;padding:80px 0 40px;}
.toc{position:sticky;top:calc(var(--bar-h) + 40px);align-self:start;}
.toc-lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;display:block;}
.toc ol{list-style:none;border-left:1px solid var(--line);}
.toc li a{
  display:block;padding:9px 0 9px 20px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--muted);
  transition:color .3s ease,border-color .3s ease,padding-left .4s var(--ease-out);
}
.toc li a:hover{color:var(--text);}
.toc li a.on{color:var(--blue-light);border-left-color:var(--blue);padding-left:26px;}

/* article body typography */
.prose{font-size:18px;line-height:1.85;color:var(--muted);}
.prose{color:#3d3d3d;}
.prose p{margin-bottom:26px;}
.prose .lead{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.3vw,28px);line-height:1.45;letter-spacing:-.015em;color:var(--text);margin-bottom:46px;}
.prose h2{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em;line-height:1.15;color:var(--text);margin:58px 0 20px;scroll-margin-top:120px;}
.prose h2::before{content:attr(data-n);display:block;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.14em;color:var(--blue-light);margin-bottom:12px;}
.prose ul{list-style:none;margin:0 0 30px;}
.prose li{position:relative;padding:14px 0 14px 40px;border-bottom:1px dashed var(--line);}
.prose li::before{
  content:"✓";position:absolute;left:0;top:15px;width:24px;height:24px;border-radius:50%;background:rgba(59,130,246,.16);color:var(--blue-light);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.prose blockquote{
  margin:46px 0;padding:6px 0 6px 34px;border-left:3px solid var(--blue);
  font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,2.4vw,30px);line-height:1.35;letter-spacing:-.02em;color:var(--text);
}
.prose figure{margin:50px 0;}
.prose figure .fimg{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--card);}
.prose figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.6s var(--ease-out);}
.prose figure.in img{transform:scale(1);}
.prose figcaption{font-size:13px;color:var(--muted-2);margin-top:12px;}
.takeaway{
  position:relative;overflow:hidden;margin:54px 0 10px;padding:38px 38px 36px;border-radius:var(--radius);color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
}
.takeaway::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;right:-60px;top:-80px;background:rgba(255,255,255,.12);}
.takeaway span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:10px;position:relative;}
.takeaway p{margin:0;font-family:'Space Grotesk',sans-serif;font-size:21px;line-height:1.4;color:#fff;position:relative;}

.ar-rv{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform 1s var(--ease-out);transition-delay:var(--d,0s);}
.ar-rv.in{opacity:1;transform:none;}

/* footer of article */
.ar-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:34px 0;margin-top:50px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tags a,.tags span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:7px 15px;color:var(--muted);}
.share{display:flex;align-items:center;gap:10px;}
.share > span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:6px;}
.share button,.share a{
  height:42px;padding:0 18px;border-radius:100px;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;transition:.35s var(--ease-out);
}
.share button:hover,.share a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-3px);}
.author{display:flex;gap:22px;align-items:center;padding:40px 0 10px;}
.author .big{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;
}
.author b{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;}
.author p{font-size:15px;color:var(--muted);line-height:1.6;margin:4px 0 0;}

/* related + next */
.related{padding:90px 0 100px;}
.related h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:34px;}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.rel{
  display:flex;gap:22px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  cursor:pointer;color:var(--text);font-family:inherit;transition:transform .5s var(--ease-out),border-color .3s ease;
}
.rel:hover{transform:translateY(-6px);border-color:var(--blue);}
.rel .t{width:140px;aspect-ratio:1;border-radius:8px;overflow:hidden;flex-shrink:0;}
.rel img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out);}
.rel:hover img{transform:scale(1.12);}
.rel small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light);margin-bottom:8px;}
.rel b{font-family:'Space Grotesk',sans-serif;font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:600;}

.ar-next{display:block;width:100%;text-align:left;border:none;cursor:pointer;position:relative;height:66vh;min-height:400px;overflow:hidden;color:#fff;background:#0a0a0a;font-family:inherit;}
.ar-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform 1.4s var(--ease-out),opacity .6s ease;}
.ar-next:hover img{transform:scale(1.07);opacity:.55;}
.ar-next::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,8,14,.88),rgba(6,8,14,.2));}
.ar-next .inner{position:absolute;z-index:2;left:0;right:0;bottom:64px;}
.ar-next .lab{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:18px;}
.ar-next h2{font-size:clamp(30px,4.6vw,72px);letter-spacing:-.035em;line-height:1.05;max-width:1050px;display:flex;align-items:center;gap:30px;}
.ar-next h2 em{
  font-style:normal;flex-shrink:0;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:inline-flex;align-items:center;justify-content:center;font-size:24px;
  transition:transform .6s var(--ease-out),background .3s ease,color .3s ease;
}
.ar-next:hover h2 em{transform:translateX(12px) rotate(-45deg);background:#fff;color:#111;}

.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,30px);z-index:500;background:var(--text);color:var(--bg);
  padding:12px 22px;border-radius:100px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.5s var(--ease-out);
}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .follow{display:none;}
  .ar-layout{grid-template-columns:minmax(0,1fr);gap:0;}
  .toc{display:none;}
  .rel-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  :root{--bar-h:88px;}
  .post-grid{grid-template-columns:1fr;}
  .post-author{top:20px;left:20px;}
  .post-body{padding:0 20px 22px;}
  .ar-bar{padding:0 22px;grid-template-columns:1fr 1fr;}
  .ar-bar-title{display:none;}
  .ar-wrap{padding:0 22px;}
  .ar-head{padding:60px 0 36px;}
  .ar-cover{aspect-ratio:4/3;}
  .ar-layout{padding-top:50px;}
  .prose{font-size:17px;}
  .ar-foot{flex-direction:column;align-items:flex-start;}
  .rel .t{width:96px;}
  .ar-next h2 em{width:44px;height:44px;font-size:18px;}
}
@media(max-width:760px) and (min-width:641px){:root{--bar-h:88px;}}
@media(prefers-reduced-motion:reduce){.post{animation:none !important;opacity:1 !important;transform:none !important;}}

/* =====================================================
   MOBILE READABILITY (<=820px): stacked posts, bigger type
   ===================================================== */
@media(max-width:820px){
  :root{--bar-h:88px;}
  .post-grid{grid-template-columns:1fr;gap:2px;}
  .post{aspect-ratio:4/5;}
  .post-author{top:20px;left:20px;font-size:16px;gap:12px;}
  .post-author .av{width:44px;height:44px;font-size:14px;}
  .post-body{padding:0 22px 24px;}
  .post-meta{font-size:16px;margin-bottom:10px;}
  .post-title{font-size:28px;line-height:1.15;max-width:100%;margin-bottom:18px;}
  .cat{font-size:16px;padding:8px 16px;}
  .follow{display:none;}
}
@media(max-width:760px){
  .ar-bar-title{display:none;}
  .ar-close{font-size:14px;}
  .ar-bar-nav button{width:48px;height:48px;font-size:18px;}
  .ar-head{padding:48px 0 30px;}
  .ar-head h1{font-size:clamp(32px,9.5vw,46px);line-height:1.08;margin-bottom:24px;}
  .meta{font-size:15px;gap:8px 12px;}
  .meta .av{width:40px;height:40px;font-size:14px;}
  .ar-head .cat{font-size:14px;}
  .ar-layout{padding:40px 0 20px;}
  .prose{font-size:19px;line-height:1.75;}
  .prose p{margin-bottom:22px;}
  .prose .lead{font-size:24px;line-height:1.4;margin-bottom:34px;}
  .prose h2{font-size:30px;margin:44px 0 16px;}
  .prose h2::before{font-size:14px;}
  .prose li{padding:14px 0 14px 46px;}
  .prose li::before{width:28px;height:28px;top:14px;font-size:14px;}
  .prose blockquote{font-size:26px;margin:36px 0;padding-left:22px;}
  .prose figcaption{font-size:15px;}
  .takeaway{padding:30px 26px;}
  .takeaway span{font-size:14px;}
  .takeaway p{font-size:23px;}
  .tags a,.tags span{font-size:14px;padding:8px 16px;}
  .share > span{font-size:14px;width:100%;}
  .share{flex-wrap:wrap;}
  .share button,.share a{font-size:16px;height:50px;padding:0 22px;}
  .author .big{width:64px;height:64px;font-size:21px;}
  .author b{font-size:22px;}
  .author p{font-size:17px;}
  .related{padding:60px 0 64px;}
  .related h3{font-size:30px;}
  .rel b{font-size:22px;}
  .rel small{font-size:13px;}
  .ar-next .lab{font-size:14px;}
  .ar-next h2{font-size:30px;gap:16px;}
}