/* Shared layout rhythm. Load last on every prepared page and in their builders.
   Four-pixel spacing scale; reading paragraphs and frozen components retain
   their approved internal metrics. Desktop reading/contents gap stays 72px. */
:root{
 --space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
 --space-6:24px;--space-7:28px;--space-8:32px;--space-9:36px;--space-10:40px;--space-12:48px;
 --page-opening-space:var(--space-8);--section-space:var(--space-8);
 --card-gap:var(--space-7);--panel-padding:var(--space-5);
 --catalog-symbol-size:104px;
 --reading-paragraph-gap:var(--space-4);--reading-heading-before:var(--space-9);--reading-subheading-before:var(--space-6);--reading-heading-after:var(--space-3);
}
/* Owner-requested compact reading rhythm, 2026-10-18.
   Keep type sizes, paragraph separation and independent rich-component insets. */
.article-detail .article-prose>:is(p,ul:not(.reference-list),ol){margin-block:0 var(--reading-paragraph-gap)}
.article-detail .article-prose>h2{margin-block:var(--reading-heading-before) var(--reading-heading-after)}
.article-detail .article-prose>h3{margin-block:var(--reading-subheading-before) var(--reading-heading-after)}
@media(max-width:720px){:root{--page-opening-space:var(--space-7);--section-space:var(--space-7);--card-gap:var(--space-6);--catalog-symbol-size:60px}}
/* Owner-requested compact rectangular consent actions, 2026-10-19. */
.cookie-consent__actions{gap:var(--space-2)}
.cookie-consent__button{border-radius:6px}
@media(max-width:720px){
 .cookie-consent__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 .cookie-consent__button{width:100%;min-width:0;min-height:44px}
}
/* Shared overlay geometry; all internal intervals use the existing scale. */
:root{--search-width:800px;--search-top:max(var(--space-6),calc(var(--search-viewport-height,100dvh)*.42 - var(--space-10) - var(--space-12)));--search-results-max:min(520px,56dvh)}
.site-search-dialog{row-gap:var(--space-3)}
.site-search-dialog.has-query{--search-top:clamp(var(--space-6),calc(var(--search-viewport-height,100dvh)*.14),140px);--search-results-max:none}
.site-search-field{gap:var(--space-4);padding:var(--space-4) var(--space-6)}
.site-search-status{padding:var(--space-4) var(--space-6)}
.site-search-result{gap:var(--space-6);padding:var(--space-3) var(--space-6)}
.site-search-result-title{margin-top:var(--space-2)}
.site-search-result-snippet{margin-top:var(--space-2)}
.site-search-more,.site-search-retry{padding:var(--space-4) var(--space-6)}
@media(max-width:720px){
 .site-search-field{gap:var(--space-3);padding:var(--space-3) var(--space-4)}
 .site-search-status{padding:var(--space-3) var(--space-4)}
 .site-search-result{gap:var(--space-4);padding:var(--space-3) var(--space-4)}
 .site-search-more,.site-search-retry{padding:var(--space-4)}
}
.home-page .section-head{margin-bottom:var(--space-6)}
.home-page .section-description{margin-top:var(--space-3)}
.home-page :is(.meta,.tags){margin-top:var(--space-3)}
.home-page .cover h3{margin-block:var(--space-3)}
.home-page .story-copy p,.home-page .note-card h3{margin-top:var(--space-3)}
.home-page .reading-column{row-gap:var(--space-6)}
/* Equivalent card tracks share one gutter; bordered mobile lists stay contiguous. */
.routes-grid,.home-page :is(.editorial-grid,.notes-grid){gap:var(--card-gap)}
.article-library #article-list{column-gap:var(--card-gap)}
@media(min-width:721px){
 .home-page :is(.work-grid,.guide-grid){gap:var(--card-gap)}
 .home-page .topic-list{column-gap:var(--card-gap)}
 .home-page .reading-column{padding-left:var(--card-gap)}
}
.home-page .work-card{padding-block:var(--space-6)}
.home-page .guide-grid .route-card{padding-block:var(--space-6)}
.home-page .guide-grid .guide-label{gap:var(--space-3);margin-bottom:var(--space-4)}
/* Navigation and Topics panels align with the shared start/closing panel insets. */
.home-page :is(.navigation>.shell,.topics){padding-inline:var(--space-10)}
@media(max-width:1000px){.home-page :is(.navigation>.shell,.topics){padding-inline:var(--space-8)}}
@media(max-width:720px){.home-page :is(.navigation>.shell,.topics){padding-inline:var(--space-6)}}

/* Owner-requested homepage symmetry matching the Blog opening, 2026-10-20. */
@media(min-width:901px){
 .home-page #articles .reading-column{justify-content:space-between;gap:var(--space-7);min-width:0}
 .home-page #articles .side-story{display:flow-root;padding-bottom:0;border-bottom:0}
 .home-page #articles .side-story+.side-story{border-top:1px solid var(--line);padding-top:var(--space-7)}
 .home-page #articles .side-story .meta{margin-top:0}
}
.home-page .route-card p{margin-block:var(--space-3) var(--space-4)}
/* Owner-requested homepage route panel, 2026-10-19.
   Reuse the navigation panel palette/radius and shared responsive insets. */
