/* Blog article (Ratgeber / Insights) – Preview v3.16, pilot 2026-10-14.
   Loaded after assets/b3/b3.css (header, footer, buttons, contact block and tokens come from there)
   and assets/site/motion.css. Built by tools/blog/build_post.py.
   Layout: a navy title band with a workshop photo under the veil, then one paper sheet with a 680 px reading
   column; diagrams may run a little wider; one full-width navy band for the key sentence; the contact block
   of the home page at the end. Everything readable without JavaScript. */

.wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media(min-width:768px){.wrap{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}

/* title band */
.post-hero{min-height:0;padding-bottom:56px}
@media(min-width:900px){.post-hero{padding-bottom:72px}}
.post-hero .bg{object-position:50% 40%}
.post-hero .hero-in{padding-top:104px;padding-bottom:20px;max-width:1000px}
@media(min-width:768px){.post-hero .hero-in{padding-top:140px}}
@media(min-width:900px){.post-hero .hero-in{padding-top:150px}}
.crumb{font:500 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:inherit}
.crumb a{text-decoration:none;border-bottom:1px solid rgba(201,168,76,.45)}
.crumb a:hover{border-color:var(--gold)}
.crumb span{color:rgba(255,255,255,.5)}
.post-hero h1{max-width:22ch;font-size:clamp(1.95rem,6vw,3.3rem);line-height:1.12;text-wrap:balance}
.post-hero h1 span{margin-top:.35em;font-size:.62em;line-height:1.25;max-width:30ch}
@media(min-width:900px){.post-hero h1{max-width:24ch;font-size:clamp(2.3rem,3.7vw,3.3rem)}.post-hero h1 span{margin-left:auto;margin-right:auto}}
.byline{display:flex;align-items:center;gap:.8rem;margin-top:1.8rem;font-size:.95rem;color:rgba(255,255,255,.78);flex-wrap:wrap}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 18%;filter:grayscale(1);border:1.5px solid var(--gold);flex:none}
.byline a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(201,168,76,.6)}
.byline a:hover{color:var(--gold-l)}
.byline .dot{color:var(--gold)}
.byline-t{display:flex;flex-wrap:wrap;gap:.15rem .55rem;align-items:baseline}
@media(min-width:900px){.byline{justify-content:center}}

/* paper sheet with the reading column */
.post{position:relative;z-index:3;background:var(--paper);margin-top:-28px;border-radius:28px;padding:52px 0 72px}
@media(min-width:900px){.post{border-radius:36px;margin-top:-36px;padding:76px 0 88px}}
.prose{max-width:680px;margin:0 auto;font-size:1.06rem;line-height:1.72;color:var(--ink)}
.prose>*+*{margin-top:1.15em}
.prose p{hyphens:auto;-webkit-hyphens:auto}
.prose .lede{font:400 clamp(1.18rem,2.6vw,1.32rem)/1.6 var(--sans);color:var(--navy)}
.prose .lede::first-letter{font:600 3.4em/.82 var(--serif);float:left;color:var(--gold-d);margin:.06em .1em 0 0}
.prose h2{font:600 clamp(1.42rem,4.2vw,1.85rem)/1.25 var(--serif);color:var(--navy);margin-top:2.4em;padding-top:1.1em;border-top:1px solid var(--rule);text-wrap:balance}
.prose h2 .no{color:var(--gold-d);font-weight:500;margin-right:.15em}
.prose strong{font-weight:600;color:var(--navy)}
.prose em{font-style:italic}
.prose ol{counter-reset:p;display:grid;gap:1.3rem;margin-top:1.4em}
.prose ol>li{counter-increment:p;position:relative;padding-left:3rem}
.prose ol>li::before{content:counter(p);position:absolute;left:0;top:-.28rem;font:500 2.1rem/1 var(--serif);color:var(--gold-d)}
.thesis{font:500 clamp(1.15rem,2.8vw,1.3rem)/1.5 var(--serif)!important;color:var(--navy);border-left:2px solid var(--gold);padding-left:1.1rem}

/* two realities side by side (section 2) */
.vs{display:grid;gap:1.4rem;margin-top:1.3em}
@media(min-width:620px){.vs{grid-template-columns:1fr 1fr;gap:0}.vs li:first-child{padding-right:1.6rem}.vs li+li{padding-left:1.6rem;border-left:1px solid var(--rule)}}
.vs li{font-size:1rem;line-height:1.65}
.vs li strong{display:block;font:600 1.12rem/1.3 var(--serif);margin-bottom:.35rem}
.vs li:first-child strong{color:var(--navy)}
.vs li+li strong{color:var(--gold-d)}

