/* Thrive at Work guides (blog) shared styles. Loaded after /style.css. */

/* ---------- article page ---------- */
.art-hero{max-width:880px;margin:0 auto;padding:0 28px}
.art-hero img{width:100%;height:340px;object-fit:cover;border-radius:22px;box-shadow:var(--shadow)}
.art-wrap{max-width:760px;margin:0 auto;padding:0 28px}
.art-head{padding:56px 0 26px}
.art-head h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.12;margin-top:14px}
.art-byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font:500 12px/1.6 var(--mono);letter-spacing:.04em;color:var(--ink-faint)}
.art-byline b{color:var(--ink-soft);font-weight:600}
.art-lede{font-size:1.12rem;color:var(--ink-soft);margin:20px 0 6px;line-height:1.7}
.bd{padding:12px 0 10px}
.bd p{margin:0 0 18px;color:var(--ink-soft);font-size:1rem;line-height:1.75;max-width:70ch}
.bd h2{font-size:1.7rem;margin:38px 0 14px}
.bd h3{font-size:1.22rem;margin:28px 0 10px}
.bd ul,.bd ol{margin:0 0 18px 22px;color:var(--ink-soft);line-height:1.75}
.bd li{margin-bottom:8px}
.bd a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:2px}
.bd .fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:24px 0;font-size:.97rem;color:var(--ink-soft)}
.bd .fact b{color:var(--ink)}

/* interactive checklist */
.chk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:26px 0}
.chk .chk-t{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:12px}
.chk label{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;color:var(--ink-soft);font-size:.96rem;line-height:1.55}
.chk label:last-child{border-bottom:0}
.chk input{margin-top:4px;accent-color:var(--brass);width:15px;height:15px;flex-shrink:0}
.chk input:checked+span{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:rgba(176,137,76,.6)}

/* mini picker (which-workshop chooser) */
.pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:26px 0}
.pick .pick-t{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:6px}
.pick .pick-q{font-size:.92rem;color:var(--ink-faint);margin-bottom:14px}
.pick .pick-opts{display:flex;flex-wrap:wrap;gap:8px}
.pick button{font:500 .88rem/1 var(--sans);color:var(--forest-2);background:var(--cream);border:1px solid var(--line);border-radius:100px;padding:10px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.pick button.sel{background:rgba(176,137,76,.12);border-color:var(--brass);color:var(--brass-deep)}
.pick .pick-a{display:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:.96rem;color:var(--ink-soft);line-height:1.65}
.pick .pick-a.show{display:block}
.pick .pick-a a{color:var(--brass-deep);text-decoration:underline;text-underline-offset:2px}

/* article FAQ reuses site accordion look */
.art-faq{margin:34px 0 8px}
.art-faq h2{font-size:1.7rem;margin-bottom:14px}

/* CTA card */
.art-cta{background:var(--forest);border-radius:var(--r);padding:34px 32px;margin:36px 0;color:#e9ede7}
.art-cta h2{font-family:var(--serif);font-size:1.75rem;color:#f4f1e9;margin-bottom:8px}
.art-cta p{color:#c2ccc0;font-size:.98rem;max-width:56ch;margin-bottom:18px}
.art-cta .btn-brass{display:inline-flex}

/* related guides */
.art-rel{padding:6px 0 60px}
.art-rel .k{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:12px}
.art-rel a{display:inline-flex;align-items:center;gap:8px;margin:0 16px 10px 0;font-size:.93rem;font-weight:500;color:var(--forest-2)}
.art-rel a svg{width:13px;height:13px;color:var(--brass-deep)}
.art-rel a:hover{color:var(--brass-deep)}

/* ---------- guides index ---------- */
.gd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:44px}
.gd-empty{margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px;color:var(--ink-soft);max-width:60ch}
.gd-card .wk-desc{margin-bottom:0}
.gd-date{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-faint);margin-bottom:12px;display:block}

@media (max-width:760px){
  .gd-grid{grid-template-columns:1fr}
  .art-hero img{height:220px}
  .art-head{padding:40px 0 18px}
}