/* Jompom single post (templates/post.php): 7-shaped reading progress, dark hero, sticky TOC, styled content
   (summary box, numbered h2s, lists, tables, callouts, blockquotes, FAQ), author box, related posts, CTA. */
.jp-tpl-post{background:#fff;color:var(--ink)}
.jp-tpl-post .btn{white-space:normal;text-align:center}

/* reading progress: a slanted bar cut at the angle of the 7's slash, with a little 7 riding the front */
.jp-tpl-post .ps-prog{position:fixed;left:0;right:0;top:0;height:12px;z-index:9999;pointer-events:none;transition:opacity .3s}
.admin-bar .jp-tpl-post .ps-prog{top:32px}
.jp-tpl-post .ps-prog.hide{opacity:0}
.jp-tpl-post .ps-track{position:absolute;inset:0;background:rgba(28,29,30,.12);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.jp-tpl-post .ps-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--sun);border-bottom:2px solid var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);transform-origin:left;transform:scaleX(0)}
.jp-tpl-post .ps-rider{position:absolute;top:0;left:0;width:30px;height:30px;transform:translateX(-22px);will-change:transform}
.jp-tpl-post .ps-rider svg{width:100%;height:100%;filter:drop-shadow(2px 2px 0 var(--ink))}
.js-motion .jp-tpl-post .ps-rider svg{animation:jp-tpl-post-wob 1.2s ease-in-out infinite alternate}
@keyframes jp-tpl-post-wob{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

/* hero */
.jp-tpl-post{overflow-x:clip}
.jp-tpl-post .ps-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:150px 0 90px}
.jp-tpl-post .ps-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1.6px,transparent 1.8px);background-size:28px 28px}
.jp-tpl-post .ps-big7{position:absolute;right:-4%;top:-12%;font:800 min(70vw,820px)/.8 var(--jp-display);color:transparent;-webkit-text-stroke:3px #2f3236;letter-spacing:-.06em;pointer-events:none;user-select:none}
.jp-tpl-post .ps-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px;align-items:center}
.jp-tpl-post .ps-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;color:#c9d3da}
.jp-tpl-post .ps-crumbs li+li::before{content:"/";margin-right:8px;color:#5a5f64}
.jp-tpl-post .ps-crumbs a{color:#c9d3da;text-decoration:underline;text-underline-offset:3px}
.jp-tpl-post .ps-crumbs a:hover{color:var(--blue)}
.jp-tpl-post h1{color:#fff;font-size:clamp(40px,5.6vw,80px);line-height:.95;letter-spacing:-.04em;margin:22px 0}
.jp-tpl-post h1 mark{background:var(--blue);color:var(--ink);padding:0 .12em .04em;border-radius:.14em;box-shadow:.05em .05em 0 #fff}
.jp-tpl-post .ps-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:15px;color:#c9d3da}
.jp-tpl-post .ps-meta .tag{font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;border:2px solid #fff;color:#fff}
.jp-tpl-post .ps-meta .tag.sec{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.jp-tpl-post .ps-meta .by{display:flex;align-items:center;gap:10px}
.jp-tpl-post .ps-meta .av{width:34px;height:34px;border-radius:10px;background:var(--blue);border:2px solid #fff;display:grid;place-items:center;font:800 18px/1 var(--jp-display);color:var(--ink)}
.jp-tpl-post .ps-hero .scene{width:min(420px,100%)}

/* body layout */
.jp-tpl-post .ps-body{padding:70px 0 40px}
.jp-tpl-post .ps-cols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.jp-tpl-post .ps-cols:has(> .ps-toc[hidden]){grid-template-columns:minmax(0,1fr)}
.jp-tpl-post .ps-toc{position:sticky;top:110px}
.jp-tpl-post .ps-toc[hidden]{display:none}
.jp-tpl-post .ps-toc summary{list-style:none;cursor:pointer;font:800 20px/1 var(--jp-display);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 14px;color:var(--ink)}
.jp-tpl-post .ps-toc summary::-webkit-details-marker{display:none}
.jp-tpl-post .ps-toc summary i{width:28px;height:28px;border-radius:9px;border:2px solid var(--ink);display:grid;place-items:center;transition:transform .5s var(--spring)}
.jp-tpl-post .ps-toc summary i::before{content:"";width:8px;height:8px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-2px) rotate(45deg)}
.jp-tpl-post .ps-toc[open] summary i{transform:rotate(180deg)}
.jp-tpl-post .ps-toc nav{position:relative}
.jp-tpl-post .ps-toc ol{border-left:3px solid #e6edf2;margin:0;padding:0;list-style:none}
.jp-tpl-post .ps-toc .ind{position:absolute;left:0;z-index:1;top:0;width:3px;height:var(--h,28px);background:var(--ink);border-radius:3px;transform:translateY(var(--y,0px));transition:transform .7s var(--spring),height .5s var(--spring)}
.jp-tpl-post .ps-toc li a{display:block;padding:7px 10px 7px 16px;font-size:14.5px;line-height:1.35;color:#4a5560;border-radius:0 10px 10px 0;transition:color .2s,background .2s,transform .5s var(--spring)}
.jp-tpl-post .ps-toc li a:hover{color:var(--ink);background:var(--light)}
.jp-tpl-post .ps-toc li a[aria-current="true"]{color:var(--ink);font-weight:600;background:var(--sky);transform:translateX(4px)}
.jp-tpl-post .ps-toc .ps-toc-cta{margin-top:24px;padding:18px;border:3px solid var(--ink);border-radius:20px;background:var(--sun);box-shadow:4px 4px 0 var(--ink)}
.jp-tpl-post .ps-toc .ps-toc-cta p{font:700 17px/1.2 var(--jp-display);margin:0 0 12px;color:var(--ink)}
.jp-tpl-post .ps-toc .ps-toc-cta .btn{padding:11px 16px;font-size:14px;width:100%;justify-content:center;background:#fff}

/* article */
.jp-tpl-post .ps-art{max-width:740px;min-width:0;font-size:18px;line-height:1.75;color:#2a3239}
.jp-tpl-post .ps-art > * + *{margin-top:56px}
.jp-tpl-post .ps-content > * + *{margin-top:1.1em}
.jp-tpl-post .ps-content > h2,.jp-tpl-post .ps-content > .wp-block-heading{margin-top:56px}
.jp-tpl-post .ps-content > :first-child{margin-top:0}
.jp-tpl-post .ps-content h2{scroll-margin-top:110px;font-size:clamp(28px,3vw,40px);line-height:1.05;color:var(--ink);display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.jp-tpl-post .ps-content h3{font-size:clamp(21px,2vw,26px);line-height:1.15;color:var(--ink);margin-top:1.6em}
.jp-tpl-post .ps-content h2 .n{flex-shrink:0;width:48px;height:48px;border-radius:14px;border:3px solid var(--ink);background:var(--blue);display:grid;place-items:center;font:800 24px/1 var(--jp-display);box-shadow:3px 3px 0 var(--ink);transform:rotate(-5deg);transition:transform .7s var(--spring)}
.jp-tpl-post .ps-content h2:nth-of-type(odd) .n{background:var(--sun);transform:rotate(4deg)}
.jp-tpl-post .ps-content h2.now .n{transform:rotate(-12deg) scale(1.12)}
.jp-tpl-post .ps-content strong,.jp-tpl-post .ps-content b{color:var(--ink)}
.jp-tpl-post .ps-content a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.jp-tpl-post .ps-content a:hover{color:var(--navy)}
.jp-tpl-post .ps-content img{border-radius:20px;border:3px solid var(--ink)}
.jp-tpl-post .ps-content ul{margin-left:0;padding:0;list-style:none}
.jp-tpl-post .ps-content ul li{position:relative;padding-left:26px}
.jp-tpl-post .ps-content ul li + li,.jp-tpl-post .ps-content ol li + li{margin-top:8px}
.jp-tpl-post .ps-content ul li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:3px;background:var(--blue);border:2px solid var(--ink);transform:rotate(45deg)}
.jp-tpl-post .ps-content ol{margin-left:0;padding:0;list-style:none;counter-reset:jp-ol}
.jp-tpl-post .ps-content ol li{position:relative;padding-left:42px;counter-increment:jp-ol}
.jp-tpl-post .ps-content ol li::before{content:counter(jp-ol);position:absolute;left:0;top:.15em;width:28px;height:28px;border-radius:9px;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;font:800 14px/1 var(--jp-display);color:var(--ink)}
.jp-tpl-post .ps-content code{font:500 .88em/1 ui-monospace,Consolas,monospace;background:var(--light);border:1.5px solid #dfe6eb;border-radius:6px;padding:2px 6px;overflow-wrap:anywhere}
.jp-tpl-post .ps-content pre{background:var(--ink);color:#e6edf2;border-radius:18px;padding:18px 20px;overflow-x:auto;font-size:15px;line-height:1.6}
.jp-tpl-post .ps-content pre code{background:none;border:0;padding:0;color:inherit}
.jp-tpl-post .ps-content blockquote{position:relative;padding:22px 24px 22px 70px;border:3px solid var(--ink);border-radius:22px;background:var(--sky);box-shadow:5px 5px 0 var(--ink);font:600 19px/1.5 Poppins,sans-serif;color:var(--ink)}
.jp-tpl-post .ps-content blockquote::before{content:"\201C";position:absolute;left:18px;top:6px;font:800 64px/1 var(--jp-display);color:var(--deep)}
.jp-tpl-post .ps-content blockquote p + p{margin-top:.6em}
.jp-tpl-post .ps-content blockquote cite{display:block;margin-top:10px;font-size:15px;font-style:normal;font-weight:500;color:#3a4650}

/* answer-first summary */
.jp-tpl-post .ps-sum{position:relative;scroll-margin-top:110px;background:var(--sky);border:3px solid var(--ink);border-radius:26px;box-shadow:7px 7px 0 var(--ink);padding:26px 26px 24px}
.jp-tpl-post .ps-sum .lbl{position:absolute;top:-16px;left:20px;background:var(--ink);color:#fff;font:700 14px/1 var(--jp-display);padding:8px 13px;border-radius:12px;transform:rotate(-3deg)}
.jp-tpl-post .ps-sum h2{color:var(--ink);font-size:24px;margin:6px 0 10px}
.jp-tpl-post .ps-sum p{color:#1f2a32}
.jp-tpl-post .ps-sum ol,.jp-tpl-post .ps-sum ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:14px 0 0;padding:0;list-style:none;counter-reset:s}
.jp-tpl-post .ps-sum li{counter-increment:s;display:flex;gap:10px;align-items:center;font-weight:600;font-size:16px;line-height:1.3;color:var(--ink)}
.jp-tpl-post .ps-sum li::before{content:counter(s);width:28px;height:28px;flex-shrink:0;border-radius:9px;background:#fff;border:2px solid var(--ink);display:grid;place-items:center;font:800 14px/1 var(--jp-display)}

/* callout */
.jp-tpl-post .ps-call{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:22px;border:3px solid var(--ink);background:#fff8e1;box-shadow:5px 5px 0 var(--sun);font-size:17px}
.jp-tpl-post .ps-call .ic{width:44px;height:44px;flex-shrink:0;border-radius:13px;background:var(--sun);border:3px solid var(--ink);display:grid;place-items:center}
.jp-tpl-post .ps-call .ic svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.js-motion .jp-tpl-post .ps-call.go .ic{animation:jp-wiggle .9s var(--spring)}
.jp-tpl-post .ps-call > div{min-width:0}
.jp-tpl-post .ps-call > div > b:first-child,.jp-tpl-post .ps-call > div > strong:first-child{display:block;font:800 19px/1.2 var(--jp-display);color:var(--ink);margin-bottom:4px}
.jp-tpl-post .ps-call > div > p + p{margin-top:.6em}
.jp-tpl-post .ps-call.blue{background:var(--sky);box-shadow:5px 5px 0 var(--deep)}
.jp-tpl-post .ps-call.blue .ic{background:var(--blue)}

/* table */
.jp-tpl-post .ps-tablewrap{max-width:100%;overflow-x:auto;border:3px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink)}
.jp-tpl-post .ps-tablewrap:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.jp-tpl-post .ps-content figure.wp-block-table{margin:0}
.jp-tpl-post .ps-content table{width:100%;min-width:560px;border-collapse:collapse;border:0;margin:0;font-size:15.5px;line-height:1.45}
.jp-tpl-post .ps-content caption{text-align:left;padding:14px 18px;font:800 18px/1.2 var(--jp-display);color:var(--ink);background:var(--light);border-bottom:3px solid var(--ink)}
.jp-tpl-post .ps-content th,.jp-tpl-post .ps-content td{text-align:left;padding:12px 16px;vertical-align:top;border:0;border-bottom:2px solid #e6edf2}
.jp-tpl-post .ps-content thead th{background:var(--ink);color:#fff;font-weight:600;font-size:14px;letter-spacing:.02em}
.jp-tpl-post .ps-content tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.jp-tpl-post .ps-content tbody tr{transition:background .2s}
.jp-tpl-post .ps-content tbody tr:hover{background:var(--sky)}
.jp-tpl-post .ps-content .eff{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap}
.jp-tpl-post .ps-content .eff.lo{background:#d9f7e3}
.jp-tpl-post .ps-content .eff.md{background:var(--sun)}

/* FAQ */
.jp-tpl-post .ps-faq{display:flex;flex-direction:column;gap:14px}
.jp-tpl-post .ps-q{border:3px solid var(--ink);border-radius:20px;background:#fff;box-shadow:4px 4px 0 var(--ink);transition:transform .6s var(--spring),box-shadow .3s}
.jp-tpl-post .ps-q.open{transform:rotate(-.6deg);box-shadow:7px 7px 0 var(--deep)}
.jp-tpl-post .ps-content .ps-q h3{font-size:inherit;letter-spacing:0;margin:0}
.jp-tpl-post .ps-q button,.jp-tpl-post .ps-q button:hover,.jp-tpl-post .ps-q button:focus{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:18px 20px;background:none;border:0;box-shadow:none;border-radius:18px;font:700 19px/1.25 var(--jp-display);letter-spacing:normal;text-transform:none;color:var(--ink);text-align:left;cursor:pointer;white-space:normal}
.jp-tpl-post .ps-q .plus{position:relative;width:30px;height:30px;flex-shrink:0;border-radius:10px;background:var(--blue);border:2px solid var(--ink);transition:transform .55s var(--spring),background .3s}
.jp-tpl-post .ps-q .plus::before,.jp-tpl-post .ps-q .plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;background:var(--ink);border-radius:2px;translate:-50% -50%}
.jp-tpl-post .ps-q .plus::after{rotate:90deg}
.jp-tpl-post .ps-q.open .plus{transform:rotate(135deg);background:var(--sun)}
.jp-tpl-post .ps-a > div{padding:0 20px 20px;font-size:16.5px}
.jp-tpl-post .ps-a > div > * + *{margin-top:.6em}
.jp-tpl-post .ps-faq[data-jp-ready] .ps-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--out)}
.jp-tpl-post .ps-faq[data-jp-ready] .ps-q.open .ps-a{grid-template-rows:1fr}
.jp-tpl-post .ps-faq[data-jp-ready] .ps-a > div{overflow:hidden;visibility:hidden;transition:visibility 0s .55s;padding-bottom:0}
.jp-tpl-post .ps-faq[data-jp-ready] .ps-a > div::after{content:"";display:block;height:20px}
.jp-tpl-post .ps-faq[data-jp-ready] .ps-q.open .ps-a > div{visibility:visible;transition-delay:0s}

/* author */
.jp-tpl-post .ps-author{display:flex;gap:20px;align-items:center;padding:24px;border-radius:26px;background:var(--ink);color:#fff;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--blue)}
.jp-tpl-post .ps-author .logo7{width:84px;aspect-ratio:1;flex-shrink:0;border-radius:22px;background:var(--grad);border:3px solid #000;perspective:500px;display:grid;place-items:center}
.jp-tpl-post .ps-author .logo7 .bob{width:66%;height:66%}
.jp-tpl-post .ps-author b{font:800 22px/1.1 var(--jp-display);display:block;margin-bottom:6px;color:#fff}
.jp-tpl-post .ps-author p{color:#c9d3da;font-size:15.5px;line-height:1.6;margin:0}
.jp-tpl-post .ps-share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;font-size:15px;font-weight:600}
.jp-tpl-post .ps-share .btn{padding:9px 14px;font-size:14px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}

/* related */
.jp-tpl-post .ps-rel{padding:60px 0 90px;background:var(--light);border-top:3px solid var(--ink)}
.jp-tpl-post .ps-rel h2{color:var(--ink);font-size:clamp(34px,4.4vw,56px);margin-bottom:30px}
.jp-tpl-post .ps-rel ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.jp-tpl-post .ps-rel li{position:relative;min-width:0;background:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:6px 6px 0 var(--ink);padding:12px 12px 22px;transition:translate .6s var(--spring),rotate .6s var(--spring),box-shadow .3s}
.jp-tpl-post .ps-rel li:hover{translate:-3px -5px;rotate:-1deg;box-shadow:10px 11px 0 var(--ink)}
.jp-tpl-post .ps-rel .cover{aspect-ratio:16/9;border-radius:16px;border:3px solid var(--ink);background:var(--cv);display:grid;place-items:center;perspective:600px;overflow:hidden}
.jp-tpl-post .ps-rel .toy{width:38%;aspect-ratio:1}
.jp-tpl-post .ps-rel .toy .ex{transition:transform 1s var(--spring)}
.jp-tpl-post .ps-rel li:hover .toy .ex{transform:rotateY(200deg)}
.jp-tpl-post .ps-rel h3{font-size:22px;line-height:1.12;margin:18px 8px 0;color:var(--ink)}
.jp-tpl-post .ps-rel h3 a{color:var(--ink)}
.jp-tpl-post .ps-rel h3 a::after{content:"";position:absolute;inset:0;border-radius:26px}
.jp-tpl-post .ps-rel h3 a:focus-visible{outline:none}
.jp-tpl-post .ps-rel li:has(a:focus-visible){outline:3px solid var(--sun);outline-offset:4px}

/* cta */
.jp-tpl-post .ps-cta{background:var(--light);padding:0 0 110px}
.jp-tpl-post .ps-rel + .ps-cta{padding-top:0}
.jp-tpl-post .ps-cta-box{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--grad);border:3px solid var(--ink);border-radius:36px;box-shadow:10px 10px 0 var(--ink);padding:clamp(30px,5vw,64px);color:var(--ink)}
.jp-tpl-post .ps-cta-box h2{font-size:clamp(36px,5vw,66px);color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke;text-shadow:4px 4px 0 var(--ink)}
.jp-tpl-post .ps-cta-box p{font-size:17px;font-weight:500;margin:16px 0 26px;max-width:30em}
.jp-tpl-post .ps-cta-box .actions{display:flex;gap:14px;flex-wrap:wrap}
.jp-tpl-post .ps-cta-box .scene{width:min(300px,100%)}

.jp-tpl-post .is-off *{animation-play-state:paused!important}

@media (max-width:1080px){
  .jp-tpl-post .ps-cols{grid-template-columns:minmax(0,1fr)}
  .jp-tpl-post .ps-toc{position:static;border:3px solid var(--ink);border-radius:20px;padding:16px 18px 10px;box-shadow:4px 4px 0 var(--ink);max-width:740px}
  .jp-tpl-post .ps-toc .ps-toc-cta{display:none}
}
@media (min-width:1081px){
  .jp-tpl-post .ps-toc summary{pointer-events:none}
  .jp-tpl-post .ps-toc summary i{display:none}
}
@media (max-width:900px){
  .jp-tpl-post .ps-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .jp-tpl-post .ps-hero .scene{width:min(260px,70%);margin:0}
  .jp-tpl-post .ps-rel ul{grid-template-columns:minmax(0,1fr)}
  .jp-tpl-post .ps-cta-box{grid-template-columns:minmax(0,1fr)}
  .jp-tpl-post .ps-cta-box .scene{width:min(200px,60%);margin:0}
}
@media (max-width:640px){
  .jp-tpl-post .ps-hero{padding:124px 0 60px}
  .jp-tpl-post .ps-art{font-size:17px}
  .jp-tpl-post .ps-sum ol,.jp-tpl-post .ps-sum ul{grid-template-columns:minmax(0,1fr)}
  .jp-tpl-post .ps-content h2 .n{width:40px;height:40px;font-size:20px}
  .jp-tpl-post .ps-author{flex-direction:column;align-items:flex-start}
  .jp-tpl-post .ps-cta-box{border-radius:28px;box-shadow:6px 6px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .jp-tpl-post .ps-toc .ind,.jp-tpl-post .ps-toc li a,.jp-tpl-post .ps-q,.jp-tpl-post .ps-faq[data-jp-ready] .ps-a,.jp-tpl-post .ps-rel li,.jp-tpl-post .ps-rel .toy .ex,.jp-tpl-post .ps-content h2 .n{transition:none}
}

/* Author mark: the 7 logo instead of a letter. */
.jp-tpl-post .ps-meta .av.is-logo{background:none;border:0;border-radius:10px;overflow:hidden}
.jp-tpl-post .ps-meta .av.is-logo img{display:block;width:100%;height:100%;object-fit:cover}