/* Livara Pulse / ultraviolet editorial system */

*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

:root{
  --void:#030105;
  --paper:#07030b;
  --surface:#0c0712;
  --surface-2:#12091c;
  --ink:#f8f4ff;
  --muted:#b1a7ba;
  --quiet:#82778d;
  --line:rgba(218,198,255,.14);
  --line-strong:rgba(218,198,255,.28);
  --violet:#8b5cf6;
  --violet-hot:#b688ff;
  --violet-pale:#d7c2ff;
  --display:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --body:Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --max:1320px;
  --pad:clamp(20px,4vw,64px);
}

html{
  min-width:320px;
  color-scheme:dark;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  background:var(--void);
  scrollbar-color:#7041c4 var(--void);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body{
  min-width:320px;
  min-height:100vh;
  overflow-x:clip;
  color:var(--ink);
  background:
    radial-gradient(65rem 42rem at 83% -8%,rgba(126,67,235,.16),transparent 62%),
    linear-gradient(180deg,#030105 0,#07030b 48%,#030105 100%);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
}
::selection{color:#fff;background:#7040d2}
:focus-visible{outline:2px solid var(--violet-hot);outline-offset:4px}
.pulse-wrap{width:min(calc(100% - var(--pad)*2),var(--max));margin-inline:auto}
.pulse-skip-link{position:fixed;left:16px;top:12px;z-index:300;padding:10px 15px;color:#130722;background:#fff;transform:translateY(-160%)}
.pulse-skip-link:focus{transform:none}
.paper-room{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.45;background-image:linear-gradient(rgba(205,177,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(205,177,255,.035) 1px,transparent 1px);background-size:96px 96px;mask-image:linear-gradient(#000 0,transparent 76%)}

/* Navigation */
.pulse-header{position:sticky;top:0;z-index:100;padding:12px var(--pad) 0}
.pulse-header__in{width:min(100%,var(--max));min-height:68px;margin:auto;padding:8px 10px 8px 15px;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(18px,2.6vw,42px);border:1px solid var(--line);border-radius:18px;background:rgba(6,2,10,.8);box-shadow:0 18px 55px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(20px) saturate(1.2);transition:min-height .2s ease,background .2s ease,border-color .2s ease}
.is-compact .pulse-header__in{min-height:58px;border-color:rgba(210,184,255,.22);background:rgba(5,2,9,.94)}
.pulse-brand{display:inline-flex;align-items:center;gap:10px;width:max-content}
.pulse-brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 13px rgba(160,102,255,.38))}
.pulse-brand>span{display:grid;line-height:1}
.pulse-brand strong{font-family:var(--display);font-size:1.02rem;letter-spacing:-.035em}
.pulse-brand small{margin-top:4px;color:var(--quiet);font-family:var(--mono);font-size:.47rem;letter-spacing:.09em;text-transform:uppercase}
.pulse-edition{display:flex;align-items:center;gap:10px;padding-left:20px;border-left:1px solid var(--line)}
.pulse-edition b{color:var(--violet-hot);font-family:var(--serif);font-size:1.35rem;font-style:italic;font-weight:400;line-height:1}
.pulse-edition span{max-width:17ch;color:var(--quiet);font-family:var(--mono);font-size:.46rem;line-height:1.35;text-transform:uppercase}
.pulse-nav{justify-self:center;display:flex;align-items:center;gap:clamp(16px,1.9vw,28px)}
.pulse-nav a{position:relative;padding:8px 0;color:#aaa0b2;font-size:.76rem;font-weight:700}
.pulse-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:var(--violet-hot);transition:right .2s ease}
.pulse-nav a:hover{color:#fff}
.pulse-nav a:hover::after{right:0}
.pulse-nav a:last-child{color:#c7a9ff}
.pulse-open{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:0 19px;border:1px solid #9668ed;border-radius:999px;color:#fff;background:linear-gradient(120deg,#5927b4,#8450e5);box-shadow:0 10px 30px rgba(98,48,190,.28);font-size:.75rem;font-weight:800;transition:transform .2s ease,box-shadow .2s ease}
.pulse-open:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(114,58,220,.4)}
.pulse-menu{display:none;width:44px;height:44px;padding:0 11px;border:1px solid var(--line-strong);border-radius:50%;background:transparent;cursor:pointer}
.pulse-menu i{display:block;width:100%;height:1px;margin:6px 0;background:#fff}
.island-backdrop{position:fixed;inset:0;z-index:140;background:rgba(2,0,4,.78);opacity:0;backdrop-filter:blur(8px);transition:opacity .24s ease}
.island-backdrop.is-visible{opacity:1}
.island-drawer{position:fixed;inset:12px;z-index:150;overflow:auto;padding:clamp(24px,5vw,62px);border:1px solid rgba(214,190,255,.2);border-radius:26px;background:radial-gradient(circle at 86% 10%,rgba(176,118,255,.23),transparent 30%),linear-gradient(145deg,#170925,#06020a 70%);box-shadow:inset 0 0 110px rgba(103,49,202,.1);opacity:0;transform:translateY(-14px) scale(.985);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.island-drawer.is-visible{opacity:1;transform:none}
.island-drawer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.2);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.island-drawer-head button{min-height:44px;border:0;color:inherit;background:none;cursor:pointer}
.island-drawer nav{display:grid;margin:22px 0 38px}
.island-drawer nav a{display:grid;grid-template-columns:42px 1fr auto;align-items:baseline;min-height:64px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--display);font-size:clamp(2rem,7vw,4.4rem);font-weight:800;letter-spacing:-.055em;line-height:1}
.island-drawer nav span{color:#a684dc;font-family:var(--mono);font-size:.6rem}
.island-drawer nav i{color:var(--violet-hot);font-size:.45em;font-style:normal}
.island-drawer-cta{min-height:56px;display:flex;align-items:center;justify-content:center;padding:0 22px;border:1px solid #b58aff;border-radius:999px;font-weight:800}

/* Pulse cover */
.pulse-masthead{position:relative;overflow:hidden;padding-top:clamp(48px,7vw,90px);border-bottom:1px solid var(--line)}
.pulse-masthead::after{content:"ISSUE 001 / 2026";position:absolute;right:14px;top:42%;color:rgba(212,188,255,.26);font-family:var(--mono);font-size:.48rem;letter-spacing:.18em;writing-mode:vertical-rl}
.pulse-masthead__top{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line-strong);color:#c0b4c8;font-family:var(--mono);font-size:.57rem;letter-spacing:.09em;text-transform:uppercase}
.pulse-masthead__top span{color:var(--quiet)}
.pulse-masthead__stage{min-height:clamp(590px,70vh,740px);display:grid;grid-template-columns:minmax(320px,.86fr) minmax(500px,1.14fr);align-items:center;gap:clamp(34px,5vw,78px);padding-top:clamp(44px,6vw,76px);padding-bottom:clamp(46px,6vw,78px)}
.pulse-masthead__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.pulse-masthead__kicker{display:flex;align-items:center;gap:12px;margin-bottom:clamp(30px,4vw,46px);color:#b8a8c8;font-family:var(--mono);font-size:.56rem;letter-spacing:.11em}
.pulse-masthead__kicker::before{content:"";width:24px;height:1px;background:var(--violet-hot);box-shadow:0 0 11px var(--violet)}
.pulse-masthead__copy h1{font-family:var(--serif);font-size:clamp(7.3rem,13vw,12.5rem);font-style:italic;font-weight:400;letter-spacing:-.105em;line-height:.64;color:#b98dff;background:linear-gradient(105deg,#6f38d9 5%,#bd91ff 63%,#e2d5ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 18px 48px rgba(91,34,181,.2))}
.pulse-masthead__thesis{margin-top:clamp(48px,6vw,72px);font-family:var(--display);font-size:clamp(2.25rem,3.8vw,3.8rem);font-weight:800;letter-spacing:-.06em;line-height:.94}
.pulse-masthead__thesis em{display:block;color:#b88cff;font-family:var(--serif);font-weight:400}
.pulse-masthead__deck{max-width:40ch;margin-top:22px;color:var(--muted);font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.68}
.pulse-masthead__links{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.pulse-masthead__links a{min-height:46px;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;padding:0 18px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(255,255,255,.018);font-size:.72rem;font-weight:800;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.pulse-masthead__links a:first-child{border-color:#9668ed;background:linear-gradient(120deg,#5927b4,#8450e5)}
.pulse-masthead__links a:hover{transform:translateY(-2px);border-color:#b789ff;background:rgba(117,61,219,.24)}
.pulse-masthead__art{position:relative;isolation:isolate;min-width:0}
.pulse-masthead__art::before{content:"";position:absolute;inset:-18px 24px 18px -18px;z-index:-2;border:1px solid rgba(196,158,255,.14);border-radius:32px;background:radial-gradient(circle at 65% 54%,rgba(133,70,238,.22),transparent 48%)}
.pulse-masthead__art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:26px;background:linear-gradient(115deg,rgba(3,1,5,.2),transparent 35%,rgba(3,1,5,.04) 68%,rgba(3,1,5,.48))}
.pulse-masthead__art picture{display:block;overflow:hidden;border:1px solid rgba(218,195,255,.18);border-radius:26px;background:#050208;box-shadow:0 35px 90px rgba(0,0,0,.55),0 0 70px rgba(105,47,207,.1)}
.pulse-masthead__art img{width:100%;aspect-ratio:1.46;object-fit:cover;object-position:63% center;filter:contrast(1.03) saturate(1.03)}
.pulse-masthead__art figcaption,.pulse-masthead__art-code{position:absolute;z-index:2;padding:8px 10px;border:1px solid rgba(212,186,255,.23);color:#d4c5e3;background:rgba(6,2,10,.78);box-shadow:0 12px 34px rgba(0,0,0,.42);backdrop-filter:blur(10px);font-family:var(--mono);font-size:.49rem;line-height:1.5}
.pulse-masthead__art figcaption{left:-10px;top:18%}
.pulse-masthead__art-code{right:-8px;bottom:14%;color:#94889c}
.pulse-masthead__rail{display:flex;align-items:center;gap:clamp(14px,2vw,30px);overflow-x:auto;padding-top:16px;padding-bottom:16px;border-top:1px solid var(--line);color:#8e8396;font-family:var(--mono);font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;scrollbar-width:none}
.pulse-masthead__rail::-webkit-scrollbar{display:none}
.pulse-masthead__rail span,.pulse-masthead__rail a{white-space:nowrap}
.pulse-masthead__rail i{flex:1;min-width:28px;height:1px;background:linear-gradient(90deg,rgba(176,130,255,.34),transparent)}
.pulse-masthead__rail a{color:#c4a7ff}

/* Browse controls */
.pulse-tools{display:grid;grid-template-columns:1fr minmax(280px,.5fr);gap:38px;align-items:end;padding-top:clamp(42px,6vw,72px);padding-bottom:clamp(38px,5vw,62px)}
.pulse-filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-link{min-height:39px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;color:#b7adbf;background:rgba(255,255,255,.02);font-family:var(--mono);font-size:.58rem;text-transform:uppercase}
.filter-link:hover,.filter-link.is-active{color:#fff;border-color:#9363ec;background:rgba(117,61,219,.4)}
.pulse-search{display:grid;gap:7px}
.pulse-search label{color:var(--quiet);font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;text-transform:uppercase}
.pulse-search>div{display:grid;grid-template-columns:1fr 46px;border-bottom:1px solid var(--line-strong)}
.pulse-search input{width:100%;height:46px;border:0;outline:0;color:#f5f0fa;background:transparent;font-size:.84rem}
.pulse-search input::placeholder{color:#746a7c}
.pulse-search button{border:0;color:var(--violet-hot);background:transparent;cursor:pointer;font-size:1.05rem}
.section-rule{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid var(--line-strong);color:#c5b9cc;font-family:var(--mono);font-size:.57rem;letter-spacing:.07em;text-transform:uppercase}
.section-rule i{color:var(--quiet);font-style:normal}

/* Cover story */
.pulse-cover{padding-bottom:clamp(80px,10vw,140px)}
.lead-story{display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border:1px solid rgba(216,192,255,.2);border-radius:28px;background:rgba(11,6,17,.88);box-shadow:0 34px 95px rgba(0,0,0,.43),0 0 0 1px rgba(118,60,225,.05)}
.lead-story__image{position:relative;min-height:500px;overflow:hidden;border-right:1px solid var(--line);background:#07030b}
.lead-story__image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 58%,rgba(7,3,11,.25))}
.lead-story__image img{width:100%;height:100%;object-fit:cover}
.lead-story__badge{position:absolute;left:17px;top:17px;z-index:2;padding:8px 10px;border:1px solid rgba(215,187,255,.32);border-radius:999px;color:#e4d8f3;background:rgba(12,5,20,.78);box-shadow:0 10px 28px rgba(0,0,0,.4);backdrop-filter:blur(10px);font-family:var(--mono);font-size:.54rem;text-transform:uppercase}
.lead-story__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:23px;padding:clamp(28px,4vw,58px)}
.story-meta{display:flex;flex-wrap:wrap;gap:11px 20px;color:#9c91a4;font-family:var(--mono);font-size:.56rem;line-height:1.35;text-transform:uppercase}
.story-meta span{color:#ba91ff;font-weight:700}
.story-meta i{font-style:normal}
.lead-story h2,.archive-main>h2,.related>h2{font-family:var(--display);font-weight:800;letter-spacing:-.057em;line-height:.96}
.lead-story h2{max-width:11ch;font-size:clamp(2.7rem,4.7vw,5.1rem);text-wrap:balance}
.lead-story h2 a:hover{color:#c7a5ff}
.lead-story__copy>p{max-width:43ch;color:var(--muted)}
.story-link{width:fit-content;display:inline-flex;align-items:center;gap:12px;padding-bottom:3px;border-bottom:1px solid currentColor;font-size:.78rem;font-weight:800}
.story-link span{color:var(--violet-hot);transition:transform .18s ease}
.story-link:hover span{transform:translate(3px,-3px)}
.story-link--big{margin-top:8px;font-size:.88rem}
.pulse-empty{min-height:380px;display:grid;place-content:center;gap:16px;padding:38px;border:1px solid var(--line);border-radius:24px;text-align:center;background:var(--surface)}
.pulse-empty>span{color:var(--violet-hot);font-family:var(--serif);font-size:5rem;font-style:italic}
.pulse-empty h2{font-family:var(--display);font-size:2.7rem;letter-spacing:-.055em}

/* Archive */
.pulse-archive{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:clamp(46px,7vw,96px);align-items:start;padding-bottom:clamp(100px,13vw,180px)}
.archive-main>h2{max-width:12ch;margin:clamp(34px,5vw,60px) 0;font-size:clamp(3.3rem,6.4vw,6.4rem);text-wrap:balance}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-strong)}
.story-card{padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--line)}
.story-card:nth-child(odd){padding-right:clamp(16px,3vw,34px);border-right:1px solid var(--line)}
.story-card:nth-child(even){padding-left:clamp(16px,3vw,34px)}
.story-card__image{position:relative;display:block;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#08040c}
.story-card__image img{width:100%;aspect-ratio:1.45;object-fit:cover;filter:saturate(.9) brightness(.92);transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.story-card__image:hover img{transform:scale(1.035);filter:saturate(1.08) brightness(1.02)}
.story-card__image>span{position:absolute;right:9px;bottom:8px;width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(217,195,255,.25);border-radius:50%;color:#fff;background:rgba(77,32,148,.84);font-family:var(--mono);font-size:.52rem}
.story-card__copy{display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding-top:20px}
.story-card h3{font-family:var(--display);font-size:clamp(1.65rem,2.25vw,2.35rem);font-weight:800;letter-spacing:-.052em;line-height:1.04;text-wrap:balance}
.story-card h3 a:hover{color:#bc92ff}
.story-card__copy>p{display:-webkit-box;overflow:hidden;color:var(--muted);font-size:.87rem;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.topic-index{position:sticky;top:96px;overflow:hidden;padding:25px;border:1px solid rgba(216,189,255,.26);border-radius:22px;color:#f5efff;background:radial-gradient(circle at 88% 8%,rgba(204,164,255,.17),transparent 35%),linear-gradient(155deg,#351168,#13051f 76%);box-shadow:0 24px 65px rgba(0,0,0,.4)}
.topic-index>span{color:#c1a6ed;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em}
.topic-index h2{max-width:7ch;margin:38px 0 16px;font-family:var(--serif);font-size:3rem;font-style:italic;font-weight:400;line-height:.92}
.topic-index>p{color:#c8bad4;font-size:.81rem}
.topic-index nav{display:grid;margin:26px 0}
.topic-index nav a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(228,212,255,.14);font-size:.74rem;font-weight:700}
.topic-index nav a:hover,.topic-index nav a.is-active{color:#d5bdff}
.topic-index nav i{font-family:var(--mono);font-size:.56rem;font-style:normal}
.topic-index nav em{color:#aa9bb6;font-size:.76rem}
.topic-index>a{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(229,214,255,.18);font-size:.71rem;font-weight:700}
.topic-index>a i{color:#d0b3ff;font-style:normal}
.pulse-no-results{grid-column:1/-1;padding:64px 0}
.pulse-no-results h3{font-family:var(--display);font-size:2.25rem;letter-spacing:-.05em}
.pulse-no-results p{margin-top:10px;color:var(--muted)}

/* Long-form article */
.article{--accent:var(--violet)}
.article-hero{padding-top:clamp(58px,8vw,108px)}
.article-hero__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:12px 0;border-block:1px solid var(--line-strong);color:#a99fb1;font-family:var(--mono);font-size:.57rem;text-transform:uppercase}
.article-hero__top a{color:#f3edf8;font-weight:700}
.article-hero__top a:last-child{justify-self:end;color:#c5a6ff}
.article-hero__title{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(38px,7vw,105px);align-items:end;padding:clamp(50px,7vw,94px) 0}
.article-number{display:block;margin-bottom:23px;color:var(--accent);font-family:var(--mono);font-size:.59rem;letter-spacing:.08em}
.article-hero h1{max-width:12ch;font-family:var(--display);font-size:clamp(3.8rem,7.2vw,7.5rem);font-weight:800;letter-spacing:-.067em;line-height:.91;text-wrap:balance}
.article-hero__title>p{max-width:38ch;padding-left:22px;border-left:3px solid var(--accent);color:var(--muted);font-size:clamp(1rem,1.4vw,1.18rem)}
.article-hero__meta{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line-strong)}
.article-hero__meta>span{display:grid;gap:4px;padding:17px 15px;border-right:1px solid var(--line);font-size:.76rem;font-weight:700}
.article-hero__meta>span:last-child{border-right:0}
.article-hero__meta small{color:var(--quiet);font-family:var(--mono);font-size:.51rem;font-weight:400;text-transform:uppercase}
.article-cover{position:relative;margin-top:clamp(32px,5vw,64px);overflow:hidden;border:1px solid rgba(215,190,255,.2);border-radius:24px;background:#07030b;box-shadow:0 30px 86px rgba(0,0,0,.46),9px 9px 0 rgba(111,54,216,.18)}
.article-cover img{width:100%;max-height:760px;aspect-ratio:1.6;object-fit:cover}
.article-cover figcaption{position:absolute;right:13px;bottom:12px;padding:7px 9px;border:1px solid rgba(215,189,255,.27);color:#ddd0eb;background:rgba(7,3,12,.8);backdrop-filter:blur(9px);font-family:var(--mono);font-size:.53rem}
.article-shell{display:grid;grid-template-columns:210px minmax(0,760px);justify-content:center;gap:clamp(42px,7vw,100px);align-items:start;padding-top:clamp(68px,9vw,125px);padding-bottom:clamp(84px,11vw,155px)}
.article-toc{position:sticky;top:100px}
.article-toc>span{display:block;padding-bottom:11px;border-bottom:1px solid var(--line-strong);color:#b9a7ca;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em}
.article-toc nav{display:grid;padding-top:8px}
.article-toc a{padding:8px 0;border-bottom:1px solid var(--line);color:#94899c;font-size:.67rem;line-height:1.35}
.article-toc a:hover{color:#c5a5ff}
.article-toc .toc-l3{padding-left:14px}
.article-body{min-width:0}
.article-actions{display:flex;align-items:center;gap:8px;margin-bottom:clamp(44px,6vw,74px);font-family:var(--mono);font-size:.54rem}
.article-actions>span{margin-right:7px;color:var(--quiet)}
.article-actions a,.article-actions button{min-width:42px;height:36px;display:grid;place-items:center;padding:0 9px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;font-family:var(--mono);font-size:.53rem;cursor:pointer}
.article-actions a:hover,.article-actions button:hover{background:#7440d8}
.pull-quote{margin:0 0 clamp(48px,7vw,78px);padding:clamp(27px,5vw,52px);border:1px solid rgba(212,184,255,.27);border-radius:20px;color:#f5edff;background:linear-gradient(145deg,rgba(101,42,198,.4),rgba(18,7,31,.9));box-shadow:8px 8px 0 rgba(121,64,222,.2);font-family:var(--serif);font-size:clamp(1.85rem,3.5vw,3.2rem);font-style:italic;line-height:1.08}

/* Article typography */
.md{color:#cbc2d1;font-family:var(--body);font-size:1.04rem;line-height:1.82}
.md>p:first-child{color:#f0eaf5;font-size:1.18rem;line-height:1.72}
.md h1,.md h2,.md h3,.md h4{scroll-margin-top:105px;color:#f4eff8;font-family:var(--display);font-weight:800;letter-spacing:-.05em}
.md h2{margin:clamp(64px,8vw,96px) 0 23px;padding-top:17px;border-top:1px solid var(--line-strong);font-size:clamp(2.45rem,4.5vw,4rem);line-height:1}
.md h3{margin:48px 0 18px;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.06}
.md h4{margin:34px 0 13px;font-size:1.28rem}
.md p{margin:0 0 24px}
.md strong{color:#f4eff8;font-weight:800}
.md em{font-family:var(--serif);font-size:1.06em}
.md a{color:#bd94ff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.md ul,.md ol{display:grid;gap:10px;margin:26px 0 32px;padding-left:25px}
.md ul{list-style:disc}
.md ol{list-style:decimal}
.md li{padding-left:5px}
.md li::marker{color:#ab7cff;font-weight:800}
.md blockquote{margin:43px 0;padding:3px 0 3px 25px;border-left:6px solid var(--accent);color:#f0eaf5;font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.25rem);font-style:italic;line-height:1.3}
.md hr{margin:62px 0;border:0;border-top:1px solid var(--line-strong)}
.md code{padding:.14em .34em;border:1px solid var(--line);background:#15101b;font-family:var(--mono);font-size:.82em}
.md pre{margin:34px 0;padding:22px;overflow:auto;border:1px solid rgba(203,173,255,.22);border-radius:12px;color:#eee8f8;background:#08040c;box-shadow:6px 6px 0 rgba(105,51,205,.36)}
.md pre code{padding:0;border:0;color:inherit;background:none}
.md table{width:100%;margin:38px 0;border-collapse:collapse;font-size:.81rem}
.md th,.md td{padding:12px 10px;border:1px solid var(--line);text-align:left}
.md th{color:#f1eaff;background:#32125d;font-family:var(--mono);font-size:.58rem;text-transform:uppercase}
.md-figure{margin:43px 0}
.md-figure img{width:100%;height:auto;border:1px solid var(--line-strong);border-radius:15px}
.md-figure figcaption{padding-top:8px;color:var(--quiet);font-family:var(--mono);font-size:.56rem}
.pulse-callout{margin:38px 0;padding:22px;border:1px solid rgba(209,181,255,.26);border-radius:14px;color:#eee7f7;background:linear-gradient(145deg,rgba(92,35,184,.32),rgba(18,7,29,.88));box-shadow:6px 6px 0 rgba(111,54,216,.2)}
.pulse-callout>strong{display:block;margin-bottom:9px;font-family:var(--mono);font-size:.59rem;text-transform:uppercase}
.pulse-callout p:last-child{margin-bottom:0}
.pulse-callout-warn,.pulse-callout-warning{background:linear-gradient(145deg,rgba(112,76,131,.28),rgba(22,12,28,.9))}
.pulse-chart{margin:40px 0;padding:20px;border:1px solid rgba(203,173,255,.22);border-radius:12px;color:#fff;background:#08040c;box-shadow:6px 6px 0 rgba(105,51,205,.36)}
.pulse-chart figcaption{margin-bottom:13px;font-family:var(--mono);font-size:.61rem;text-transform:uppercase}
.pulse-chart svg{width:100%;height:auto}
.chart-error{padding:14px;border:1px solid #9d819f;color:#d9c8dc;background:#27192b}
.article-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:58px 0;padding:22px 25px;border:1px solid rgba(211,185,255,.26);border-radius:14px;color:#f5efff;background:linear-gradient(120deg,#49208e,#6d36d4);box-shadow:7px 7px 0 rgba(116,63,220,.2);font-family:var(--display);font-size:1.35rem;font-weight:800;letter-spacing:-.035em}
.article-cta:hover{background:#8450e7}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;margin:48px 0}
.tag-cloud a{padding:7px 10px;border:1px solid var(--line-strong);border-radius:999px;font-family:var(--mono);font-size:.56rem}
.tag-cloud a:hover{background:#7440d8}
.article-end{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding-top:15px;border-top:1px solid var(--line-strong);color:var(--quiet);font-family:var(--mono);font-size:.53rem;text-transform:uppercase}
.article-end i{height:8px;background:repeating-linear-gradient(90deg,var(--violet) 0 7px,transparent 7px 13px)}
.article-end a{color:#ba98f4}
.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:40px 0 58px}
.compare-card{padding:25px;border:1px solid var(--line);border-radius:17px;background:rgba(11,7,17,.84)}
.compare-card>span{color:var(--quiet);font-family:var(--mono);font-size:.55rem}
.compare-card h3{margin:24px 0 13px;font-family:var(--display);font-size:2.1rem;letter-spacing:-.045em;line-height:1}
.compare-score{color:var(--accent);font-family:var(--serif);font-size:4.5rem;font-style:italic;line-height:1}
.compare-score small{font-family:var(--mono);font-size:.65rem;font-style:normal}
.compare-card .md{margin-top:21px;font-size:.84rem}
.compare-card .md h2{font-size:1.5rem;margin-top:31px}
.compare-verdict{grid-column:1/-1;padding:24px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(91,36,183,.28)}
.compare-verdict strong{font-family:var(--mono);font-size:.58rem}
.compare-verdict p{margin-top:9px}
.related{padding-bottom:clamp(90px,12vw,160px)}
.related>h2{max-width:10ch;margin:40px 0 54px;font-size:clamp(3rem,6vw,5.8rem)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong)}
.related-grid .story-card{padding-right:22px;border-right:1px solid var(--line)}
.related-grid .story-card:nth-child(even){padding-left:22px}
.related-grid .story-card:last-child{padding-right:0;padding-left:22px;border-right:0}

/* Footer */
.pulse-footer{padding:clamp(72px,9vw,122px) 0 25px;border-top:1px solid var(--line);background:radial-gradient(circle at 82% 4%,rgba(119,57,225,.2),transparent 28rem),#020104}
.pulse-footer__in{width:min(calc(100% - var(--pad)*2),var(--max));margin:auto}
.pulse-footer__lead{display:grid;grid-template-columns:1fr auto;align-items:end;padding-bottom:clamp(60px,8vw,105px);border-bottom:1px solid rgba(224,209,255,.14)}
.pulse-footer__lead p{grid-column:1/-1;margin-bottom:16px;color:#b992ff;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.pulse-footer__lead h2{max-width:11ch;font-family:var(--display);font-size:clamp(3.5rem,7.2vw,7.2rem);font-weight:800;letter-spacing:-.062em;line-height:.91}
.pulse-footer__lead>a{width:clamp(70px,8vw,108px);aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(219,199,255,.4);border-radius:50%;font-size:1.8rem;transition:background .2s ease,transform .2s ease}
.pulse-footer__lead>a:hover{background:#7540dd;transform:rotate(9deg)}
.pulse-footer__bar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:36px;padding-top:37px}
.pulse-footer__bar nav{display:flex;flex-wrap:wrap;gap:9px 21px}
.pulse-footer__bar nav a{color:#a99eb2;font-size:.71rem}
.pulse-footer__bar nav a:hover{color:#fff}
.pulse-footer__bar>span{color:#756c7c;font-family:var(--mono);font-size:.53rem}

/* Error states and initial-render containment */
.pulse-hub,.pulse-empty-state{width:min(calc(100% - var(--pad)*2),var(--max));margin:auto;padding:clamp(90px,13vw,180px) 0}
.pulse-empty-state{min-height:55vh;display:grid;place-content:center;text-align:center}
.pulse-empty-state h2{font-family:var(--display);font-size:clamp(2.8rem,6vw,6rem);letter-spacing:-.055em}
.pulse-empty-state p{margin-top:16px;color:var(--muted)}
.pulse-topics-link{display:inline-flex;margin-top:18px;padding-bottom:3px;border-bottom:1px solid currentColor;font-weight:700}
.pulse-cover,.pulse-archive,.related,.pulse-footer{content-visibility:auto}
.pulse-cover{contain-intrinsic-size:900px}
.pulse-archive{contain-intrinsic-size:1200px}
.related{contain-intrinsic-size:750px}
.pulse-footer{contain-intrinsic-size:700px}

@media(max-width:1120px){
  .pulse-nav{display:none}
  .pulse-header__in{grid-template-columns:auto auto 1fr auto auto}
  .pulse-menu{display:block}
  .pulse-masthead__stage{grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr)}
  .pulse-archive{grid-template-columns:minmax(0,1fr) 250px;gap:46px}
  .article-shell{grid-template-columns:185px minmax(0,720px);gap:50px}
}

@media(max-width:820px){
  :root{--pad:clamp(18px,5vw,34px)}
  body{font-size:15.5px}
  .pulse-header{padding-top:8px}
  .pulse-header__in{min-height:58px;grid-template-columns:auto 1fr auto;border-radius:15px}
  .pulse-edition{justify-self:center;padding:0;border:0}
  .pulse-edition span{display:none}
  .pulse-open{display:none}
  .pulse-menu{grid-column:3}
  .pulse-masthead{padding-top:42px}
  .pulse-masthead__stage{min-height:auto;grid-template-columns:1fr;gap:54px;padding-top:50px;padding-bottom:55px}
  .pulse-masthead__copy{max-width:650px}
  .pulse-masthead__copy h1{font-size:clamp(7.4rem,27vw,12rem)}
  .pulse-masthead__art{width:calc(100% + var(--pad));margin-right:calc(var(--pad)*-1)}
  .pulse-masthead__art::before{right:16px}
  .pulse-masthead__rail{width:100%;padding-inline:var(--pad)}
  .pulse-tools{grid-template-columns:1fr;gap:28px}
  .lead-story{grid-template-columns:1fr}
  .lead-story__image{min-height:360px;border-right:0;border-bottom:1px solid var(--line)}
  .pulse-archive{grid-template-columns:1fr}
  .topic-index{position:relative;top:auto}
  .article-hero__title{grid-template-columns:1fr;gap:32px}
  .article-hero__title>p{max-width:54ch}
  .article-hero__top{grid-template-columns:1fr auto}
  .article-hero__top span{display:none}
  .article-shell{grid-template-columns:1fr;padding-top:68px}
  .article-toc{position:relative;top:auto;padding:19px;border:1px solid var(--line-strong);border-radius:13px;background:rgba(79,30,155,.18)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid .story-card:last-child{padding-left:0;border-top:1px solid var(--line)}
  .pulse-footer__bar{grid-template-columns:1fr;gap:24px}
}

@media(max-width:580px){
  .pulse-brand small{display:none}
  .pulse-header__in{gap:12px;padding-left:11px}
  .pulse-masthead::after{display:none}
  .pulse-masthead__top{align-items:flex-start}
  .pulse-masthead__top span{max-width:16ch;text-align:right}
  .pulse-masthead__stage{gap:44px;padding-top:40px;padding-bottom:46px}
  .pulse-masthead__copy h1{font-size:clamp(6.8rem,35vw,9.2rem)}
  .pulse-masthead__thesis{margin-top:44px;font-size:clamp(2.35rem,11vw,3.5rem)}
  .pulse-masthead__links{width:100%}
  .pulse-masthead__links a{flex:1 1 100%}
  .pulse-masthead__art img{aspect-ratio:1.18}
  .pulse-masthead__art figcaption{left:8px;top:9%}
  .pulse-masthead__art-code{right:8px;bottom:8%}
  .pulse-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:7px;scrollbar-width:none}
  .filter-link{white-space:nowrap}
  .lead-story{border-radius:20px}
  .lead-story__image{min-height:270px}
  .lead-story h2{font-size:clamp(2.45rem,12vw,3.8rem)}
  .story-grid{grid-template-columns:1fr}
  .story-card:nth-child(n){padding:27px 0;border-right:0}
  .article-hero h1{font-size:clamp(3.25rem,15vw,5.4rem)}
  .article-hero__meta{grid-template-columns:1fr}
  .article-hero__meta>span{border-right:0;border-bottom:1px solid var(--line)}
  .article-cover{box-shadow:0 23px 62px rgba(0,0,0,.45),6px 6px 0 rgba(111,54,216,.16)}
  .article-cover img{aspect-ratio:1.12}
  .article-actions{flex-wrap:wrap}
  .md{font-size:1rem}
  .md table{display:block;overflow-x:auto}
  .compare-grid{grid-template-columns:1fr}
  .compare-verdict{grid-column:1}
  .article-end{grid-template-columns:1fr}
  .article-end i{width:100%}
  .related-grid{grid-template-columns:1fr}
  .related-grid .story-card:nth-child(n){padding:27px 0;border-right:0}
  .pulse-footer__lead{grid-template-columns:1fr;gap:28px}
  .pulse-footer__lead>a{width:72px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
  .pulse-header,.pulse-footer,.paper-room,.article-actions{display:none!important}
  body{color:#000;background:#fff}
  .pulse-wrap{width:100%}
  .article-shell{display:block}
  .article-toc{display:none}
  .md{color:#222}
  .pulse-cover,.pulse-archive,.related{content-visibility:visible}
}

/* ========================================================================
   LIVARA PULSE / LIQUID OBSIDIAN — 2026 refresh
   The blog is a different Node process, but it must not look like a
   different site. This layer imports the type system, reprints the header
   as the identical liquid component, puts the masthead on true black, and
   stops the cover art from being cropped and dimmed into mush.
   Mirrored from Livara-Chat-ShowCase/src/app/globals.css.
   ======================================================================== */

/* -- 0. The same four faces as every other page ----------------------- */
:root {
  --display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Inter Tight", Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}
body { font-size: 17px; line-height: 1.58; }
h1, h2, h3 { letter-spacing: -0.055em; line-height: 0.94; text-wrap: balance; }

/* -- 1. The header, identical to the rest of the site ----------------- */
.bar { position: sticky; top: 0; z-index: 100; padding: 13px var(--pad) 0; }
.bar__in {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, var(--max));
  min-height: 66px;
  margin-inline: auto;
  padding: 10px 12px 10px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(198, 163, 255, 0.22);
  border-radius: 22px;
  color: #f9f6ff;
  background:
    linear-gradient(
      135deg,
      rgba(150, 100, 255, 0.16) 0%,
      rgba(88, 42, 186, 0.09) 44%,
      rgba(206, 168, 255, 0.13) 100%
    ),
    rgba(9, 4, 16, 0.44);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.5),
    0 2px 10px rgba(96, 44, 196, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -16px 36px rgba(96, 44, 196, 0.14);
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.14);
  backdrop-filter: blur(34px) saturate(190%) brightness(1.14);
  transition: min-height 220ms ease, background 260ms ease, border-color 260ms ease,
    box-shadow 260ms ease;
}
.bar__in::before {
  content: "";
  position: absolute;
  inset: -70% -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 62% at 16% 42%, rgba(171, 118, 255, 0.34), transparent 62%),
    radial-gradient(34% 58% at 58% 58%, rgba(96, 44, 200, 0.32), transparent 64%),
    radial-gradient(30% 52% at 88% 38%, rgba(220, 198, 255, 0.2), transparent 62%);
  filter: blur(20px);
  animation: liquid-drift 22s ease-in-out infinite alternate;
}
.bar__in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(0deg, rgba(146, 96, 246, 0.1), transparent 30%);
}
@keyframes liquid-drift {
  0% { transform: translate3d(-5%, 1%, 0) scale(1); }
  50% { transform: translate3d(4%, -2%, 0) scale(1.1); }
  100% { transform: translate3d(7%, 2%, 0) scale(1.02); }
}
.is-compact .bar__in,
.is-scrolled .bar__in {
  min-height: 58px;
  border-color: rgba(206, 176, 255, 0.3);
  background:
    linear-gradient(
      135deg,
      rgba(150, 100, 255, 0.2) 0%,
      rgba(74, 34, 158, 0.16) 44%,
      rgba(206, 168, 255, 0.16) 100%
    ),
    rgba(7, 3, 12, 0.66);
  box-shadow:
    0 24px 66px rgba(0, 0, 0, 0.62),
    0 0 40px rgba(120, 62, 226, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -16px 36px rgba(110, 54, 214, 0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar__in { background: #0b0513; }
}

.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand__mark { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(166, 116, 255, 0.45)); }
.brand__lockup { display: grid; line-height: 1; }
.brand__name { font-family: var(--display); font-size: 1.08rem; font-weight: 780; letter-spacing: -0.04em; }
.brand__tag { margin-top: 4px; font-family: var(--mono); font-size: 0.52rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #8e829d; }

.bar__nav { justify-self: center; display: flex; align-items: center; gap: clamp(17px, 2.2vw, 34px); }
.bar__nav a { position: relative; padding: 7px 0; font-size: 0.82rem; font-weight: 650; color: #b3a8c2; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: #b992ff; box-shadow: 0 0 10px #8b5cf6; transition: right 180ms ease; }
.bar__nav a:hover, .bar__nav a.is-active { color: #fff; }
.bar__nav a:hover::after, .bar__nav a.is-active::after { right: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid rgba(226, 212, 255, 0.42);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 740;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.btn--fill {
  color: #fff;
  border-color: #9d70ff;
  background: linear-gradient(120deg, #6532ce, #8b5cf6 58%, #aa78ff);
  box-shadow: 0 10px 34px rgba(116, 63, 220, 0.3), inset 0 1px rgba(255, 255, 255, 0.2);
}
.btn--fill:hover { border-color: #c4a7ff; background: linear-gradient(120deg, #7f47eb, #a06eff); box-shadow: 0 13px 42px rgba(132, 70, 240, 0.42); }
.btn--sm { min-height: 44px; padding-inline: 19px; font-size: 0.78rem; }
.burger { display: none; width: 44px; height: 44px; padding: 0 11px; border: 1px solid rgba(214, 190, 255, 0.34); border-radius: 50%; background: rgba(255, 255, 255, 0.04); cursor: pointer; }
.burger i { display: block; width: 100%; height: 2px; margin: 5px 0; background: #fff; }

.island-drawer-head b { font-family: var(--mono); font-weight: 500; }

/* -- 2. True-black masthead and article hero -------------------------- */
.pulse-masthead,
.article-hero {
  position: relative;
  background-color: #000;
  box-shadow: 0 0 0 100vmax #000;
  clip-path: inset(0 -100vmax);
}
.pulse-masthead { border-bottom: 1px solid rgba(219, 200, 255, 0.16); }

/* -- 3. Cover art that is not cropped into nonsense -------------------
   These covers are 16:9 banners, several of them carrying a title. The old
   rules put them in a 500px-tall panel at `object-fit: cover` and then
   dimmed them to 92% brightness, which cut the words off and greyed what
   survived. Now the frame follows the picture instead of the reverse. */
.lead-story { grid-template-columns: 1fr; }
.lead-story__image {
  min-height: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: #06030a;
}
.lead-story__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.lead-story__image::after { background: linear-gradient(180deg, transparent 62%, rgba(6, 3, 10, 0.5)); }
.lead-story__copy { justify-content: flex-start; padding: clamp(26px, 3.4vw, 48px); }

.story-card__image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.story-card__image:hover img { transform: scale(1.03); filter: none; }
.story-card__image { border-color: rgba(216, 192, 255, 0.2); border-radius: 18px; background: #06030a; }

.article-cover { border-radius: 24px; background: #06030a; }
.article-cover img { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }

.pulse-masthead__art img { aspect-ratio: 16 / 10; object-position: 60% center; filter: none; }
.pulse-masthead__art::after { background: linear-gradient(120deg, rgba(3, 1, 5, 0.34), transparent 42%, rgba(3, 1, 5, 0.42)); }

/* -- 4. Archive grid, given room to breathe --------------------------- */
.story-grid { gap: clamp(22px, 3vw, 40px); }
.story-card {
  padding: 0 0 clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}
.story-card:nth-child(odd),
.story-card:nth-child(even) { padding-inline: 0; border-right: 0; }
.story-card__copy { padding-top: 18px; gap: 13px; }
.story-card h3 { font-size: clamp(1.5rem, 2vw, 2.05rem); }
.related-grid .story-card:nth-child(n) { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid var(--line); }

/* -- 5. Phone widths --------------------------------------------------- */
@media (max-width: 1120px) {
  .bar__nav { display: none; }
  .bar__in { grid-template-columns: auto 1fr auto auto; }
  .bar__cta { grid-column: 3; }
  .burger { display: block; grid-column: 4; }
}

@media (max-width: 820px) {
  .bar { padding-top: 8px; }
  .bar__in { min-height: 58px; grid-template-columns: auto 1fr auto; border-radius: 16px; }
  .bar__cta { display: none; }
  .burger { grid-column: 3; }

  .pulse-masthead__stage { min-height: 0; grid-template-columns: 1fr; gap: 26px; }
  .pulse-masthead__copy h1 { font-size: clamp(5rem, 26vw, 8.5rem); }
  .pulse-masthead__thesis { margin-top: 28px; font-size: clamp(1.9rem, 8.4vw, 2.8rem); }
  .pulse-masthead__deck { max-width: none; }
  .pulse-masthead__art { width: 100%; margin-right: 0; }
  .pulse-masthead__art img { aspect-ratio: 3 / 2; }
  .pulse-masthead__art::before { inset: -10px 10px 10px -10px; }
  .pulse-masthead__art figcaption { left: 8px; top: 10px; }
  .pulse-masthead__art-code { right: 8px; bottom: 10px; }
  .pulse-masthead::after { display: none; }
  .pulse-tools { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 600px) {
  .brand__tag { display: none; }
  .pulse-masthead__copy h1 { font-size: clamp(4.4rem, 26vw, 6.6rem); }
  .lead-story { border-radius: 20px; }
  .lead-story h2 { max-width: none; font-size: clamp(2rem, 10vw, 3rem); }
  .story-card h3 { font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .article-cover img { aspect-ratio: 3 / 2; }
  .pulse-masthead__art img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .bar__in::before { animation: none; }
}

/* -- 6. Cover art, corrected ------------------------------------------
   Two fixes. First, `height:auto` is not optional: without it these <img>
   elements keep the intrinsic height from their width/height attributes and
   ignore `aspect-ratio` entirely, which is what produced a 444x480 frame for
   a 16:9 picture and sliced the wordmark off both edges.

   Second, `contain` rather than `cover`. Several covers are banners with a
   headline set into the artwork; `cover` cropped the words. The artwork is
   dark-on-black, so the letterboxing is invisible. */
.story-card__image img,
.lead-story__image img,
.article-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #06030a;
}
.lead-story__image img { max-height: min(52vh, 520px); }
.article-cover img { max-height: min(64vh, 620px); }
.story-card__image { border-radius: 18px; }
.lead-story__image::after { display: none; }

/* The masthead wordmark was letterspaced for Georgia at -.105em. Instrument
   Serif is narrower, so at that tracking the letters collided. */
.pulse-masthead__copy h1 { letter-spacing: -0.03em; line-height: 0.78; }
.pulse-masthead__thesis em { margin-top: 4px; }

/* Same `height:auto` requirement as the cover art above: the masthead
   picture carries width/height attributes and was ignoring its ratio. */
.pulse-masthead__art img { width: 100%; height: auto; }

/* ========================================================================
   v8 — BILINGUAL AURORA EDITION
   The blog now speaks English and فارسی. Persian is detected from the text
   of each post, filtered at /blog?lang=fa, and rendered right-to-left with
   the Vazirmatn face. The same layer carries the aurora masthead, the
   language switch, and the card choreography.
   ======================================================================== */

/* -- 0. Vazirmatn, self-hosted (CSP allows no third-party fonts) -------- */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/pulse-assets/fonts/vazirmatn-regular.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/pulse-assets/fonts/vazirmatn-bold.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011;
}
/* The Arabic-script unicode-range means Vazirmatn only ever supplies Persian
   glyphs, so it can sit at the end of every stack: Persian text set inside a
   mono label or a display headline falls through to it per character. */
:root {
  --display: "Bricolage Grotesque", "Arial Narrow", Arial, "Vazirmatn", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", "Vazirmatn", serif;
  --body: "Inter Tight", Inter, "Helvetica Neue", Arial, "Vazirmatn", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Vazirmatn", monospace;
  --fa: "Vazirmatn", Vazir, Tahoma, "Noto Naskh Arabic", "Segoe UI", sans-serif;
}

/* -- 1. Aurora behind the masthead ------------------------------------- */
.pulse-masthead::before {
  content: "";
  position: absolute;
  inset: -28% -8% auto;
  height: 78%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 16% 34%, rgba(124, 58, 237, 0.3), transparent 62%),
    radial-gradient(36% 48% at 74% 20%, rgba(190, 120, 255, 0.2), transparent 64%),
    radial-gradient(30% 42% at 48% 72%, rgba(88, 40, 180, 0.24), transparent 62%);
  filter: blur(34px);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0% { transform: translate3d(-3%, 2%, 0) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(4%, 2%, 0) scale(1.02); }
}
.pulse-masthead__top,
.pulse-masthead__rail { position: relative; z-index: 1; }
.pulse-masthead__stage { position: relative; z-index: 1; }
.pulse-masthead__copy h1 {
  background-size: 220% 100%;
  animation: wordmark-sheen 9s ease-in-out infinite;
}
@keyframes wordmark-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* -- 2. Bilingual masthead copy ----------------------------------------- */
.pulse-masthead__thesis { margin-top: clamp(30px, 4vw, 48px); }
.pulse-masthead__thesis--fa {
  margin-top: clamp(30px, 4vw, 48px);
  font-family: var(--fa);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  letter-spacing: 0;
  line-height: 1.5;
}
.pulse-masthead__thesis--fa em {
  margin-top: 0;
  font-family: var(--fa);
  font-style: normal;
  color: #b88cff;
}
[dir="rtl"] .pulse-masthead__deck,
[dir="rtl"] .pulse-masthead__kicker,
[dir="rtl"] .pulse-masthead__top { font-family: var(--fa); letter-spacing: 0; text-transform: none; }
.pulse-masthead__deck { text-wrap: pretty; }
.pulse-masthead__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pulse-masthead__stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid rgba(210, 180, 255, 0.22);
  border-radius: 14px;
  background: rgba(10, 4, 18, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  color: #9b8fa8;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pulse-masthead__stats b {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: #dcc9ff;
}
[dir="rtl"] .pulse-masthead__stats span { font-family: var(--fa); text-transform: none; letter-spacing: 0.02em; font-size: 0.66rem; }
[dir="rtl"] .pulse-masthead__rail span { font-family: var(--fa); letter-spacing: 0.02em; text-transform: none; }
[dir="rtl"] .pulse-masthead::after { content: "شمارهٔ ۰۰۱ / ۲۰۲۶"; }

/* -- 3. The language switch ---------------------------------------------
   A segmented glass pill: همه / EN / فا, with live counts. Server-rendered
   links, so it works without scripting and stays crawlable. */
.pulse-tools { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(250px, 0.42fr); gap: clamp(18px, 2.6vw, 34px); align-items: center; }
.pulse-tools__head { display: contents; }
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(206, 176, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(150, 100, 255, 0.14), rgba(88, 42, 186, 0.07)), rgba(8, 3, 14, 0.74);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}
.lang-switch a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-width: 92px;
  padding: 8px 16px;
  border-radius: 999px;
  color: #b6abc2;
  transition: color 200ms ease, background 260ms ease, box-shadow 260ms ease, transform 200ms ease;
}
.lang-switch a b { font-family: var(--fa); font-size: 0.95rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.lang-switch a[data-lang="en"] b { font-family: var(--display); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; }
.lang-switch a small { font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8d829b; white-space: nowrap; }
.lang-switch a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.lang-switch a.is-active {
  color: #fff;
  background: linear-gradient(120deg, #6532ce, #8b5cf6 58%, #aa78ff);
  box-shadow: 0 8px 28px rgba(116, 63, 220, 0.48), inset 0 1px rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.lang-switch a.is-active small { color: rgba(255, 255, 255, 0.82); }

/* -- 4. Card choreography ----------------------------------------------- */
@keyframes card-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.story-grid .story-card {
  animation: card-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(min(var(--card-index, 0), 8) * 70ms);
}
.lead-story { animation: card-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.topic-index { animation: card-rise 0.9s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.story-card__image { transition: border-color 300ms ease, box-shadow 300ms ease; }
.story-card:hover .story-card__image {
  border-color: rgba(196, 158, 255, 0.5);
  box-shadow: 0 20px 58px rgba(106, 50, 215, 0.3), 0 0 0 1px rgba(180, 140, 255, 0.14);
}
.story-card:hover h3 a { color: #cdaaff; }
.story-card__image > span { inset-inline-end: 9px; right: auto; }
.lead-story::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg, rgba(180, 130, 255, 0.55), transparent 30%, transparent 70%, rgba(140, 80, 255, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* -- 5. Persian cards ----------------------------------------------------- */
.lang-flag {
  padding: 3px 10px;
  border: 1px solid rgba(190, 140, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(117, 61, 219, 0.5), rgba(80, 32, 160, 0.28));
  color: #ecdcff;
  font-family: var(--fa);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.story-card--fa .story-card__copy,
.lead-story--fa .lead-story__copy { font-family: var(--fa); }
.story-card--fa .story-meta,
.lead-story--fa .story-meta {
  font-family: var(--fa);
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.story-card--fa h3 {
  font-family: var(--fa);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.55;
  font-size: clamp(1.3rem, 1.8vw, 1.75rem);
}
.story-card--fa .story-link,
.story-card--fa .story-link span { letter-spacing: 0; }
.story-card--fa .story-card__copy > p { line-height: 1.9; font-size: 0.9rem; }
.lead-story--fa h2 {
  max-width: none;
  font-family: var(--fa);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
}
.lead-story--fa .lead-story__copy > p { line-height: 1.9; }
.lead-story--fa .story-link,
.lead-story--fa .story-link span { letter-spacing: 0; }
.pulse-empty h2 { letter-spacing: 0; }
[dir="rtl"] .pulse-empty > span { font-family: var(--fa); font-style: normal; }

/* -- 6. Persian article, right to left ----------------------------------- */
.article--fa { font-family: var(--fa); }
.article--fa h1 {
  max-width: none;
  font-family: var(--fa);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
}
.article--fa .article-number { letter-spacing: 0.04em; }
.article--fa .article-hero__top { font-family: var(--fa); text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; }
.article--fa .article-hero__title > p {
  border-left: 0;
  border-right: 3px solid var(--accent);
  padding-left: 0;
  padding-right: 22px;
  line-height: 1.95;
}
.article--fa .article-hero__meta small { font-family: var(--fa); font-size: 0.62rem; text-transform: none; letter-spacing: 0.02em; }
.article--fa .article-cover figcaption,
.article--fa .article-end { font-family: var(--fa); text-transform: none; letter-spacing: 0.02em; font-size: 0.62rem; }
.article--fa .article-actions > span { font-family: var(--fa); letter-spacing: 0.02em; }
.article--fa .article-toc > span { font-family: var(--fa); text-transform: none; letter-spacing: 0.03em; }
.article--fa .article-toc a { font-family: var(--fa); line-height: 1.8; }
.article--fa .article-toc .toc-l3 { padding-left: 0; padding-right: 14px; }
.article--fa .pull-quote {
  font-family: var(--fa);
  font-style: normal;
  line-height: 1.95;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}
.article--fa .md { font-family: var(--fa); line-height: 2.08; letter-spacing: 0; }
.article--fa .md > p:first-child { line-height: 1.95; }
.article--fa .md h1,
.article--fa .md h2,
.article--fa .md h3,
.article--fa .md h4 { font-family: var(--fa); font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.article--fa .md h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.45; padding-top: 16px; }
.article--fa .md h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.article--fa .md em { font-family: var(--fa); font-style: normal; }
.article--fa .md strong { font-weight: 700; }
.article--fa .md ul,
.article--fa .md ol { padding-left: 0; padding-right: 25px; }
.article--fa .md li { padding-left: 0; padding-right: 5px; }
.article--fa .md blockquote {
  border-left: 0;
  border-right: 6px solid var(--accent);
  padding: 3px 25px 3px 0;
  font-family: var(--fa);
  font-style: normal;
  line-height: 1.9;
}
.article--fa .md th,
.article--fa .md td { text-align: right; }
.article--fa .md th { text-transform: none; font-family: var(--fa); }
.article--fa .compare-card h3 { font-family: var(--fa); letter-spacing: 0; line-height: 1.5; }
.article--fa .compare-card > span,
.article--fa .compare-verdict strong { font-family: var(--fa); text-transform: none; }
.article--fa .article-cta { font-family: var(--fa); letter-spacing: 0; }
.article--fa .pulse-callout > strong { font-family: var(--fa); text-transform: none; letter-spacing: 0.02em; }
.article--fa h2 { font-family: var(--fa); letter-spacing: 0; line-height: 1.5; }

/* -- 7. Responsive -------------------------------------------------------- */
@media (max-width: 1120px) {
  .pulse-tools { grid-template-columns: auto minmax(0, 1fr); }
  .pulse-search { grid-column: 1 / -1; max-width: 560px; }
}
@media (max-width: 820px) {
  .pulse-tools { grid-template-columns: 1fr; }
  .pulse-tools__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  .pulse-filters { flex: 1 1 100%; }
}
@media (max-width: 580px) {
  .lang-switch { width: 100%; justify-content: space-between; }
  .lang-switch a { flex: 1; min-width: 0; padding: 8px 4px; }
  .lang-switch a small { font-size: 0.44rem; }
  .pulse-masthead__stats { gap: 7px; }
  .pulse-masthead__stats span { padding: 8px 11px; }
  .pulse-masthead__thesis--fa { font-size: clamp(1.2rem, 6vw, 1.6rem); }
}

/* -- 8. Motion discipline ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pulse-masthead::before,
  .pulse-masthead__copy h1 { animation: none; }
  .story-grid .story-card,
  .lead-story,
  .topic-index { animation: none; }
}