/* ============================================================ the blog article (25 October 2026)
   Laid out the way long reads are on Medium and LinkedIn: one reading column of about 68 characters,
   body text a size up from the rest of the site, calm sentence case headings, generous space between
   paragraphs, a wider picture at the top, and quotes, facts and pictures set apart from the text.
   Loaded only on blog posts. */

.art{padding-block:var(--space-lg) var(--space-2xl)}
.art-col{width:min(680px,100% - var(--gutter)*2);margin-inline:auto}

/* the top: the standfirst, then who wrote it, when, and how long it takes to read */
.art-top{padding-top:var(--space-sm)}
.art-dek{font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:var(--color-soft);margin-bottom:var(--space-md)}
.art-by{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;
  padding-block:18px;border-top:1px solid var(--color-hair);border-bottom:1px solid var(--color-hair)}
.art-face{grid-row:span 2;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--color-bone);
  display:grid;place-items:center;border:1px solid var(--color-hair)}
.art-face img{width:100%;height:100%;object-fit:cover}
.art-face img.mark{width:56%;height:auto;object-fit:contain}
.art-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.art-who b{font-weight:500;font-size:16px;color:var(--color-ink)}
.art-who span{font-size:14px;color:var(--color-soft)}
.art-when{font-size:14px;color:var(--color-soft);display:flex;gap:8px;align-items:baseline}

/* the picture at the top, wider than the text */
.art-hero{width:min(1040px,100% - var(--gutter)*2);margin:var(--space-lg) auto 0}
.art-hero img{display:block;width:100%;height:auto}
.art-hero figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--color-soft);text-align:center}

/* the text */
.art-body{margin-top:var(--space-lg);font-size:clamp(18px,1.35vw,20.5px);line-height:1.78;color:var(--color-ink)}
.art-body > *{margin-top:1.35em}
.art-body > :first-child{margin-top:0}
.art-body p{max-width:none}
.art-body h2{font-family:var(--font-body);font-weight:500;font-size:clamp(22px,1.75vw,27px);line-height:1.3;letter-spacing:-.005em;
  text-transform:none;color:var(--color-ink);margin-top:2.1em}
.art-body h3{font-family:var(--font-body);font-weight:500;font-size:clamp(19px,1.4vw,22px);line-height:1.35;color:var(--color-ink);margin-top:1.8em}
.art-body h2 + *,.art-body h3 + *{margin-top:.6em}
.art-body a{color:var(--color-gold-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art-body a:hover{color:var(--color-ink)}
.art-body strong,.art-body b{font-weight:500}
.art-body ul,.art-body ol{padding-left:1.3em}
.art-body li + li{margin-top:.55em}
.art-body ul li::marker{color:var(--color-gold-deep)}
.art-body ol li::marker{color:var(--color-gold-deep);font-weight:500}

/* a quotation within the text */
.art-body blockquote,.art-body .sb-block-quote{margin-block:1.8em;padding-left:24px;border-left:2px solid var(--color-gold);
  font-size:1.12em;line-height:1.6;color:var(--color-ink)}
.art-body blockquote cite,.art-body .sb-block-quote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--color-soft)}

/* a pull quote: the line worth remembering, set large between two gold rules */
.art-body .sb-block-pullquote{margin-block:2.2em;padding:28px 0;border-top:1px solid var(--color-gold);border-bottom:1px solid var(--color-gold);text-align:center}
.art-body .sb-block-pullquote blockquote{margin:0;padding:0;border:0}
.art-body .sb-block-pullquote p{font-size:clamp(23px,2.1vw,31px);line-height:1.35;font-weight:300;color:var(--color-ink);text-wrap:balance}
.art-body .sb-block-pullquote cite{display:block;margin-top:14px;font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold-deep)}

/* facts at a glance: figures set apart on a warm panel */
.art-body .sbw-facts{list-style:none;padding:26px 28px;margin-block:2em;background:var(--color-bone);border-left:2px solid var(--color-gold);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px 24px}
.art-body .sbw-facts li{margin:0}
.art-body .sbw-facts b{display:block;white-space:nowrap;font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1;color:var(--color-ink)}
.art-body .sbw-facts span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--color-soft)}
.art-body .sbw-facts-h{grid-column:1 / -1;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold-deep)}

/* pictures within the text: the column's width, or a little wider */
.art-body figure,.art-body .sb-block-image{margin-block:2em}
.art-body img{display:block;max-width:100%;height:auto}
.art-body .alignwide{width:min(960px,100vw - var(--gutter)*2);margin-left:50%;transform:translateX(-50%)}
.art-body figcaption,.art-body .sb-element-caption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--color-soft);text-align:center;
  letter-spacing:0;text-transform:none}