/* diagrams: real text inside the SVG, navy / gold / grey only */
.fig{margin:2.2em auto 2.4em!important;max-width:560px}
.fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig figcaption{margin-top:.9rem;font-size:.84rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--rule);padding-top:.6rem}
.fig figcaption b{color:var(--navy);font-weight:600}
.f-t{font:600 14px var(--sans);fill:var(--navy)}
.f-s{font:400 13px var(--sans);fill:var(--muted)}
.f-g{font:600 13px var(--sans);fill:var(--gold-d)}
.f-n{font:600 13.5px var(--sans);fill:var(--navy)}
.f-big{font:600 17px var(--serif);fill:var(--navy)}
.f-bigg{font:600 17px var(--serif);fill:var(--gold-d)}
.f-num{font:500 26px var(--serif);fill:var(--gold-d)}
.f-cap{font:600 10.5px var(--sans);fill:var(--navy);letter-spacing:.16em}
.halo{paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.l-grey{fill:none;stroke:#9AA6BA;stroke-width:1.6}
.l-gold{fill:none;stroke:var(--gold);stroke-width:2}
.l-navy{fill:none;stroke:var(--navy);stroke-width:2}
.l-rule{fill:none;stroke:var(--rule);stroke-width:1}
.l-goldthin{fill:none;stroke:var(--gold);stroke-width:1.3}
.n-navy{fill:var(--navy)}
.n-open{fill:var(--paper);stroke:var(--navy);stroke-width:2}
.n-gold{fill:var(--gold)}
.b-navy{fill:var(--navy)}
.b-gold{fill:var(--gold)}
.b-track{fill:#ECE7DB}
.p-fill{fill:var(--paper)}

/* the key sentence on the pen photo, full width */
.keyband{position:relative;overflow:hidden;background:var(--navy);color:#fff;margin:3.2rem 0;padding:72px 0}
@media(min-width:900px){.keyband{padding:96px 0;margin:4rem 0}}
.keyband::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(11,29,58,.88) 0%,rgba(11,29,58,.72) 50%,rgba(11,29,58,.9) 100%)}
.keyband .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;object-position:50% 55%}
.keyband-in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.keyband p{font:400 clamp(1.1rem,2.6vw,1.3rem)/1.6 var(--sans);color:rgba(255,255,255,.86)}
.keyband p b{display:block;font:italic 500 clamp(1.7rem,5.4vw,2.6rem)/1.22 var(--serif);color:var(--gold-l);margin-bottom:.8rem;text-wrap:balance}
.keyband .rule{display:block;width:56px;height:1px;background:var(--gold);margin-bottom:1.6rem}

/* signature (from the original) as a small author card, linked to the profile */
.sig{display:flex;gap:1rem;align-items:center;margin-top:2.4em!important;padding-top:1.6rem;border-top:1px solid var(--rule)}
.sig img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 18%;filter:grayscale(1);border:1.5px solid var(--gold);flex:none}
.sig p{margin:0;line-height:1.45;font-size:.95rem;color:var(--muted)}
.sig p a{font:600 1.1rem var(--serif);color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(140,110,36,.4)}
.sig p a:hover{border-color:var(--gold-d)}
.source{font-size:.85rem!important;color:var(--muted);margin-top:1.4em!important}
.source a{color:var(--gold-d)}
.back{margin-top:2em!important}
.prose-end{margin-top:2.4em}
.other-lang{font-size:.92rem!important;color:var(--muted);margin-top:.8em!important}
.other-lang a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(140,110,36,.4)}

/* list page */
.idx-hero .hero-in{padding-bottom:12px}
.idx-hero h1{font-size:clamp(2.3rem,7vw,3.6rem)}
.idx-hero .lead{margin-top:1rem}
.crumb-k{color:var(--gold)}
@media(min-width:900px){.idx-hero .lead{margin-left:auto;margin-right:auto}}
.bloglist{max-width:760px;margin:0 auto;display:grid}
.bl-item{border-top:1px solid var(--rule)}
.bl-item:last-child{border-bottom:1px solid var(--rule)}
.bl-item a{display:block;padding:1.7rem 0 1.8rem;text-decoration:none;color:inherit}
.bl-meta{display:flex;gap:.55rem;flex-wrap:wrap;font:500 .76rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d)}
.bl-item h2{margin-top:.55rem;font:600 clamp(1.4rem,4.4vw,1.9rem)/1.2 var(--serif);color:var(--navy);text-wrap:balance}
.bl-sub{margin-top:.3rem;font:italic 500 clamp(1.02rem,2.6vw,1.15rem)/1.4 var(--serif);color:var(--gold-d);text-wrap:balance}
.bl-sum{margin-top:.75rem;color:var(--muted);font-size:1rem;line-height:1.6;max-width:40rem}
.bl-go{display:inline-flex;margin-top:.9rem;font:600 .9rem var(--sans);color:var(--navy);border-bottom:1px solid rgba(140,110,36,.45);padding-bottom:1px}
.bl-item a:hover h2{color:var(--gold-d)}
.bl-item a:hover .bl-go{border-color:var(--gold-d)}
.bl-first a{padding-top:.4rem}
.bl-first:first-child{border-top:0}
.bl-first h2{font-size:clamp(1.65rem,5.2vw,2.35rem)}
.bl-foot{max-width:760px;margin:2rem auto 0;display:flex;flex-wrap:wrap;gap:1rem 2rem}
.bl-foot .i{color:var(--gold-d)}

