/* EITYWT storytelling layer, 2026-08-23 */
.feature-card{cursor:pointer}
.feature-card:after{content:"Explore story  →";position:absolute;right:1.1rem;top:1rem;z-index:3;padding:.38rem .55rem;background:rgba(9,9,9,.72);border:1px solid rgba(255,255,255,.32);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;opacity:.78;transition:opacity .18s ease,transform .18s ease}
.feature-card:hover:after,.feature-card:focus-visible:after{opacity:1;transform:translateX(2px)}
.feature-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.feature-card:active{transform:scale(.995)}
.story-hero{padding:clamp(5rem,8vw,8rem) 0 4rem;background:radial-gradient(circle at 80% 20%,rgba(210,31,38,.2),transparent 26rem),linear-gradient(135deg,#080808,#171717);border-bottom:1px solid var(--line)}
.story-hero .lede{max-width:68ch}
.story-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.story-prose{max-width:820px}.story-prose p,.story-prose li{font-size:1.08rem;color:#d9d4cb}.story-prose h2{margin-top:2.4rem}.story-prose h3{margin-top:1.8rem}
.story-aside{position:sticky;top:95px}.story-aside .card{margin-bottom:1rem}
.story-question{padding:1.4rem;border-left:6px solid var(--red);background:#151515;margin:2rem 0}.story-question strong{display:block;text-transform:uppercase;letter-spacing:.08em;color:var(--red);font-size:.78rem;margin-bottom:.35rem}
.story-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}.story-next a{display:block;text-decoration:none;border:1px solid var(--line);padding:1.25rem;background:#111;min-height:150px}.story-next a:hover,.story-next a:focus-visible{border-color:var(--red);outline:2px solid var(--blue);outline-offset:2px}.story-next b{display:block;text-transform:uppercase;font-size:1.15rem;margin:.35rem 0}.story-next span{color:#c9c4bb;font-size:.92rem}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.story-card{display:block;text-decoration:none;border:1px solid var(--line);background:#111;padding:1.4rem;min-height:240px;position:relative}.story-card:after{content:"→";position:absolute;right:1rem;bottom:.7rem;color:var(--red);font-size:1.8rem}.story-card:hover,.story-card:focus-visible{transform:translateY(-3px);border-color:rgba(255,255,255,.45);outline:2px solid var(--blue);outline-offset:2px}.story-card p{color:#c9c4bb}
.book-covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2rem);align-items:start;max-width:920px;margin-top:1.5rem}.book-cover-panel{background:#111;border:1px solid var(--line);padding:clamp(.75rem,2vw,1.1rem);display:grid;justify-items:center}.book-cover-panel img{display:block;width:min(100%,390px);height:auto;margin:0 auto}.book-cover-panel figcaption{width:100%;padding:.75rem .25rem .15rem;color:#c9c4bb;font-size:.88rem;text-align:center}
.book-wrap{margin-top:2rem;border:1px solid var(--line);background:#111;padding:1rem}.book-wrap img{width:100%;height:auto}
.app-launch{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;align-items:stretch}.app-launch .callout{height:100%}
.quick-path{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem}.quick-path a{font-size:.8rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:900px){.story-layout,.app-launch{grid-template-columns:1fr}.story-aside{position:static}.story-grid,.story-next{grid-template-columns:1fr 1fr}.book-covers{grid-template-columns:1fr 1fr;max-width:760px}}
@media (max-width:640px){.story-grid,.story-next,.book-covers{grid-template-columns:1fr}.book-covers{max-width:430px;margin-inline:auto}.book-cover-panel{padding:.75rem}.feature-card:after{top:.8rem;right:.8rem}.story-hero{padding:3.4rem 0 2.8rem}}
@media (hover:none){.feature-card:after{opacity:1}.feature-card:active{outline:2px solid var(--blue);outline-offset:-2px}}
:root{--hero:url('/images/hero.jpg?v=20260823c')}

/* Softer desktop hero blend: preserve text contrast while easing the transition into the portrait. */
@media (min-width:901px){
  .dj-hero:before{background:radial-gradient(circle at 68% 38%,rgba(210,31,38,.10),transparent 32rem),linear-gradient(90deg,rgba(9,9,9,1) 0%,rgba(9,9,9,.99) 30%,rgba(9,9,9,.93) 40%,rgba(9,9,9,.80) 50%,rgba(9,9,9,.62) 60%,rgba(9,9,9,.42) 70%,rgba(9,9,9,.22) 81%,rgba(9,9,9,.08) 91%,rgba(9,9,9,0) 100%)}
}