/* KCD inner-page design layer — brings the homepage treatment (hero grid + glow, marquee, full-bleed image bands, motion) to every inner page. Loads after journal.css. */
@keyframes gridfloat{to{transform:translate(-16px,-16px) scale(1.04)}}
@keyframes pulse{50%{opacity:.55;transform:scale(1.08)}}
@keyframes blink{50%{opacity:.35}}
@keyframes scrollx{to{transform:translateX(-50%)}}
@keyframes pUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* progress bar */
#pgbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:10001;pointer-events:none}

/* hero grid + glow (same as home) */
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(120% 100% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 30%,transparent 78%);
  animation:gridfloat 26s ease-in-out infinite alternate}
.hero-glow{position:absolute;z-index:-1;width:60vw;height:60vw;max-width:760px;max-height:760px;left:58%;top:12%;
  background:radial-gradient(circle,rgba(201,160,106,.2),transparent 62%);filter:blur(20px);animation:pulse 9s ease-in-out infinite;pointer-events:none;transition:translate .6s var(--ease)}

/* template A: j-hero pages */
.p-hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.p-hero .j-hero{position:relative;z-index:2;border-bottom:0;padding-bottom:clamp(54px,7vw,96px)}
.p-hero::after{content:"";position:absolute;right:2vw;top:52%;transform:translateY(-50%);width:min(44vw,620px);height:70%;
  background:url(img/signature-lg.png) center/contain no-repeat;opacity:.075;pointer-events:none;z-index:1}
.p-hero .crumb,.p-hero .kicker,.p-hero h1,.p-hero p.lede{opacity:0;animation:pUp 1.1s var(--ease) forwards}
.p-hero .crumb{animation-delay:.05s}.p-hero .kicker{animation-delay:.15s}.p-hero h1{animation-delay:.28s}.p-hero p.lede{animation-delay:.45s}
.p-hero .kicker .dot{animation:blink 2.6s ease-in-out infinite}
.p-hero h1{text-wrap:balance}

/* template B: article pages */
.article{position:relative;isolation:isolate}
.article>.hero-grid,.article>.hero-glow{position:absolute}
.article>.hero-grid{top:0;left:50%;width:100vw;margin-left:-50vw;height:min(640px,92vh);inset:auto}
.article>.hero-grid{top:0;left:50%;right:auto;bottom:auto}
.article>.hero-glow{left:50%;top:4%;margin-left:-20vw}
.article .crumb,.article .a-cat,.article h1,.article .a-meta{opacity:0;animation:pUp 1s var(--ease) forwards}
.article .crumb{animation-delay:.05s}.article .a-cat{animation-delay:.15s}.article h1{animation-delay:.25s}.article .a-meta{animation-delay:.38s}
.article .a-hero{opacity:0;animation:pUp 1.2s var(--ease) .5s forwards}

/* marquee (same as home) */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg-2);position:relative;z-index:2}
.marquee-track{display:flex;gap:0;width:max-content;animation:scrollx 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .m{display:flex;align-items:center;gap:22px;padding:16px 34px;font-family:'Space Grotesk',sans-serif;font-size:clamp(1rem,2vw,1.5rem);font-weight:400;letter-spacing:-.01em;color:var(--ink-dim);white-space:nowrap;text-transform:uppercase}
.marquee-track .m i{color:var(--accent);font-style:normal;font-size:.6em}
.article-marq{margin:clamp(30px,5vw,60px) 0}

/* full-bleed image band (same as home) */
.showband{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.showband figure{margin:0;position:relative;overflow:hidden;max-height:62vh}
.showband img{width:100%;height:auto;max-height:62vh;min-height:320px;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.showband:hover img{transform:scale(1.03)}
.showband figcaption{position:absolute;left:0;bottom:0;padding:14px 20px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#f4f1ea;background:linear-gradient(to top,rgba(20,16,10,.62),transparent)}

/* reveal + section headings */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.svc-body h2,.prose h2,.a-body h2{position:relative;padding-top:28px;margin-top:clamp(40px,5vw,64px)}
.svc-body h2::before,.prose h2::before,.a-body h2::before{content:"";position:absolute;top:0;left:0;height:1px;width:0;background:var(--accent);transition:width 1.1s var(--ease)}
.svc-body h2.in::before,.prose h2.in::before,.a-body h2.in::before{width:64px}
.svc-body h2::after,.prose h2::after,.a-body h2::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;background:var(--accent);transform:rotate(45deg) scale(0);transition:transform .6s var(--ease) .5s}
.svc-body h2.in::after,.prose h2.in::after,.a-body h2.in::after{transform:rotate(45deg) scale(1)}
.svc-body h2:first-child,.prose h2:first-child,.a-body h2:first-child{margin-top:0}

/* chips */
.chips span{transition:border-color .3s,color .3s,background .3s,transform .4s var(--ease)}
.chips span:hover{border-color:var(--accent);color:var(--accent-2);background:rgba(154,106,52,.07);transform:translateY(-2px)}

/* related reading as rows */
.rel a{display:flex;justify-content:space-between;align-items:center;gap:20px;transition:padding .45s var(--ease),color .3s}
.rel a::after{content:"→";color:var(--accent);flex:none;transition:transform .35s var(--ease)}
.rel a:hover{padding-left:14px;color:var(--accent-2)}
.rel a:hover::after{transform:translateX(6px)}

/* figures */
figure.kc-fig{overflow:hidden}
figure.kc-fig img{transition:transform 1.3s var(--ease)}
figure.kc-fig:hover img{transform:scale(1.04)}
.svc-hero{box-shadow:0 30px 70px -40px rgba(60,40,15,.35)}

/* closing CTA */
.a-cta .box{position:relative;overflow:hidden}
.a-cta .box::before{content:"";position:absolute;right:-12%;top:-45%;width:62%;aspect-ratio:1;background:radial-gradient(circle,rgba(201,160,106,.24),transparent 65%);pointer-events:none}
.a-cta .box>*{position:relative}

@media(max-width:760px){.p-hero::after{opacity:.05;width:70vw}.showband img{min-height:240px}}
@media(prefers-reduced-motion:reduce){
  .p-hero .crumb,.p-hero .kicker,.p-hero h1,.p-hero p.lede,.article .crumb,.article .a-cat,.article h1,.article .a-meta,.article .a-hero{opacity:1;animation:none}
  .reveal{opacity:1;transform:none}.hero-grid,.hero-glow,.marquee-track{animation:none}
}

/* article/about pages: watermark + stronger glow so they match the hero pages */
.article::after{content:"";position:absolute;top:0;left:50%;margin-left:-50vw;width:100vw;height:min(640px,92vh);
  background:url(img/signature-lg.png) right 4vw center/min(38vw,520px) auto no-repeat;opacity:.075;pointer-events:none;z-index:-1}
.article>.hero-glow{left:50%;top:-4%;margin-left:-34vw;width:70vw;height:70vw;max-width:880px;max-height:880px;background:radial-gradient(circle,rgba(201,160,106,.26),transparent 62%)}
@media(max-width:760px){.article::after{opacity:.05;background-size:60vw auto}}