/* ===== Xav Blog Single - 4 layouts (.xs--1 .. .xs--4) ===== */
.xs{--xs-p:var(--xav-primary,#3d7a6b);--xs-d:var(--xav-dark,#1f3a33);--xs-l:var(--xav-light,#f3f8f6);--xs-t:var(--xav-text,#44514d);--xs-a:var(--psy-accent,#c9835a);--xs-serif:var(--psy-serif,Georgia,serif);--xs-ease:cubic-bezier(.2,.7,.2,1);--xs-line:color-mix(in srgb,var(--xs-d) 10%,transparent);--xs-sh:0 30px 60px -36px color-mix(in srgb,var(--xs-d) 55%,transparent);position:relative;color:var(--xs-t);font-size:17px;line-height:1.75}
.xs *,.xs *:before,.xs *:after{box-sizing:border-box}
.xs a{transition:color .25s,background .25s,border-color .25s,transform .3s var(--xs-ease),box-shadow .3s}
.xs h1,.xs h2,.xs h3,.xs h4,.xs h5{color:var(--xs-d);font-family:var(--xs-serif);margin:0}
.xs img{max-width:100%;height:auto}
.xs-wrap{width:100%;max-width:var(--xav-container,1200px);margin:0 auto;padding:0 20px}
.xs-wrap--xl{max-width:1180px}.xs-wrap--lg{max-width:1060px}.xs-wrap--md{max-width:880px}.xs-wrap--sm{max-width:780px}

/* ---- progress ---- */
.xs-progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:99998;background:transparent;pointer-events:none}
.xs-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--xs-p),var(--xs-a));border-radius:0 4px 4px 0}
.admin-bar .xs-progress{top:32px}@media(max-width:782px){.admin-bar .xs-progress{top:46px}}