/* tables and dividers inside the text (carried over from the editor's own styles, 8 November 2026) */
.art-body ol,.art-body ul{box-sizing:border-box}
.art-body .sb-block-table{overflow-x:auto}
.art-body .sb-block-table table{border-collapse:collapse;width:100%}
.art-body .sb-block-table thead{border-bottom:3px solid}
.art-body .sb-block-table tfoot{border-top:3px solid}
.art-body .sb-block-table td,.art-body .sb-block-table th{border:1px solid;padding:.5em}
.art-body .sb-block-table .has-fixed-layout{table-layout:fixed;width:100%}
.art-body .sb-block-table .has-fixed-layout td,.art-body .sb-block-table .has-fixed-layout th{word-break:break-word}
.art-body .sb-block-separator{border:none;border-top:2px solid}

/* the end: share, the author, comments */
.art-end{margin-top:var(--space-xl)}
.art-share{padding-top:var(--space-md);border-top:1px solid var(--color-hair)}
.art-share h2,.cm-h{font-family:var(--font-body);font-weight:500;font-size:clamp(19px,1.4vw,22px);color:var(--color-ink);letter-spacing:0;text-transform:none}
.art-share ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding:0}
.art-share a,.art-share button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--color-hair);
  border-radius:999px;background:transparent;font:inherit;font-size:14px;color:var(--color-ink);cursor:pointer;transition:border-color .2s,color .2s}
.art-share a:hover,.art-share button:hover{border-color:var(--color-gold);color:var(--color-gold-deep)}
.art-share .sc{width:17px;height:17px;flex:none}
.art-share button.done span{color:var(--color-gold-deep)}

.art-author{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;margin-top:var(--space-lg);padding:22px;background:var(--color-bone)}
.art-author .art-face{width:56px;height:56px;grid-row:auto}
.art-author b{display:block;font-weight:500;color:var(--color-ink)}
.art-author span{display:block;font-size:14px;color:var(--color-soft)}
.art-author p{margin-top:8px;font-size:15px;line-height:1.6}
.art-author a{color:var(--color-gold-deep);text-decoration:underline;text-underline-offset:3px}

/* comments */
.cm{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--color-hair)}
.cm-list + .comment-respond .cm-reply,.cm-h + .comment-respond .cm-reply{margin-top:var(--space-md)}
.cm > .comment-respond:first-child .cm-reply{margin-top:0}
.cm-list{list-style:none;padding:0;margin-top:var(--space-sm)}
.cm-item{padding-block:18px;border-bottom:1px solid var(--color-hair)}
.cm-meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.cm-meta b{font-weight:500;color:var(--color-ink)}
.cm-meta span{font-size:13px;color:var(--color-soft)}
.cm-wait{margin-top:6px;font-size:14px;color:var(--color-gold-deep)}
.cm-text{margin-top:8px;font-size:16px;line-height:1.7}
.cm-text p + p{margin-top:.8em}
.cm-reply{margin-top:var(--space-md);font-family:var(--font-body);font-weight:500;font-size:clamp(19px,1.4vw,22px);color:var(--color-ink);letter-spacing:0;text-transform:none}
.cm-note{margin-top:6px;font-size:14px;color:var(--color-soft)}
.comment-form{display:grid;gap:14px;margin-top:14px}
.comment-form,.comment-form p{margin:0;width:100%;max-width:none}
.comment-form label{display:block;margin-bottom:6px;font-size:14px;color:var(--color-ink)}
.comment-form .required{color:var(--color-gold-deep)}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form textarea{width:100%;padding:12px 14px;border:1px solid var(--color-hair);
  max-width:none;background:#fff;font:inherit;font-size:16px;color:var(--color-ink);border-radius:0}
.comment-form [type="submit"]{display:inline-flex;align-items:center;min-height:48px;padding:0 28px;border:0;border-radius:0;cursor:pointer;
  background:var(--color-ink);color:#fff;font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:background .2s}
.comment-form [type="submit"]:hover{background:var(--color-gold-deep)}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid var(--color-gold);outline-offset:0;border-color:var(--color-gold)}
.comment-form .form-submit{margin-top:4px}
.comment-form .required-field-message{font-size:13px;color:var(--color-soft)}
.cm-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

.art .post-nav{margin-top:var(--space-xl)}
.art .tlink{display:inline-flex;margin-top:var(--space-sm)}

@media (max-width:560px){
  .art-by{grid-template-columns:42px minmax(0,1fr)}
  .art-face{width:42px;height:42px}
  .art-hero{width:100%}
  .art-hero figcaption{padding-inline:var(--gutter)}
  .art-body .sbw-facts{padding:20px}
  .art-share a span,.art-share button span{font-size:13px}
}