/* =====================================================================
   CTFY · Midnight Theta · Journal article — reading layout (page layer)
   Spec: docs/redesign/pages/40-blog.md §5.1–5.4, §7. Builds on css/site.css (.m-article, .m-progress, .m-note, .m-bridge, .m-journal).
   Loaded after css/pages/blog.css (index/bridge/finale/signup rules are reused). Site tokens only.
   Chapters: I Header band (H6 article variant) · II Hero figure · III Reading grid (TOC | article | margin)
             IV Body elements · V After the body (key points, note, sources, footer, author, bridge) · VI Prev/next, related
   ===================================================================== */

#article,#subscribe{scroll-margin-top:96px}

/* ---------- Template banner (internal pages only) ---------- */
.tpl-banner{position:relative;z-index:5;margin:0;padding:calc(var(--dock-top,16px) + var(--dock-h,64px) + 10px) var(--gutter) 10px;background:var(--champ-600);color:var(--paper-0);
  font:600 var(--t-micro)/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.tpl-slot{color:var(--ink-3)}
.m-article .tpl-slot,.art__after .tpl-slot{font-style:normal}
.m-article h2.tpl-slot,.m-article h3.tpl-slot{color:var(--ink-1)}

/* ---------- I · H6 article variant ---------- */
.art-hero{min-height:max(440px,44svh)}
.art-hero .hero__content>*{max-width:900px}
.art-hero .hero__title{max-width:22ch;text-wrap:balance}
.art-hero .hero__lead{max-width:60ch}
.art-hero .art-cat{margin-bottom:18px;text-decoration:none}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:26px;color:var(--text-2);font:500 calc(var(--t-small) * var(--k-text))/1.4 var(--font-sans)}
.art-meta>*+*::before{content:"";display:inline-block;width:3px;height:3px;margin:0 12px;vertical-align:middle;border-radius:50%;background:var(--text-3)}
.art-meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art-meta a:hover{text-decoration-thickness:2px}

/* ---------- II · Hero figure (straddles the dark -> paper seam on desktop) ---------- */
.art-sec{padding-top:calc(160px + var(--section-y-tight))}
.art-hero-fig{position:relative;z-index:1;width:min(var(--container),100% - 2*var(--gutter));margin:0 auto clamp(40px,5vw,72px)}
.art-hero-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);border:1px solid var(--line-p);box-shadow:var(--lift-paper)}
.art-hero-fig figcaption,.m-article figcaption{margin-top:10px;color:var(--ink-3);font:500 calc(var(--t-small) * var(--k-text))/1.5 var(--font-sans)}
@media (min-width:1024px){.art-hero-fig{margin-top:calc(-1 * clamp(110px,10vw,150px))}}
@media (max-width:1023px){.art-sec{padding-top:calc(120px + var(--section-y-tight))}.art-hero-fig{margin-top:-72px}}
@media (max-width:767px){
  .art-hero-fig{width:100%;margin-top:-64px}                                 /* bleeds both edges */
  .art-hero-fig img{border-radius:0;border-inline:0}
  .art-hero-fig figcaption{padding-inline:var(--gutter)}
}

/* ---------- III · Reading grid ---------- */
.art{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr)}
.art__main{min-width:0}
.art__after{max-width:68ch;margin-inline:auto;display:grid;gap:clamp(28px,3.5vw,44px);margin-top:clamp(40px,5vw,64px)}
@media (min-width:1200px){
  .art{grid-template-columns:220px minmax(0,68ch) minmax(0,1fr);column-gap:40px;align-items:start}
  .art__toc{grid-column:1;grid-row:1;position:sticky;top:112px;z-index:0}
  .art__main{grid-column:2;grid-row:1}
}

/* TOC: a disclosure below 1200, an always-open sticky list at >=1200 */
.art-toc{max-width:68ch;margin:0 auto clamp(24px,3vw,36px)}
.art-toc[hidden]{display:none}
.art-toc__d{border:1px solid var(--line-p);border-radius:var(--r-m);background:var(--paper-1)}
.art-toc__d>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 18px;cursor:pointer;list-style:none;
  color:var(--ink-1);font:600 var(--t-micro)/1.3 var(--font-sans);letter-spacing:.18em;text-transform:uppercase}