/* ---- shared bits ---- */
.xs-eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--xs-p)}
.xs-eyebrow:before{content:"";width:28px;height:2px;border-radius:2px;background:var(--xs-a)}
.xs-cat{display:inline-block;padding:8px 16px;border-radius:99px;background:color-mix(in srgb,var(--xs-p) 10%,#fff);color:var(--xs-p);font:700 12px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.xs-cat:hover{background:var(--xs-p);color:#fff}
.xs-title{font-size:clamp(34px,4.6vw,60px);line-height:1.08;letter-spacing:-.015em;font-weight:600;margin:18px 0}
.xs-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.75;color:color-mix(in srgb,var(--xs-t) 92%,#000);margin:0 0 30px}
.xs-lead--xl{font:500 clamp(24px,2.7vw,36px)/1.4 var(--xs-serif);color:var(--xs-d);letter-spacing:-.01em}
.xs-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:14.5px}
.xs-meta li{display:inline-flex;align-items:center;gap:8px;margin:0}
.xs-meta i{color:var(--xs-p)}.xs-meta a{color:inherit;font-weight:600}.xs-meta a:hover{color:var(--xs-p)}
.xs-meta--pills{justify-content:center;gap:10px}
.xs-meta--pills li{padding:9px 16px;border-radius:99px;background:var(--xs-l);border:1px solid var(--xs-line)}
.xs-meta--pills .m-author{padding:5px 18px 5px 5px;gap:10px}
.xs-meta .m-author span{display:flex;flex-direction:column;line-height:1.2;text-align:left}.xs-meta .m-author small{font-size:11px;opacity:.65;text-transform:uppercase;letter-spacing:.08em}
.xs-ava{border-radius:50%;object-fit:cover;display:block;flex:none;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--xs-line)}
.xs-meta .xs-ava{width:38px;height:38px}
.xs-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:99px;background:var(--xs-p);color:#fff;font:600 15px/1 system-ui,sans-serif;box-shadow:0 18px 32px -18px var(--xs-p)}
.xs-btn i{transition:transform .3s}.xs-btn:hover{background:var(--xs-d);color:#fff;transform:translateY(-3px)}.xs-btn:hover i{transform:translateX(4px)}
.xs-btn--ghost{background:transparent;color:var(--xs-d);box-shadow:inset 0 0 0 1.5px var(--xs-line)}.xs-btn--ghost:hover{background:var(--xs-d);color:#fff}
.xs-link{display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:14.5px}.xs-link i{transition:transform .3s}.xs-link:hover i{transform:translateX(4px)}
.xs-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.xs-tags>i{color:var(--xs-a);margin-right:4px}
.xs-tags a{padding:7px 14px;border-radius:99px;border:1px solid var(--xs-line);font-size:13.5px;color:var(--xs-t)}.xs-tags a:hover{background:var(--xs-p);border-color:var(--xs-p);color:#fff;transform:translateY(-2px)}
.xs-foot{display:flex;flex-wrap:wrap;gap:18px 26px;justify-content:space-between;align-items:center;margin:46px 0 0;padding:26px 0;border-top:1px solid var(--xs-line);border-bottom:1px solid var(--xs-line)}
.xs-share{display:flex;gap:10px;align-items:center}.xs-share-l{font:700 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.xs-share a,.xs-share button{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--xs-l);color:var(--xs-d);border:1px solid var(--xs-line);cursor:pointer;padding:0;font-size:15px;transition:transform .3s var(--xs-ease),background .25s,color .25s}
.xs .xs-share button.xs-copy{width:42px;height:42px;min-width:42px;min-height:42px;padding:0;margin:0;border-radius:50%;line-height:1;display:grid;place-items:center;font:inherit;text-transform:none;letter-spacing:0;background:var(--xs-l);color:var(--xs-d);border:1px solid var(--xs-line);box-shadow:none}
.xs-copy svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xs-copy .ic-ok{display:none}.xs-copy.is-copied .ic-link{display:none}.xs-copy.is-copied .ic-ok{display:block}
.xs-share a:hover,.xs .xs-share button.xs-copy:hover{background:var(--xs-p);color:#fff;border-color:var(--xs-p);transform:translateY(-4px) rotate(-6deg)}
.xs-share [data-tip]:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);background:var(--xs-d);color:#fff;font:600 11.5px/1 system-ui,sans-serif;padding:7px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:.25s}
.xs-share [data-tip]:hover:after,.xs-share .is-copied:after{opacity:1;transform:translate(-50%,0)}
.xs .xs-share button.xs-copy.is-copied{background:var(--xs-p);border-color:var(--xs-p);color:#fff;transform:none}
.xs-figure{margin:0;overflow:hidden;position:relative;background:var(--xs-l)}
.xs-figure .xs-img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--xs-ease)}
.xs-figure.is-in .xs-img,.xs-figure:not([data-xs-ready]) .xs-img{transform:scale(1)}
.xs-figure.is-empty{display:none}

/* ---- entry typography ---- */
.xs-entry{font-size:clamp(17px,1.35vw,18.5px);line-height:1.9}
.xs-entry>*:first-child{margin-top:0}
.xs-entry p{margin:0 0 1.5em}
.xs-entry h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin:1.8em 0 .55em;letter-spacing:-.01em;font-weight:600;scroll-margin-top:110px}
.xs-entry h3{font-size:clamp(23px,2.2vw,29px);margin:1.6em 0 .5em;scroll-margin-top:110px}
.xs-entry h4{font-size:21px;margin:1.4em 0 .4em}
.xs-entry a{color:var(--xs-p);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--xs-p) 40%,transparent);text-underline-offset:4px}.xs-entry a:hover{text-decoration-color:var(--xs-p)}
.xs-entry img{border-radius:18px}
.xs-entry figure{margin:2em 0}.xs-entry figcaption{font-size:14px;opacity:.7;text-align:center;margin-top:10px}
.xs-entry ul,.xs-entry ol{margin:0 0 1.6em;padding-left:0;list-style:none}
.xs-entry ul li{position:relative;padding-left:32px;margin:0 0 .7em}
.xs-entry ul li:before{content:"";position:absolute;left:4px;top:.72em;width:10px;height:10px;border-radius:50%;background:var(--xs-a);box-shadow:0 0 0 5px color-mix(in srgb,var(--xs-a) 20%,transparent)}
.xs-entry ol{counter-reset:xo}.xs-entry ol li{counter-increment:xo;position:relative;padding-left:46px;margin:0 0 .9em}
.xs-entry ol li:before{content:counter(xo);position:absolute;left:0;top:.1em;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--xs-p);color:#fff;font:700 14px/1 system-ui,sans-serif}
.xs-entry blockquote{position:relative;margin:2.2em 0;padding:34px 38px 34px 44px;border-radius:22px;background:var(--xs-l);border-left:4px solid var(--xs-a);font:italic 500 clamp(21px,2vw,26px)/1.5 var(--xs-serif);color:var(--xs-d)}
.xs-entry blockquote p{margin:0}.xs-entry blockquote cite{display:block;margin-top:14px;font:600 14px/1 system-ui,sans-serif;font-style:normal;color:var(--xs-p)}
.xs-entry table{width:100%;border-collapse:collapse;margin:0 0 1.8em;font-size:16px;display:block;overflow-x:auto}
.xs-entry th,.xs-entry td{padding:12px 16px;border-bottom:1px solid var(--xs-line);text-align:left}.xs-entry th{background:var(--xs-l);color:var(--xs-d)}
.xs-entry pre,.xs-entry code{font-size:.9em;background:var(--xs-l);border-radius:8px}.xs-entry code{padding:2px 7px}.xs-entry pre{padding:20px;overflow:auto}
.xs-entry hr{border:0;height:1px;background:var(--xs-line);margin:2.6em 0}
.xs-dropcap>p:first-of-type:first-letter{float:left;font:600 5.4em/.78 var(--xs-serif);color:var(--xs-p);padding:.08em .12em 0 0}