.home-page #start{position:relative;isolation:isolate;background:var(--dark);color:#f3f4e9;border:0;border-radius:var(--radius-block);padding:var(--space-10)}
.home-page #start::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background-image:radial-gradient(circle,rgba(192,207,179,.32) 1.25px,transparent 1.5px);background-size:20px 20px;mask-image:radial-gradient(ellipse 60% 95% at 100% 0%,#000 0%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 60% 95% at 100% 0%,#000 0%,transparent 78%)}
.home-page #start .section-description,.home-page #start .route-card p:not(.eyebrow){color:var(--type-description-color)}
.home-page #start .route-icon{color:var(--orange)}
.home-page #start .routes-grid .route-card,.home-page #start .routes-grid .route-card:first-child{background:transparent;border:0;border-top:1px solid rgba(243,244,233,.45);border-radius:0;padding:var(--space-6) 0 0}
html[data-theme="dark"] .home-page #start{background:#302e2a}
html[data-theme="dark"] .home-page #start::before{background-image:radial-gradient(circle,rgba(235,94,40,.25) 1.25px,transparent 1.5px)}
@media(max-width:1000px){.home-page #start{padding:var(--space-8)}}
@media(max-width:720px){.home-page #start{padding:var(--space-6)}}

.home-page .work-card p{margin-block:var(--space-3) var(--space-4)}
:root:root :is(.article-library,.knowledge-library) .library-intro--compact{gap:var(--space-7);padding-bottom:var(--space-5)}
:root:root :is(.article-library,.knowledge-library) .library-intro-copy{gap:var(--space-6);padding:var(--panel-padding)}
.article-library .library-collection-head{padding-top:var(--space-3);margin-bottom:var(--space-5)}
.article-library .library-collection-head .section-description{margin-top:var(--space-3)}
.article-library .library-controls{padding-block:var(--space-4)}
.article-library .library-section-label{padding-block:var(--space-5)}
.article-library .magazine-opening{padding-bottom:var(--card-gap)}
.article-library .archive-heading{margin-bottom:var(--space-5)}
.article-library #article-list{row-gap:var(--card-gap)}
.article-library .library-row{row-gap:var(--space-3);padding-bottom:var(--space-5)}
.article-library .library-meta{margin-bottom:var(--space-3)}
.article-library .library-copy>p{margin-top:var(--space-3)}
.article-library .library-row .library-copy>p{margin-bottom:var(--space-3)}
.article-library .library-tags{margin-top:var(--space-3)}
.article-library .library-row .library-tags{margin-top:0}
:root:root .blog-library .blog-story .library-copy>p{margin-top:var(--space-3)}
:root:root .blog-library .blog-intro-heading{margin-bottom:var(--space-4)}
.blog-library .blog-story .library-copy{padding-top:var(--space-3)}
.blog-library .blog-opening{gap:var(--card-gap)}
.blog-library .blog-opening .blog-story--compact .library-copy{padding-top:0}
@media(min-width:901px){.blog-library .blog-opening .blog-side{padding-left:var(--card-gap)}}
.blog-library .blog-story .library-tags{gap:var(--space-2)}
.blog-library .blog-opening .blog-side{gap:var(--space-7)}
/* Owner-requested standard spacing around equivalent opening-card dividers. */
@media(min-width:901px){
 .home-page #articles .reading-column,.blog-library .blog-opening .blog-side{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1px auto;align-content:start}
 .home-page #articles .reading-column::before,.blog-library .blog-opening .blog-side::before{content:"";grid-row:2;align-self:center;border-top:1px solid var(--line)}
 .home-page #articles .side-story:first-child,.blog-library .blog-opening .blog-side>.blog-story:first-child{grid-row:1}
 .home-page #articles .side-story+.side-story,.blog-library .blog-opening .blog-side>.blog-story+.blog-story{grid-row:3;border-top:0;padding-top:0}
}
.blog-library :is(.blog-grid,.blog-results){gap:var(--card-gap)}
.blog-library :is(.blog-grid,.blog-results) .blog-story{padding-bottom:var(--space-5)}
.blog-library :is(.blog-grid,.blog-results) .library-tags{margin-top:var(--space-3);padding-top:0}
.blog-library .blog-story .library-tags{margin-top:var(--space-3);padding-top:0}
.knowledge-library .kb-search-area{margin-top:var(--space-7)}
.knowledge-library .kb-search-area>p{margin-top:var(--space-2)}
.knowledge-library .kb-start{padding-block:var(--section-space)}
.knowledge-library .kb-section-title{margin-bottom:var(--space-4)}
.knowledge-library .kb-start-grid{gap:var(--space-5)}
.knowledge-library .kb-start-card>p{margin-top:var(--space-3)}
.knowledge-library .kb-layout{padding-top:var(--section-space)}
.knowledge-library .kb-about{margin-top:var(--space-6);padding-top:var(--space-5)}
.knowledge-library .kb-about p{margin-top:var(--space-3)}
.knowledge-library .kb-item{padding-block:var(--space-6)}
.knowledge-library .kb-item p{margin-top:var(--space-3)}
.knowledge-library .kb-item-meta{margin-top:var(--space-3)}
/* Shared archive pagination: Blog reference, full-width rules and one CTA gap. */
:root:root .archive-pagination-host{padding-bottom:0}
:root:root :is(.library-pagination,#kb-pagination){display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-6) 0;margin:0;border-block:1px solid var(--line)}
:root:root :is(.library-pagination,#kb-pagination):empty{display:none}
:root:root :is(.library-pagination,#kb-pagination)>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;max-width:100%;gap:var(--space-2)}
:root:root :is(.library-pagination,#kb-pagination) :is(button,a){display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
:root:root :is(.library-pagination,#kb-pagination) [aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
:root:root :is(.library-pagination,#kb-pagination) :is(button,a):hover{border-color:var(--orange)}
:root:root .knowledge-library #kb-list>.kb-item:last-child{border-bottom:0}
/* Match the archive backlink, opening and reading transitions in all sections. */
.article-detail .article-breadcrumb{padding-block:var(--space-8) var(--space-5)}
.article-detail .article-hero{padding-top:var(--space-3);padding-bottom:var(--space-8)}
:root:root .article-detail .article-hero-copy{gap:var(--space-5)}
.article-detail .article-reading-layout{padding-block:var(--space-12)}
.article-detail :is(.article-related,.kb-detail-related){padding-block:var(--section-space)}
/* Tags follow each card description instead of a shared row baseline. */
.article-detail .related-grid{gap:var(--card-gap)}
.article-detail .related-story{display:block;grid-row:auto}
.article-detail .related-story>p:not(.related-date){margin-block:var(--space-3)}
.article-detail .related-date{margin-bottom:var(--space-3)}
.article-detail .kb-detail-related article{padding-block:var(--space-6)}
/* Repeated closing calls to action use the same outside and inside spacing. */
/* Owner-requested shared 48px preceding CTA gap, with unchanged footer spacing, 2026-10-21. */
:root:root .closing{padding-block:var(--space-12) var(--space-4);margin-top:0}
:root:root main>:not(.library-pagination):has(+.closing){padding-bottom:0}
/* Owner-requested smaller homepage Details-to-CTA gap, 2026-10-21. */
:root:root .home-page #work:has(+.closing){padding-bottom:0}
:root:root main:has(>.closing:last-child){padding-bottom:0}
:root:root footer.shell{padding-top:var(--space-6)}
:root:root .closing>.shell{padding:var(--space-10);gap:var(--space-12)}
@media(max-width:1000px){
 .blog-library :is(.blog-grid,.blog-results){gap:var(--space-7)}
 :root:root .closing>.shell{padding:var(--space-8);gap:var(--space-8)}
}
@media(max-width:760px){
 .article-detail .article-reading-layout{padding-top:var(--space-7);padding-bottom:var(--space-8)}
 .article-detail .article-hero{padding-bottom:var(--space-7)}
 :root:root .article-detail .article-hero-copy{gap:var(--space-4)}
 .article-detail .article-contents{margin-bottom:var(--space-7);padding:var(--space-4);background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-block)}
 .article-detail .article-contents nav a{grid-template-columns:var(--space-6) minmax(0,1fr);gap:var(--space-2);padding-block:var(--space-2)}
 .article-detail .article-contents summary{cursor:pointer;align-items:center;gap:var(--space-4)}
 .article-detail .article-contents summary::after{flex-shrink:0}
 .blog-detail .blog-hero--author{gap:var(--space-4)}
}
@media(max-width:720px){
 .home-page .section-head{margin-bottom:var(--space-5)}
 :root:root :is(.article-library,.knowledge-library) .library-intro--compact{gap:var(--space-6)}
 :root:root :is(.article-library,.knowledge-library) .library-intro-copy{gap:var(--space-5)}
 .blog-library :is(.blog-grid,.blog-results){gap:var(--space-6)}
 .blog-library .blog-opening .blog-story--lead .library-tags{margin-top:var(--space-3);padding-top:0}
 .knowledge-library .kb-search-area{margin-top:var(--space-6)}
 .knowledge-library .kb-start-grid{gap:var(--space-3)}
 .knowledge-library .kb-about{margin-top:var(--space-4);padding-top:var(--space-4)}
 .knowledge-library .kb-layout{gap:var(--space-6)}
 :root:root .closing>.shell{padding:var(--space-6);gap:var(--space-6)}
}

/* Anonymous flex text in cover fallbacks must not impose a technical-word minimum. */
.article-detail .related-story>a{min-width:0}
.article-detail .related-placeholder{min-width:0;overflow-wrap:anywhere;word-break:normal;padding:var(--space-6)}

/* Topics cards share the archive rhythm without inherited metadata tail margins. */
.topics-library .topic-card-meta .library-meta{margin:0}
.topics-library .topic-previews .library-meta{margin:var(--space-2) 0 0}
@supports(grid-template-rows:subgrid){
 @media(min-width:721px){
  .topics-library .topic-card-meta .topic-formats{margin-top:var(--space-2)}
  .topics-library .topic-previews li+li{margin-top:var(--space-4)}
  .topics-library .topic-card-footer{margin-top:0}
 }
}

/* Graph is a new canvas role within the frozen shell and interval scale. */
:root{--graph-scene-block-size:680px;--graph-legend-block-size:160px}
.graph-main{padding-top:var(--page-opening-space)}
.content-graph-page{gap:var(--section-space)}
.graph-page .library-intro{margin:0;padding:0}
.graph-page p,.graph-page h1,.graph-page h2,.graph-page h3{margin:0}
.graph-page .library-lead{margin:0}
.graph-page .graph-stats{gap:var(--card-gap)}
.graph-page .graph-stats>div{padding:var(--space-5) var(--space-6);gap:var(--space-2)}
.graph-stats__note{margin-top:var(--space-3)!important;padding-top:var(--space-3)}
.graph-toolbar{gap:var(--space-4)}
.graph-search{gap:var(--space-4);padding:var(--space-4) var(--space-5)}
.graph-search-results{margin-top:var(--space-3)}
.graph-search-result,.graph-search-results__summary,.graph-search-results__empty{padding:var(--space-4) var(--space-5)}
.graph-search-result>strong,.graph-search-result__detail{margin-top:var(--space-2)}
.graph-search-result__meta,.graph-related-card__meta{gap:var(--space-2)}
.graph-filter-list{gap:var(--space-2)}
.graph-filter{gap:var(--space-2);padding:var(--space-3) var(--space-4)}
.graph-workspace{gap:var(--card-gap)}
.graph-canvas__hint{gap:var(--space-2) var(--space-4);padding:var(--space-4)}
.graph-legend{gap:var(--space-3) var(--space-4);padding:var(--space-5)}
.graph-legend span{gap:var(--space-2)}
.graph-minimap{padding:var(--space-2)}
.graph-minimap__label{margin-bottom:var(--space-2)}
.graph-sidebar{padding:var(--space-6)}
.graph-sidebar__eyebrow{gap:var(--space-2)}
.graph-sidebar__head h2,.graph-sidebar__head>p{margin-top:var(--space-3)}
.graph-sidebar__tags{gap:var(--space-2);margin-top:var(--space-4)}
.graph-sidebar__tags>span,.graph-connection-card__tags>span{padding:4px var(--space-2)}
.graph-parent-cluster{gap:var(--space-3);padding-block:var(--space-4);margin-top:var(--space-5)}
.graph-parent-cluster small{margin-top:var(--space-2)}
.graph-related{margin-top:var(--space-5)}
.graph-related__list{margin-top:var(--space-3)}
.graph-related-card__content{padding:var(--space-4) var(--space-6) var(--space-4) 0}
.graph-related-card__content>strong,.graph-related-card__reason{margin-top:var(--space-2)}
.graph-sidebar__actions{gap:var(--space-3);padding-top:var(--space-4)}
.graph-page :is(.graph-insights,.graph-clusters,.graph-connection-examples){padding-top:var(--section-space)}
.graph-section-heading{gap:var(--card-gap);margin-bottom:var(--space-6)}
.graph-section-heading h2,.graph-mobile-notice h2{margin-top:var(--space-3)}
.graph-central-routes__list,.graph-cluster-grid,.graph-connection-grid{gap:var(--card-gap)}
.graph-central-route__trigger{gap:var(--space-3);padding:var(--space-6)}
.graph-central-route__body strong{margin-top:var(--space-3)}
.graph-central-route__links{padding:0 var(--space-6) var(--space-6)}
.graph-central-route__links a{gap:var(--space-2) var(--space-3);padding-block:var(--space-4)}
.graph-cluster-card__trigger{padding:var(--space-6)}
.graph-cluster-card__topline{gap:var(--space-4)}
.graph-cluster-card__trigger>p{margin-top:var(--space-3)}
.graph-connection-card{display:flex;flex-direction:column;padding:var(--space-6);gap:var(--space-5);grid-template-rows:none;grid-row:auto;align-content:start}
.graph-connection-card__topline{gap:var(--space-4)}
.graph-connection-card__pair{gap:var(--space-4)}
.graph-connection-card__pair a{padding:var(--space-4)}
.graph-connection-card__pair a>span{margin-top:var(--space-2)}
.graph-connection-card__tags{gap:var(--space-2)}
.graph-connection-card__map-action{margin-top:auto;padding-top:var(--space-4)}
.graph-mobile-notice{padding:var(--space-6)}
.graph-mobile-notice>p:last-child{margin-top:var(--space-3)}
.graph-fallback-link{padding:var(--space-6)}
@media(max-width:1000px){:root{--graph-scene-block-size:620px}.graph-related__list{gap:var(--space-6)}.graph-sidebar__actions{margin-top:var(--space-5)}}
@media(max-width:720px){.graph-page .graph-stats>div{padding:var(--space-4) var(--space-2)}.graph-section-heading{gap:var(--space-3)}.graph-cluster-card__trigger,.graph-central-route__trigger,.graph-connection-card{padding:var(--space-5)}.graph-central-route__links{padding-inline:var(--space-5)}.graph-connection-card__pair{gap:var(--space-3)}}

/* Mobile migration shell, user requested 2026-10-15. */
.mobile-menu-toggle,.mobile-menu-heading,.mobile-menu-backdrop{display:none}
@media(max-width:1050px){
 .site-js header:not(.mobile-nav-ready) .navline{visibility:hidden;position:fixed;transform:translateX(-100%)}
 .mobile-nav-ready .mobile-menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;flex:none;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
 .mobile-menu-toggle span{display:block;width:20px;height:2px;background:currentColor}
 .mobile-menu-toggle:hover{color:var(--orange);background:var(--soft)}
 .mobile-menu-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
 .mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}
 .mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .mobile-nav-ready .navline{display:block;position:fixed;inset:0 auto 0 0;z-index:102;width:min(304px,calc(100vw - 40px));height:100dvh;margin:0;padding:var(--space-5);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border:0;border-right:1px solid var(--line);visibility:hidden;transform:translateX(-100%);transition:none}
 .mobile-nav-ready .mobile-menu-backdrop{display:block;position:fixed;inset:0;z-index:101;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:none}
 .mobile-nav-motion .navline{transition:transform .38s cubic-bezier(.32,.72,0,1),visibility 0s .38s}
 .mobile-nav-motion .mobile-menu-backdrop{transition:opacity .28s cubic-bezier(.32,.72,0,1),visibility 0s .38s}
 .mobile-menu-open .mobile-menu-backdrop{opacity:1;visibility:visible;transition-delay:0s}
 .mobile-menu-active,.mobile-menu-active body{overflow:hidden}
 .mobile-nav-ready .mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-4);margin-bottom:var(--space-3);border-bottom:1px solid var(--line);font-size:var(--type-menu);font-weight:600}
 .mobile-menu-close{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
 .mobile-menu-close:hover{color:var(--orange);background:var(--soft)}
 .mobile-menu-close:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
 .mobile-nav-ready{border-bottom:1px solid var(--ink)}
 .mobile-nav-ready.mobile-menu-open .navline{visibility:visible;transform:translateX(0);transition-delay:0s}
 .mobile-nav-ready .navline nav{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
 .mobile-nav-ready .navline nav a{display:flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-3);border-radius:4px;overflow-wrap:anywhere}
 .mobile-nav-ready .navline nav a[aria-current=page]{color:var(--orange);background:var(--soft)}
 .masthead .header-search,.masthead .theme-toggle{width:44px;height:44px}
}
@media(max-width:720px){
 .mobile-nav-ready .masthead{gap:var(--space-2);padding-block:var(--space-4)}
 .mobile-nav-ready .masthead .brand{font-size:24px;white-space:nowrap}
 .mobile-nav-ready .masthead .brand-logo{width:32px;height:32px;margin-right:6px}
 .mobile-nav-ready .masthead .header-actions{gap:0}
 .library-pagination{flex-wrap:wrap;gap:var(--space-3)}
 .library-pagination>div{flex-wrap:wrap;justify-content:flex-start;max-width:100%}
}
@media(max-width:380px){
 .mobile-nav-ready .masthead{gap:4px}
 .mobile-nav-ready .masthead .brand{font-size:20px;letter-spacing:-1px}
 .mobile-nav-ready .masthead .brand-logo{width:28px;height:28px;margin-right:4px}
 .mobile-nav-ready .masthead :is(.header-search,.theme-toggle,.mobile-menu-toggle){width:40px;height:44px}
 .mobile-nav-ready .navline nav{grid-template-columns:1fr;gap:0}
}

@media(max-width:1050px) and (prefers-reduced-motion:reduce){.mobile-nav-ready :is(.navline,.mobile-menu-backdrop){transition:none}}

/* Topic counts are indivisible labels; only the adjacent title may wrap. */
.topic-item>span:first-child>span{flex-shrink:0;white-space:nowrap;overflow-wrap:normal;word-break:normal}

/* Mobile content must keep its assigned grid track, including long identifiers. */
.mobile-action-buttons{display:contents}
.knowledge-library .kb-sidebar nav,.knowledge-library #kb-pagination>div{gap:var(--space-2)}
@media(max-width:720px){
 main,footer{overflow-wrap:anywhere}
 main :is(.route-card,.library-copy,.kb-copy,.article-hero-copy){min-width:0}
 main :is(h1,h2,h3,.eyebrow){hyphens:auto}
 .home-page .hero h1{-webkit-hyphens:none;hyphens:none;overflow-wrap:normal;word-break:normal;text-wrap:balance}
 .home-page .hero h1 br{display:none}
 .home-page .hero h1 .period::after{content:" "}
 .route-card .inline{text-wrap:balance}
 main :is(.button,.secondary-button){display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;box-sizing:border-box;padding-inline:var(--space-4);white-space:normal;text-align:center;text-wrap:balance}
 main :is(.hero-links,.closing-actions){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);width:100%}
 .mobile-action-buttons{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:var(--space-3);width:100%}
}

/* Mobile block artwork shares centered frames; keep each role's approved scale. */
@media(max-width:720px){
 :root .article-detail :is(.case-illustration,.about-hero-art,.services-hero-art,.contact-direct-art){max-width:100%;margin-inline:auto;justify-self:center}
 main :is(img,video,canvas,iframe){max-width:100%}
}
@media(max-width:640px){
 /* Align field labels with the first text baseline, including numbered items. */
 :root .article-detail #article-text .article-table-scroll :is(th,td){align-items:first baseline}
}

/* Opening arrows do not reserve an asymmetric mobile card column. */
@media(max-width:720px){
 .kb-item-arrow{display:none}
 :root .knowledge-library .kb-item{grid-template-columns:minmax(0,1fr)}
 :root .knowledge-library .kb-item:has(> .kb-card-icon){grid-template-columns:var(--catalog-symbol-size) minmax(0,1fr)}
}

/* Contact mobile composition requested by the user. */
@media(max-width:720px){
 :root .contact-page .contact-avatar img{width:104px;height:104px}
 .contact-page .contact-channel{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
 .contact-page .contact-channel>a{justify-self:stretch}
}

/* Mobile archive filter shares the search field's right edge. */
@media(max-width:720px){
 .article-library .library-topic{flex-basis:100%;min-width:0}
 .article-library .library-topic :is(.topic-picker,select){flex:1;min-width:0;max-width:none;width:auto}
 .article-library .library-topic>span{flex-shrink:0}
}

/* Mobile archive counts follow their heading in the left reading column. */
@media(max-width:720px){
 :root:root :is(.article-library,.knowledge-library) .library-title-count{justify-self:start;text-align:left}
}

/* Shared discussion service brand marks; preserve text and existing actions. */
.ai-panel .ai-service-link{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.ai-panel .ai-service-icon{color:#fff;display:block;width:24px;height:24px;flex:0 0 24px}

/* Mobile discussion panel: balanced heading and one aligned service row. */
.ai-panel .ai-services{display:contents}
.ai-panel .ai-service-arrow{margin-left:-4px}
@media(max-width:720px){
 .article-prose .ai-panel h2{text-wrap:balance;hyphens:none}
 .ai-panel .ai-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
 .ai-panel .ai-actions .button{margin-right:0}
 .ai-panel .ai-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);width:100%;grid-row:1}
 .ai-panel .ai-service-link{flex-direction:column;justify-content:center;min-width:0;min-height:56px;text-align:center}
 .ai-panel .ai-service-arrow{display:none}
}

/* Mobile footer keeps the brand and a left-aligned social row. */
@media(max-width:720px){
 footer.shell>.brand+p{display:none}
 footer.shell>.footer-socials{width:100%;margin-left:0;justify-content:flex-start}
}

/* Mobile block artwork follows the eyebrow; only the stopwatch is reduced. */
.mobile-block-illustration{display:none}
@media(max-width:720px){
 .block-illustration-original{display:none}
 .mobile-block-illustration{display:block}
 :root .article-detail .services-consultation-art{width:min(100%,calc(var(--space-4) * 8));max-width:calc(var(--space-4) * 8);margin-inline:0;justify-self:start}
}

/* Mobile opening illustrations fill their content track. */
@media(max-width:720px){
 :root .article-detail :is(.about-hero-art,.services-hero-art){width:100%;max-width:100%}
 :root .article-detail :is(.about-hero-art,.services-hero-art) img{width:100%;max-width:none;height:auto}
}

/* Prompt context gears share the approved mobile stopwatch size/alignment. */
@media(max-width:720px){
 :root .article-detail .prompt-context-illustration{width:min(100%,calc(var(--space-4) * 8));max-width:calc(var(--space-4) * 8);margin-inline:0;justify-self:start}
}

/* Articles: mobile cover immediately follows the title, before the deck. */
@media(max-width:720px){
 .article-detail .article-hero--cover-after-title{gap:var(--space-4)}
 .article-detail .article-hero--cover-after-title .article-hero-copy{display:contents}
 .article-hero--cover-after-title h1{order:1}
 .article-hero--cover-after-title .article-cover{order:2}
 .article-hero--cover-after-title .article-deck{order:3}
 .article-hero--cover-after-title .publication-date{order:4}
 .article-hero--cover-after-title .article-hero-footer{order:5}
}

/* Shared title/description/date/tags opening in every publication section. */
.article-detail .article-hero-copy{display:flex;flex-direction:column;justify-content:flex-start}
.article-detail .article-hero-copy>:is(.article-deck,.publication-date){margin:0}
/* Dates are plain metadata in every publication card and detail. */
:root time[datetime]{border:0;border-radius:0;padding:0;background:transparent;box-shadow:none}

/* Knowledge: the material note stays aligned with the opening H1. */
@media(min-width:1001px){
 :is(.knowledge-detail,.document-detail) .article-hero{row-gap:var(--space-5)}
 :is(.knowledge-detail,.document-detail) .article-hero-copy{display:contents}
 :is(.knowledge-detail,.document-detail) .article-hero-copy>*{grid-column:1}
 :is(.knowledge-detail,.document-detail) .article-hero-copy>.publication-date{grid-row:3}
 :is(.knowledge-detail,.document-detail) .article-hero-copy>h1{grid-row:1}
 :is(.knowledge-detail,.document-detail) .article-hero-copy>.article-deck{grid-row:2}
 :is(.knowledge-detail,.document-detail) .article-hero-copy>.article-hero-footer{grid-row:4}
 :is(.knowledge-detail,.document-detail) .knowledge-material-note{grid-column:2;grid-row:1 / span 4}
}

/* User-requested graph introduction: copy left, compact aligned metrics right. */
:root:root .graph-page .library-intro-copy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.graph-page .library-intro-overview{min-width:0}
:root:root .graph-page .graph-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
:root:root .graph-page .graph-stats>div{flex-direction:column-reverse;justify-content:flex-end;align-items:flex-start;text-align:left;gap:var(--space-2);padding:0;border:0}
.graph-page .graph-stats dd{flex:none}
:root:root .graph-page .library-intro-overview .graph-stats__note{margin-top:var(--space-4)!important;padding-top:0;border:0}
@media(max-width:1050px){
 :root:root .graph-page .library-intro-copy{gap:var(--space-8)}
 :root:root .graph-page .graph-stats{gap:var(--space-4)}
}
@media(max-width:720px){
 :root:root .graph-page .library-intro-copy{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
 :root:root .graph-page .graph-stats{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
 :root:root .graph-page .graph-stats>div{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:var(--space-5)}
 .graph-page .graph-stats dd{flex:0 0 3ch}
}


/* Align right-hand publication notes with the visible first title line. */
@media(min-width:761px){
 .blog-detail .blog-hero--author .blog-author-note{margin-top:var(--space-3)}
}
@media(min-width:1001px){
 :is(.knowledge-detail,.document-detail) .knowledge-material-note{margin-top:var(--space-2)}
}

/* Owner-requested table grid and plain green panels, VPS only, 2026-10-19. */
@media(min-width:641px){
 :root .article-detail #article-text .article-table-scroll tr>:is(th,td)+:is(th,td){border-inline-start:1px solid var(--line)}
 :root .article-detail #article-text .kb-practical-table tbody tr>td:first-child{position:relative}
 /* Existing 16px cell inset + 24px index + half the 16px lead gap. */
 :root .article-detail #article-text .kb-practical-table tbody tr>td:first-child::after{content:"";position:absolute;inset-block:0;inset-inline-start:var(--space-12);border-inline-start:1px solid var(--line);pointer-events:none}
}
@media(max-width:640px){
 :root .article-detail #article-text .article-table-scroll tbody :is(th,td){position:relative}
 /* Divider centered in the existing label/value gap: 14px insets,
    12px gap and .75fr/1.25fr tracks. Preserve first-baseline alignment. */
 :root .article-detail #article-text .article-table-scroll tbody :is(th,td)::after{content:"";position:absolute;inset-block:0;inset-inline-start:calc(37.5% + 5px);border-inline-start:1px solid var(--line);pointer-events:none}
}
:root:root:root :is(.navigation,.topics,.library-intro-copy,.article-contact,.services-consultation,.about-page #about-skills,.case-detail #case-bylo,.case-project-result,.home-page #start)::before,
:root:root:root :is(.navigation,.topics,.library-intro-copy,.article-contact,.services-consultation,.about-page #about-skills,.case-detail #case-bylo,.case-project-result,.home-page #start)::after{background-image:none}

/* Owner request: unnumbered limitations, antipatterns and checklists, VPS only. */
:root .article-detail #article-text :is(.kb-practical-block--limits,.kb-practical-block--mistakes,.kb-practical-block--checklist) .kb-practical-index{display:none}
:root .article-detail #article-text :is(.kb-practical-block--limits,.kb-practical-block--mistakes,.kb-practical-block--checklist) .kb-practical-lead{display:block}
@media(min-width:641px){
 :root .article-detail #article-text :is(.kb-practical-block--limits,.kb-practical-block--mistakes,.kb-practical-block--checklist) .kb-practical-table tbody tr>td:first-child::after{content:none}
}

/* Owner request: publication tags reuse the borderless Knowledge card surface. */
:root:root:root body main :is(.tags a,.library-tags a,.library-tags button){
 display:inline-flex;align-items:center;min-height:0;margin:0;padding:5px 9px;
 border:0;border-radius:6px;box-shadow:none;background:var(--soft);color:var(--muted);
 font-size:var(--type-meta);line-height:var(--leading-meta);font-weight:400;text-decoration:none;
}
:root:root:root body main :is(.tags a,.library-tags a,.library-tags button):is(:hover,:focus-visible){
 background:var(--soft);color:var(--orange);
}
html:not([data-theme="dark"]):root:root body main :is(.tags a,.library-tags a,.library-tags button):is(:hover,:focus-visible){
 background:var(--selection-background);color:var(--selection-text);
}

/* Owner request: slightly lighten light-theme avatar-side dots; preserve dark theme and fade. */
.home-page .hero::before{background-image:radial-gradient(circle,#3a3e36 1.25px,transparent 1.5px)}
html[data-theme="dark"] .home-page .hero::before{background-image:radial-gradient(circle,#666057 1.25px,transparent 1.5px)}

/* Long document contents keep every destination available within the viewport. */
.article-contents--long{max-block-size:calc(100dvh - var(--space-12));overflow-y:auto;overscroll-behavior:contain}

/* Mobile drawer icons: original Lucide SVGs, https://lucide.dev/icons
Pinned upstream: https://github.com/lucide-icons/lucide/tree/c29c276f16590cf017126671535ad8c792be64d8/icons
ISC License

Copyright (c) 2026 Lucide Icons and Contributors

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

---

The following Lucide icons are derived from the Feather project:

airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out

The MIT License (MIT) (for the icons listed above)

Copyright (c) 2013-present Cole Bemis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
@media(max-width:1050px){
 .mobile-nav-ready .navline nav a{column-gap:var(--space-3)}
 .mobile-nav-ready .navline nav a::before{content:"";display:block;flex:0 0 20px;width:20px;height:20px;background:var(--orange);-webkit-mask:var(--mobile-nav-icon) center/contain no-repeat;mask:var(--mobile-nav-icon) center/contain no-repeat}
 .mobile-nav-ready .navline nav a[href="/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTUgMjF2LThhMSAxIDAgMCAwLTEtMWgtNGExIDEgMCAwIDAtMSAxdjgiIC8+CiAgPHBhdGggZD0iTTMgMTBhMiAyIDAgMCAxIC43MDktMS41MjhsNy02YTIgMiAwIDAgMSAyLjU4MiAwbDcgNkEyIDIgMCAwIDEgMjEgMTB2OWEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnoiIC8+Cjwvc3ZnPgo=")}
 .mobile-nav-ready .navline nav a[href="/graph/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cmVjdCB4PSIxNiIgeT0iMTYiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiAvPgogIDxyZWN0IHg9IjIiIHk9IjE2IiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIgLz4KICA8cmVjdCB4PSI5IiB5PSIyIiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMSIgLz4KICA8cGF0aCBkPSJNNSAxNnYtM2ExIDEgMCAwIDEgMS0xaDEyYTEgMSAwIDAgMSAxIDF2MyIgLz4KICA8cGF0aCBkPSJNMTIgMTJWOCIgLz4KPC9zdmc+Cg==")}
 .mobile-nav-ready .navline nav a[href="/articles/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNiAyMmEyIDIgMCAwIDEtMi0yVjRhMiAyIDAgMCAxIDItMmg4YTIuNCAyLjQgMCAwIDEgMS43MDQuNzA2bDMuNTg4IDMuNTg4QTIuNCAyLjQgMCAwIDEgMjAgOHYxMmEyIDIgMCAwIDEtMiAyeiIgLz4KICA8cGF0aCBkPSJNMTQgMnY1YTEgMSAwIDAgMCAxIDFoNSIgLz4KICA8cGF0aCBkPSJNMTAgOUg4IiAvPgogIDxwYXRoIGQ9Ik0xNiAxM0g4IiAvPgogIDxwYXRoIGQ9Ik0xNiAxN0g4IiAvPgo8L3N2Zz4K")}
 .mobile-nav-ready .navline nav a[href="/knowledge/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgNXYxNiIgLz4KICA8cGF0aCBkPSJNMjAuMDAxIDE5QTIgMiAwIDAwMjIgMTdWNWEyIDIgMCAwMC0xLjk5OS0yTDE2IDMuMDAyQTUgNSAwIDAwMTIgNWE1IDUgMCAwMC00LTJINGEyIDIgMCAwMC0yIDJ2MTJhMiAyIDAgMDAxLjk5OSAySDhhNSA1IDAgMDE0IDIgNSA1IDAgMDE0LTJ6IiAvPgo8L3N2Zz4K")}
 .mobile-nav-ready .navline nav a[href="/blog/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTMuNCAySDZhMiAyIDAgMCAwLTIgMnYxNmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJ2LTcuNCIgLz4KICA8cGF0aCBkPSJNMiA2aDQiIC8+CiAgPHBhdGggZD0iTTIgMTBoNCIgLz4KICA8cGF0aCBkPSJNMiAxNGg0IiAvPgogIDxwYXRoIGQ9Ik0yIDE4aDQiIC8+CiAgPHBhdGggZD0iTTIxLjM3OCA1LjYyNmExIDEgMCAxIDAtMy4wMDQtMy4wMDRsLTUuMDEgNS4wMTJhMiAyIDAgMCAwLS41MDYuODU0bC0uODM3IDIuODdhLjUuNSAwIDAgMCAuNjIuNjJsMi44Ny0uODM3YTIgMiAwIDAgMCAuODU0LS41MDZ6IiAvPgo8L3N2Zz4K")}
 .mobile-nav-ready .navline nav a[href="/cases/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgMTJoLjAxIiAvPgogIDxwYXRoIGQ9Ik0xNiA2VjRhMiAyIDAgMCAwLTItMmgtNGEyIDIgMCAwIDAtMiAydjIiIC8+CiAgPHBhdGggZD0iTTIyIDEzYTE4LjE1IDE4LjE1IDAgMCAxLTIwIDAiIC8+CiAgPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjE0IiB4PSIyIiB5PSI2IiByeD0iMiIgLz4KPC9zdmc+Cg==")}
 .mobile-nav-ready .navline nav a[href="/prompts/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtNyAxMSAyLTItMi0yIiAvPgogIDxwYXRoIGQ9Ik0xMSAxM2g0IiAvPgogIDxyZWN0IHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMyIgeT0iMyIgcng9IjIiIHJ5PSIyIiAvPgo8L3N2Zz4K")}
 .mobile-nav-ready .navline nav a[href="/topics/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTMuMTcyIDJhMiAyIDAgMCAxIDEuNDE0LjU4Nmw2LjcxIDYuNzFhMi40IDIuNCAwIDAgMSAwIDMuNDA4bC00LjU5MiA0LjU5MmEyLjQgMi40IDAgMCAxLTMuNDA4IDBsLTYuNzEtNi43MUEyIDIgMCAwIDEgNiA5LjE3MlYzYTEgMSAwIDAgMSAxLTF6IiAvPgogIDxwYXRoIGQ9Ik0yIDd2Ni4xNzJhMiAyIDAgMCAwIC41ODYgMS40MTRsNi43MSA2LjcxYTIuNCAyLjQgMCAwIDAgMy4xOTEuMTkzIiAvPgogIDxjaXJjbGUgY3g9IjEwLjUiIGN5PSI2LjUiIHI9Ii41IiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPgo=")}
 .mobile-nav-ready .navline nav a[href="/about/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjUiIC8+CiAgPHBhdGggZD0iTTIwIDIxYTggOCAwIDAgMC0xNiAwIiAvPgo8L3N2Zz4K")}
 .mobile-nav-ready .navline nav a[href="/services/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtMTEgMTcgMiAyYTEgMSAwIDEgMCAzLTMiIC8+CiAgPHBhdGggZD0ibTE0IDE0IDIuNSAyLjVhMSAxIDAgMSAwIDMtM2wtMy44OC0zLjg4YTMgMyAwIDAgMC00LjI0IDBsLS44OC44OGExIDEgMCAxIDEtMy0zbDIuODEtMi44MWE1Ljc5IDUuNzkgMCAwIDEgNy4wNi0uODdsLjQ3LjI4YTIgMiAwIDAgMCAxLjQyLjI1TDIxIDQiIC8+CiAgPHBhdGggZD0ibTIxIDMgMSAxMWgtMiIgLz4KICA8cGF0aCBkPSJNMyAzIDIgMTRsNi41IDYuNWExIDEgMCAxIDAgMy0zIiAvPgogIDxwYXRoIGQ9Ik0zIDRoOCIgLz4KPC9zdmc+Cg==")}
 .mobile-nav-ready .navline nav a[href="/contact/"]{--mobile-nav-icon:url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtMjIgNy04Ljk5MSA1LjcyN2EyIDIgMCAwIDEtMi4wMDkgMEwyIDciIC8+CiAgPHJlY3QgeD0iMiIgeT0iNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjE2IiByeD0iMiIgLz4KPC9zdmc+Cg==")}
}

/* Blog author description shares the homepage author-role size at every width. */
:root:root:root .blog-detail .blog-author-description{font-size:var(--type-meta)}

/* Owner-requested optical alignment of the header and footer name. */
.masthead .edition,footer>.brand+p{position:relative;top:3px}

/* Owner-requested mobile Blog author text beside the existing avatar. */
@media(max-width:760px){
 .blog-detail .blog-author-note{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--space-4);align-items:start}
 .blog-detail .blog-author-note>img{grid-column:1;grid-row:1 / span 2;margin-bottom:0}
 .blog-detail .blog-author-name{grid-column:2;grid-row:1;margin-bottom:calc(var(--space-2) / 2)}
 .blog-detail .blog-author-label{margin-bottom:calc(var(--space-2) / 2)}
 .blog-detail .blog-author-caption{grid-column:2;grid-row:2;border-left:0;padding-left:0}
}

/* Owner-requested mobile Knowledge format and reading time in adjacent columns. */
@media(max-width:760px){
 .knowledge-detail .knowledge-material-note dl{grid-template-columns:minmax(0,max-content) max-content;column-gap:var(--space-6)}
}

/* Owner-requested mobile homepage Articles composition matching the Blog opening. */
@media(max-width:720px){
 .home-page #articles .reading-column{border-top:1px solid var(--line);padding-top:var(--space-7);row-gap:var(--space-7)}
 .home-page #articles .side-story{display:flow-root;padding-bottom:0;border-bottom:0}
 .home-page #articles .side-story+.side-story{border-top:1px solid var(--line);padding-top:var(--space-7)}
 .home-page #articles .side-story .story-image{float:none;display:block;width:100%;max-width:none;height:auto;aspect-ratio:var(--content-image-ratio,16/9);margin:0 0 var(--space-5)}
 .home-page #articles .side-story .story-image img{display:block;width:100%;height:auto;aspect-ratio:var(--content-image-ratio,16/9);object-fit:cover}
 .home-page #articles .side-story .story-copy{display:block;padding-top:0}
 .home-page #articles .side-story .meta{margin:0 0 var(--space-3)}
 .home-page #articles .side-story h3{margin:0}
}

/* Owner clarification: retain the original mobile dots; softly clear descriptions only. */
@media(max-width:720px){
 :root{--dots-copy-softness:var(--space-3)}
 :is(.hero,.knowledge-publication-opening,.blog-publication-opening,.case-process){--dots-copy-surface:var(--paper)}
 :is(.home-page #start,.navigation,.topics,.library-intro-copy,.services-consultation,.about-page #about-skills,.case-detail #case-bylo,.case-project-result,.article-contact){--dots-copy-surface:var(--dark)}
 html[data-theme="dark"] :is(.home-page #start,.navigation,.topics,.library-intro-copy,.services-consultation,.about-page #about-skills,.case-detail #case-bylo,.case-project-result,.article-contact){--dots-copy-surface:#302e2a}
 .closing>.shell{--dots-copy-surface:var(--orange)}
 .hero .intro,.knowledge-publication-opening .article-deck,.blog-publication-opening .article-deck,:is(.home-page #start,.navigation,.topics,.library-intro-copy,.services-consultation,.about-page #about-skills,.case-detail #case-bylo,.case-project-result,.article-contact,.case-process,.closing>.shell) p:not(.eyebrow):not(.copy-status),.topics a span:not(:has(*)){
  position:relative;z-index:1;
  background-color:var(--dots-copy-surface);
  box-shadow:0 0 var(--dots-copy-softness) 4px var(--dots-copy-surface);
 }
}

/* Opaque graph labels stay above background nodes without inherited fading. */
:root:root .graph-material-node:is(.is-selected,.is-connected,.is-hovered,.is-hover-connected){opacity:1;transition-property:filter}
:root:root .graph-material-node__label{fill-opacity:1;stroke-opacity:1;transition:none}

/* Keep labels and their clear space readable while zooming the SVG scene. */
:root:root:root .graph-scene .graph-material-node__label{font-size:calc(var(--type-graph-label) / var(--graph-label-scale,1));vector-effect:non-scaling-stroke}
:root:root:root .graph-scene.has-focus-layout :is(.is-selected,.is-connected) .graph-material-node__label{font-size:calc(var(--type-graph-label-focus) / var(--graph-label-scale,1))}

/* Keep the material panel scrollable without a visible scrollbar. */
:root:root .graph-sidebar__content{scrollbar-width:none}
:root:root .graph-sidebar__content::-webkit-scrollbar{display:none;width:0;height:0}

/* Owner-requested homepage action/title hover feedback, 2026-10-21. */
:root:root body.home-page .guide-grid .route-card:is(:hover,:focus-visible) .inline,
:root:root body.home-page .work-grid .work-card:is(:hover,:focus-visible) h3>span,
:root:root body.home-page .topic-item:is(:hover,:focus-visible)>span:first-child>strong{color:var(--orange)}

/* Owner-requested Telegram action directly below the consultation stopwatch. */
.services-consultation-actions{display:grid;justify-items:center;gap:var(--space-3);min-width:0}
.services-consultation-mobile-button{display:none}
@media(max-width:720px){
 .services-consultation-actions{display:none}
 .services-consultation-mobile-button{display:inline-flex;margin-block-start:var(--space-3)}
}

/* Compact desktop consultation action ends with the adjacent copy. */
.services-consultation-actions{align-self:end}
.services-consultation-actions .services-consultation-art{max-width:calc(var(--space-4) * 11)}
:root .article-detail .services-consultation-actions .button{padding:var(--space-2) var(--space-4)}

/* Shared screenshot captions and viewer, owner requested 2026-10-21. */
:root .article-screenshot {
  margin: var(--space-24, 24px) 0;
}
:root .article-screenshot .knowledge-screenshot-link {
  display: block;
  width: 100%;
  margin: 0;
}
:root .article-screenshot .knowledge-screenshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
:root:not([data-theme="dark"]) .article-screenshot .knowledge-screenshot {
  box-shadow: 0 8px 24px -8px rgb(37 36 34 / 0.18), 0 2px 6px rgb(37 36 34 / 0.06);
}
:root .article-screenshot-caption,
:root #article-text figure:has(video, iframe) > figcaption,
:root .screenshot-viewer figcaption {
  margin: 12px 0 0;
  padding: 0;
  text-align: center;
  font-size: var(--type-meta);
  line-height: var(--leading-meta);
  font-weight: 400;
  color: var(--ink);
  opacity: 0.72;
  overflow-wrap: anywhere;
}
:root.screenshot-viewer-open { overflow: hidden; }
:root .screenshot-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 72px 24px 40px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: zoom-out;
}
:root .screenshot-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
:root .screenshot-viewer::backdrop {
  background: rgb(255 252 242 / 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="dark"] .screenshot-viewer::backdrop {
  background: rgb(0 0 0 / 0.12);
}
:root .screenshot-viewer figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(100%, 1440px);
  margin: 0;
  cursor: default;
}
:root .screenshot-viewer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 164px);
  border-radius: 8px;
  object-fit: contain;
}
:root .screenshot-viewer-close {
  position: fixed;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  color: var(--ink);
  cursor: pointer;
}
:root .screenshot-viewer-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Owner request 2026-10-21: hide dotted panel decoration on mobile only. */
@media(max-width:720px){
 html:root :is(.hero,.navigation,.topics,.library-intro-copy,.closing>.shell,.case-detail #case-bylo)::before,
 html:root :is(.hero,.navigation,.topics,.library-intro-copy,.closing>.shell,.case-detail #case-bylo)::after,
 html:root :is(.home-page #start,.knowledge-publication-opening,.blog-publication-opening,.article-contact,.case-process,.case-project-result,.about-page #about-skills,.services-consultation)::before{
  background-image:none;
 }
}

/* Owner-requested cover-only hover; article screenshots/body artwork stay unchanged. */
:root:root:root main .article-cover{border-radius:14px}
:root:root:root main .article-cover>button{border-radius:inherit}
:root:root:root main .related-story>a:has(>img){display:block;border-radius:12px}
:root:root:root main :is(.story-image img,.library-image img,.related-story>a>img,.article-cover img){transform:scale(1);transition:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :root:root:root main :is(.story-image,.library-image,.related-story>a:has(>img),.article-cover,.article-cover>button){overflow:hidden;isolation:isolate;clip-path:border-box;transform:translateZ(0)}
 :root:root:root main :is(.story-image img,.library-image img,.related-story>a>img,.article-cover img){transform:translate3d(0,0,0) scale(1);transform-origin:center;backface-visibility:hidden;will-change:transform;transition:transform 280ms ease}
 :root:root:root main :is(.story-image,.library-image,.related-story>a:has(>img),.article-cover,.article-cover>button):hover>img,
 :root:root:root main .article-cover:hover img{transform:translate3d(0,0,0) scale(1.03)}
}

/* Owner-requested shared transparent-illustration hover, 2026-10-22. */
:root:root:root main :is(.case-illustration,.about-hero-art,.services-hero-art,.contact-direct-art)>img{transform:scale(1);transition:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :root:root:root main :is(.case-illustration,.about-hero-art,.services-hero-art,.contact-direct-art)>img{transform:translate3d(0,0,0) scale(1);transform-origin:center;backface-visibility:hidden;will-change:transform;transition:transform 280ms ease}
 :root:root:root main :is(.case-illustration,.about-hero-art,.services-hero-art,.contact-direct-art):hover>img{transform:translate3d(0,0,0) scale(1.03)}
}