/* /blog: the list of posts and each post (built by dev/blog.mjs). Site tokens from app.css. */
.bl-body{background:var(--bg)}
.bl-main{padding-bottom:20px}
.bl-tag{align-self:flex-start;display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 10px;background:var(--accent-soft);color:var(--accent)}
.bl-tag.y{background:rgba(255,159,10,.16);color:#A85700}.bl-tag.s{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}.bl-tag.t{background:rgba(124,77,255,.13);color:#6A3FD6}.bl-tag.d{background:rgba(0,150,160,.13);color:#00727A}
:root[data-theme="dark"] .bl-tag.y{color:#FFB35C}:root[data-theme="dark"] .bl-tag.t{color:#B9A0FF}:root[data-theme="dark"] .bl-tag.d{color:#5FD4DC}
/* the list */
.bl-ihead{padding:44px 0 6px;max-width:760px}
.bl-k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bl-ihead h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin:8px 0 10px}
.bl-ihead p{color:var(--muted);font-size:17px;max-width:58ch;margin:0}
.bl-cats{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 4px}
.bl-cats button{font:600 13.5px var(--f);border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:7px 14px;cursor:pointer}
.bl-cats button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.bl-card{background:var(--card);border:1px solid var(--line-soft);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s}
.bl-card:hover{transform:translateY(-2px)}.bl-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bl-th{display:block;aspect-ratio:1200/630;background:var(--fill);overflow:hidden}
.bl-th img{width:100%;height:100%;object-fit:cover;display:block}
.bl-bd{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.bl-card h3{font-size:17.5px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0}
.bl-ex{font-size:14px;color:var(--muted)}
.bl-meta{font-size:13px;color:var(--faint);margin-top:auto}
.bl-card.big{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:26px;margin:18px 0 22px}
.bl-card.big .bl-th{aspect-ratio:auto;min-height:280px}
.bl-card.big .bl-bd{padding:28px;justify-content:center;gap:10px}
.bl-card.big h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin:0}
.bl-card.big .bl-ex{font-size:15.5px}
@media (max-width:820px){.bl-card.big{grid-template-columns:minmax(0,1fr)}.bl-card.big .bl-th{aspect-ratio:1200/630;min-height:0}.bl-card.big .bl-bd{padding:18px}}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bl-grid{grid-template-columns:minmax(0,1fr)}}
.bl-nl{margin:30px 0 30px;background:var(--card);border:1px solid var(--line-soft);border-radius:22px;padding:22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bl-nl b{font-size:17px}.bl-nl p{color:var(--muted);font-size:14px;margin:2px 0 0}
/* a post */
.bl-crumbs{font-size:13px;color:var(--faint);padding:26px 0 0;display:flex;gap:6px;flex-wrap:wrap}.bl-crumbs a{color:var(--faint);text-decoration:none}.bl-crumbs a:hover{color:var(--fg)}
.bl-head{max-width:780px;padding:14px 0 4px}
.bl-head h1{font-size:clamp(31px,4.6vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1.07;margin:12px 0 12px;text-wrap:balance}
.bl-lede{font-size:18.5px;color:var(--muted);margin:0}
.bl-by{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.bl-av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.bl-hero{margin:22px 0 0;border-radius:24px;overflow:hidden;background:#071226}
.bl-hero img{width:100%;height:auto;display:block}
.bl-post{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:48px;margin-top:28px;align-items:start}
@media (max-width:960px){.bl-post{grid-template-columns:minmax(0,1fr)}.bl-toc{display:none}}
.bl-art{max-width:720px;font-size:17px;line-height:1.72;min-width:0}
.bl-art h2{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin:40px 0 12px;scroll-margin-top:80px}
.bl-art h3{font-size:19.5px;font-weight:700;letter-spacing:-.015em;margin:26px 0 6px;scroll-margin-top:80px}
.bl-art p{margin:0 0 15px}
.bl-art ul,.bl-art ol{margin:0 0 17px;padding-left:22px}.bl-art li{margin:0 0 8px}
.bl-art a{color:var(--accent)}
.bl-art code{font-size:.88em;background:var(--fill);padding:1px 6px;border-radius:6px}
.bl-answer{background:var(--accent-soft);border-radius:18px;padding:18px 20px;margin:0 0 26px;font-size:16.5px}
.bl-answer>b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.bl-answer p:last-child,.bl-tip p:last-child,.bl-note p:last-child{margin-bottom:0}
.bl-tip{border-left:3px solid var(--sun);background:color-mix(in srgb,var(--sun) 12%,var(--card));padding:12px 16px;border-radius:0 12px 12px 0;font-size:16px;margin:0 0 18px}
.bl-note{background:var(--card);border:1px solid var(--line-soft);padding:14px 18px;border-radius:14px;font-size:16px;margin:0 0 18px}
.bl-steps{list-style:none;padding:0!important;counter-reset:s}
.bl-steps li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:16px}
.bl-steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;line-height:1}
.bl-tbl{overflow-x:auto;border:1px solid var(--line-soft);border-radius:16px;background:var(--card);margin:6px 0 20px}
.bl-tbl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bl-tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.bl-tbl th,.bl-tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.bl-tbl thead th{font-size:12.5px;color:var(--faint);font-weight:700;letter-spacing:.03em;white-space:nowrap}
.bl-tbl tbody th{font-weight:700;min-width:120px}
.bl-tbl tr:last-child th,.bl-tbl tr:last-child td{border-bottom:0}
.bl-vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 18px}
.bl-vids figure{margin:0}
.bl-vph{position:relative;display:block;aspect-ratio:9/16;border-radius:18px;border:5px solid #05070c;background:#000;overflow:hidden}
.bl-vph img{width:100%;height:100%;object-fit:cover;display:block}
.bl-play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.94);color:#0B2A6B;display:grid;place-items:center;font-size:16px;padding-left:3px}
.bl-vids figcaption{font-size:14px;margin-top:8px;line-height:1.4}.bl-vids figcaption b{display:block;font-size:15px}.bl-vids figcaption span{color:var(--muted);font-size:13px}
.bl-cta{margin:30px 0;border-radius:22px;background:radial-gradient(600px 300px at 90% 0%,#173E99,transparent 60%),linear-gradient(150deg,#071226,#0B1D45 60%,#2a1650);color:#fff;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:18px;align-items:center}
.bl-cta h3{color:#fff;font-size:22px;margin:0 0 6px;letter-spacing:-.025em}.bl-cta p{color:#C9D7F0;font-size:15.5px;margin:0 0 14px}
.bl-cta .btn{background:#fff;color:#0B2A6B;border-radius:999px;padding:11px 20px;font-weight:700;text-decoration:none;display:inline-flex}
.bl-cta-ph{aspect-ratio:9/16;border-radius:14px;border:4px solid #05070c;background:#000 url(/img/yir/travels.v1.jpg) center/cover}
@media (max-width:480px){.bl-cta{grid-template-columns:minmax(0,1fr)}.bl-cta-ph{display:none}}
.bl-faq details{border-bottom:1px solid var(--line-soft);padding:12px 0}
.bl-faq summary{font-weight:700;cursor:pointer}.bl-faq details p{margin:8px 0 0;color:var(--muted)}
.bl-src{font-size:14.5px;color:var(--muted);padding-left:20px}.bl-src li{margin-bottom:6px}.bl-src span{color:var(--faint)}
.bl-upd{font-size:13.5px;color:var(--faint);border-top:1px solid var(--line-soft);padding-top:14px;margin-top:30px!important}
.bl-toc{position:sticky;top:80px;background:var(--card);border:1px solid var(--line-soft);border-radius:18px;padding:16px;font-size:14px;max-height:calc(100vh - 100px);overflow:auto}
.bl-toc b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.bl-toc a{display:block;color:var(--muted);text-decoration:none;padding:5px 0 5px 10px;border-left:2px solid transparent;margin-left:-10px;line-height:1.35}
.bl-toc a:hover{color:var(--fg)}.bl-toc a.on{color:var(--fg);border-left-color:var(--accent);font-weight:600}
.bl-toc .btn{margin-top:12px;width:100%;justify-content:center;border-left:0;color:#fff;padding:10px}
.bl-rel{margin:46px 0 30px}.bl-rel h2{font-size:22px;letter-spacing:-.02em;margin:0 0 14px}
@media (prefers-reduced-motion:reduce){.bl-card{transition:none}.bl-card:hover{transform:none}}
.bl-tbl table{min-width:560px}
.bl-hero picture,.bl-fig picture{display:block}
.bl-hero img{width:100%;height:auto;display:block}
.bl-fig{margin:22px 0 24px}.bl-fig img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line-soft)}
.bl-fig figcaption{font-size:13.5px;color:var(--faint);margin-top:8px;line-height:1.45}
.bl-th picture{display:block;width:100%;height:100%}.bl-th picture img{width:100%;height:100%;object-fit:cover;display:block}