/* contact block at the end (classes from b3.css) */
.post-close{margin-top:-28px}
@media(min-width:900px){.post-close{margin-top:-36px}}
.end-mail{font:600 1.05rem var(--sans);color:#fff;letter-spacing:.01em;user-select:all}

/* draft marks (preview only, removed when published) */
.draftnote{display:block;max-width:680px;margin:-20px auto 32px;border-radius:3px;background:var(--gold);color:var(--navy);font:600 .8rem/1.4 var(--sans);text-align:center;padding:.5rem 1rem}
.chk{background:linear-gradient(transparent 62%,rgba(201,168,76,.32) 62%);border-bottom:1px dashed var(--gold-d)}
.chk sup{font:700 .68rem var(--sans);color:var(--gold-d);margin-left:.15em}

/* motion: diagrams are drawn once when they scroll into view (motion.js marks .fig) */
.mo-js .fig[data-mo] .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.45,0,.25,1) .3s}
.mo-js .fig.mo-in .draw{stroke-dashoffset:0}
.mo-js .fig[data-mo] .grow{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;transition:transform 1s cubic-bezier(.22,.61,.36,1) var(--g,.3s)}
.mo-js .fig.mo-in .grow{transform:none}
.mo-js .keyband[data-mo] .keyband-in{opacity:0;transform:translate3d(0,16px,0);transition:opacity 1s var(--mo-ease) .2s,transform 1s var(--mo-ease) .2s}
.mo-js .keyband.mo-in .keyband-in{opacity:1;transform:none}
.mo-js .keyband[data-mo] .bg{transform:scale(1.06);transition:transform 2.4s var(--mo-ease)}
.mo-js .keyband.mo-in .bg{transform:none}
@media print{.hd,.bar,.draftnote{display:none}.post{margin:0;border-radius:0}}

/* lists, sub-headings and notes inside the article (added with the full blog, 2026-10-14) */
.prose ul:not(.vs){display:grid;gap:.55rem;margin-top:1.1em;padding-left:1.4rem}
.prose ul:not(.vs)>li{position:relative}
.prose ul:not(.vs)>li::before{content:"";position:absolute;left:-1.1rem;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.prose h3{font:600 clamp(1.15rem,3.2vw,1.3rem)/1.3 var(--serif);color:var(--navy);margin-top:1.8em}
.prose h3 .no{color:var(--gold-d);font-weight:500;margin-right:.25em}
.prose blockquote{border-left:2px solid var(--gold);padding-left:1.1rem;font:italic 500 1.12rem/1.5 var(--serif);color:var(--navy)}
.author-note{font-size:.92rem!important;color:var(--muted);border-top:1px solid var(--rule);padding-top:1.2rem;margin-top:2em!important}
.srcnote{font-size:.82rem!important;color:var(--muted);word-break:break-all}
.srcnote a{color:var(--gold-d)}
.dek{font:italic 500 clamp(1.15rem,3vw,1.35rem)/1.45 var(--serif)!important;color:var(--gold-d);text-wrap:balance}

/* list page: a cover picture before every article (v3.22) */
.bl-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--navy);box-shadow:0 14px 30px -20px rgba(11,29,58,.55);transition:transform .6s var(--mo-ease,ease)}
.bl-item a:hover .bl-img{transform:scale(1.015)}
.bl-txt{margin-top:1.1rem}
@media(min-width:760px){
  .bl-item a{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:1.8rem;align-items:start}
  .bl-txt{margin-top:0}
  .bl-first a{grid-template-columns:1fr;gap:0}
  .bl-first .bl-txt{margin-top:1.4rem}
}
.bl-first a{padding-top:.4rem}