/* Philippians & Colossians: one long turn from a prison's barred light to full radiance. */
@font-face{font-family:"Oranienbaum PC";src:url(/assets/books/philippians-colossians/oranienbaum.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@view-transition{navigation:auto}

.pcol{
  --pc-display:"Oranienbaum PC","Bodoni 72","Didot",Georgia,serif;
  --pc-night:#0E0D0C;
  --pc-cell:#1A1816;
  --pc-stone:#3B342C;
  --pc-ember:#B97A36;
  --pc-blaze:#DDA048;
  --pc-gold:#F2CF8C;
  --pc-dawn:#FAEBCB;
  --pc-radiant:#FFF8EA;
  --pc-cream:#F6EBD6;
  --pc-ink:#1B1712;
  --pc-accent:#F0B65A;   /* the light, on dark */
  --pc-burn:#6E2A0A;     /* the light, on the blaze */
  --pc-deep:#8A4B0F;     /* the light, on cream */
  --pc-light:radial-gradient(120% 95% at 34% 30%,#FFF0CC 0%,#FAD493 38%,#EDAE5C 72%,#D98E3E 100%);
  --pc-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background:var(--pc-night);
}
.pcol .kicker,.pc-kicker{font:700 12px/1.3 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--pc-accent)}
.pc-kicker--ink{color:var(--pc-deep)}

/* the header follows the light: dark over the cell, cream once the room is lit */
.pcol .top::before{background:linear-gradient(180deg,rgba(14,13,12,.82),rgba(14,13,12,.4) 55%,rgba(14,13,12,0))}
.pcol .nav .nav__cta{border-color:rgba(240,182,90,.7)}
.pcol .nav a:hover{color:var(--pc-accent)}
.pcol.is-lit .top::before{background:linear-gradient(180deg,rgba(255,246,228,.9),rgba(255,246,228,.5) 55%,rgba(255,246,228,0))}
.pcol.is-lit .top{color:var(--pc-ink)}
.pcol.is-lit .brand,.pcol.is-lit .nav a{color:var(--pc-ink)}
.pcol.is-lit .brand svg g{fill:var(--pc-ink)}
.pcol.is-lit .nav .nav__cta{border-color:rgba(138,75,15,.6)}
.pcol.is-lit .nav a:hover{color:var(--pc-deep)}
.pcol.is-lit :focus-visible{outline-color:var(--pc-deep)}
.pcol :focus-visible{outline-color:var(--pc-accent)}

/* one continuous ground: each screen starts on the colour the last one ended on */
.pc{position:relative;isolation:isolate;overflow:hidden}
.pc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--pc-noise);opacity:.42}
.pc-s{position:relative;min-height:100vh;min-height:100svh;padding:clamp(96px,12vh,140px) var(--gutter) clamp(56px,8vh,96px);display:grid;align-content:center}
.pc-s::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g)}
.pc-s>*:not(.pc-art){position:relative;z-index:2}
.pc-art{position:absolute;inset:0;z-index:0;pointer-events:none}

