/* ============================================================
   Night Live — blog stylesheet
   Shared by /blog/ and /fr/blogue/. The two landing pages keep
   their own inline CSS; this file carries the same tokens so the
   chrome matches exactly across both.
   ============================================================ */

:root{
  --bg:#070b14; --bg-2:#0a101d;
  --e1:rgba(255,255,255,.030); --e2:rgba(255,255,255,.055); --e3:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.14);
  --t1:#f3f6fb; --t2:#a4b2ca; --t3:#6d7d99;
  --amber:#ffb020; --amber-2:#ff8a3d; --amber-soft:rgba(255,176,32,.12);
  --green:#3dd68c;
  --flame:linear-gradient(112deg,#ffd166 0%,#ffb020 40%,#ff7a45 100%);
  --r-sm:12px; --r-md:18px; --r-lg:24px;
  --lift:0 28px 60px -28px rgba(0,0,0,.85);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.2,.7,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--t1);
  line-height:1.6;font-size:16px;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
::selection{background:rgba(255,176,32,.3);color:#fff;}
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#1d2942;border-radius:99px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#2b3b5c;}
:is(a,button,summary):focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:24px;top:12px;z-index:200;background:var(--amber);color:#241502;
  padding:10px 18px;border-radius:10px;font-weight:700;}

/* ---------- ambient field (matches the landing page) ---------- */
.aurora{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5;}
.blob.a{width:620px;height:620px;background:rgba(255,138,61,.16);top:-220px;left:-160px;}
.blob.b{width:560px;height:560px;background:rgba(61,110,214,.14);top:38%;right:-220px;}
.gridlines{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.021) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.021) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 78%);}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(7,11,20,.62);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;transition:background .35s var(--ease-2),border-color .35s var(--ease-2),box-shadow .35s;}
.topbar.stuck{background:rgba(7,11,20,.9);border-bottom-color:var(--line);box-shadow:0 12px 30px -20px #000;}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;}
.logo{display:flex;align-items:center;gap:11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:1.42rem;letter-spacing:.04em;text-transform:uppercase;line-height:1;text-decoration:none;}
.logo .mark{width:40px;height:40px;display:block;flex-shrink:0;
  filter:drop-shadow(0 6px 18px rgba(255,138,61,.45));
  transition:transform .55s var(--ease),filter .35s var(--ease-2);}
.logo:hover .mark{transform:rotate(-9deg) scale(1.07);filter:drop-shadow(0 8px 22px rgba(255,138,61,.7));}
.logo b{color:var(--amber);font-weight:700;}
.nav-links{display:flex;gap:28px;font-size:.93rem;font-weight:500;}
.nav-links a{color:var(--t2);text-decoration:none;position:relative;padding:4px 0;transition:color .22s;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--amber);transition:width .32s var(--ease);}
.nav-links a:hover{color:var(--t1);}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%;}
.nav-links a[aria-current]{color:var(--t1);}
.topbar-right{display:flex;align-items:center;gap:14px;}
.langsw{display:flex;gap:2px;background:var(--e2);border:1px solid var(--line);border-radius:999px;padding:3px;}
.langsw a{padding:5px 11px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.05em;
  color:var(--t3);text-decoration:none;transition:color .22s,background .22s;}
.langsw a.on{background:var(--amber-soft);color:var(--amber);}
.langsw a:hover{color:var(--t1);}
.callbtn{display:inline-flex;align-items:center;gap:9px;font-weight:600;text-decoration:none;background:var(--e2);
  border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:.9rem;transition:border-color .25s,background .25s;}
.callbtn:hover{border-color:var(--amber);background:var(--amber-soft);}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(61,214,140,.6);
  animation:pulse 2.2s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,214,140,0);}100%{box-shadow:0 0 0 0 rgba(61,214,140,0);}}
.progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:80;background:var(--flame);
  box-shadow:0 0 12px rgba(255,138,61,.7);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;text-decoration:none;
  border-radius:999px;padding:15px 26px;font-size:1rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;}
.btn svg{width:18px;height:18px;}
.btn-amber{background:var(--flame);color:#241502;box-shadow:0 14px 32px -14px rgba(255,138,61,.85);}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(255,138,61,.95);}
.btn-ghost{background:var(--e2);border:1px solid var(--line);color:var(--t1);}
.btn-ghost:hover{border-color:var(--line-2);transform:translateY(-2px);}

/* ---------- blog index ---------- */
.bloghead{padding:76px 0 40px;}
.kicker{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:14px;}
h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;line-height:1.03;letter-spacing:-.015em;
  font-size:clamp(2.5rem,5.6vw,4rem);text-transform:uppercase;}
.bloghead .lede{color:var(--t2);font-size:1.12rem;max-width:56ch;margin-top:18px;}

.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:26px;padding:26px 0 96px;}
.card{position:relative;display:flex;flex-direction:column;gap:13px;text-decoration:none;
  background:linear-gradient(165deg,var(--e3),rgba(255,255,255,.014));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 26px 26px;overflow:hidden;
  transition:transform .5s var(--ease),border-color .35s,box-shadow .5s var(--ease);}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at var(--mx,50%) var(--my,0%),rgba(255,176,32,.10),transparent 70%);
  opacity:0;transition:opacity .4s var(--ease-2);pointer-events:none;}