.art-toc__d>summary::-webkit-details-marker{display:none}
.art-toc__d>summary::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-out)}
.art-toc__d[open]>summary::after{margin-top:4px;transform:rotate(225deg)}
.art-toc__d>summary:focus-visible{outline:2px solid var(--theta-700);outline-offset:2px;border-radius:var(--r-m)}
.art-toc__list{position:relative;margin:0;padding:4px 18px 16px 30px;list-style:none}
.art-toc__list::before{content:"";position:absolute;left:18px;top:6px;bottom:18px;width:1px;background:var(--line-p)}
.art-toc__list li+li{margin-top:2px}
.art-toc__list a{display:flex;align-items:center;min-height:44px;color:var(--ink-2);font:500 calc(var(--t-small) * var(--k-text))/1.4 var(--font-sans);text-decoration:none;text-wrap:balance}
.art-toc__list a:hover,.art-toc__list a[aria-current="true"]{color:var(--ink-1)}
.art-toc__list a[aria-current="true"]{font-weight:600}
.art-toc__dot{position:absolute;left:16.5px;top:0;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--theta-700);opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) linear;pointer-events:none}
.art-toc.is-spy .art-toc__dot{opacity:1}
[data-motion="off"] .art-toc__dot{transition:opacity 200ms linear}
@media (min-width:1200px){
  .art-toc{margin:0}
  .art-toc__d{border:0;border-radius:0;background:none}
  .art-toc__d>summary{min-height:0;padding:0 0 12px;pointer-events:none;color:var(--ink-3)}
  .art-toc__d>summary::after{display:none}
  .art-toc__list{padding:0 0 0 18px}
  .art-toc__list::before{left:0;top:0;bottom:0}
  .art-toc__dot{left:-1.5px}
  .art-toc__list a{min-height:40px}
}

/* ---------- IV · Body elements (extends .m-article in site.css) ---------- */
.m-article>*+*{margin-top:1.25em}
.m-article p{text-wrap:pretty}
.m-article h2{position:relative;text-wrap:balance}
.m-article h3{position:relative;margin-top:1.8em}
.m-article h4{margin-top:1.8em;color:var(--ink-3);font:600 var(--t-micro)/1.3 var(--font-sans);letter-spacing:.18em;text-transform:uppercase}
.m-article h2+*,.m-article h3+*,.m-article h4+*{margin-top:.8em}
.m-article a[href^="http"]:not([href*="creatingthefutureyou.com"])::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.25em;vertical-align:-.05em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17L17 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17L17 7'/%3E%3C/svg%3E") center/contain no-repeat}
.m-article ul,.m-article ol{margin-left:0;padding-left:0;list-style:none}
.m-article ol{counter-reset:art-ol}
.m-article ol li{position:relative;padding-left:2.2em;counter-increment:art-ol}
.m-article ol li+li{margin-top:.5em}
.m-article ol li::before{content:counter(art-ol) ".";position:absolute;left:0;top:0;width:1.8em;color:var(--ink-3);font-weight:300;font-variant-numeric:tabular-nums}
.m-article blockquote{margin-left:0}
.m-article blockquote cite,.m-article__pull cite{display:block;margin-top:.7em;color:var(--ink-3);font:600 var(--t-micro)/1.3 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.m-article__pull{margin-top:2em;margin-bottom:2em}
.m-article__pull p{margin:0}

/* anchor-copy button on H2/H3 */
.art-anchor{position:absolute;left:-36px;top:50%;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;opacity:0;transition:opacity var(--dur-fast) linear,color var(--dur-fast) linear}
.art-anchor svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-article :is(h2,h3):hover>.art-anchor,.art-anchor:focus-visible{opacity:1}
.art-anchor:hover{color:var(--theta-700)}
.art-anchor:focus-visible{outline:2px solid var(--theta-700);outline-offset:2px}
@media (hover:none),(max-width:1023px){.art-anchor{position:static;display:inline-grid;width:44px;height:44px;margin:-10px 0 -10px 4px;vertical-align:middle;opacity:.7}}

/* figures: body (68ch) / wide (1000px) / full (container); the sticky TOC sits under a wide figure */
.m-article figure{position:relative;z-index:1;margin-block:2em}
.m-article figure>img,.m-article figure picture img{display:block;width:100%;height:auto}
.m-article figure[data-reveal]{will-change:auto}
.js .m-article figure[data-reveal].is-pending{transform:scale(1.04)}
.m-article .fig--wide,.m-article .fig--full{width:min(1000px,100vw - 2*var(--gutter));max-width:none;margin-left:50%;transform:translateX(-50%)}
.m-article .fig--full{width:min(var(--container),100vw - 2*var(--gutter))}
.js .m-article .fig--wide[data-reveal].is-pending,.js .m-article .fig--full[data-reveal].is-pending{transform:translateX(-50%) scale(1.04)}
.m-article .fig--wide.is-in,.m-article .fig--full.is-in{transform:translateX(-50%)}
.m-article .figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:2em}
.m-article .figs figure{margin:0}
@media (max-width:599px){.m-article .figs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .m-article .fig--bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}
  .m-article .fig--bleed img{border-radius:0;border-inline:0}
  .m-article .fig--bleed figcaption{padding-inline:var(--gutter)}
}

/* table: horizontal scroller, hairline rows */
.art-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line-p);border-bottom:1px solid var(--line-p)}
.art-table:focus-visible{outline:2px solid var(--theta-700);outline-offset:2px}
.art-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:calc(var(--t-small) * var(--k-text));line-height:1.5}
.art-table th,.art-table td{padding:12px 14px;border-bottom:1px solid var(--line-p);text-align:left;vertical-align:top}
.art-table tr:last-child td{border-bottom:0}
.art-table th{color:var(--ink-3);font:600 var(--t-micro)/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase}
.art-table caption{padding:10px 14px;text-align:left;color:var(--ink-3);font:500 calc(var(--t-small) * var(--k-text))/1.5 var(--font-sans)}

