/* Enable 360 articles: listing, archive and article pages. Uses site.css tokens. */
.blog-hero,.art-head{background:var(--navy);color:var(--white);margin-top:-72px;padding-top:calc(72px + clamp(28px,5vw,64px));padding-bottom:clamp(40px,6vw,72px);position:relative;overflow:hidden}
.blog-hero::after,.art-head::after{content:"";position:absolute;inset-inline-end:-180px;top:-120px;width:520px;height:520px;border-radius:50%;border:22px solid var(--navy-2);pointer-events:none}
.blog-hero .wrap,.art-head .wrap{position:relative;z-index:1}
.blog-hero h1{font-size:clamp(36px,5.4vw,68px);font-weight:900;margin-top:10px;line-height:1.25;text-wrap:balance}
.art-head h1{font-size:clamp(30px,4.2vw,52px);font-weight:900;margin-top:14px;line-height:1.35;max-width:24ch;text-wrap:balance}
.blog-hero .lead,.art-head .lead{color:var(--soft);max-width:66ch}
.art-head .lead{font-size:clamp(17px,1.7vw,21px)}

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;padding:0;font-size:14px;color:var(--soft)}
.crumbs li{display:inline-flex;align-items:center;gap:10px;min-width:0}
.crumbs li+li::before{content:"/";color:var(--navy-line)}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--orange)}
.crumbs li[aria-current]{color:var(--white);opacity:.75;max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--navy-line);color:var(--soft);text-decoration:none;font-weight:700;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.chip .num{font-size:13px;opacity:.75}
.chip:hover{color:var(--white);border-color:var(--blue-soft)}
.chip.on{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.chip:focus-visible,.post-card__link:focus-visible,.share a:focus-visible,.share button:focus-visible,.toc a:focus-visible,.arch-list a:focus-visible,.fb-all:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.sec-s{padding-block:clamp(48px,7vw,88px)}
.feat{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:minmax(0,1fr)}}

.post-card{min-width:0}
.post-card__link{display:flex;flex-direction:column;height:100%;background:var(--white);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post-card__link:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,37,64,.10)}
.post-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;max-width:100%}
.post-card__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.post-card__topic{font-size:13px;font-weight:800;color:var(--blue-ink)}
.post-card h3{font-size:19px;font-weight:800;line-height:1.5;margin:0;text-wrap:balance}
.post-card p{font-size:15px;line-height:1.7;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card__meta{margin-top:auto;padding-top:8px;font-size:13px;color:var(--muted)}
.post-card--big .post-card__link{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.post-card--big img{height:100%}
.post-card--big .post-card__body{padding:clamp(22px,3vw,40px);justify-content:center}
.post-card--big h3{font-size:clamp(22px,2.4vw,30px)}
.post-card--big p{-webkit-line-clamp:4;font-size:16px}
@media (max-width:820px){.post-card--big .post-card__link{grid-template-columns:minmax(0,1fr)}.post-card--big img{height:auto}}
.post-card[hidden]{display:none!important}

.archive{background:var(--white)}
.arch-t,.rel-t{font-size:clamp(26px,3vw,36px);font-weight:800;margin:0 0 24px}
.arch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
@media (max-width:760px){.arch-grid{grid-template-columns:minmax(0,1fr)}}
.arch-grid h3{font-size:16px;font-weight:800;color:var(--blue-ink);margin:0 0 12px}
.arch-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.arch-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.arch-list a:hover{color:var(--blue-ink)}
.arch-list small{font-weight:600;color:var(--muted);font-size:14px}

.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;font-size:14px;color:var(--soft)}
.art-meta>span{display:inline-flex;align-items:center;gap:6px}
.art-meta .ic{width:18px;height:18px;color:var(--orange)}
.art-topic{background:var(--orange);color:var(--navy);font-weight:800;padding:4px 14px;border-radius:999px;text-decoration:none}
.art-cover{background:linear-gradient(var(--navy) 0 50%,var(--paper) 50% 100%)}
.art-cover img{display:block;width:100%;height:auto;max-width:100%;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(6,20,36,.25)}

.art-wrap{padding-block:clamp(36px,5vw,64px)}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:980px){.art-layout{grid-template-columns:minmax(0,1fr)}.art-side{order:-1}}
.prose{min-width:0;max-width:72ch;font-size:18px;line-height:1.95}
.prose>p,.prose>ul{margin:0 0 18px}
.prose h2{font-size:clamp(23px,2.4vw,30px);font-weight:800;line-height:1.45;margin:40px 0 14px;scroll-margin-top:96px}
.prose>h2:first-child{margin-top:0}
.prose ul{padding-inline-start:1.2em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--blue)}
.prose .faq{margin-top:8px}
.prose .faq details p{font-size:17px}
.e360-box{background:var(--navy);color:var(--white);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);margin:40px 0 8px;position:relative;overflow:hidden}
.e360-box::after{content:"";position:absolute;inset-inline-end:-70px;bottom:-90px;width:220px;height:220px;border-radius:50%;border:12px solid var(--navy-2)}
.e360-box h2{margin-top:0;color:var(--white);position:relative;z-index:1}
.e360-box h2::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--orange);margin-inline-end:12px;vertical-align:middle}
.e360-box p{color:var(--soft);position:relative;z-index:1}
.e360-box .btn{margin-top:10px;position:relative;z-index:1}
.reviewed{font-size:14px;color:var(--muted);margin:28px 0 0}

.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.share>span{font-weight:800;margin-inline-end:6px}
.share a,.share button{font:inherit;font-size:14px;font-weight:700;padding:8px 16px;min-height:40px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center}
.share a:hover,.share button:hover{border-color:var(--blue);color:var(--blue-ink)}

.art-side{position:sticky;top:96px;min-width:0}
@media (max-width:980px){.art-side{position:static}}
.toc{background:var(--white);border-radius:var(--r-md);padding:22px 22px 18px;box-shadow:0 1px 0 var(--line)}
.toc h2{font-size:15px;font-weight:800;color:var(--blue-ink);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:t}
.toc a{display:block;padding:7px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:15px;line-height:1.6;border-inline-start:3px solid transparent}
.toc a:hover{color:var(--ink);background:var(--paper)}
.toc a.on{color:var(--ink);font-weight:700;background:var(--tint);border-inline-start-color:var(--orange)}
@media (max-width:980px){.toc ol{max-height:none}}

.related .posts,.from-blog .posts{margin-top:4px}
.from-blog{background:var(--paper)}
.fb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.fb-all{font-weight:800;color:var(--blue-ink);text-decoration:none}
.fb-all:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.post-card__link{transition:none}.post-card__link:hover{transform:none}}
.chip .num{background:rgba(255,255,255,.08);color:inherit;padding:0 8px;border-radius:999px;line-height:1.6}
.chip.on .num{background:rgba(10,37,64,.14);color:var(--navy)}
.art-cover .wrap{max-width:1040px}
