/* ── layout ── */
.page-wrap { max-width:var(--container); margin:0 auto; padding:calc(var(--header-h) + 2.6rem) var(--pad-x) 5rem; }

/* ── breadcrumb ── */
.page-wrap .breadcrumb { font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--text-soft); margin-bottom:1.8rem; }
.page-wrap .breadcrumb a { color:var(--text-muted); text-decoration:none; }
.page-wrap .breadcrumb a:hover { color:var(--lime-deep); }
.page-wrap .breadcrumb .sep { margin:0 .5rem; color:var(--line-2); }

/* ── badges ── */
.page-wrap .badge { display:inline-block; font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; border:1.5px solid var(--ink); border-radius:0; padding:.24em .6em; margin-right:.45rem; background:var(--paper); color:var(--ink); }
.page-wrap .badge-format { background:var(--ink); color:var(--bone); }
.page-wrap .badge-foundation { background:transparent; color:var(--lime-deep); border-color:var(--lime); }
.page-wrap .badge-intermediate { background:transparent; color:var(--orange-deep); border-color:var(--orange); }
.page-wrap .badge-advanced { background:transparent; color:var(--neg); border-color:var(--neg); }
.page-wrap .badge-time { background:transparent; color:var(--text-soft); border-color:var(--line-2); }

/* ── article ── */
.page-wrap .article { max-width:46rem; margin:0 auto; }
.page-wrap .article-header { margin:.4rem 0 2rem; }
.page-wrap .article-header > div:first-child { margin-bottom:.9rem; }
.page-wrap .article-header h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.04; letter-spacing:-.02em; margin:.5rem 0 .6rem; }
.page-wrap .article-byline { font-family:var(--font-sans); font-size:.95rem; color:var(--text-muted); margin:.1rem 0 .35rem; }
.page-wrap .article-byline strong { font-weight:600; color:var(--text); }
.page-wrap .article-meta { font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); }
.page-wrap .article-body { font-family:var(--font-sans); font-size:1.075rem; line-height:1.72; color:var(--text); }
.page-wrap .article-body p { margin:1.1rem 0; text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty; }
/* opening standfirst — larger and left-ragged so the article reads as an editorial lead-in */
.page-wrap .article-body > p:first-of-type { font-size:1.2rem; line-height:1.6; text-align:left; hyphens:manual; color:var(--text); }
.page-wrap .article-body h2 { font-family:var(--font-display); font-weight:600; font-size:1.85rem; line-height:1.1; letter-spacing:-.015em; margin:2.6rem 0 .6rem; }
.page-wrap .article-body h3 { font-family:var(--font-display); font-weight:500; font-size:1.32rem; margin:2rem 0 .4rem; }
/* the shared reset (styles.css) strips ul markers (list-style:none) and zeroes
   padding — restore real markers + indent for article prose (indent via padding,
   not margin, so the discs sit inside the text column, never clipped at the edge) */
.page-wrap .article-body ul, .page-wrap .article-body ol { margin:1.1rem 0; padding-left:1.5rem; }
.page-wrap .article-body ul { list-style:disc; }
.page-wrap .article-body ol { list-style:decimal; }
.page-wrap .article-body ul ul { list-style:circle; margin:.3rem 0; }
.page-wrap .article-body li { margin:.4rem 0; padding-left:.25rem; }
.page-wrap .article-body li::marker { color:var(--lime-deep); font-weight:700; }

/* ── term/definition list: bold term on its own line, muted definition beneath ── */
.page-wrap .article-body .def-list li { margin:.6rem 0; color:var(--text-muted); }
.page-wrap .article-body .def-list li strong { display:block; color:var(--text); font-weight:700; margin-bottom:.05rem; }

/* ── expandable prose (<details>): first line always shown, rest behind "read more" ── */
.page-wrap .article-body .readmore { margin:1.2rem 0; }
.page-wrap .article-body .readmore > summary { display:block; cursor:pointer; list-style:none; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.page-wrap .article-body .readmore > summary::-webkit-details-marker { display:none; }
.page-wrap .article-body .readmore > summary::marker { content:""; }
.page-wrap .article-body .readmore > summary:focus-visible { outline:2px solid var(--lime-deep); outline-offset:3px; }
.page-wrap .article-body .rm-cue { font-family:var(--font-mono); font-size:.8em; letter-spacing:.02em; color:var(--lime-deep); white-space:nowrap; }
.page-wrap .article-body .readmore > summary:hover .rm-cue { text-decoration:underline; }
.page-wrap .article-body .rm-cue--less { display:none; }
.page-wrap .article-body .readmore[open] > summary .rm-cue--more { display:none; }
.page-wrap .article-body .readmore[open] > summary .rm-cue--less { display:inline; }
.page-wrap .article-body .readmore > p { margin:.9rem 0 0; }
.page-wrap .article-body .readmore > ul, .page-wrap .article-body .readmore > ol { margin:.9rem 0 0; }

/* ── pull-quote highlight: a bold display statement, distinct from the italic
   blockquote — thick ink rules top and bottom, lime accent bar at the left ── */
.page-wrap .article-body .pullquote { font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.22; letter-spacing:-.015em; color:var(--ink); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); border-left:6px solid var(--lime); padding:1.3rem 0 1.3rem 1.3rem; margin:2.4rem 0; text-align:left; text-wrap:balance; }