.card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--lift);}
.card:hover::before{opacity:1;}
.card .tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);border:1px solid rgba(255,176,32,.26);
  padding:5px 11px;border-radius:999px;}
.card h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.5rem;line-height:1.16;
  text-transform:uppercase;letter-spacing:-.005em;transition:color .3s;}
.card:hover h2{color:var(--amber);}
.card p{color:var(--t2);font-size:.96rem;line-height:1.62;}
.meta{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--t3);margin-top:auto;padding-top:6px;}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--t3);}

/* ---------- article ---------- */
.artwrap{max-width:760px;margin:0 auto;padding:0 24px;}
.crumbs{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--t3);padding:34px 0 0;flex-wrap:wrap;}
.crumbs a{color:var(--t3);text-decoration:none;transition:color .22s;}
.crumbs a:hover{color:var(--amber);}
.arthead{padding:22px 0 34px;border-bottom:1px solid var(--line);margin-bottom:40px;}
.arthead h1{font-size:clamp(2.1rem,4.6vw,3.15rem);text-transform:none;letter-spacing:-.02em;line-height:1.08;}
.arthead .sub{color:var(--t2);font-size:1.1rem;margin-top:18px;line-height:1.6;}
.arthead .meta{margin-top:24px;padding-top:0;}

article{font-size:1.06rem;line-height:1.78;color:#ccd6e6;}
article > * + *{margin-top:1.35em;}
article h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.85rem;line-height:1.16;
  color:var(--t1);text-transform:uppercase;letter-spacing:.005em;margin-top:2.4em;scroll-margin-top:96px;}
article h3{font-weight:700;font-size:1.18rem;color:var(--t1);margin-top:2em;}
article strong{color:var(--t1);font-weight:650;}
article a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(255,176,32,.4);
  transition:border-color .25s,background .25s;}
article a:hover{border-bottom-color:var(--amber);background:rgba(255,176,32,.08);}
article ul,article ol{padding-left:1.3em;}
article li + li{margin-top:.6em;}
article li::marker{color:var(--amber);}
article blockquote{border-left:3px solid var(--amber);padding:4px 0 4px 22px;color:var(--t1);
  font-size:1.12rem;line-height:1.6;}
article table{width:100%;border-collapse:collapse;font-size:.95rem;}
article th,article td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);}
article th{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.07em;
  font-size:.9rem;color:var(--t2);}
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.callout{background:linear-gradient(165deg,rgba(255,176,32,.10),rgba(255,138,61,.03));
  border:1px solid rgba(255,176,32,.26);border-radius:var(--r-md);padding:24px 26px;}
.callout p{margin:0;}
.callout p + p{margin-top:.8em;}

.artcta{margin:72px 0 0;padding:38px 34px;border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(165deg,var(--e3),rgba(255,255,255,.015));border:1px solid var(--line);}
.artcta h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.9rem;text-transform:uppercase;margin:0 0 12px;}
.artcta p{color:var(--t2);margin:0 auto 24px;max-width:44ch;}
.artcta .btn{width:auto;}

.morerow{padding:80px 0 96px;}
.morerow h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.5rem;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:22px;color:var(--t2);}

footer{padding:36px 0;border-top:1px solid var(--line);color:var(--t3);font-size:.88rem;margin-top:20px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;}
footer a{color:var(--amber);text-decoration:none;}

.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(7,11,20,.92);
  backdrop-filter:blur(16px);border-top:1px solid var(--line);}
.mobilebar .btn{flex:1;padding:14px 16px;font-size:.95rem;}

/* ============================================================
   MOTION
   Reveals run on the scroll timeline where the browser supports
   it, so they track the scrollbar instead of firing once. The
   .is-in class is the JS fallback for everyone else.
   ============================================================ */
[data-anim]{opacity:0;transform:translateY(22px);}
[data-anim].is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease-2),transform .8s var(--ease);}
[data-anim]:nth-child(2){transition-delay:.06s;}
[data-anim]:nth-child(3){transition-delay:.12s;}
[data-anim]:nth-child(4){transition-delay:.18s;}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [data-anim]{animation:reveal linear both;animation-timeline:view();
      animation-range:entry 8% cover 26%;}
    [data-anim].is-in{transition:none;}
  }
}
@keyframes reveal{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* cross-page transitions: the header and logo stay put while the
   body content cross-fades, so blog -> article feels like one app */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .28s var(--ease-2) both;}
::view-transition-new(root){animation:vt-in .42s var(--ease) both;}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px);}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px);}}
.topbar,.logo .mark{view-transition-name:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;}
  [data-anim]{opacity:1!important;transform:none!important;}
  @view-transition{navigation:none;}
}

/* ---------- responsive ---------- */
@media (max-width:980px){ .nav-links{display:none;} }
@media (max-width:880px){
  .bloghead{padding:56px 0 30px;}
  .postgrid{grid-template-columns:1fr;gap:20px;}
}
@media (max-width:768px){
  .mobilebar{display:flex;}
  body{padding-bottom:86px;}
  .callbtn .label{display:none;}
  .artcta{padding:32px 22px;}
  article{font-size:1.02rem;}
}