.pc-s1{--g:linear-gradient(180deg,var(--pc-night) 0%,#121110 60%,var(--pc-cell) 100%)}
.pc-s2{--g:linear-gradient(180deg,var(--pc-cell) 0%,#221F1B 55%,var(--pc-stone) 100%)}
.pc-s3{--g:linear-gradient(180deg,var(--pc-stone) 0%,#6E5134 14%,var(--pc-ember) 30%,var(--pc-blaze) 52%,#E8B865 78%,var(--pc-gold) 100%)}
.pc-s4{--g:linear-gradient(180deg,var(--pc-gold) 0%,#F6DDA9 40%,var(--pc-dawn) 100%)}
.pc-s5{--g:linear-gradient(180deg,var(--pc-dawn) 0%,#FDF2DC 45%,var(--pc-radiant) 100%)}

/* the window's light: a lit patch with bar shadows, thrown at an angle onto the wall */
.pc-patch{position:absolute;transform:rotate(var(--rot,-5deg)) skewX(var(--skew,-16deg));transform-origin:30% 0}
.pc-patch__in{position:absolute;inset:0;background:var(--pc-light);opacity:var(--lit,.92);will-change:transform;transform-origin:30% 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
  mask-composite:intersect}
.pc-bars{position:absolute;inset:0;will-change:opacity;
  background:
    linear-gradient(180deg,transparent 0 41%,var(--bar,rgba(16,13,11,.9)) 42.5% 46%,transparent 47.5%),
    linear-gradient(90deg,transparent 0 30%,var(--bar,rgba(16,13,11,.9)) 36% 64%,transparent 70%) 12.5% 0/25% 100% repeat-x}
.pc-spill{position:absolute;inset:-10% -10% -10% 20%;background:radial-gradient(55% 60% at 64% 46%,rgba(221,160,72,.30),rgba(185,122,54,.12) 45%,rgba(185,122,54,0) 72%)}

/* type */
.pc-wall{display:block;font:400 1em/.84 var(--pc-display);letter-spacing:-.012em}
.pc-wall em{color:var(--pc-accent)}
.pc-lead{display:block;font:italic 400 clamp(22px,2.6vw,42px)/1.15 var(--serif);color:var(--pc-cream)}

/* 1: the cell */
.pc-s1{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:0 2vw}
.pc-s1 .pc-patch{left:52%;top:-4%;width:46%;height:96%;--rot:-4deg;--skew:-15deg}
.pc-s1__copy{grid-column:1;align-self:center;padding-top:2vh}
.pc-title{font:400 clamp(64px,12.2vw,250px)/.82 var(--pc-display);letter-spacing:-.015em;color:var(--pc-cream);margin:.18em 0 .22em}
.pc-title span{display:block}
.pc-title__b{padding-left:.42em}
.pc-title em{color:var(--pc-accent)}
.pc-by{font:700 13px/1.4 var(--label);letter-spacing:.2em;text-transform:uppercase;color:#CFC3AE;text-shadow:0 0 14px rgba(10,8,6,.9),0 0 3px rgba(10,8,6,.8)}

/* the book object */
.pc-book{--bw:min(30vw,62vh);--bd:calc(var(--bw) * .055);--ry:22deg;position:relative;width:var(--bw);aspect-ratio:1500/2100;margin:0;perspective:2200px}
.pc-book__body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry)) rotateX(3deg)}
.pc-book__front,.pc-book__bars{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(calc(var(--bd) / 2));border-radius:1px 3px 3px 1px}
.pc-book__front{object-fit:cover;background:#7a7a7a;view-transition-name:book-philippians-colossians}
.pc-book--close .pc-book__front{view-transition-name:none}
.pc-book__bars{transform:translateZ(calc(var(--bd) / 2 + 1px));pointer-events:none;
  background:
    linear-gradient(103deg,rgba(14,12,10,.86) 0 8%,rgba(255,210,140,.16) 11% 25%,rgba(14,12,10,.8) 28% 37%,rgba(255,210,140,.18) 40% 55%,rgba(14,12,10,.78) 58% 66%,rgba(255,210,140,.16) 69% 84%,rgba(14,12,10,.84) 87% 100%),
    linear-gradient(180deg,rgba(14,12,10,0) 0 52%,rgba(14,12,10,.7) 54% 58%,rgba(14,12,10,0) 60%)}
.pc-book__spine{position:absolute;top:0;left:0;width:var(--bd);height:100%;transform:translateX(-50%) rotateY(-90deg);background:linear-gradient(90deg,#4c4b4a,#6c6b69 45%,#575655)}
.pc-book__pages{position:absolute;top:1.2%;left:100%;width:calc(var(--bd) * .96);height:97.6%;transform:translateX(-50%) rotateY(90deg);background:repeating-linear-gradient(90deg,#efe6d3 0 1px,#d9cfbb 1px 2px),#e9dfca}
.pc-book__back{position:absolute;inset:0;background:#5f5e5c;transform:translateZ(calc(var(--bd) / -2)) rotateY(180deg)}
.pc-book__cast{position:absolute;pointer-events:none}

.pc-book--hero{grid-column:2;justify-self:center;--ry:20deg;z-index:3}
.pc-book--hero .pc-book__front{filter:brightness(.92) sepia(.12)}
.pc-book--hero .pc-book__cast{left:18%;top:8%;width:100%;height:96%;background:rgba(6,5,4,.7);filter:blur(18px);transform:skewX(-14deg) translateX(14%)}

/* 2: the shadows */
.pc-s2 .pc-patch{left:-12%;top:6%;width:84%;height:96%;--rot:-6deg;--skew:-18deg;--lit:.5}
.pc-s2__line{position:relative;font-size:clamp(84px,19.5vw,400px);text-align:center;color:var(--pc-cream)}
.pc-s2__line::before{content:"";position:absolute;z-index:-1;inset:-34% -22%;background:radial-gradient(closest-side,rgba(17,12,7,.72),rgba(17,12,7,.6) 58%,rgba(17,12,7,0));pointer-events:none}
.pc-s2__line .pc-lead{font-size:clamp(22px,2.6vw,42px);text-align:left;padding-left:4vw;margin-bottom:.1em}
.pc-s2__wall{white-space:nowrap;margin-left:-.02em}
.pc-s2__wall em{color:var(--pc-cream);text-shadow:0 .02em .18em rgba(10,8,6,.55)}
.pc-s2__tail{display:block;font:400 clamp(30px,5.4vw,104px)/1 var(--pc-display);color:var(--pc-accent);text-align:right;padding-right:3vw;margin-top:.12em}

/* 3: the blaze */
.pc-s3 .pc-patch{left:-30%;top:-26%;width:160%;height:150%;--rot:-8deg;--skew:-20deg;--lit:.55;--bar:rgba(80,40,10,.55)}
.pc-s3__line{color:var(--pc-ink)}
.pc-s3__line .pc-lead{color:var(--pc-ink);padding-left:.3vw}
.pc-s3__wall{font-size:clamp(84px,17.8vw,360px)}
.pc-s3__wall em{color:var(--pc-burn)}
.pc-s3__wall span{display:block}
.pc-s3__wall span+span{font-size:1.55em;text-align:right;line-height:.78;margin-top:-.08em}

/* 4: the prize */
.pc-sun{position:absolute;right:-28vw;top:-30vh;width:110vw;height:110vw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,240,.95),rgba(255,240,200,.6) 35%,rgba(255,231,180,0) 100%);will-change:transform,opacity}
.pc-s4__line{color:var(--pc-ink)}
.pc-s4__line .pc-lead{color:var(--pc-ink);font-size:clamp(28px,3.6vw,60px);padding-left:.4vw}
.pc-s4__wall{font-size:clamp(100px,26vw,520px);white-space:nowrap;line-height:.8}
.pc-s4__wall em{color:var(--pc-deep)}
.pc-s4__peace{justify-self:end;max-width:20ch;margin-top:3vh;font:italic 400 clamp(22px,2.4vw,40px)/1.2 var(--serif);color:#3A2F22;text-align:right}

/* 5: the light, and the book in it */
.pc-sun--close{right:auto;left:-30vw;top:-40vh;width:120vw;height:120vw;opacity:.8}
.pc-s5{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;gap:4vh 4vw;padding-bottom:clamp(28px,4vh,48px)}
.pc-s5__line{grid-column:1/-1;color:var(--pc-ink);font-weight:400}
.pc-s5__line .pc-lead{color:var(--pc-ink)}
.pc-s5__wall{font-size:clamp(66px,13.4vw,272px);white-space:nowrap}
.pc-s5__wall em{color:var(--pc-deep)}
.pc-s5__tail{display:block;font:italic 400 clamp(22px,2.6vw,42px)/1.15 var(--serif);text-align:right;color:var(--pc-ink);margin-top:.2em}
.pc-buy{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 clamp(32px,6vw,110px);padding-left:clamp(0px,8vw,160px)}
.pc-book--close{--bw:min(22vw,42vh);--ry:-24deg}
.pc-book--close .pc-book__cast{left:30%;bottom:-6%;width:150%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,58,20,.5),rgba(90,58,20,0));transform:skewX(-50deg)}
.pc-book--close .pc-book__front{box-shadow:0 30px 60px -10px rgba(110,70,20,.35)}
.pc-book__sheen{position:absolute;inset:0;transform:translateZ(calc(var(--bd) / 2 + 1px));pointer-events:none;border-radius:1px 3px 3px 1px;background:linear-gradient(118deg,rgba(255,236,196,.34) 0%,rgba(255,228,180,.12) 38%,rgba(255,255,255,0) 60%,rgba(60,40,15,.14) 100%)}
.pc-buy__copy{color:var(--pc-ink)}
.pc-buy__title{font:400 clamp(40px,4.4vw,80px)/.9 var(--pc-display);margin-top:.35em}
.pc-buy__sub{font:700 12px/1.4 var(--label);letter-spacing:.26em;text-transform:uppercase;margin-top:12px;color:#4A3D2C}
.pc-buy__by{font:italic 400 18px/1.4 var(--serif);margin-top:4px;color:#4A3D2C}
.pc-buy__price{font:400 clamp(34px,3vw,52px)/1 var(--pc-display);margin:22px 0 18px;color:var(--pc-deep)}
.pc-btn{background:var(--pc-ink);color:var(--pc-radiant);min-width:156px}
.pc-btn:hover{background:var(--pc-deep)}
.pc-buy__note{margin-top:12px;font-size:15px;color:#4A3D2C}
.pc-more{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:4vh}
.pc-more .textlink,.pcol .foot .textlink{color:var(--pc-deep)}

/* the footer stays in the light */
.pcol .foot{background:var(--pc-radiant);border-top:0;color:var(--pc-ink)}
.pcol .foot::before{content:"";position:absolute;inset:0;background:var(--pc-noise);opacity:.42;pointer-events:none}
.pcol .foot .brand{color:var(--pc-ink)}
.pcol .foot .brand svg g{fill:var(--pc-ink)}
.pcol .foot__note{color:#4A3D2C}


/* tablet */
@media (max-width:1024px){
  .pc-s1{grid-template-columns:1fr;align-content:start;gap:4vh}
  .pc-s1 .pc-patch{left:30%;top:44%;width:70%;height:62%}
  .pc-book--hero{grid-column:1;grid-row:2;justify-self:end;margin:5vh 4vw 0 0;--bw:min(46vw,44vh)}
  .pc-book--close{--bw:min(32vw,40vh)}
  .pc-title{font-size:clamp(64px,15vw,190px)}
}

/* phone: its own crops */
@media (max-width:760px){
  .pc-s{padding:96px 20px 56px}
  .pc-s2,.pc-s3,.pc-s4{min-height:78vh;min-height:78svh}
  .pc-s1{gap:2vh;padding-top:92px}
  .pc-s1 .pc-patch{left:14%;top:38%;width:96%;height:66%;--rot:-3deg;--skew:-12deg}
  .pc-spill{inset:20% -40% -10% -10%}
  .pc-title{font-size:clamp(52px,18.4vw,96px);margin:.22em 0 .2em}
  .pc-title__b{padding-left:0}
  .pc-by{font-size:11px}
  .pc-book--hero{--bw:min(56vw,38vh);justify-self:center;margin:3vh 0 0 8vw}
  .pc-book--hero .pc-book__cast{filter:blur(12px)}

  .pc-s2 .pc-patch{left:-40%;top:12%;width:150%;height:80%;--rot:-8deg;--skew:-14deg}
  .pc-s2__line{font-size:27vw;text-align:left}
  .pc-s2__line::before{inset:-44% -56% -52%}
  .pc-s2__line .pc-lead{padding-left:0;font-size:26px}
  .pc-s2__wall{white-space:normal;line-height:.8}
  .pc-s2__tail{font-size:clamp(30px,10vw,44px);text-align:left;padding:0;margin-top:.4em}

  .pc-s3 .pc-patch{left:-70%;top:-10%;width:260%;height:130%}
  .pc-s3__wall{font-size:20.5vw}
  .pc-s3__wall span+span{font-size:2.6em;line-height:.74}
  .pc-s3__line .pc-lead{font-size:26px;margin-bottom:.4em}

  .pc-sun{right:-70vw;top:-10vh;width:180vw;height:180vw}
  .pc-s4__line .pc-lead{font-size:30px}
  .pc-s4__wall{font-size:39vw;white-space:normal;line-height:.78}
  .pc-s4__wall em{display:block}
  .pc-s4__peace{justify-self:start;text-align:left;font-size:26px;margin-top:5vh}

  .pc-s5{grid-template-columns:1fr;gap:5vh}
  .pc-s5__wall{font-size:29vw;white-space:normal;line-height:.8}
  .pc-s5__tail{text-align:left;font-size:24px;margin-top:.9em}
  .pc-sun--close{left:-60vw;top:-20vh;width:200vw;height:200vw}
  .pc-buy{grid-template-columns:1fr;padding:0;gap:6vh;justify-items:start}
  .pc-book--close{--bw:min(56vw,46vh);margin-left:12vw}
  .pc-more{margin-top:2vh}
}
@media (max-width:360px){
  .pc-title{font-size:19.5vw}
}

@media (prefers-reduced-motion:reduce){
  .pc-patch__in,.pc-bars,.pc-sun{will-change:auto}
}