/* Homepage "Print portfolio" section: the printable sheet folds up into a paper box you can turn.
   --S is the edge of one face; --pa / --pb / --pc are the fold progress of the sides, the back, and the top and bottom (0 flat, 1 folded). */
.ks-pp { background: #181b2e; color: #ffe8e7; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 104px); overflow: hidden; position: relative; }
.ks-pp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 55%, rgba(254,86,33,.16), transparent 70%); pointer-events: none; }
.ks-pp-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)); display: grid; gap: clamp(28px, 5vw, 56px); }
.ks-pp-copy { max-width: 36em; }
.ks-pp-eyebrow { margin: 0 0 10px; font: 600 12px/1 Outfit, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #ffb890; }
.ks-pp-copy h2 { margin: 0; font: 600 clamp(40px, 7vw, 84px)/1 Outfit, system-ui, sans-serif; letter-spacing: -.03em; color: #ffe8e7; }
.ks-pp-lead { margin: 16px 0 0; font: 400 clamp(16px, 1.5vw, 19px)/1.55 Outfit, system-ui, sans-serif; color: rgba(255,232,231,.82); }
.ks-pp-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.ks-pp-btn { appearance: none; border: 1.5px solid #ffe8e7; background: transparent; color: #ffe8e7; font: 500 15px/1 Outfit, system-ui, sans-serif; padding: 14px 22px; border-radius: 99px; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease; }
.ks-pp-btn:hover { background: #ffe8e7; color: #181b2e; }
.ks-pp-btn:active { transform: scale(.97); }
.ks-pp-btn:focus-visible { outline: 3px solid #fe5621; outline-offset: 3px; }
.ks-pp-primary { background: #fe5621; border-color: #fe5621; color: #fff; }
.ks-pp-primary:hover { background: #ffe8e7; border-color: #ffe8e7; color: #181b2e; }
.ks-pp-btn[hidden] { display: none; }

/* the stage and the box */
.ks-pp-stage { --S: clamp(120px, 19vw, 232px); position: relative; height: calc(var(--S) * 3.1); perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ks-pp-stage.is-drag { cursor: grabbing; }
.ks-pp-rotor { --pa: 0; --pb: 0; --pc: 0; position: absolute; left: 50%; top: calc(var(--S) * 1.05); width: var(--S); height: var(--S); margin-left: calc(var(--S) / -2); transform-style: preserve-3d; transform-origin: calc(var(--S) / 2) calc(var(--S) / 2) calc(var(--S) / -2); will-change: transform; }
.pp-face { position: absolute; width: var(--S); height: var(--S); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: calc(var(--S) / 21); overflow: visible; transform-style: preserve-3d; }
.pp-in { position: absolute; inset: 0; padding: 9.5% 9.5%; display: flex; flex-direction: column; gap: .5em; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(24,27,46,.08); }
.pp-pink > .pp-in { background: #ffe8e7; color: #181b2e; } .pp-paper > .pp-in { background: #fffdf8; color: #181b2e; } .pp-ink > .pp-in { background: #232741; color: #ffe8e7; }
.pp-front { left: 0; top: 0; }
.pp-hinge { left: 0; top: 0; }
/* each face is placed beside the front face and hinged on the shared edge */
.pp-top { top: calc(var(--S) * -1); transform-origin: 50% 100%; transform: rotateX(calc(var(--pc) * 90deg)); }
.pp-bottom { top: var(--S); transform-origin: 50% 0; transform: rotateX(calc(var(--pc) * -90deg)); }
.pp-left { left: calc(var(--S) * -1); transform-origin: 100% 50%; transform: rotateY(calc(var(--pa) * -90deg)); }
.pp-right { left: var(--S); transform-origin: 0 50%; transform: rotateY(calc(var(--pa) * 90deg)); }
.pp-back { left: var(--S); top: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--pb) * 90deg)); }

.pp-fr { justify-content: flex-start; }
.pp-spark { width: 2.6em; height: 2.6em; }
.pp-fr h3 { margin: auto 0 0; font: 600 2.05em/1 Outfit, sans-serif; letter-spacing: -.02em; }
.pp-role { margin: .2em 0 0; font: 400 1.05em/1.2 Outfit, sans-serif; opacity: .8; }
.pp-url { margin: .5em 0 0; font: 500 .8em/1 Outfit, sans-serif; letter-spacing: .06em; color: #fe5621; }
.pp-eyebrow { margin: 0 0 .3em; font: 600 .68em/1 Outfit, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #fe5621; }
.pp-ink .pp-eyebrow { color: #ffb890; }
.pp-in ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .8em; }
.pp-in li { font: 500 1.15em/1.1 Outfit, sans-serif; }
.pp-in li small { display: block; margin-top: .2em; font: 400 .66em/1.2 Outfit, sans-serif; opacity: .65; }
.pp-line { margin: 0 0 .7em; font: 400 .78em/1.3 Outfit, sans-serif; word-break: break-word; }
.pp-qrw { align-items: center; justify-content: center; }
.pp-qr { width: 66%; aspect-ratio: 1; padding: 4%; background: #fff; border-radius: 2px; } .pp-qr svg { width: 100%; height: 100%; display: block; }
.pp-scan { margin: .3em 0 0; font: 600 .62em/1 Outfit, sans-serif; letter-spacing: .16em; text-transform: uppercase; text-align: center; }
.pp-art { align-items: center; justify-content: center; }
.pp-art pre { margin: 0; font: 400 calc(var(--S) / 78)/1.18 ui-monospace, Consolas, monospace; white-space: pre; color: #181b2e; }
.pp-tor { margin: .5em 0 0; font: 500 .5em/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

.ks-pp-tip { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 500 12px/1 Outfit, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,232,231,.5); }

@media (min-width: 900px) { .ks-pp-copy { max-width: none; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 48px; align-items: end; } .ks-pp-copy .ks-pp-eyebrow { grid-column: 1 / -1; } .ks-pp-copy h2 { grid-row: 2; } .ks-pp-lead { grid-row: 2; margin: 0; } .ks-pp-actions { grid-column: 1 / -1; grid-row: 3; } }
@media (max-width: 899px) { .ks-pp-stage { --S: clamp(120px, 38vw, 170px); height: calc(var(--S) * 2.7); } .ks-pp-rotor { top: calc(var(--S) * .9); } }
@media (prefers-reduced-motion: reduce) { .ks-pp-btn { transition: none; } }