/* Hearald Guides — the same look as forgehouse.app/hearald, set for reading. */
:root {
  --ink: #2b2a4c;
  --body: #3d3c5c;
  --muted: #6b7280;
  --line: rgba(43, 42, 76, 0.10);
  --purple: #6d3ff2;
  --purple-lt: #7c5cff;
  --lav: #efe9ff;
  --card: #ffffff;
  --bg: #f6f5fb;
  --code: rgba(124, 92, 255, .10);
  --link: #6d3ff2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e7f2; --body: #c9c7de; --muted: #9b99b4; --line: rgba(160,158,190,.16);
    --card: #171826; --bg: #0e0f18; --lav: #221d3d; --code: rgba(167,139,250,.16); --link: #b39dff;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 24px; }
/* the Hearald mark, from one file, in the brand colour */
.hmark, .mark, .fmark { display: inline-block; flex: none; background: var(--purple); -webkit-mask: url(/hearald/guides/mark.svg) center / contain no-repeat; mask: url(/hearald/guides/mark.svg) center / contain no-repeat; }
@media (prefers-color-scheme: dark) { .hmark, .mark, .fmark { background: #a78bfa; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--purple-lt), var(--purple));
  border: none; border-radius: 12px; padding: 12px 22px;
  box-shadow: 0 8px 22px rgba(109, 63, 242, .28); transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn.small { font-size: 13px; padding: 8px 14px; border-radius: 10px; box-shadow: 0 5px 14px rgba(109, 63, 242, .24); gap: 0; }
.btn svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* ------------------------------------------------------------ article */
/* One column on phones and tablets; on wide screens the article sits beside a
 * sidebar that stays in view: what's on this page, the install button, and the
 * other guides. */
.layout { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; }
@media (min-width: 1100px) { .layout { grid-template-columns: minmax(0, 720px) 270px; gap: 56px; } }
.main-col { min-width: 0; }
.post-head { max-width: 720px; margin: 0 auto; padding: 54px 24px 8px; }
.layout .post-head, .layout .post, .layout .related { padding-left: 0; padding-right: 0; }
.layout .endcard { margin-left: 0; margin-right: 0; }
.kind {
  display: inline-block; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(124, 92, 255, .13); color: var(--link);
}
.post-head h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.14; letter-spacing: -0.02em; font-weight: 780; margin: 0 0 14px; }
.post-head .dek { font-size: 18px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--muted); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.meta .listen { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 650; }
.meta .listen svg { width: 15px; height: 15px; fill: currentColor; }

.post { max-width: 720px; margin: 0 auto; padding: 26px 24px 0; font-size: 17px; line-height: 1.72; color: var(--body); }
.post > * { margin: 0 0 20px; }
.post .lede { font-size: 19px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.post h2 { font-size: 25px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 44px 0 14px; scroll-margin-top: 120px; }
.post h3 { font-size: 19px; color: var(--ink); margin: 30px 0 10px; }
.post strong, .post b { color: var(--ink); }
.post a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; background: var(--code); border-radius: 6px; padding: 2px 6px; color: var(--ink); }
.post ul, .post ol { padding-left: 22px; }
.post li { margin: 0 0 8px; }
.post hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }

/* numbered steps: purple counters, a line down the side */
.post ol.steps { list-style: none; padding: 0; counter-reset: s; }
.post ol.steps > li { counter-increment: s; position: relative; padding: 2px 0 14px 46px; margin: 0; }
.post ol.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--purple-lt), var(--purple)); box-shadow: 0 4px 12px rgba(109,63,242,.25);
}
.post ol.steps > li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 36px; bottom: 2px; width: 2px; background: var(--line); }

.callout { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--purple); border-radius: 14px; padding: 16px 20px; font-size: 16px; }
.callout > b { display: block; margin-bottom: 4px; color: var(--ink); }
.callout p { margin: 0; }

.post .q { font-weight: 700; color: var(--ink); margin: 34px 0 8px; font-size: 18px; }
.post .big { font-size: 1.55em; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -0.01em; }

