:root{--blue:#536DC4;--deep:#3A55BA;--ink:#1d2433;--muted:#5b6475;--bg:#f6f7fb}
*{box-sizing:border-box}html,body{margin:0}
body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}a{color:var(--deep)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}.narrow{max-width:760px}
.top{background:#fff;border-bottom:1px solid #e3e6ef}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700}
.brand img{border-radius:6px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:6px 12px;border-radius:6px;text-decoration:none;color:var(--muted);font-weight:600}
nav a:hover,nav a[aria-current]{color:var(--deep);background:#eef1fb}
.hero{text-align:center;padding:64px 0 40px}
.logo{width:260px;margin:0 auto;border-radius:20px;box-shadow:0 12px 40px rgba(58,85,186,.25)}
.logo.sm{width:140px;margin:0 0 20px;border-radius:12px}
h1{font-size:2.6rem;line-height:1.15;margin:28px 0 6px}
.sec h1{margin-top:40px}
.tag{font-size:1.3rem;color:var(--muted);margin:0 0 24px;letter-spacing:.02em}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.sec .btns{justify-content:flex-start}
.btn{display:inline-block;padding:10px 18px;border-radius:8px;background:var(--blue);color:#fff;text-decoration:none;font-weight:600}
.btn.alt{background:#fff;color:var(--deep);border:1px solid #c9d1ee}
.sec{padding-bottom:40px}h2{font-size:1.4rem;margin:36px 0 16px}
.lead{color:var(--muted);font-size:1.1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.grid-s{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card{display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.short .thumb{aspect-ratio:9/12}
.thumb img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:auto auto 10px 10px;background:rgba(0,0,0,.7);color:#fff;border-radius:6px;padding:2px 10px;font-size:.85rem}
.ct{font-weight:650;padding:12px 14px 2px}.cd{color:var(--muted);font-size:.85rem;padding:0 14px 14px}
.book{background:#fff;border-radius:12px;padding:20px 24px;margin:20px 0;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.book h2{margin-top:0}.muted{color:var(--muted)}
.quote{font-style:italic;color:var(--muted);margin-top:28px}
.foot{border-top:1px solid #e3e6ef;background:#fff;color:var(--muted);text-align:center;padding:24px 0;font-size:.9rem}
.foot p{margin:4px 0}
@media (max-width:600px){.top .wrap{justify-content:center;padding:10px 16px}.hero{padding:40px 0 24px}.logo{width:200px}h1{font-size:2rem}.tag{font-size:1.1rem}.grid,.grid-s{grid-template-columns:1fr 1fr;gap:12px}.grid:not(.grid-s){grid-template-columns:1fr}.ct{font-size:.92rem}}
/* Site background = logo background #526BC2 (sampled from logo-square-large-1200.png) */
:root{--logo-bg:#526BC2}
body{background:var(--logo-bg);color:#fff}
a{color:#fff}
.top,.foot{background:var(--logo-bg);border-color:rgba(255,255,255,.35)}
.brand,.foot{color:#fff}
nav a{color:#fff}
nav a:hover,nav a[aria-current]{color:#fff;background:rgba(255,255,255,.18);text-decoration:underline;text-underline-offset:4px}
.logo,.logo.sm{border-radius:0;box-shadow:none}
.tag,.lead,.quote,.sec>.muted{color:#fff}
.btn{background:#fff;color:#2F4596}
.btn.alt{background:transparent;color:#fff;border:1px solid #fff}
.card,.book{background:#fff;color:#1d2433;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.book a:not(.btn){color:#2F4596}
.book .btn{background:#2F4596;color:#fff}
.cd,.book .muted{color:#4a5263}
.top .brand img{border-radius:0}

/* Home hero: two columns on desktop */
.top .brand img{width:40px;height:40px}
@media (min-width:900px){
  .home-hero{text-align:left;padding:56px 0 24px}
  .hero-grid{display:flex;align-items:center;gap:56px}
  .home-hero .logo{margin:0;flex:0 0 300px;width:300px}
  .home-hero h1{font-size:3.4rem;margin:0 0 8px}
  .home-hero .tag{font-size:1.6rem}
  .home-hero .btns{justify-content:flex-start;margin-bottom:0}
}

/* Home: logo strokes extended across the page (measured from logo-square-large-1200.png) */
body.home{position:relative;overflow-x:clip}
html{overflow-x:clip}
.home .top,.home .foot{background:transparent;position:relative;z-index:2}
.home main{position:relative;z-index:1}
.home .sec{position:relative;z-index:2}
.logo-wrap{position:relative;flex:0 0 auto;width:260px;margin:0 auto}
.logo-wrap .logo{width:100%;margin:0;position:relative;z-index:1}
.ext{position:absolute;display:block;pointer-events:none}
/* dark bar: x 49-187 of 1200, from y 511 down */
.ext-bar{left:4.083%;width:11.583%;top:60%;height:100000px;background:#3855BB;z-index:0}
/* I stroke: x 49-77, white, up to top */
.ext-i{left:4.083%;width:2.417%;bottom:99.9%;height:100000px;background:#fff;z-index:0}
/* EASE underline: y 1020-1058, white, edge to edge */
.ext-line{top:85%;height:3.25%;left:-100vw;right:-100vw;background:#fff;z-index:2}
.home .hero{position:relative;z-index:0}
@media (min-width:900px){.home .logo-wrap{width:300px;margin:0}}
@media (max-width:600px){.home .logo-wrap{width:200px}}

/* dark bar: x 49-187 of 1200 logo px, from logo y 600 to page bottom; positioned by app.js */
.page-bar{position:absolute;bottom:0;background:#3855BB;z-index:0;pointer-events:none;display:none}
.home .hero .logo-wrap{z-index:1}

/* EASE underline: logo y 1020-1058 of 1200, full page width; positioned by app.js */
.page-line{position:absolute;left:0;right:0;background:#fff;z-index:3;pointer-events:none;display:none}

/* Header opaque again; it covers the upward I stroke so it stops at the header's bottom edge */
.home .top{background:var(--logo-bg);z-index:4}
.page-line{left:auto}