/* ---- author / nav / related / comments (shared) ---- */
.xs-author{display:flex;gap:26px;align-items:center;margin:44px 0 0;padding:32px;border-radius:26px;background:linear-gradient(135deg,var(--xs-l),#fff);border:1px solid var(--xs-line);box-shadow:var(--xs-sh)}
.xs-author .xs-ava{width:100px;height:100px}.xs-author small,.xs-strip small,.xs-acard small{font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--xs-a)}
.xs-author h4{font-size:26px;margin:8px 0 6px}.xs-author h4 a{color:inherit}.xs-author p{margin:0 0 10px;font-size:15.5px}
.xs-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:50px 0}
.xs-nav a{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:128px;padding:24px 28px;border-radius:22px;background:var(--xs-l);border:1px solid var(--xs-line);color:var(--xs-d)}
.xs-nav a:before{content:"";position:absolute;inset:0;background:var(--xs-bg) center/cover;opacity:0;transition:opacity .5s,transform .8s var(--xs-ease);transform:scale(1.1)}
.xs-nav a:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,color-mix(in srgb,var(--xs-d) 88%,transparent),color-mix(in srgb,var(--xs-d) 55%,transparent));opacity:0;transition:opacity .5s}
.xs-nav a>*{position:relative;z-index:1;transition:color .4s}
.xs-nav a:hover{transform:translateY(-5px);box-shadow:var(--xs-sh)}.xs-nav a:hover:before,.xs-nav a:hover:after{opacity:1;transform:none}.xs-nav a:hover *{color:#fff}
.xs-nav small{font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--xs-p)}.xs-nav b{font:600 20px/1.3 var(--xs-serif)}
.xs-nav-next{text-align:right;align-items:flex-end}
.xs-related{margin:70px 0 0}.xs-related-head{margin:0 0 30px;text-align:center}.xs-related-head h3{font-size:clamp(28px,3vw,40px);margin-top:14px}
.xs-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.xs-rc{background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--xs-line);box-shadow:0 18px 40px -30px color-mix(in srgb,var(--xs-d) 60%,transparent);transition:transform .45s var(--xs-ease),box-shadow .45s}
.xs-rc:hover{transform:translateY(-8px);box-shadow:var(--xs-sh)}
.xs-rc .th{display:block;aspect-ratio:16/11;background:linear-gradient(135deg,var(--xs-p),var(--xs-d)) center/cover no-repeat;transition:transform .9s var(--xs-ease)}
.xs-rc{--clip:1}.xs-rc .th{transform-origin:center}.xs-rc:hover .th{transform:scale(1.06)}
.xs-rc .th{margin:0;position:relative}.xs-rc{display:flex;flex-direction:column}
.xs-rc .bd{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;background:#fff;position:relative;z-index:1}
.xs-rc .ct{font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--xs-a)}
.xs-rc h4{font-size:21px;line-height:1.28}.xs-rc h4 a{color:var(--xs-d)}.xs-rc h4 a:hover{color:var(--xs-p)}.xs-rc .mt{font-size:13px;opacity:.65}
.xs-rl{display:grid;grid-template-columns:70px 1fr 48px;gap:20px;align-items:center;padding:24px 8px;border-bottom:1px solid var(--xs-line);color:var(--xs-d)}
.xs-rl .no{font:600 40px/1 var(--xs-serif);color:color-mix(in srgb,var(--xs-a) 70%,transparent);transition:transform .4s var(--xs-ease)}
.xs-rl small{display:block;font:700 11.5px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--xs-p);margin-bottom:8px}.xs-rl b{font:600 clamp(19px,2vw,25px)/1.25 var(--xs-serif)}
.xs-rl .go{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--xs-line);transition:.35s var(--xs-ease)}
.xs-rl:hover{padding-left:20px;color:var(--xs-p)}.xs-rl:hover .no{transform:scale(1.15)}.xs-rl:hover .go{background:var(--xs-p);border-color:var(--xs-p);color:#fff;transform:rotate(-45deg)}
.xs-related--list .xs-related-grid{display:block;border-top:1px solid var(--xs-line)}.xs-related--list .xs-related-head{text-align:left}
.xs-comments{margin:60px 0 0;padding-top:10px}
.xs-comments h2,.xs-comments h3,.xs-comments .comment-reply-title{font-size:30px;margin:0 0 20px}
.xs-comments .comment-list{list-style:none;padding:0;margin:0 0 30px}.xs-comments .comment-body{padding:20px 24px;background:var(--xs-l);border-radius:18px;margin-bottom:14px}
.xs-comments textarea,.xs-comments input[type=text],.xs-comments input[type=email],.xs-comments input[type=url]{width:100%;max-width:100%;padding:14px 18px;border:1.5px solid var(--xs-line);border-radius:14px;font:inherit;background:#fff;transition:border-color .25s,box-shadow .25s}
.xs-comments textarea:focus,.xs-comments input:focus{outline:0;border-color:var(--xs-p);box-shadow:0 0 0 4px color-mix(in srgb,var(--xs-p) 15%,transparent)}
.xs-comments label{display:block;font-weight:600;margin-bottom:6px;font-size:14.5px}.xs-comments p{margin:0 0 16px}
.xs-comments .submit{border:0;cursor:pointer;padding:15px 30px;border-radius:99px;background:var(--xs-p);color:#fff;font:600 15px/1 system-ui,sans-serif;transition:.3s}.xs-comments .submit:hover{background:var(--xs-d);transform:translateY(-3px)}

/* ---- reveal animations ---- */
.xs-js .xs-rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--xs-ease) var(--xs-dl,0ms),transform .9s var(--xs-ease) var(--xs-dl,0ms)}
.xs-js .xs-rv.is-in{opacity:1;transform:none}
.xs-js .xs-title{animation:xsUp 1s var(--xs-ease) both}.xs-js .xs-lead--xl{animation:xsUp 1s .15s var(--xs-ease) both}
@keyframes xsUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes xsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ============ LAYOUT 1 - Editorial Centered ============ */
.xs--1{padding:clamp(48px,6vw,84px) 0 clamp(60px,7vw,100px)}
.xs--1 .xs-head{text-align:center;margin-bottom:38px}
.xs--1 .xs-title{margin-bottom:22px}
.xs--1 .xs-lead{max-width:680px;margin:0 auto 26px}
.xs--1 .xs-figure--wide{aspect-ratio:16/8.5;border-radius:30px;box-shadow:var(--xs-sh);margin-bottom:clamp(40px,5vw,64px)}
.xs--1 .xs-foot{justify-content:space-between}
.xs--1 .xs-entry h2{position:relative;padding-top:18px}
.xs--1 .xs-entry h2:before{content:"";position:absolute;top:0;left:0;width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--xs-p),var(--xs-a));transition:width .8s var(--xs-ease)}
.xs--1 .xs-entry h2:hover:before{width:96px}

