/* ====================================================
   Blog-Reskin (geteilt) — Index + Artikel
   Nutzt die Brand-Tokens aus methodik-heros-2026-06-12.css
   (--cream, --cream-2, --navy, --navy-deep, --teal, --copper,
    --rule, --ink, --ink-72/60/45/30/12, --ease, --maxw, --nav-h)
   ==================================================== */

/* ----------------------------------------------------
   Gemeinsame Helfer (Reveal, Footer, Mobile-Nav)
   sinngemaess aus resources-bento-c uebernommen
   ---------------------------------------------------- */

/* ---- Reveal ---- */
.js .rv { opacity: 0; transform: translateY(20px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1 !important; transform: none !important; } }

/* ---- Footer ---- */
footer { background: var(--cream-2); border-top: 1px solid var(--rule); padding: 64px 0 40px; }
.foot-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.foot-brand .fw { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.foot-brand .fw .light { color: var(--ink-45); font-weight: 600; }
.foot-brand .fw .dot-i { color: var(--teal); }
.foot-brand p { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-60); max-width: 42ch; }
.foot-cols { display: flex; gap: 56px; justify-content: flex-end; }
.foot-col h5 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-45); font-weight: 600; }
.foot-col ul { margin-top: 14px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { font-size: 14px; color: var(--ink-60); }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-45); }

/* ====================================================
   INDEX — Hero + Beitrags-Karten + Newsletter
   ==================================================== */

/* ---- Blog-Hero (linksbuendig, kompakt) ---- */
.blog-hero { padding: calc(var(--nav-h) + 88px) 0 18px; }
.blog-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45);
    margin-bottom: 20px;
}
.blog-hero .eyebrow a { color: inherit; transition: color .2s var(--ease); }
.blog-hero .eyebrow a:hover { color: var(--teal); }
.blog-hero .eyebrow svg { width: 14px; height: 14px; }
.blog-h1 {
    font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.03;
    letter-spacing: -0.045em; font-weight: 700; max-width: 18ch;
}
.blog-h1 .light { color: var(--ink-45); }
.blog-hero .blog-sub {
    margin-top: 22px; font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    line-height: 1.58; color: var(--ink-72); max-width: 52ch;
}

/* ---- Monats-Gruppe ---- */
.post-group { padding: 40px 0 0; }
.post-group:last-of-type { padding-bottom: 24px; }
.group-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin-bottom: 26px;
}
.group-label {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45);
}
.group-flag {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper);
}

/* ---- Karten-Raster ---- */
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-list.cols-2 { grid-template-columns: repeat(2, 1fr); }
.post-list.col-1 { grid-template-columns: 1fr; gap: 14px; }

/* ---- Beitrags-Karte ---- */
.post-card {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--rule); border-radius: 16px;
    padding: 26px 26px 24px; background: #fff; min-height: 196px;
    transition: transform .26s var(--ease), border-color .26s var(--ease);
}
a.post-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.post-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal);
}
.post-cat.copper { color: var(--copper); }
.post-cat.ink { color: var(--ink-45); }
.post-date { font-size: 13px; color: var(--ink-45); }
.post-title {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.22;
    letter-spacing: -0.02em; font-weight: 700; color: var(--ink);
    transition: color .26s var(--ease);
}
a.post-card:hover .post-title { color: var(--teal); }
.post-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.56; color: var(--ink-60); }
.post-more {
    margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--teal);
    opacity: 0; transform: translateY(3px);
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}
a.post-card:hover .post-more { opacity: 1; transform: none; }
.post-more svg { width: 14px; height: 14px; }

/* ---- Featured-Karte (gross, eine pro Reihe) ---- */
.post-card.feature {
    grid-column: 1 / -1; min-height: 0; padding: 36px 36px 32px;
}
.post-card.feature .post-title { font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.08; max-width: 24ch; }
.post-card.feature .post-desc { font-size: 16px; max-width: 60ch; margin-top: 16px; }
.post-card.feature .post-more { opacity: 1; transform: none; }

