/* Blog: artikeltemplate en index */
.bl-hero{background:var(--night);color:var(--txt);padding:calc(72px + clamp(40px,6vw,80px)) 0 clamp(48px,6vw,80px)}
.bl-hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.bl-hero h1{font-size:clamp(2.1rem,3.8vw,3.4rem);margin-bottom:18px}
.bl-hero .lead{margin-bottom:22px}
.bl-hero .meta{font-size:.9rem;color:var(--muted)}
.bl-hero .meta i{font-style:normal;margin:0 8px;opacity:.5}
.bl-hero .cover{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--card)}
.bl-hero .cover img{width:100%;height:100%;object-fit:cover;display:block}

.bl-body{background:var(--paper);color:var(--ink);padding:clamp(56px,7vw,96px) 0}
.bl-body .col{max-width:72ch;margin:0 auto}
.bl-body p,.bl-body li{font-size:1.1rem;line-height:1.75;color:#2a2a33}
.bl-body p{margin:0 0 1.25em}
.bl-body h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2.2em 0 .6em}
.bl-body h3{font-size:clamp(1.2rem,1.8vw,1.45rem);margin:1.8em 0 .5em}
.bl-body h2:first-child{margin-top:0}
.bl-body ul,.bl-body ol{margin:0 0 1.4em;padding-left:1.2em}
.bl-body li{margin:.45em 0}
.bl-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bl-body strong{font-weight:600;color:var(--ink)}
.bl-body .table-wrap{margin:1.6em 0;background:#fff;border-color:var(--line-ink)}
.bl-body th,.bl-body td{border-color:var(--line-ink);font-size:.97rem}
.bl-body th{color:var(--ink-muted)}
.bl-body td:first-child{font-family:var(--display);font-weight:700}
.bl-body blockquote{margin:1.6em 0;padding:18px 24px;border-left:3px solid var(--accent);background:#fff;border-radius:0 var(--r-s) var(--r-s) 0}
.bl-body .note{background:#fff;border:1px solid var(--line-ink);border-radius:var(--r-s);padding:18px 22px;margin:1.6em 0}
.bl-key{margin:clamp(40px,5vw,64px) 0;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink)}
.bl-key p{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.3rem);letter-spacing:-.025em;line-height:1.15;color:var(--ink);margin:0}

.bl-more{background:var(--paper2);color:var(--ink);padding:clamp(48px,6vw,80px) 0}
.bl-more ul{list-style:none;padding:0;margin:0;max-width:72ch;margin:0 auto;border-top:1px solid var(--line-ink)}
.bl-more li{border-bottom:1px solid var(--line-ink)}
.bl-more a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 0;text-decoration:none;color:var(--ink);transition:padding-left .25s var(--ease)}
.bl-more a:hover{padding-left:8px}
.bl-more b{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.015em;display:block}
.bl-more span{color:var(--ink-muted);font-size:.92rem}
.bl-more .arrow{flex:none;font-family:var(--display);font-weight:800}
.bl-more .h{max-width:72ch;margin:0 auto 18px}

.bl-close{position:relative;overflow:hidden;background:var(--night);color:var(--txt);padding:clamp(64px,8vw,112px) 0}
.bl-close .glow{position:absolute;left:50%;top:40%;width:900px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,59,134,.2),rgba(255,59,134,0));pointer-events:none}
.bl-close .wrap{position:relative}
.bl-close h2{font-size:clamp(1.9rem,3.6vw,3rem)}

/* index */
.bl-feat{background:var(--paper);color:var(--ink);padding:0 0 clamp(48px,6vw,80px)}
.bl-feat .grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,5vw,72px)}
.bl-feat .media{margin-left:calc(-1*var(--gutter));min-height:420px;position:relative}
.bl-feat .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0 var(--r) var(--r) 0}
.bl-feat .copy{padding:clamp(40px,6vw,80px) 0}
.bl-feat h2{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.bl-feat .meta{font-size:.9rem;color:var(--ink-muted);margin-top:14px}
.bl-list{background:var(--paper2);color:var(--ink);padding:clamp(56px,7vw,96px) 0}
.bl-list ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-ink)}
.bl-list li{border-bottom:1px solid var(--line-ink)}
.bl-list a{display:grid;grid-template-columns:170px 1fr auto;gap:28px;align-items:baseline;padding:26px 0;text-decoration:none;color:var(--ink);transition:padding-left .25s var(--ease)}
.bl-list a:hover{padding-left:10px}
.bl-list .cat{font:700 .74rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.bl-list h3{font-size:clamp(1.25rem,2vw,1.6rem);margin:0 0 6px}
.bl-list p{margin:0;color:var(--ink-muted);font-size:.98rem;max-width:62ch}
.bl-list .date{font-size:.88rem;color:var(--ink-muted);white-space:nowrap}

@media (max-width:1024px){.bl-list a{grid-template-columns:1fr;gap:6px}.bl-list .date{order:-1}}
@media (max-width:820px){
  .bl-hero{padding-top:28px}.bl-hero .grid{grid-template-columns:1fr}.bl-hero .cover{order:-1;margin:0 calc(-1*var(--gutter));border-radius:0;aspect-ratio:16/10}
  .bl-feat .grid{grid-template-columns:1fr}.bl-feat .media{margin:0 calc(-1*var(--gutter));min-height:0;height:62vw}.bl-feat .media img{position:relative;border-radius:0}.bl-feat .copy{padding:28px 0 0}
  .bl-body p,.bl-body li{font-size:1.04rem}
  .bl-key p{font-size:1.45rem}
}