/* I & II Peter: restless water gives way to rock. Grounds: night sea (deep ink blue, silver hairlines) -> engraved silver stone -> night again under the footer. */
@font-face{font-family:"Oranienbaum";src:url(/assets/books/1-2-peter/oranienbaum.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@view-transition{navigation:auto}

.pt{
  --sea:#06111C;
  --sea-2:#0C2434;
  --foam:#C9D6DE;
  --foam-2:#EEF3F6;
  --spray:#A6C4D4;
  --stone-ink:#1B1D20;
  --stone-ink-2:#33373C;
  --deep:#0E3349;
  --display:"Oranienbaum","Bodoni Moda",Didot,Georgia,serif;
  --run:240vh;
  --tile:177.78vh;
  --overlap:40vh;
  background:var(--sea);
}
.pt main{display:block}
.pt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pt-label{font:700 13px/1.3 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--spray)}
.pt em{font-family:var(--serif);font-style:italic;font-weight:400}

.pt-run{position:relative}

/* ---------- the sea: one continuous swell under the first two screens ---------- */
.pt-searun{position:relative}
.pt-sea{position:absolute;inset:0;overflow:hidden;z-index:0;background:#040C15}
.pt-waves{position:absolute;top:0;left:0;height:var(--run);width:calc(100% + var(--tile));background:url(/assets/books/1-2-peter/sea-tall-1920.webp) repeat-x 0 0/var(--tile) var(--run);animation:pt-drift 80s linear infinite;will-change:transform,opacity}
.pt-waves--b{top:.25%;opacity:.28;animation-duration:131s;animation-direction:reverse;mix-blend-mode:screen}
@keyframes pt-drift{to{transform:translate3d(calc(-1 * var(--tile)),0,0)}}
.pt-sea__glow{position:absolute;inset:0;background:radial-gradient(ellipse 58% 11% at 50% 16.7%,rgba(160,196,216,.24),rgba(160,196,216,0) 70%)}
@media (max-width:760px){
  .pt{--tile:48vh}
  .pt-waves{background-image:url(/assets/books/1-2-peter/sea-tall-phone.webp)}
  .pt-sea__glow{background:radial-gradient(ellipse 90% 9% at 50% 17.5%,rgba(160,196,216,.26),rgba(160,196,216,0) 70%)}
}

/* ---------- screen 1: the title standing on the horizon ---------- */
.pt-hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px var(--gutter) 9vh;color:var(--foam-2)}
.pt-hero__kicker{margin-bottom:clamp(8px,1.6vh,18px)}
.pt-hero__title{font-family:var(--display);font-weight:400;line-height:.8;display:flex;flex-direction:column;align-items:center}
.pt-hero__num{font-size:clamp(44px,8.4vw,150px);letter-spacing:.02em;color:var(--foam)}
.pt-amp{font-size:1.06em}
.pt-hero__name{font-size:min(45vw,72vh);letter-spacing:-.005em;margin-top:-.02em;background:linear-gradient(180deg,#F4F7F9 0%,#C3CDD3 52%,#8EA3B0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 18px 40px rgba(2,8,14,.6))}
.pt-hero__sub{margin-top:clamp(10px,2vh,22px);font:400 clamp(15px,1.55vw,26px)/1.2 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:var(--foam)}
.pt-hero__by{margin-top:12px;font:700 13px/1.3 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--spray)}

/* ---------- screen 2: the name riding the water ---------- */
.pt-simon{position:relative;z-index:1;min-height:calc(100vh + var(--overlap));display:flex;flex-direction:column;justify-content:flex-end;padding:18vh var(--gutter) calc(16vh + var(--overlap));color:var(--foam-2)}
.pt-simon::before{content:"";position:absolute;inset:20% 0 0;background:radial-gradient(ellipse 60% 46% at 40% 62%,rgba(4,12,21,.72),rgba(4,12,21,0) 72%);pointer-events:none;z-index:-1}
.pt-simon__name{font-family:var(--display);font-weight:400;font-size:13.4vw;line-height:.9;letter-spacing:-.01em;white-space:nowrap;margin:.12em 0 .1em -.04em;color:var(--foam-2);text-shadow:0 0 .4em rgba(4,12,21,.9)}
.pt-bob span span{display:inline-block}
.pt-w{display:inline-block;white-space:nowrap}
.pt-simon__line{font:400 clamp(22px,2.6vw,44px)/1.2 var(--serif);color:var(--foam)}
.pt-simon__line em{color:var(--spray)}
@media (prefers-reduced-motion:no-preference){
  .js .pt-bob span span{animation:pt-bob 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
}
@keyframes pt-bob{0%,100%{transform:translate3d(0,-.035em,0) rotate(-1.4deg)}50%{transform:translate3d(0,.045em,0) rotate(1.4deg)}}

/* ---------- the stone: rises out of the sea and is the ground to the end ---------- */
.pt-stone{position:relative;z-index:2;margin-top:calc(-1 * var(--overlap));overflow:clip;color:var(--stone-ink)}
.pt-rock{position:absolute;inset:0;z-index:0;will-change:transform}
.pt-rock picture{display:block;height:100%}
.pt-rock__img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.pt-stone :focus-visible{outline-color:var(--deep)}

/* screen 3: the word cut in stone */
.pt-carve{position:relative;z-index:1;min-height:110vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16vh var(--gutter) 22vh}
.pt-carve__lead,.pt-carve__tail{font:400 clamp(20px,2.3vw,40px)/1.25 var(--serif);color:var(--stone-ink);max-width:30ch}
.pt-carve__lead em{color:var(--deep)}
.pt-carve__word{font-family:var(--display);font-weight:400;font-size:min(41vw,74vh);line-height:.78;letter-spacing:-.01em;margin:.06em 0 .1em;color:#2A2D31;text-shadow:0 .012em 0 rgba(255,255,255,.62),0 -.006em 0 rgba(0,0,0,.45),0 .04em .08em rgba(255,255,255,.18);will-change:transform,opacity}
.pt-q{font-size:.42em;vertical-align:.95em;color:var(--deep);text-shadow:none}

/* screen 4: identity */
.pt-name{position:relative;z-index:1;min-height:92vh;display:grid;grid-template-columns:1fr minmax(0,34rem);grid-template-rows:auto auto;align-content:center;gap:4vh 4vw;padding:10vh var(--gutter)}
.pt-name::before{content:"";position:absolute;inset:-10% 0;background:radial-gradient(ellipse 55% 50% at 68% 66%,rgba(222,224,223,.78),rgba(222,224,223,0) 70%);pointer-events:none;z-index:-1}
.pt-name__wall{grid-column:1 / -1;font-family:var(--display);font-weight:400;font-size:10.2vw;line-height:.86;letter-spacing:-.01em;color:var(--stone-ink);white-space:nowrap}
.pt-name__wall em{font-family:var(--display);font-style:normal;color:var(--deep)}
.pt-name__copy{grid-column:2;display:grid;gap:18px;font-size:clamp(18px,1.3vw,22px);line-height:1.55;color:var(--stone-ink)}
.pt-name__accent{font:italic 400 clamp(24px,2.1vw,36px)/1.2 var(--serif);color:var(--stone-ink)}

/* screen 5: the book on the rock */
.pt-close{position:relative;z-index:1;padding:8vh var(--gutter) 22vh;background:linear-gradient(180deg,rgba(5,11,26,0) 0,rgba(5,11,26,0) 84%,rgba(5,11,26,.7) 94%,#050B1A 100%)}
.pt-close::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 40% at 30% 58%,rgba(250,247,240,.55),rgba(250,247,240,0) 70%);pointer-events:none;z-index:-1}
.pt-close__wall{font-family:var(--display);font-weight:400;font-size:min(8.6vw,15vh);line-height:.9;letter-spacing:-.005em;color:var(--stone-ink);max-width:15em}
.pt-close__wall em{font-family:var(--display);font-style:normal;color:var(--deep)}
.pt-close__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:5vw;margin-top:7vh}
.pt-book{position:relative;justify-self:center;width:clamp(210px,23vw,380px);perspective:900px;view-transition-name:book-1-2-peter}
.pt-book__obj{--t:clamp(14px,1.7vw,26px);position:relative;aspect-ratio:1000/1400;transform-style:preserve-3d;transform:rotateY(32deg) rotateX(-5deg)}
.pt-book__obj::after{content:"";position:absolute;inset:0;transform:translateZ(1px);background:linear-gradient(100deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 34%,rgba(0,0,0,0) 62%,rgba(0,0,0,.32) 100%);pointer-events:none}
.pt-book__front{position:absolute;inset:0;width:100%;height:100%;border-radius:1px 3px 3px 1px;box-shadow:inset 3px 0 6px rgba(255,255,255,.08)}
.pt-book__spine{position:absolute;left:0;top:0;height:100%;width:var(--t);transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#111 0,#2a2a2a 40%,#1a1a1a 100%)}
.pt-book__pages{position:absolute;right:0;top:0;height:100%;width:var(--t);transform-origin:100% 50%;transform:rotateY(-90deg);background:repeating-linear-gradient(90deg,#e9e4d8 0 1px,#d7d1c3 1px 2px)}
.pt-book__top{position:absolute;left:0;top:0;width:100%;height:var(--t);transform-origin:50% 0;transform:rotateX(-90deg);background:repeating-linear-gradient(0deg,#ece7db 0 1px,#d6d0c2 1px 2px)}
.pt-book__shadow{position:absolute;left:-6%;right:-46%;bottom:-6%;height:13%;background:radial-gradient(ellipse 50% 50% at 42% 50%,rgba(12,14,17,.72),rgba(12,14,17,0) 74%);filter:blur(5px);transform:skewX(-40deg);transform-origin:0 0;z-index:-1}
.pt-book::after{content:"";position:absolute;left:2%;right:6%;bottom:-1.5%;height:3%;border-radius:50%;background:rgba(10,12,15,.7);filter:blur(4px);z-index:-1}
.pt-buy{display:grid;justify-items:start;gap:8px;max-width:30rem}
.pt-buy .pt-label{color:var(--stone-ink-2)}
.pt-buy__title{font:400 clamp(30px,2.8vw,48px)/1.05 var(--display);color:var(--stone-ink);margin-top:4px}
.pt-buy__by{font:700 13px/1.3 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--stone-ink-2)}
.pt-buy__price{font:400 clamp(56px,5.4vw,92px)/1 var(--display);color:var(--stone-ink);margin:10px 0 8px}
.pt-order{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:54px;min-width:180px;padding:0 32px;border-radius:999px;background:#14181C;color:#EEF2F4;font:700 15px/1.1 var(--label);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 26px rgba(14,20,26,.28);transition:background .2s,transform .2s}
.pt-order:hover{background:var(--deep)}
.pt-buy__note{font-size:15px;color:var(--stone-ink);margin-top:6px}
.pt-more{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:14px}
.pt-more__link{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font:700 13px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--stone-ink)}
.pt-more__link:hover{text-decoration:underline;text-underline-offset:5px}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .pt-name{grid-template-columns:1fr minmax(0,30rem)}
  .pt-close__row{gap:4vw}
}

/* ---------- phone: its own crops and optics ---------- */
@media (max-width:760px){
  .pt-hero{padding:88px var(--gutter) 10vh}
  .pt-hero__name{font-size:min(45vw,46vh)}
  .pt-hero__num{font-size:clamp(40px,13vw,72px)}
  .pt-hero__sub{font-size:clamp(13px,3.7vw,17px);letter-spacing:.24em}
  .pt-hero__by{font-size:11.5px;letter-spacing:.16em}
  .pt-simon{padding:14vh var(--gutter) calc(14vh + var(--overlap))}
  .pt-simon__name{font-size:22vw;white-space:normal;line-height:.92}
  .pt-simon .pt-w{display:block}
  .pt-simon__line{font-size:clamp(21px,6vw,28px)}
  .pt-carve{min-height:96vh;padding:14vh var(--gutter) 12vh}
  .pt-carve__lead,.pt-carve__tail{font-size:clamp(19px,5.4vw,24px)}
  .pt-carve__word{font-size:min(44vw,40vh);margin:.12em 0 .14em}
  .pt-name{grid-template-columns:1fr;min-height:auto;padding:12vh var(--gutter) 10vh;gap:5vh}
  .pt-name::before{background:radial-gradient(ellipse 90% 50% at 50% 66%,rgba(222,224,223,.82),rgba(222,224,223,0) 72%)}
  .pt-name__wall{font-size:17.5vw;white-space:normal}
  .pt-name__wall span{display:block}
  .pt-name__copy{grid-column:1}
  .pt-close{padding:6vh var(--gutter) 16vh}
  .pt-close__wall{font-size:13vw}
  .pt-close__row{grid-template-columns:1fr;margin-top:6vh;gap:9vh}
  .pt-close::before{background:radial-gradient(ellipse 80% 30% at 50% 52%,rgba(250,247,240,.55),rgba(250,247,240,0) 70%)}
  .pt-book{width:min(62vw,300px)}
  .pt-buy{justify-items:start}
}
@media (max-width:360px){
  .pt-hero__by{letter-spacing:.1em}
}

/* ---------- reduced motion: a finished still ---------- */
@media (prefers-reduced-motion:reduce){
  .pt-waves{animation:none}
  .pt-rock,.pt-carve__word{transform:none!important}
  .pt-carve__word,.pt-carve__lead,.pt-carve__tail{opacity:1!important}
  .pt-waves--a{opacity:1!important}
}