/* ============================================================================================
   Made in Evolve — case study. Loaded after main.css + responsive.css (header, contact, fonts, line masks).
   ============================================================================================ */
body.csp{background:#b6b6b6;color:#81171c}
#header.pj,#header.pj.compact,#header.pj.dark{color:#81171c}
#header.pj .wm{fill:currentColor}#header.pj .nav.fold{color:inherit}
#header.pj .st{height:100px}
#header .nav[href]{text-decoration:none;cursor:pointer}
#wrap.dim #cmain{filter:blur(12px)}
#cmain{position:relative;z-index:1;width:1440px;margin:0 auto;font:400 12px/16px 'Lusitana',Georgia,serif;letter-spacing:-.01em}
#cmain p,#cmain h1,#cmain h2{margin:0;font-weight:400}
#cmain .lm{white-space:nowrap}
#cmain .lm.j .li{text-align:justify;text-align-last:justify}
/* ---- hero */
#chero{position:relative;height:1209px}
#cst{position:absolute;left:0;top:198px;width:1440px;text-align:center;font:400 66px/1.04 'Lusitana',Georgia,serif;letter-spacing:-.04em}
.dot{position:absolute;width:3px;height:3px;background:#81171c;opacity:0;transition:opacity .01s;transition-delay:calc(.9s + var(--d,0)*70ms)}
#chero.in .dot{opacity:1}
.hfig{position:absolute;left:443px;top:491px;width:548px;height:603px}
#cin{position:absolute;left:0;top:497px;margin-left:calc(-1*var(--ox,0px) + 7px)}
#cin p{width:283px;letter-spacing:-.03em}#cin .b{margin-left:91px}
#csv{position:absolute;left:1021px;top:497px}
#crs{position:absolute;left:1241px;top:497px}
/* ---- chapters: label and title on the left, the statement, two paragraphs, then the pictures */
.chap{position:relative;padding-top:463px;padding-bottom:129px}
.chl{position:absolute;left:97px;top:25px;letter-spacing:-.02em}
.cht{position:absolute;left:97px;top:41px;font:400 54px/1 'Lusitana',Georgia,serif;letter-spacing:-.04em}
.big{position:absolute;left:9px;top:244px;font:400 54px/52px 'Lusitana',Georgia,serif;letter-spacing:-.04em}
.big .lm:first-child{padding-left:571px}
.cpar{position:relative;height:96px}
.col{position:absolute;top:0;width:231px;letter-spacing:-.02em}
.col.l{left:474px}.col.r{left:735px}
.gal{margin-top:143px;margin-left:10px;width:1420px;display:flex;flex-wrap:wrap;gap:12px}
.gfig{position:relative}.gfig.full{width:1420px;height:749px}.gfig.half{width:704px;height:619px}
.cend{height:140px}
/* ---- the chapter agenda in the compact header: the current chapter in full ink, its line filling up as you read */
#cag .ag{top:8px;width:78px;opacity:0;translate:26px 0;pointer-events:none;color:inherit;
  transition:opacity .35s cubic-bezier(1,0,0,1),translate .45s cubic-bezier(1,0,0,1);transition-delay:calc(var(--i,0)*30ms)}
#header.compact #cag .ag{opacity:.35;translate:0 0;pointer-events:auto;transition-delay:calc(.5s + var(--i,0)*30ms)}
#header.compact #cag .ag.on,#header.compact #cag .ag:hover{opacity:1}
#cag .ag i{position:absolute;left:0;top:16px;width:78px;height:1px;background:currentColor;opacity:.35;overflow:hidden}
#cag .ag.on i{opacity:1;background:transparent}
#cag .ag i b{position:absolute;left:0;top:0;width:100%;height:100%;background:currentColor;transform-origin:0 0;transform:scaleX(var(--p,0))}
#cag .ag:not(.on) i b{display:none}
/* ---- pictures: they arrive in 3px cells of the ground colour, from the bottom up */
.pxr{margin:0;overflow:hidden;background:transparent}
.pxr img{display:block;width:100%;height:100%;object-fit:cover;visibility:hidden}
.pxr.on img{visibility:visible}
.pxr canvas{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
/* the line masks: .rv on the block lets its lines rise */
.hr .li,.io .li{transition-duration:.9s}
@media (max-width:1023px){
  #cmain{width:auto;padding:0 20px}
  #chero{height:auto;padding-top:140px}
  #cst,#cin,#csv,#crs,.hfig,.chl,.cht,.big{position:relative;left:auto;top:auto;margin:0}
  #cst{width:auto;font-size:40px}
  .dot{display:none}
  .hfig{width:100%;height:auto;aspect-ratio:548/603;margin:32px 0}
  #cin p{width:auto}#cin .b{margin-left:0}
  #csv,#crs{display:inline-block;vertical-align:top;margin:24px 24px 0 0}
  .chap{padding-top:80px;padding-bottom:40px}
  .chl,.cht{width:auto}.cht{font-size:34px;margin:8px 0 32px}
  .big{font-size:28px;line-height:1.05}.big .lm{white-space:normal}.big .lm:first-child{padding-left:0}
  .cpar{height:auto;display:grid;gap:16px;margin:32px 0}
  #cag{display:none}
  .col{position:relative;left:auto!important;width:auto}.col .lm{white-space:normal}.col .lm.j .li{text-align-last:auto}
  .gal{margin:0;width:auto;gap:12px}.gfig.full{width:100%;height:auto;aspect-ratio:1420/749}.gfig.half{width:100%;height:auto;aspect-ratio:704/619}
  #cmain .lm{white-space:normal}#cmain .lm.j .li{text-align-last:auto}
}
@media (prefers-reduced-motion:reduce){ .li{transition-duration:.01ms!important;transition-delay:0s!important} }