/* ---- Newsletter-Band ---- */
.newsletter { background: var(--cream-2); border-top: 1px solid var(--rule); padding: 88px 0; }
.nl-inner { max-width: 640px; }
.nl-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45);
    margin-bottom: 16px; display: block;
}
.nl-h {
    font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.08;
    letter-spacing: -0.035em; font-weight: 700; max-width: 18ch;
}
.nl-h .serif-it { font-weight: 500; }
.nl-p { margin-top: 18px; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; color: var(--ink-72); max-width: 52ch; }
.nl-form { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; max-width: 480px; }
.nl-input {
    flex: 1; min-width: 220px; padding: 13px 16px; font-size: 15px;
    font-family: inherit; color: var(--ink); background: #fff;
    border: 1px solid var(--rule); border-radius: 12px;
    transition: border-color .2s var(--ease);
}
.nl-input::placeholder { color: var(--ink-45); }
.nl-input:focus { outline: none; border-color: var(--teal); }
.nl-btn {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    background: var(--navy); color: var(--cream); font-size: 14px; font-weight: 600;
    padding: 13px 22px; border-radius: 12px; border: none; cursor: pointer;
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.nl-btn:hover { background: var(--navy-deep); transform: translateY(-2px); }
.nl-btn svg { width: 16px; height: 16px; }
.nl-hint { margin-top: 14px; font-size: 13px; color: var(--ink-45); }

/* ====================================================
   ARTIKEL — Lesespalte
   ==================================================== */

.article-wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 28px; }

/* ---- Kopf ---- */
.article-head { padding: calc(var(--nav-h) + 72px) 0 0; }
.article-crumbs {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: var(--ink-45); margin-bottom: 30px;
}
.article-crumbs a { color: var(--ink-60); transition: color .2s var(--ease); }
.article-crumbs a:hover { color: var(--teal); }
.article-crumbs .sep { color: var(--ink-30); }
.article-crumbs .here { color: var(--ink); font-weight: 500; }

.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.article-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal);
    border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px;
    background: #fff;
}
.article-tag.copper { color: var(--copper); }

.article-h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.05;
    letter-spacing: -0.04em; font-weight: 700; color: var(--ink);
}
.article-lead {
    margin-top: 22px; font-size: clamp(1.12rem, 1.7vw, 1.38rem);
    line-height: 1.55; color: var(--ink-72);
}
.article-byline {
    margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 14px; color: var(--ink-45);
}
.article-byline a { color: var(--ink-60); transition: color .2s var(--ease); }
.article-byline a:hover { color: var(--teal); }
.article-byline .sep { color: var(--ink-30); }

/* ---- Hero-Bild ---- */
.article-figure { margin: 44px 0 0; }
.article-figure img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--rule); border-radius: 16px;
}
.article-figure figcaption {
    margin-top: 12px; text-align: center; font-size: 13.5px;
    line-height: 1.5; color: var(--ink-45);
}

/* ---- Prosa ---- */
.article-prose { padding: 48px 0 8px; }
.article-prose > * { max-width: 100%; }

.article-prose h2 {
    margin-top: 56px; margin-bottom: 18px;
    font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.12;
    letter-spacing: -0.03em; font-weight: 700; color: var(--ink);
}
.article-prose h3 {
    margin-top: 38px; margin-bottom: 12px;
    font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.2;
    letter-spacing: -0.02em; font-weight: 600; color: var(--ink);
}
.article-prose p {
    margin-top: 0; margin-bottom: 22px;
    font-size: 1.075rem; line-height: 1.72; color: var(--ink-72);
}
.article-prose strong { color: var(--ink); font-weight: 600; }
.article-prose em { font-style: italic; }

.article-prose a {
    color: var(--teal); text-decoration: underline;
    text-decoration-color: var(--ink-30); text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.article-prose a:hover { color: var(--copper); text-decoration-color: var(--copper); }

.article-prose ul, .article-prose ol {
    margin: 0 0 22px; padding-left: 1.4em;
    font-size: 1.075rem; line-height: 1.7; color: var(--ink-72);
}
.article-prose ul { list-style: none; padding-left: 0; }
.article-prose ul li {
    position: relative; padding-left: 1.5em; margin-bottom: 12px;
}
.article-prose ul li::before {
    content: ""; position: absolute; left: 0; top: 0.7em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--teal);
}
.article-prose ol { counter-reset: ol; list-style: none; padding-left: 0; }
.article-prose ol li {
    position: relative; padding-left: 2.1em; margin-bottom: 12px;
    counter-increment: ol;
}
.article-prose ol li::before {
    content: counter(ol); position: absolute; left: 0; top: 0.1em;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    color: var(--copper); width: 1.5em; text-align: left;
}

.article-prose blockquote {
    margin: 32px 0; padding: 6px 0 6px 26px;
    border-left: 3px solid var(--copper);
}
.article-prose blockquote p {
    margin: 0; font-family: 'Spectral', Georgia, serif; font-style: italic;
    font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.42; color: var(--ink);
}

.article-prose figure { margin: 36px 0; }
.article-prose img {
    max-width: 100%; height: auto; display: block;
    border: 1px solid var(--rule); border-radius: 14px;
}
.article-prose figcaption {
    margin-top: 11px; text-align: center; font-size: 13.5px; color: var(--ink-45);
}