/* ── case study panel: a worked example set apart from the prose. Quieter than
   the ink "Where Hedj fits" callout further down, so the two don't compete ── */
.page-wrap .article-body .casestudy { background:var(--bone-2); border:2px solid var(--ink); padding:1.7rem 1.9rem; margin:2.6rem 0; }
.page-wrap .article-body .casestudy-label { display:inline-block; font-family:var(--font-mono); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--lime-deep); border-bottom:2px solid var(--lime); padding-bottom:.4rem; margin-bottom:.85rem; }
.page-wrap .article-body .casestudy-title { font-family:var(--font-display); font-weight:600; font-size:1.45rem; line-height:1.12; letter-spacing:-.015em; color:var(--ink); margin:0; }
.page-wrap .article-body .casestudy > p:first-of-type { margin-top:.7rem; }
.page-wrap .article-body .casestudy > *:last-child { margin-bottom:0; }
.page-wrap .article-body .casestudy img { margin:1.4rem 0 .3rem; }

.page-wrap .article-body strong { font-weight:700; }
.page-wrap .article-body a { color:var(--lime-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.page-wrap .article-body a:hover { color:var(--ink); background:var(--lime); }
.page-wrap .article-body img { max-width:100%; border:2px solid var(--ink); border-radius:0; }
.page-wrap .article-body blockquote { border-left:3px solid var(--lime); margin:1.4rem 0; padding:.2rem 0 .2rem 1.2rem; color:var(--text-muted); font-style:italic; }
.page-wrap .article-body code { font-family:var(--font-mono); font-size:.9em; background:var(--bone-2); padding:.08em .35em; border:1px solid var(--line); }

/* ── tables ── */
.page-wrap .table-wrap { overflow-x:auto; margin:1.6rem 0; border:2px solid var(--ink); }
.page-wrap .article-body table { border-collapse:collapse; width:100%; font-size:.94rem; }
.page-wrap .article-body th, .page-wrap .article-body td { border:1px solid var(--line-2); padding:.6rem .8rem; text-align:left; vertical-align:top; }
.page-wrap .article-body th { background:var(--ink); color:var(--bone); font-family:var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:.76rem; }
.page-wrap .article-body tbody tr:nth-child(even) { background:var(--bone-2); }

/* ── table of contents ── */
.page-wrap .toc { border:2px solid var(--ink); background:var(--paper); padding:1.1rem 1.4rem; margin:1.8rem 0; }
.page-wrap .toc-title { font-family:var(--font-mono); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-soft); margin-bottom:.5rem; }
.page-wrap .toc a { display:block; color:var(--text-muted); text-decoration:none; padding:.2rem 0; font-size:.95rem; }
.page-wrap .toc a:hover { color:var(--lime-deep); }

/* ── "Where Hedj fits" callout — the one bold panel ── */
.page-wrap .hedj-fits { background:var(--ink); color:var(--on-ink); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--lime); padding:1.7rem 1.9rem; margin:2.6rem 0; }
.page-wrap .hedj-fits-label { font-family:var(--font-mono); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--lime); margin-bottom:.6rem; }
.page-wrap .hedj-fits p { margin:.6rem 0 1.1rem; color:var(--on-ink-muted); }
.page-wrap .hedj-fits a:not(.btn) { color:var(--on-ink); text-decoration-color:var(--lime); }
.page-wrap .hedj-fits a:not(.btn):hover { background:var(--lime); color:var(--lime-ink); }

/* ── subscribe CTA (shown only once a Substack URL is set) ── */
.page-wrap .subscribe-cta { border:2px solid var(--ink); background:var(--paper); padding:1.3rem 1.6rem; margin:2rem 0; display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.page-wrap .subscribe-cta p { margin:0; font-size:.95rem; color:var(--text-muted); }

/* ── related / card grid ── */
.page-wrap .related { margin-top:3rem; border-top:2px solid var(--ink); padding-top:1.7rem; }
.page-wrap .related h2 { font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin-bottom:1rem; }
.page-wrap .card-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.page-wrap .card { display:block; background:var(--paper); border:2px solid var(--ink); border-radius:0; padding:1.1rem 1.2rem; text-decoration:none; color:var(--text); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.page-wrap a.card:hover { transform:translate(-3px,-3px); box-shadow:var(--sh-card); }
.page-wrap .card > div:first-child { margin-bottom:.35rem; }
.page-wrap .card .badge { font-size:.6rem; margin-bottom:.25rem; }
.page-wrap .card-title { font-family:var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.2; margin:.5rem 0 .3rem; }
.page-wrap .card-desc { font-size:.9rem; color:var(--text-muted); line-height:1.5; }
.page-wrap .card.coming-soon { opacity:.5; pointer-events:none; border-style:dashed; }
.page-wrap .coming-tag { font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); }

/* ── prev / next ── */
.page-wrap .prevnext { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; }
.page-wrap .prevnext .card { flex:1; }
.page-wrap .prevnext .dir { font-family:var(--font-mono); font-size:.66rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--lime-deep); margin-bottom:.3rem; }