/* the five-step flow, drawn in HTML so it reflows on a phone */
.flow { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 16px; margin: 30px 0; }
.flow-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 26px; }
.post .flow-steps { padding: 0; }
.flow-steps li { grid-column: span 2; }
.flow-steps li:nth-child(4) { grid-column: 2 / span 2; }
.flow-steps li { position: relative; margin: 0; border-radius: 12px; padding: 12px 10px; text-align: center; background: var(--lav); border: 1.5px solid rgba(109,63,242,.55); color: #3b2a8f; }
.flow-steps li b { display: block; font-size: 13.5px; line-height: 1.25; color: inherit; }
.flow-steps li span { display: block; font-size: 12px; line-height: 1.35; margin-top: 4px; opacity: .85; }
.flow-steps li.you { background: rgba(43,42,76,.05); border-color: rgba(43,42,76,.4); color: var(--ink); }
.flow-steps li.key { background: linear-gradient(135deg, var(--purple-lt), var(--purple)); border-color: transparent; color: #fff; }
.flow-steps li:not(:last-child):not(:nth-child(3))::after { content: '→'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
.flow-legend span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--lav); border: 1.5px solid rgba(109,63,242,.55); }
.flow-legend span.you::before { background: rgba(43,42,76,.05); border-color: rgba(43,42,76,.4); }
.flow-legend span.key::before { background: var(--purple); border-color: var(--purple); }
.flow figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .flow-steps { grid-template-columns: 1fr; gap: 18px; }
  .flow-steps li, .flow-steps li:nth-child(4) { grid-column: auto; text-align: left; padding: 11px 14px; }
  .flow-steps li:not(:last-child):not(:nth-child(3))::after, .flow-steps li:nth-child(3)::after { content: '↓'; position: absolute; right: auto; left: 50%; top: auto; bottom: -19px; transform: translateX(-50%); color: var(--muted); font-size: 16px; }
}
@media (prefers-color-scheme: dark) {
  .flow-steps li { color: #e6ddff; border-color: rgba(167,139,250,.5); }
  .flow-steps li.you { background: rgba(255,255,255,.04); border-color: rgba(200,198,230,.35); }
}

.post ol.quiz { padding-left: 22px; }
details.answers { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
details.answers summary { cursor: pointer; font-weight: 700; color: var(--link); padding: 10px 0; list-style: none; }
details.answers summary::-webkit-details-marker { display: none; }
details.answers summary::before { content: '▸ '; }
details.answers[open] summary::before { content: '▾ '; }
details.answers ol { margin: 0 0 12px; }

.cta-row { margin-top: 6px; }

/* the hidden message box (story post) */
.hm { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.hm-prompt { margin: 0 0 10px; font-weight: 700; color: var(--ink); font-size: 15px; }
.hm-row { display: flex; gap: 8px; }
.hm-row input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.hm-row input:focus { outline: none; border-color: var(--purple-lt); }
.hm-row button { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--purple-lt), var(--purple)); border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; }
.hm-out { margin: 10px 0 0; font-size: 14.5px; min-height: 1em; }
.hm.hm-won { border-color: rgba(22,163,74,.45); }

/* ------------------------------------------------- end of post: the reader */
.endcard {
  max-width: 720px; margin: 46px auto 0; border-radius: 18px; padding: 26px 28px;
  background: linear-gradient(160deg, #efe9ff 0%, #eef1fe 48%, #e9f2fd 100%);
  border: 1px solid rgba(109, 63, 242, .18);
}
.endcard-in { display: flex; gap: 20px; align-items: center; }
.endcard .mark { width: 46px; height: 46px; flex: none; }
.endcard h3 { margin: 0 0 4px; font-size: 19px; }
.endcard p { margin: 0; color: #52506e; font-size: 14.5px; }
.endcard .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.endcard .acts a.more { font-size: 14px; font-weight: 650; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .endcard { background: linear-gradient(160deg, #201d3a 0%, #1b1e33 55%, #17222f 100%); }
  .endcard p { color: #b9b7d4; }
}
@media (max-width: 560px) { .endcard-in { flex-direction: column; align-items: flex-start; } .endcard { margin-left: 16px; margin-right: 16px; } }

.related { max-width: 720px; margin: 46px auto 0; padding: 0 24px; }
.related h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.related .allguides { margin: 14px 0 0; font-size: 14px; font-weight: 650; }
.related .allguides a { text-decoration: none; }

/* ----------------------------------------------- sidebar (wide screens) */
.side { display: none; }
@media (min-width: 1100px) {
  .side { display: block; padding-top: 54px; }
  .side-in { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - 100px); overflow-y: auto; }
}
.side h2 { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc a { display: block; margin-left: -2px; padding: 5px 0 5px 12px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--link); border-left-color: var(--purple); font-weight: 650; }
.side-cta { background: linear-gradient(160deg, #efe9ff 0%, #eef1fe 48%, #e9f2fd 100%); border: 1px solid rgba(109, 63, 242, .18); border-radius: 16px; padding: 16px 16px 18px; }
.side-cta .mark { display: block; width: 30px; height: 30px; margin-bottom: 8px; }
.side-cta b { display: block; font-size: 15px; color: var(--ink); }
.side-cta p { margin: 4px 0 12px; font-size: 13px; line-height: 1.45; color: #52506e; }
.moreg ul { list-style: none; margin: 0 0 0 -10px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.moreg li a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.moreg li a:hover { background: var(--card); color: var(--link); }
.moreg .all { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 650; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .side-cta { background: linear-gradient(160deg, #201d3a 0%, #1b1e33 55%, #17222f 100%); }
  .side-cta p { color: #b9b7d4; }
}

/* ------------------------------------------- the same, under the header on phones */
details.toc-m { margin: 14px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; }
details.toc-m summary { cursor: pointer; padding: 11px 0; font-size: 14px; font-weight: 650; color: var(--ink); }
details.toc-m ol { margin: 0 0 12px; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
details.toc-m li { margin: 0 0 4px; }
details.toc-m a { text-decoration: none; }
.moreg-m { margin: 14px 0 0; }
.moreg-m > span { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.moreg-m .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.moreg-m .chips::-webkit-scrollbar { display: none; }
.moreg-m .chips a { flex: none; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.moreg-m .chips a:hover { border-color: rgba(109,63,242,.35); color: var(--link); }
@media (min-width: 1100px) { details.toc-m, .moreg-m { display: none; } }
.post-head .meta { padding-bottom: 18px; }
.post-head .meta + details, .post-head .meta + nav { margin-top: 16px; }
.post-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.post-head .meta { border-bottom: none; }

/* ------------------------------------------------------------- cards */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pcard {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 20px 18px;
  box-shadow: 0 1px 2px rgba(43, 42, 76, 0.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pcard:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(43, 42, 76, .10); border-color: rgba(109,63,242,.3); }
.pcard .kind { margin: 0 0 4px; align-self: flex-start; }
.pcard b { font-size: 17px; line-height: 1.3; color: var(--ink); }
.pcard span.d { font-size: 14px; color: var(--muted); }
.pcard span.m { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 8px; }

/* ------------------------------------------------------------- index */
.hero { text-align: center; padding: 64px 0 34px; }
.hero h1 { font-size: clamp(34px, 5.4vw, 50px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 780; margin: 0 0 12px; }
.hero h1 .g { background: linear-gradient(92deg, var(--purple-lt), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 0 auto; max-width: 580px; font-size: 16.5px; color: var(--muted); }
.hero .feedlink { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--muted); text-decoration: none; }
.hero .feedlink:hover { color: var(--link); }

/* ------------------------------------------------------------ footer */
footer {
  max-width: 1020px; margin: 64px auto 0; padding: 18px 24px 34px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
}
footer .fmark { width: 20px; height: 20px; }
footer .spacer { flex: 1; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--link); text-decoration: underline; }

/* ------------------------------------------------------------ pictures */
/* Topic labels: each topic has a pen colour, the same one its covers use. */
.t-howto { --pen: #6d3ff2; --pen-tx: #6d3ff2; }
.t-study { --pen: #147a6c; --pen-tx: #127062; }
.t-compare { --pen: #2b2a4c; --pen-tx: #4a4870; }
.t-story { --pen: #b03f73; --pen-tx: #a3386a; }
@media (prefers-color-scheme: dark) {
  .t-howto { --pen-tx: #b39dff; } .t-study { --pen-tx: #5fd0bd; } .t-compare { --pen-tx: #c9c7de; } .t-story { --pen-tx: #f08fbb; }
}
.pen { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--pen-tx); font-size: 13.5px; font-weight: 700; }
.pen::before { content: ''; width: 16px; height: 7px; border-radius: 4px; background: var(--pen-tx); transform: rotate(-8deg); }

/* The cover sits under the date line and stands in for the rules that were there. */
.post-head .meta { border-bottom: none; padding-bottom: 0; }
.post-head { padding-bottom: 6px; border-bottom: none; }
.pcover { margin: 22px 0 4px; border-radius: 18px; overflow: hidden; aspect-ratio: 720 / 300; background: var(--lav); }
.pcover img { display: block; width: 100%; height: 100%; }

/* At a glance: four facts in a row (two by two on phones). */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.glance div { padding: 14px 16px; border-left: 1px solid var(--line); }
.glance div:first-child { border-left: none; }
.glance span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.glance b { display: block; font-size: 14.5px; line-height: 1.35; margin-top: 2px; }
@media (max-width: 640px) {
  .glance { grid-template-columns: 1fr 1fr; }
  .glance div:nth-child(3) { border-left: none; }
  .glance div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Drawings inside a guide: a settings screen, or the Hearald player. */
.post .shot { margin: 16px 0 6px; }
.shot figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.cx { background: #fff; border: 1px solid rgba(43,42,76,.10); border-radius: 14px; box-shadow: 0 14px 34px rgba(84,63,170,.12); overflow: hidden; max-width: 520px; color: #2b2a4c; font-size: 14px; line-height: 1.4; }
.cx-bar { background: #efedf6; padding: 9px 12px; }
.cx-url { display: inline-block; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; color: #6b6890; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cx-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f0eef6; }
.cx-head b { flex: 1; font-size: 15px; color: #2b2a4c; }
.cx-ic { width: 26px; height: 26px; border-radius: 7px; background: #e9e4fb; flex: none; }
.cx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #f4f2f8; }
.cx-row:last-child { border-bottom: none; }
.cx-sel { font-size: 13px; color: #6b6890; border: 1px solid #e3e0ee; border-radius: 8px; padding: 3px 10px; white-space: nowrap; }
.cx-row.hot { background: #faf8ff; box-shadow: inset 4px 0 0 #6d3ff2; font-weight: 700; }
.cx-row.hot .tog { box-shadow: 0 0 0 4px rgba(109,63,242,.18); }
.tog { width: 36px; height: 20px; border-radius: 999px; background: #d9d5ea; position: relative; flex: none; }
.tog i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tog.on { background: #6d3ff2; } .tog.on i { left: 18px; }

.pl-stage { position: relative; background: var(--lav); border-radius: 16px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: center; }
.post .pl-page { margin: 0; font-size: 15px; line-height: 1.75; color: #4b4a6e; background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(84,63,170,.10); }
.pl-page .hl { background: #f8ecac; border-radius: 4px; padding: 1px 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pl-page .wd { background: #6d3ff2; color: #fff; border-radius: 4px; padding: 1px 4px; }
.vc { background: #fff; border: 1px solid rgba(43,42,76,.09); border-radius: 16px; box-shadow: 0 12px 30px rgba(84,63,170,.14); color: #2b2a4c; font-size: 13px; line-height: 1.45; padding: 13px 14px 12px; }
.hp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hp-top b { display: block; font-size: 12.5px; line-height: 1.25; color: #2b2a4c; }
.hp-top span { display: block; font-size: 10.5px; color: #8a87a8; }
.vc .mt { display: inline-flex; align-items: center; gap: 2px; height: 20px; }
.vc .mt i { display: block; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #a78bfa, #6d3ff2); }
.vc .tr { position: relative; height: 5px; border-radius: 4px; background: #e6e1f7; }
.vc .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #8b6cff, #6d3ff2); }
.vc .tr b { position: absolute; top: -3px; width: 2px; height: 11px; border-radius: 1px; background: rgba(109,63,242,.38); }
.hp-times { display: flex; justify-content: space-between; font-size: 10px; color: #94a3b8; margin: 5px 0 6px; }
.hp-ctl { display: flex; align-items: center; justify-content: space-between; }
.hp-mid { display: flex; align-items: center; gap: 12px; }
.vc .chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 650; color: #4c30b8; background: #fff; border: 1px solid rgba(109,63,242,.24); border-radius: 999px; padding: 4px 10px; white-space: nowrap; line-height: 1.2; }
.vc .chip.on { background: #f1ecfe; border-color: #6d3ff2; }
.vc .pb { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #8b6cff, #6d3ff2); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(109,63,242,.35); }
.vc .pb svg { width: 13px; height: 13px; fill: #fff; }
.vc .ic { color: #475569; display: inline-flex; }
.vc .ic svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 640px) { .pl-stage { grid-template-columns: 1fr; padding: 14px; } }
@media (prefers-color-scheme: dark) { .cx, .post .pl-page { box-shadow: 0 14px 34px rgba(0,0,0,.4); } }

/* ------------------------------------------------------- home page test */
/* The guides home rotates three designs; <html data-ab-guides-home> says which
   one this visitor is on (hearald/ab.js). Without it, the wall shows. */
[data-ab-show] { display: none; }
html[data-ab-guides-home="wall"] [data-ab-show="guides-home:wall"],
html[data-ab-guides-home="shelves"] [data-ab-show="guides-home:shelves"],
html[data-ab-guides-home="paths"] [data-ab-show="guides-home:paths"],
html:not([data-ab-guides-home]) [data-ab-show="guides-home:wall"] { display: block; }

.hub { max-width: 1120px; margin: 0 auto; padding: 0 24px 20px; }
.hub a { text-decoration: none; color: inherit; }
.hub h1 { font-weight: 780; letter-spacing: -.02em; }
.hub .cv { display: block; overflow: hidden; border-radius: 14px; background: var(--pen, var(--lav)); }
.hub .cv img, .nr-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub .go { align-self: flex-start; margin-top: 6px; font-size: 14.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--purple-lt), var(--purple)); padding: 10px 18px; border-radius: 11px; box-shadow: 0 8px 20px rgba(109,63,242,.28); }
.sw { display: inline-block; width: 14px; height: 6px; border-radius: 3px; background: var(--pen-tx); transform: rotate(-8deg); }

/* 1. Wall: big colour tiles, title on the cover. */
.hw-head { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; align-items: center; padding: 40px 0 34px; }
.hw-text h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; margin: 0 0 14px; }
.hw-text p { margin: 0 0 20px; color: var(--muted); font-size: 17px; max-width: 470px; }
.hw-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hw-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.hw-legend .sw { width: 22px; height: 9px; border-radius: 5px; }
.hw-stack { position: relative; height: 300px; }
.hw-stack img { position: absolute; width: 170px; height: 170px; border-radius: 16px; box-shadow: 0 22px 44px rgba(43,42,76,.22); }
.hw-stack .s1 { left: 125px; top: 20px; transform: rotate(2deg); z-index: 2; }
.hw-stack .s2 { left: 10px; top: 70px; transform: rotate(-9deg); }
.hw-stack .s3 { left: 240px; top: 80px; transform: rotate(10deg); }
.hw-stack.n1 .s1 { left: 120px; top: 50px; width: 200px; height: 200px; }
.hw-stack.n2 .s1 { left: 160px; top: 30px; }
.hw-stack.n2 .s2 { left: 40px; top: 80px; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wall.few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: var(--pen); transition: transform .18s ease, box-shadow .18s ease; }
.hub .tl { color: #fff; }
.tl:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(43,42,76,.22); }
.tl.big { grid-column: span 2; grid-row: span 2; }
.tl-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tl-top { position: absolute; left: 0; right: 0; top: 0; padding: 20px 22px 0; display: flex; flex-direction: column; gap: 6px; }
.tl-t { font-size: 12.5px; font-weight: 700; opacity: .85; padding-right: 100px; }
.tl b { font-size: 21px; line-height: 1.2; letter-spacing: -.01em; font-weight: 780; max-width: 300px; text-wrap: balance; }
.tl .d { font-size: 15.5px; line-height: 1.45; opacity: .9; max-width: 440px; }
.tl.big .tl-top, .wall.few .tl-top { padding: 34px 36px 0; gap: 12px; }
.tl.big b, .wall.few .tl b { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; max-width: 520px; }
.tl-m { position: absolute; right: 16px; top: 16px; font-size: 12.5px; font-weight: 700; background: rgba(0,0,0,.22); padding: 3px 9px; border-radius: 999px; }
.tl.big .tl-m, .wall.few .tl-m { right: 26px; top: 26px; }
.wall.few .tl-art { transform: translateY(16%); }

/* 2. Shelves: a featured guide, then a row per topic, then the story. */
.hs-head { padding: 52px 0 18px; }
.hs-head h1 { font-size: clamp(32px, 4.6vw, 46px); line-height: 1.1; margin: 0 0 8px; }
.hs-head p { margin: 0; color: var(--muted); font-size: 16px; max-width: 540px; }
.hs-topics { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.hs-topics a, .hs-topics span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 650; }
.hs-topics i:not(.sw) { font-style: normal; font-weight: 600; color: var(--muted); font-size: 12.5px; }
.hs-topics .on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hs-topics .on i { color: inherit; opacity: .7; }
.hs-topics .sw { width: 10px; height: 10px; border-radius: 3px; transform: none; }
.hs-feat { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; scroll-margin-top: 90px; }
.hs-feat .cv { aspect-ratio: 720 / 300; }
.hs-ftext { display: flex; flex-direction: column; gap: 10px; padding-right: 20px; }
.hs-ftext b { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; letter-spacing: -.015em; font-weight: 780; }
.hs-ftext .d { color: var(--muted); font-size: 16px; line-height: 1.5; }
.hs-ftext .m { color: var(--muted); font-size: 13px; }
.shelf { margin-top: 46px; scroll-margin-top: 90px; }
.sh-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.sh-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.sh-head p { margin: 0; color: var(--muted); font-size: 14.5px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gcard { display: flex; flex-direction: column; gap: 6px; }
.gcard .cv { aspect-ratio: 16 / 9; margin-bottom: 8px; transition: transform .18s ease, box-shadow .18s ease; }
.gcard:hover .cv { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(43,42,76,.16); }
.gcard b { font-size: 17.5px; line-height: 1.3; }
.gcard:hover b { color: var(--link); }
.gcard .d { color: var(--muted); font-size: 14px; line-height: 1.5; }
.gcard .m { color: var(--muted); font-size: 12.5px; }
.hs-story { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; margin: 54px 0 10px; background: #2a1830; border-radius: 22px; padding: 16px 34px 16px 16px; scroll-margin-top: 90px; }
.hub .hs-story { color: #fff; }
.hs-story .cv { aspect-ratio: 3 / 2; }
.hs-stext { display: flex; flex-direction: column; gap: 10px; }
.hs-story .pen { color: #f3a9cb; margin: 0; }
.hs-story .pen::before { background: #f3a9cb; }
.hs-story .q { font-size: 26px; font-weight: 780; letter-spacing: -.015em; line-height: 1.18; }
.hs-story .d { color: #e5cfe0; font-size: 15px; max-width: 560px; }
.hs-story .go { background: #fff; color: #2a1830; box-shadow: none; }

/* 3. Paths: start from what you're trying to do. */
.hc-head { text-align: center; padding: 50px 0 28px; }
.hc-head h1 { font-size: clamp(32px, 4.8vw, 48px); line-height: 1.1; margin: 0 0 10px; }
.hc-head p { margin: 0 auto; color: var(--muted); font-size: 16.5px; max-width: 560px; }
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pc { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.pc-art { display: block; width: 100%; height: auto; aspect-ratio: 600 / 260; object-fit: cover; }
.pc-body { padding: 18px 20px 14px; }
.pc h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
.pc-body > p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.pc ul { list-style: none; margin: 0; padding: 0; }
.pc li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.pc li a:hover { color: var(--pen-tx); }
.pc li span { margin-left: auto; flex: none; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.hub .pc-none { margin: 0; padding: 12px 0 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.hub .pc-none a { color: var(--link); font-weight: 650; }
.newest { margin: 52px 0 10px; }
.newest h2 { margin: 0 0 10px; font-size: 22px; }
.nr { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.nr-th { display: block; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; }
.nr-tx { display: flex; flex-direction: column; gap: 3px; }
.nr .pen { margin: 0; }
.nr b { font-size: 18px; line-height: 1.3; }
.nr:hover b { color: var(--link); }
.nr .d { color: var(--muted); font-size: 14.5px; }
.nr-m { color: var(--muted); font-size: 13px; white-space: nowrap; }

@media (max-width: 960px) {
  .hw-head { grid-template-columns: 1fr; } .hw-stack { display: none; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl.big { grid-row: auto; aspect-ratio: 2 / 1.1; }
  .paths { grid-template-columns: 1fr; }
  .pc { display: grid; grid-template-columns: 220px 1fr; } .pc-art { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 860px) {
  .hs-feat { grid-template-columns: 1fr; gap: 14px; padding: 12px 12px 20px; }
  .hs-ftext { padding: 0 8px; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .hs-story { grid-template-columns: 1fr; padding: 12px 12px 22px; }
  .hs-stext { padding: 0 10px; }
}
@media (max-width: 560px) {
  .wall, .wall.few { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wall.few .tl, .tl.big { grid-column: span 2; aspect-ratio: 1 / 1; }
  .tl-top { padding: 12px 12px 0; } .tl b { font-size: 15px; } .tl-m { display: none; } .tl-t { padding-right: 0; }
  .tl.big .tl-top, .wall.few .tl-top { padding: 20px 20px 0; }
  .tl.big b, .wall.few .tl b { font-size: 24px; }
  .tl .d { display: none; }
  .tl.big .tl-m, .wall.few .tl-m { display: block; right: 14px; top: 14px; }
  .tl:not(.big) { aspect-ratio: 4 / 5; }
  .tl:not(.big) .tl-art { object-position: 50% 100%; transform: translateY(30%); }
  .hs-topics { flex-wrap: nowrap; overflow-x: auto; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; scrollbar-width: none; }
  .hs-topics a, .hs-topics span { flex: none; }
  .row3 { grid-template-columns: 1fr; }
  .sh-head { flex-direction: column; gap: 2px; }
  .pc { display: flex; } .pc-art { height: auto; aspect-ratio: 600 / 220; }
  .nr { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } .nr-th { width: 72px; height: 72px; } .nr-m { display: none; } .nr .d { display: none; } .nr b { font-size: 16px; }
}
@media (prefers-color-scheme: dark) { .hs-story { background: #2b1630; } }

/* ------------------------------------------------------------ research brief */
/* For posts built on studies: a scorecard of findings up top, the source under
 * each finding's heading, a "what to do with it" line, and a two-column table
 * that matches each finding to what Hearald does. */
.post ul.verdicts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.verdicts li { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 15px; }
.verdicts .v-tag { display: inline-block; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.verdicts .yes .v-tag { background: rgba(20, 122, 108, .12); color: #127062; }
.verdicts .best .v-tag { background: #147a6c; color: #fff; }
.verdicts .no .v-tag { background: rgba(176, 63, 115, .11); color: #a3386a; }
.verdicts b { display: block; font-size: 15.5px; line-height: 1.35; }
.verdicts .d { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 640px) { .post ul.verdicts { grid-template-columns: 1fr; } }
.post .src { margin: -6px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.post .src a { color: inherit; }
.post .do { background: var(--lav); border-radius: 12px; padding: 12px 16px; font-size: 16px; line-height: 1.6; }
.post table.fits { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 15.5px; line-height: 1.5; }
.fits th { text-align: left; padding: 11px 16px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: rgba(124, 92, 255, .06); }
.fits td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.fits td:first-child { width: 38%; font-weight: 650; color: var(--ink); }
@media (max-width: 640px) {
  .fits thead { display: none; }
  .fits tr, .fits td { display: block; width: auto; }
  .fits td:first-child { width: auto; padding-bottom: 2px; }
  .fits td + td { border-top: none; padding-top: 0; }
}
@media (prefers-color-scheme: dark) {
  .verdicts .yes .v-tag { background: rgba(95, 208, 189, .14); color: #5fd0bd; }
  .verdicts .best .v-tag { background: #1d8f7f; color: #fff; }
  .verdicts .no .v-tag { background: rgba(240, 143, 187, .14); color: #f08fbb; }
}