/* ============ LAYOUT 2 - Sidebar + Live Contents ============ */
.xs--2{padding:clamp(40px,5vw,70px) 0 clamp(60px,7vw,100px)}
.xs--2 .xs-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:clamp(30px,4.5vw,64px);align-items:start}
.xs--2 .xs-head{margin-bottom:26px}.xs--2 .xs-title{font-size:clamp(32px,3.8vw,48px);margin-top:0}
.xs--2 .xs-meta--line{padding-bottom:22px;border-bottom:1px solid var(--xs-line)}
.xs--2 .xs-figure--round{aspect-ratio:16/9;border-radius:26px;margin:0 0 34px;box-shadow:var(--xs-sh)}
.xs--2 .xs-side-in{position:sticky;top:110px;display:flex;flex-direction:column;gap:22px}
.xs-side-box{background:#fff;border:1px solid var(--xs-line);border-radius:24px;padding:26px;box-shadow:0 20px 44px -34px color-mix(in srgb,var(--xs-d) 60%,transparent)}
.xs-side-box h5{font-size:20px;margin:0 0 16px}
.xs-toc-h{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;padding:0;margin:0 0 14px;cursor:default;font:700 13px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--xs-d)}
.xs-toc-h i{color:var(--xs-a)}.xs-toc-h em{display:none;margin-left:auto;width:9px;height:9px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);transition:transform .3s}
.xs-toc ol{list-style:none;margin:0;padding:0 0 0 18px;position:relative;counter-reset:none}
.xs-toc ol:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:var(--xs-line)}
.xs-toc ol:after{content:"";position:absolute;left:0;top:var(--xs-ty,4px);height:var(--xs-th,0);width:2px;border-radius:2px;background:var(--xs-p);transition:top .45s var(--xs-ease),height .45s var(--xs-ease)}
.xs-toc li{margin:0}.xs-toc a{display:flex;gap:12px;padding:8px 0;font-size:14.5px;line-height:1.4;color:var(--xs-t)}
.xs-toc a span{font:700 12px/1.9 system-ui,sans-serif;color:var(--xs-a);min-width:22px}
.xs-toc a:hover,.xs-toc a.is-active{color:var(--xs-p);transform:translateX(4px)}.xs-toc a.is-active{font-weight:700}
.xs-acard{text-align:center}.xs-acard .xs-ava{width:92px;height:92px;margin:0 auto 14px}.xs-acard h5{margin:8px 0 8px}.xs-acard h5 a{color:inherit}.xs-acard p{font-size:14.5px;margin:0}
.xs-cta{position:relative;overflow:hidden;border:0;border-radius:24px;padding:30px;background:linear-gradient(145deg,var(--xs-p),var(--xs-d));color:#fff}
.xs-cta:before{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);animation:xsFloat 6s ease-in-out infinite}
.xs-cta>*{position:relative}.xs-cta .xs-eyebrow{color:#f1c8ad}.xs-cta .xs-eyebrow:before{background:#f1c8ad}
.xs-cta h4{color:#fff;font-size:25px;line-height:1.2;margin:14px 0 10px}.xs-cta p{margin:0 0 20px;opacity:.85;font-size:15px}
.xs-cta .xs-btn{background:#fff;color:var(--xs-d);box-shadow:none}.xs-cta .xs-btn:hover{background:var(--xs-a);color:#fff}
.xs-recent a{display:flex;gap:14px;align-items:center;padding:10px 0;color:var(--xs-d)}.xs-recent a+a{border-top:1px solid var(--xs-line)}
.xs-recent .th{flex:none;width:68px;height:68px;border-radius:16px;background:linear-gradient(135deg,var(--xs-p),var(--xs-d)) center/cover;transition:transform .4s var(--xs-ease)}
.xs-recent a:hover .th{transform:scale(1.07) rotate(-3deg)}.xs-recent b{display:block;font:600 16px/1.3 var(--xs-serif)}.xs-recent small{opacity:.6;font-size:12.5px}.xs-recent a:hover b{color:var(--xs-p)}
.xs-mtoc{display:none}

/* ============ LAYOUT 3 - Magazine Overlap ============ */
.xs--3{padding:0 0 clamp(60px,7vw,100px);z-index:2}
.xs--3 .xs-hero{position:relative;margin-bottom:clamp(30px,4vw,50px)}
.xav-has-banner .xs--3 .xs-hero{margin-top:calc(-1 * clamp(22px,3.6vw,52px))}
.xs--3 .xs-hero:not(:has(.xs-figure)){margin-top:0}
.xs--3 .xs-figure--hero{aspect-ratio:21/9;border-radius:32px;box-shadow:0 50px 80px -44px color-mix(in srgb,var(--xs-d) 70%,transparent);border:8px solid #fff}
.xs--3 .xs-hero-card{position:relative;width:min(760px,calc(100% - 40px));margin:-72px auto 0;padding:34px 40px;border-radius:26px;background:#fff;border:1px solid var(--xs-line);box-shadow:var(--xs-sh);text-align:center}
.xs--3 .xs-hero-card .xs-title{font-size:clamp(28px,3.4vw,44px);margin:16px 0}.xs--3 .xs-meta--line{justify-content:center}
.xs--3 .xs-body{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(20px,4vw,56px);margin-top:50px}
.xs--3 .xs-rail{position:relative}.xs--3 .xs-share--v{position:sticky;top:130px;flex-direction:column}
.xs--3 .xs-share--v [data-tip]:after{bottom:auto;left:calc(100% + 10px);top:50%;transform:translate(6px,-50%)}
.xs--3 .xs-share--v [data-tip]:hover:after,.xs--3 .xs-share--v .is-copied:after{transform:translate(0,-50%)}
.xs--3 .xs-col{max-width:760px}
.xs--3 .xs-lead{padding-left:22px;border-left:4px solid var(--xs-a);font-style:italic}
.xs--3 .xs-foot{border-bottom:0;padding-bottom:0}
.xs--3 .xs-entry h2{padding-left:20px;border-left:4px solid var(--xs-a);transition:padding .4s var(--xs-ease),border-color .3s}.xs--3 .xs-entry h2:hover{padding-left:30px;border-color:var(--xs-p)}
.xs-strip{display:flex;gap:24px;align-items:center;margin:36px 0 0;padding:28px 30px;border-radius:26px;background:var(--xs-d);color:#e9efec}
.xs-strip .xs-ava{width:84px;height:84px;box-shadow:0 0 0 3px var(--xs-a)}.xs-strip h4{color:#fff;font-size:24px;margin:8px 0 6px}.xs-strip h4 a{color:#fff}.xs-strip p{margin:0;font-size:14.5px;opacity:.85}
.xs-strip .xs-btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);margin-left:auto;white-space:nowrap}.xs-strip .xs-btn--ghost:hover{background:#fff;color:var(--xs-d)}
.xs-nav--split{margin:36px 0 0}
.xs--3 .xs-related{margin-top:90px}

/* ============ LAYOUT 4 - Immersive Story ============ */
.xs--4{padding:0 0 0;overflow:clip}
.xs--4 .xs-intro{padding-top:clamp(50px,6vw,90px);padding-bottom:clamp(30px,4vw,50px);text-align:left}
.xs--4 .xs-title{font-size:clamp(36px,5.2vw,68px);margin-top:0}
.xs-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:36px 0 0;border-top:2px solid var(--xs-d);border-bottom:1px solid var(--xs-line)}
.xs-facts>div{padding:18px 18px 18px 0}.xs-facts>div+div{padding-left:22px;border-left:1px solid var(--xs-line)}
.xs-facts dt{font:700 11px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--xs-a);margin-bottom:8px}.xs-facts dd{margin:0;font:600 18px/1.3 var(--xs-serif);color:var(--xs-d)}.xs-facts a{color:inherit}.xs-facts a:hover{color:var(--xs-p)}
.xs--4 .xs-figure--full{width:100%;aspect-ratio:21/8;margin:clamp(24px,3vw,40px) 0 clamp(44px,5vw,70px)}
.xs--4 .xs-entry{counter-reset:xsn}
.xs--4 .xs-entry>p:first-of-type{font:500 clamp(20px,1.9vw,24px)/1.65 var(--xs-serif);color:var(--xs-d)}
.xs-numbered h2{position:relative;counter-increment:xsn;padding-top:6px}
.xs-numbered h2:before{content:counter(xsn,decimal-leading-zero);display:block;font:600 clamp(56px,7vw,92px)/.9 var(--xs-serif);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--xs-a) 80%,transparent);margin-bottom:6px;transition:color .5s,transform .6s var(--xs-ease)}
.xs-numbered h2:hover:before{color:color-mix(in srgb,var(--xs-a) 25%,transparent);transform:translateX(8px)}
.xs-band{position:relative;overflow:hidden;margin:clamp(60px,7vw,100px) 0 0;padding:clamp(56px,7vw,100px) 20px;background:linear-gradient(135deg,var(--xs-d),color-mix(in srgb,var(--xs-p) 55%,var(--xs-d)));text-align:center;color:#fff}
.xs-band:before,.xs-band:after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.14);animation:xsFloat 7s ease-in-out infinite}
.xs-band:before{width:340px;height:340px;left:-90px;bottom:-150px}.xs-band:after{width:220px;height:220px;right:6%;top:-90px;animation-delay:-3s}
.xs-band>*{position:relative;max-width:700px;margin-left:auto;margin-right:auto}
.xs-band h4{color:#fff;font-size:clamp(30px,4vw,50px);line-height:1.1;margin:18px auto 14px}.xs-band p{opacity:.85;margin:0 auto 28px;font-size:18px}
.xs-band .xs-eyebrow{color:#f1c8ad}.xs-band .xs-eyebrow:before{background:#f1c8ad}
.xs-band .xs-btn{background:#fff;color:var(--xs-d);box-shadow:none;padding:18px 34px}.xs-band .xs-btn:hover{background:var(--xs-a);color:#fff}
.xs-author--wide{max-width:780px;margin:-46px auto 0;position:relative;z-index:2;width:calc(100% - 40px);background:#fff}
.xs--4 .xs-related{margin-top:80px}
.xs-next{position:fixed;left:50%;bottom:20px;z-index:9990;display:flex;align-items:center;gap:18px;max-width:min(560px,calc(100% - 32px));padding:14px 14px 14px 26px;border-radius:99px;background:var(--xs-d);color:#fff;box-shadow:0 24px 50px -16px rgba(0,0,0,.55);transform:translate(-50%,160%);transition:transform .7s var(--xs-ease),background .3s}
.xs-next.is-on{transform:translate(-50%,0)}
.xs-next span{display:flex;flex-direction:column;min-width:0}.xs-next small{font:700 10.5px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f1c8ad;margin-bottom:5px}
.xs-next b{font:600 16px/1.2 var(--xs-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xs-next i{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--xs-a);transition:transform .35s var(--xs-ease)}
.xs-next:hover{color:#fff;background:var(--xs-p)}.xs-next:hover i{transform:translateX(4px)}

/* ============ Responsive ============ */
@media(max-width:1024px){
  .xs--2 .xs-grid{grid-template-columns:1fr}
  .xs--2 .xs-side-in{position:static}.xs--2 .xs-side .xs-toc{display:none}
  .xs--2 .xs-mtoc{display:block;margin:0 0 30px}.xs--2 .xs-mtoc .xs-toc{background:var(--xs-l);border:1px solid var(--xs-line);border-radius:20px;padding:18px 22px}
  .xs-toc--m .xs-toc-h{cursor:pointer;margin:0}.xs-toc--m .xs-toc-h em{display:block}.xs-toc--m .xs-toc-h[aria-expanded=false] em{transform:rotate(-45deg)}
  .xs-toc--m ol{margin-top:14px}.xs-toc--m .xs-toc-h[aria-expanded=false]+ol{display:none}
  .xs-related-grid{grid-template-columns:repeat(2,1fr)}.xs-related-grid .xs-rc:nth-child(3){display:none}
  .xs--3 .xs-body{grid-template-columns:1fr}.xs--3 .xs-rail{order:2}.xs--3 .xs-share--v{position:static;flex-direction:row}
  .xs--3 .xs-share--v [data-tip]:after{display:none}
  .xs--3 .xs-figure--hero{aspect-ratio:16/9}
}
@media(max-width:767px){
  .xs{font-size:16.5px}
  .xs--1 .xs-figure--wide,.xs--3 .xs-figure--hero{border-radius:20px;aspect-ratio:4/3}
  .xs--3 .xs-figure--hero{border-width:5px}
  .xs--3 .xs-hero-card{margin-top:-46px;padding:24px 20px;width:calc(100% - 24px)}
  .xs--4 .xs-figure--full{aspect-ratio:4/3}
  .xs-facts{grid-template-columns:1fr 1fr}.xs-facts>div:nth-child(3){padding-left:0;border-left:0}.xs-facts>div{border-bottom:1px solid var(--xs-line)}
  .xs-meta--pills{gap:8px}.xs-meta--pills li{font-size:13px;padding:8px 12px}
  .xs-foot{flex-direction:column;align-items:flex-start}
  .xs-author{flex-direction:column;text-align:center;padding:26px 22px}
  .xs-strip{flex-direction:column;text-align:center}.xs-strip .xs-btn--ghost{margin:0}
  .xs-nav{grid-template-columns:1fr}.xs-nav-next{text-align:left;align-items:flex-start}
  .xs-related-grid{grid-template-columns:1fr}.xs-related-grid .xs-rc:nth-child(3){display:flex}
  .xs-rl{grid-template-columns:46px 1fr 40px;gap:12px}.xs-rl .no{font-size:30px}.xs-rl .go{width:38px;height:38px}
  .xs-entry blockquote{padding:26px 22px 26px 26px}
  .xs-next{bottom:14px;padding-left:20px}
  .xs--1 .xs-dropcap>p:first-of-type:first-letter{font-size:4.4em}
}
@media(prefers-reduced-motion:reduce){
  .xs *,.xs *:before,.xs *:after{animation:none!important;transition:none!important}
  .xs-js .xs-rv,opacity:1;transform:none}
}

/* text on dark surfaces: always light */
.xs .xs-cta h4,.xs .xs-band h4,.xs .xs-strip h4,.xs .xs-strip h4 a,.xs .xs-cta h4 a{color:#fff!important}
.xs .xs-cta p,.xs .xs-band p,.xs .xs-strip p{color:rgba(255,255,255,.86)!important}
.xs .xs-strip small,.xs .xs-next small{color:#f1c8ad!important}
.xs .xs-cta .xs-eyebrow,.xs .xs-band .xs-eyebrow{color:#f1c8ad!important}
.xs .xs-cta .xs-btn,.xs .xs-band .xs-btn{color:var(--xs-d)!important}.xs .xs-cta .xs-btn:hover,.xs .xs-band .xs-btn:hover{color:#fff!important}
.xs .xs-next,.xs .xs-next b{color:#fff!important}
.xs .xs-strip .xs-btn--ghost{color:#fff!important}.xs .xs-strip .xs-btn--ghost:hover{color:var(--xs-d)!important}