/* ===== COLUMN — article + index (loaded only on column pages) ===== */

/* --- article --- */
.col-hero{max-width:760px;margin:0 auto;text-align:center;padding:clamp(20px,3.5vw,40px) 20px 4px}
.col-hero .cat{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:.78rem;color:var(--coral-text);background:var(--blush);border-radius:var(--r-pill);padding:5px 15px;margin-bottom:16px}
.col-hero h1{font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.5}
.col-hero .date{color:var(--muted);font-size:.86rem;margin-top:14px;font-family:var(--f-latin);letter-spacing:.02em}

.col-figure{max-width:940px;margin:clamp(22px,3.5vw,38px) auto;padding:0 20px}
.col-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--r-lg);box-shadow:var(--shadow-card)}

.prose{max-width:720px;margin:0 auto;padding:0 20px;font-size:1.09rem;line-height:1.98;color:var(--ink)}
.prose p{margin:1.15em 0}
.prose h2{font-family:var(--f-title);font-size:clamp(1.32rem,2.4vw,1.62rem);line-height:1.5;margin:1.9em 0 .5em;padding-bottom:.35em;border-bottom:2px solid var(--blush)}
.prose h3{font-family:var(--f-title);font-size:1.16rem;margin:1.5em 0 .3em;color:var(--coral-text)}
.prose strong{font-weight:700;color:var(--ink);background:linear-gradient(transparent 62%,var(--blush) 62%)}
.prose ul{margin:1.1em 0;padding-left:0;list-style:none}
.prose li{position:relative;margin:.55em 0;padding-left:1.6em}
.prose li::before{content:"";position:absolute;left:.3em;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.prose .tip{background:var(--mint-wash);border:1px solid var(--mint-line);border-left:4px solid var(--mint);border-radius:14px;padding:16px 20px;margin:1.7em 0;font-size:1rem;line-height:1.85}
.prose .tip b{color:var(--mint-text)}
.prose .code{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:1em 0 .4em;font-family:"SFMono-Regular",Consolas,"Courier New",monospace;font-size:.92rem;line-height:1.7;white-space:pre-wrap;color:var(--ink)}

.col-cta{max-width:720px;margin:clamp(34px,5vw,54px) auto 0;padding:clamp(26px,4vw,40px);text-align:center;background:var(--surface);border:2px solid var(--coral);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.col-cta h3{font-family:var(--f-title);font-size:1.32rem}
.col-cta p{color:var(--muted);margin:12px auto 22px;max-width:34em}

.col-related{max-width:720px;margin:38px auto 0;padding:24px 20px 0;border-top:1px solid var(--line)}
.col-related h3{font-family:var(--f-title);font-size:1.05rem;margin-bottom:14px}
.col-related ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.col-related a{color:var(--coral-text);font-weight:700}
.col-related a:hover{text-decoration:underline}

/* --- index --- */
.col-index-grid{max-width:1040px;margin:clamp(24px,3.5vw,44px) auto 0;padding:0 clamp(16px,3vw,24px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.col-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .18s,box-shadow .18s;color:inherit}
.col-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.col-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.col-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.col-card:hover .col-card__img img{transform:scale(1.04)}
.col-card__b{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.col-card__cat{align-self:flex-start;font-family:var(--f-display);font-weight:700;font-size:.72rem;color:var(--coral-text);background:var(--blush);border-radius:var(--r-pill);padding:3px 12px;margin-bottom:13px}
.col-card__b h3{font-family:var(--f-title);font-size:1.06rem;line-height:1.55}
.col-card__b time{color:var(--muted);font-size:.78rem;margin-top:auto;padding-top:14px;font-family:var(--f-latin);letter-spacing:.02em}
@media(max-width:860px){.col-index-grid{grid-template-columns:1fr;max-width:460px}}