.article-prose hr {
    border: none; border-top: 1px solid var(--rule); margin: 48px 0;
}

/* ---- Tabellen ---- */
.article-prose .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 26px; }
.article-prose table {
    width: 100%; border-collapse: collapse; font-size: 0.97rem;
    border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.article-prose thead { background: var(--cream-2); }
.article-prose th {
    text-align: left; font-weight: 600; color: var(--ink);
    padding: 13px 16px; border-bottom: 1px solid var(--rule);
    font-size: 0.9rem; letter-spacing: -0.01em;
}
.article-prose td {
    padding: 13px 16px; color: var(--ink-72); line-height: 1.5;
    border-bottom: 1px solid var(--rule);
}
.article-prose tbody tr:last-child td { border-bottom: none; }
.article-prose td strong { color: var(--ink); }

/* ---- Code ---- */
.article-prose code {
    font-family: 'JetBrains Mono', monospace; font-size: 0.86em;
    background: var(--cream-2); color: var(--ink);
    padding: 2px 6px; border-radius: 6px; border: 1px solid var(--rule);
}
.article-prose pre {
    margin: 0 0 26px; padding: 22px 24px;
    background: var(--navy); border-radius: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.article-prose pre code {
    font-family: 'JetBrains Mono', monospace; font-size: 0.84rem;
    line-height: 1.66; color: var(--cream);
    background: none; border: none; padding: 0; white-space: pre;
}

/* ---- Zusammenfassungs-Box (Summary) ---- */
.article-prose .summary-box {
    margin: 0 0 40px; padding: 28px 30px;
    background: var(--cream-2); border: 1px solid var(--rule);
    border-radius: 16px;
}
.article-prose .summary-box h3 {
    margin-top: 0; margin-bottom: 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper);
}
.article-prose .summary-box p { margin-bottom: 0; color: var(--ink-72); }

/* ---- Reveal innerhalb der Prosa ---- */
.js .article-prose .reveal { opacity: 0; transform: translateY(16px); }
.js .article-prose .reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .article-prose .reveal { opacity: 1 !important; transform: none !important; } }

/* ---- CTA-Band (navy) am Artikelende ---- */
.article-cta { background: var(--navy); color: var(--cream); padding: 92px 0; margin-top: 72px; }
.article-cta-inner { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 28px; }
.article-cta-h {
    font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1;
    letter-spacing: -0.035em; font-weight: 700; color: var(--cream); max-width: 20ch;
}
.article-cta-h .serif-it { font-weight: 500; }
.article-cta-p {
    margin-top: 20px; font-size: clamp(1.02rem, 1.4vw, 1.15rem);
    line-height: 1.6; color: rgba(250,250,245,.74); max-width: 52ch;
}
.article-cta-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn-white { background: var(--cream); color: var(--navy); }
.btn-white:hover { transform: translateY(-2px); background: #fff; }
.btn-outline-light { background: transparent; color: var(--cream); border-color: rgba(250,250,245,.38); }
.btn-outline-light:hover { border-color: var(--cream); transform: translateY(-2px); }

/* ---- Verwandte Beitraege ---- */
.article-related { padding: 76px 0 96px; }
.article-related-inner { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 28px; }
.related-h {
    font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.12;
    letter-spacing: -0.025em; font-weight: 700; color: var(--ink); margin-bottom: 24px;
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card {
    display: flex; flex-direction: column;
    padding: 22px 22px 20px; background: #fff;
    border: 1px solid var(--rule); border-radius: 14px;
    transition: transform .24s var(--ease), border-color .24s var(--ease);
}
a.related-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.related-card h4 {
    font-size: 1.02rem; line-height: 1.2; letter-spacing: -0.015em;
    font-weight: 700; color: var(--ink); margin-bottom: 7px;
    transition: color .24s var(--ease);
}
a.related-card:hover h4 { color: var(--teal); }
.related-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-60); }

/* ====================================================
   Responsive
   ==================================================== */