/* ── library / theme hero (restrained editorial) ── */
.page-wrap .lib-hero { padding:.5rem 0 2rem; border-bottom:2px solid var(--ink); margin-bottom:2.6rem; }
.page-wrap .lib-hero .eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--lime-deep); margin-bottom:1rem; }
.page-wrap .lib-hero h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,5.5vw,4.4rem); line-height:1.0; letter-spacing:-.025em; margin-bottom:1rem; max-width:18ch; }
.page-wrap .lib-hero p { font-size:var(--fs-lead); color:var(--text-muted); max-width:60ch; line-height:1.5; }

/* ── theme cards (index) ── */
.page-wrap .theme-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.4rem 0; }
.page-wrap .theme-card { background:var(--paper); border:2px solid var(--ink); padding:1.4rem; text-decoration:none; color:var(--text); display:flex; flex-direction:column; transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.page-wrap .theme-card:hover { transform:translate(-3px,-3px); box-shadow:var(--sh-card); }
.page-wrap .theme-card h3 { font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.1; margin-bottom:.5rem; }
.page-wrap .theme-card p { font-size:.87rem; color:var(--text-muted); line-height:1.5; margin-bottom:1rem; flex:1; }
.page-wrap .theme-count { font-family:var(--font-mono); font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--lime-deep); }
.page-wrap .theme-card.coming-soon { opacity:.5; pointer-events:none; border-style:dashed; }

/* ── "start here" CTA (index) ── */
.page-wrap .start-here { background:var(--lime); color:var(--lime-ink); border:2px solid var(--ink); box-shadow:var(--sh-card); padding:1.7rem 1.9rem; margin:2rem 0; display:flex; justify-content:space-between; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.page-wrap .start-here h2 { font-family:var(--font-display); font-weight:600; font-size:1.35rem; margin-bottom:.25rem; }
.page-wrap .start-here p { font-size:.95rem; margin:0; color:var(--lime-ink); opacity:.85; }
.page-wrap .start-here .btn { background:var(--ink); color:var(--bone); border-color:var(--ink); }
.page-wrap .start-here .btn:hover { background:transparent; color:var(--lime-ink); }

/* ── filters ── */
.page-wrap .filters { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:2rem 0 1.2rem; }
.page-wrap .filter-chip { font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; border:1.5px solid var(--ink); background:var(--paper); color:var(--text-muted); border-radius:0; padding:.4rem .9rem; cursor:pointer; transition:background .15s, color .15s; }
.page-wrap .filter-chip:hover { color:var(--ink); }
.page-wrap .filter-chip.on { background:var(--ink); color:var(--bone); }
.page-wrap .search-input { flex:1; min-width:220px; font-family:var(--font-sans); border:2px solid var(--ink); background:var(--paper); color:var(--text); border-radius:0; padding:.55rem .85rem; font-size:.95rem; }
.page-wrap .search-input:focus { outline:none; box-shadow:var(--sh-card); }
.page-wrap .search-input::placeholder { color:var(--text-soft); }

/* ── index theme sections + hub groups ── */
.page-wrap .theme-section { margin:2.8rem 0; }
.page-wrap .theme-section > h2 { font-family:var(--font-display); font-weight:600; font-size:1.6rem; letter-spacing:-.01em; margin-bottom:.3rem; }
.page-wrap .theme-section > .sub { font-size:.95rem; color:var(--text-muted); margin-bottom:1.1rem; }
.page-wrap .theme-section > .sub a { color:var(--lime-deep); text-decoration:none; font-weight:500; }
.page-wrap .hub-group { margin:1.9rem 0; }
.page-wrap .hub-group > h3 { font-family:var(--font-mono); font-weight:500; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); margin-bottom:.8rem; }
.page-wrap .no-results { display:none; color:var(--text-muted); font-size:.95rem; padding:1.2rem 0; }

/* ── responsive ── */
@media (max-width:1000px){ .page-wrap .theme-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .page-wrap .theme-cards { grid-template-columns:1fr; }
  .page-wrap .prevnext { flex-direction:column; }
  .page-wrap .article-body { font-size:1rem; }
  .page-wrap .start-here, .page-wrap .hedj-fits, .page-wrap .subscribe-cta, .page-wrap .article-body .casestudy { padding:1.3rem 1.4rem; }
}