/* embed poster: click-to-load video (no third-party scripts until the click), same pattern as the Contact map */
.art-embed{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--line-p);border-radius:var(--r-l);overflow:hidden;background:var(--paper-1);color:var(--ink-1);cursor:pointer}
.art-embed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-embed__play{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--paper-0);box-shadow:var(--lift-paper)}
.art-embed__play .icon{width:22px;height:22px}
.art-embed:focus-visible{outline:2px solid var(--theta-700);outline-offset:3px}
.art-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- V · After the body ---------- */
.art__after .m-note{max-width:none}
.art-keys .eyebrow{color:var(--ink-3)}
.art-keys ul{margin:0;padding:0;list-style:none}
.art-sources{padding-top:20px;border-top:1px solid var(--line-p);color:var(--ink-3);font:500 calc(var(--t-small) * var(--k-text))/1.55 var(--font-sans)}
.art-sources h2{margin:0 0 10px;color:var(--ink-3);font:600 var(--t-micro)/1.3 var(--font-sans);letter-spacing:.18em;text-transform:uppercase}
.art-sources ol{margin:0;padding-left:1.4em}
.art-sources li+li{margin-top:.4em}
.art-sources a{color:var(--theta-700);text-underline-offset:3px}
.art-foot{display:grid;gap:22px;padding-top:24px;border-top:1px solid var(--line-p)}
.art-foot__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.art-foot__actions .btn{min-height:44px}
.art-live{color:var(--ink-2);font:500 calc(var(--t-small) * var(--k-text))/1.4 var(--font-sans)}
.art-author{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px}
.art-author__name{margin:0;color:var(--ink-1);font:600 var(--t-title)/1.3 var(--font-sans)}
.art-author__role{margin:0;color:var(--ink-3)}
.art-author .link{grid-column:1 / -1}
.art-author__photo{grid-row:1 / span 2;width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line-p)}

/* contextual bridge: Lens card, eyebrow + programme name + tertiary link */
.art-ctx{display:grid;gap:6px;max-width:none}
.art-ctx .eyebrow{color:var(--ink-3)}
.art-ctx__name{margin:0;color:var(--ink-1);font:500 calc(var(--t-display-m) * .62 * var(--k-display))/1.1 var(--font-display);letter-spacing:-.01em}
.art-ctx .link{justify-self:start;color:var(--theta-700)}

/* ---------- VI · M30 slot, prev/next, related ---------- */
.ch--paper.art-bridge{padding-top:var(--section-y-tight)}
.art-bridge .m-bridge__line{max-width:26ch}
.art-bridge .m-bridge__product{max-width:420px}
.art-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(1180px,100%);margin-inline:auto}
.art-pn a{display:grid;gap:4px;align-content:center;min-height:88px;padding:18px 22px;border:1px solid var(--line-p);border-radius:var(--r-l);color:var(--ink-1);text-decoration:none;
  font:600 var(--t-title)/1.3 var(--font-sans);transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}
.art-pn a span{color:var(--ink-3);font:600 var(--t-micro)/1.3 var(--font-sans);letter-spacing:.18em;text-transform:uppercase}
.art-pn a:last-child{text-align:right}
@media (hover:hover) and (pointer:fine){.art-pn a:hover{background:var(--paper-1);transform:translateY(-4px)}}
@media (max-width:767px){.art-pn{grid-template-columns:minmax(0,1fr)}.art-pn a:last-child{text-align:left}}
.art-related__h{margin:0 auto 24px;width:min(1180px,100%)}
.ch--paper.art-related{padding-bottom:calc(120px + clamp(48px,5vw,80px));--seam-to:var(--bg-0)}
.ch--paper.art-pnsec{padding-top:0;padding-bottom:var(--section-y-tight)}

/* ---------- Mobile (402px) ---------- */
@media (max-width:767px){
  .art-hero .hero__title{max-width:none}
  .art-meta>*+*::before{margin:0 8px}
  .m-article__pull{font-size:calc(var(--t-title) * 1.4)}
  .art-foot__actions .btn{flex:1 1 100%}
}

/* ≥1200px the TOC owns the left track: wide and full figures extend from the article column to the right margin
   instead of centring over the TOC */
@media (min-width:1200px){
  .m-article .fig--wide,.m-article .fig--full{width:min(1000px,calc(100% + 40px + 220px));margin-left:0;transform:none}
  .js .m-article .fig--wide[data-reveal].is-pending,.js .m-article .fig--full[data-reveal].is-pending{transform:scale(1.04)}
  .m-article .fig--wide.is-in,.m-article .fig--full.is-in{transform:none}
}
/* html already reserves the dock height (scroll-padding-top); anchors need no extra margin */
#article,#subscribe,.m-article h2,.m-article h3{scroll-margin-top:0}
/* migrated posts: a missing previous/next neighbour keeps the other card in its column; the spacer is hidden on mobile */
@media (max-width:767px){.art-pn>span[aria-hidden="true"]{display:none}}