@media (max-width: 920px) {
    .post-list { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .foot-top { grid-template-columns: 1fr; gap: 32px; }
    .foot-cols { justify-content: flex-start; gap: 40px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .blog-hero { padding: calc(var(--nav-h) + 52px) 0 12px; }
    .post-group { padding: 30px 0 0; }
    .post-list, .post-list.cols-2 { grid-template-columns: 1fr; gap: 14px; }
    .related-grid { grid-template-columns: 1fr; }
    .post-card { min-height: 0; padding: 24px 22px 22px; }
    .post-card.feature { padding: 28px 24px 26px; }
    .post-more { opacity: 1; transform: none; }
    .newsletter { padding: 64px 0; }
    .article-cta { padding: 72px 0; }
    .article-related { padding: 56px 0 72px; }
    .article-prose h2 { margin-top: 44px; }
}
/* Mobile-Nav: nur Wortmarke plus CTA-Pill, Textlinks weg */
@media (max-width: 620px) {
    nav.site .nav-links .pill { padding: 9px 15px; font-size: 13px; }
    nav.site .nav-rest { display: none; }
    .nl-form .nl-input, .nl-form .nl-btn { width: 100%; }
    .article-cta-row .btn { width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
    .blog-h1 { font-size: clamp(1.9rem, 10vw, 2.3rem); }
    .article-h1 { font-size: clamp(1.8rem, 9vw, 2.3rem); }
    .article-wrap, .article-cta-inner, .article-related-inner { padding: 0 20px; }
}


/* ---- Beitrags-Cover (Tile-Thumb + Artikel-Header), 1.91:1, doppelt genutzt ---- */
.post-card { overflow: hidden; }
.post-thumb { margin: -26px -26px 18px -26px; aspect-ratio: 1200/630; overflow: hidden; background: var(--cream-2); border-bottom: 1px solid var(--rule); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
a.post-card:hover .post-thumb img { transform: scale(1.03); }
.post-card.feature .post-thumb { margin: -36px -36px 26px -36px; aspect-ratio: auto; height: 300px; }
.article-cover { aspect-ratio: 1200/630; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); margin: 0 0 28px; background: var(--cream-2); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px){ .article-cover{ border-radius: 12px; margin-bottom: 22px; } }

/* ===== Beitrags-Abschluss-Bausteine (2026-06-15) ===== */
.author-box{display:flex;gap:18px;align-items:flex-start;margin:40px 0 8px;padding:24px;border:1px solid var(--rule);border-radius:14px;background:var(--cream-2);}
.author-box .author-avatar{flex:0 0 64px;width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--rule);background:var(--cream);}
.author-box .ab-name{font-weight:700;font-size:15.5px;color:var(--ink);}
.author-box .ab-role{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:3px 0 8px;}
.author-box .ab-bio{font-size:14px;line-height:1.6;color:var(--ink-60);}
.author-box .ab-links{margin-top:10px;display:flex;gap:16px;}
.author-box .ab-links a{font-size:13px;font-weight:600;color:var(--teal);text-decoration:none;}

.decide{margin:34px 0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;}
.decide-h{font-size:1.15rem;font-weight:700;letter-spacing:-0.02em;color:var(--ink);padding:22px 24px 0;}
.decide-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:1px;background:var(--rule);margin-top:18px;}
.decide-col{background:#fff;padding:22px 24px;}
.decide-col.b{background:var(--navy);}
.decide-col .dc-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:12px;}
.decide-col .dc-tag.diy{color:var(--ink-45);}
.decide-col.b .dc-tag{color:#7FD9CC;}
.decide-col ul{list-style:none;padding:0;margin:0;}
.decide-col li{font-size:14px;line-height:1.55;color:var(--ink-72);padding-left:20px;position:relative;margin-bottom:10px;}
.decide-col li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--ink-30);}
.decide-col.b li{color:rgba(255,255,255,.88);}
.decide-col.b li::before{background:var(--teal);}
.decide-foot{padding:16px 24px;background:#fff;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-60);}

.confide{margin:28px 0;padding:18px 22px;border-left:3px solid var(--teal);background:var(--cream-2);border-radius:0 10px 10px 0;}
.confide .cf-h{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.confide .cf-h svg{width:16px;height:16px;color:var(--teal);flex:0 0 16px;}
.confide p{font-size:13.5px;line-height:1.6;color:var(--ink-60);margin:0;}

.illus{margin:28px 0;border:1px dashed var(--ink-30);border-radius:12px;padding:22px 24px;background:#fff;}
.illus .il-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);font-weight:600;margin-bottom:12px;}
.illus .il-row{display:flex;gap:14px;align-items:stretch;margin:14px 0;}
.illus .il-card{flex:1;border:1px solid var(--rule);border-radius:10px;padding:14px 16px;background:var(--cream);}
.illus .il-card .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);}
.illus .il-card .v{font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;color:var(--ink);margin-top:4px;}
.illus .il-card.after{border-color:var(--teal);}
.illus .il-card.after .v{color:var(--teal);}
.illus .il-arrow{display:flex;align-items:center;color:var(--ink-30);font-size:22px;}
.illus .il-foot{font-size:12px;color:var(--ink-45);margin-top:12px;font-style:italic;}
@media (max-width:760px){
  .decide-grid{grid-template-columns:1fr;}
  .author-box{flex-direction:row;}
}