/* s02 proof: paper, flat daylight. Owned by the s02 builder. */
#s-proof.p2{background:#e8e2d4;color:#0a1a0a;padding:0;position:relative;overflow:visible;
  --p2-ink:#0a1a0a;--p2-mute:#5c5647;--p2-gold:#c9a84c;--p2-gold-d:#8a6a1c;--p2-line:rgba(10,26,10,.14)}
#s-proof.p2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 70% 30%,rgba(255,252,242,.7),rgba(255,252,242,0) 60%),
             radial-gradient(90% 60% at 10% 100%,rgba(176,164,138,.22),rgba(176,164,138,0) 70%)}

#s-proof .p2-pin{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:transparent}
#s-proof .p2-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#s-proof .p2-dom{position:absolute;inset:0;z-index:1;pointer-events:none}
#s-proof .p2-di{position:absolute;object-fit:cover;opacity:0;box-shadow:0 30px 60px -30px rgba(40,32,16,.45);transition:none}
#s-proof .p2-di[data-i="0"]{opacity:1}
#s-proof.p2-gl .p2-dom{visibility:hidden}

#s-proof .p2-copy{position:absolute;z-index:2;left:clamp(24px,4.4vw,72px);top:calc(var(--hdr) + var(--tabs) + clamp(28px,5vh,64px));
  width:min(34vw,500px);pointer-events:none}
#s-proof .p2-odo{display:block;font-family:var(--serif);font-size:clamp(72px,9vw,150px);line-height:.82;color:var(--p2-gold);letter-spacing:-.03em}
#s-proof .p2-eye{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--p2-gold-d)}
#s-proof .p2-h{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.6vw,76px);line-height:.98;letter-spacing:-.02em;color:var(--p2-ink);max-width:11ch}
#s-proof .p2-h span{display:block}
#s-proof .p2-l2{color:var(--p2-ink);opacity:.16;transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);transform:translateY(8px)}
#s-proof .p2-l2.on{opacity:1;transform:none}

#s-proof .p2-steps{list-style:none;margin-top:clamp(28px,5vh,56px);display:grid;gap:2px;border-top:1px solid var(--p2-line)}
#s-proof .p2-step{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--p2-line);
  font-size:15px;color:var(--p2-mute);opacity:.5;transition:opacity .4s,color .4s}
#s-proof .p2-step b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--p2-gold-d)}
#s-proof .p2-step em{font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--p2-mute)}
#s-proof .p2-step.past{opacity:.75}
#s-proof .p2-step.on{opacity:1;color:var(--p2-ink)}
#s-proof .p2-step.on b{color:var(--p2-ink)}

#s-proof .p2-cue{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--p2-mute);transition:opacity .5s}
#s-proof .p2-cue i{width:1px;height:34px;background:linear-gradient(var(--p2-gold-d),transparent);animation:p2cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes p2cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* the grid of real outputs */
#s-proof .p2-after{position:relative;z-index:2;width:min(1320px,calc(100% - 48px));margin:0 auto;padding:clamp(24px,4vw,56px) 0 clamp(80px,10vw,140px)}
#s-proof .p2-grid{display:grid;gap:clamp(8px,1vw,14px);--b:0}
#s-proof .p2-row{display:flex;gap:clamp(8px,1vw,14px)}
#s-proof .p2-tile{position:relative;display:block;min-width:0;padding:0;border-radius:6px;overflow:hidden;background:#d8d1c1;cursor:zoom-in;
  transform:perspective(1100px) translate3d(0,calc(var(--b) * var(--u2,0) * 46px),calc(var(--b) * -40px)) rotateX(calc(var(--b) * -9deg)) rotateY(calc(var(--b) * var(--u,0) * 4deg));
  box-shadow:0 18px 40px -26px rgba(40,32,16,.55);will-change:transform}
#s-proof .p2-tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
#s-proof .p2-tile:hover img,#s-proof .p2-tile:focus-visible img{transform:scale(1.035)}
#s-proof .p2-tile:focus-visible{outline:2px solid var(--p2-gold-d);outline-offset:3px}
#s-proof .p2-tl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:10px;padding:28px 14px 11px;text-align:left;
  font-size:13px;line-height:1.25;color:#f4efe3;background:linear-gradient(transparent,rgba(8,12,8,.62))}
#s-proof .p2-tl b{font-family:var(--serif);font-weight:400;font-size:16px;color:#dfc474}
#s-proof .p2-tl span{flex:1;min-width:0}
#s-proof .p2-tl em{font-style:normal;font-size:11px;letter-spacing:.08em;opacity:.8}

#s-proof .p2-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(36px,5vw,64px)}
#s-proof .p2-cta .btn.coral{background:#0a1a0a;border-color:#0a1a0a;color:#e8e2d4}
#s-proof .p2-cta .btn.coral:hover{background:#c9a84c;border-color:#c9a84c;color:#0a1a0a}
#s-proof .p2-cta p{color:var(--p2-mute);font-size:15px}

/* lightbox: original beside the finished frame */
#s-proof .p2-lb{position:fixed;inset:0;z-index:200;background:rgba(232,226,212,.97);display:flex;align-items:center;justify-content:center;
  padding:calc(var(--hdr) + 16px) 24px 24px;opacity:0;transition:opacity .3s}
#s-proof .p2-lb.on{opacity:1}
#s-proof .p2-lb[hidden]{display:none}
#s-proof .p2-lb-in{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,36px);width:100%;max-width:1500px;height:100%;
  transform:scale(.97);transition:transform .45s cubic-bezier(.16,1,.3,1)}
#s-proof .p2-lb.on .p2-lb-in{transform:none}
#s-proof .p2-lb figure{display:flex;flex-direction:column;gap:10px;min-width:0}
#s-proof .p2-lb img{width:100%;height:100%;object-fit:contain;box-shadow:0 30px 70px -30px rgba(40,32,16,.55);border-radius:4px}
#s-proof .p2-lb-a{flex:0 0 auto;width:min(26vw,calc((100vh - 200px) * .55))}
#s-proof .p2-lb-a img{aspect-ratio:1}
#s-proof .p2-lb-b{flex:0 1 auto;width:min(calc((100vh - 200px) * var(--a,1)),62vw)}
#s-proof .p2-lb-b img{aspect-ratio:var(--a,1)}
#s-proof .p2-lb figcaption{font-size:14px;color:var(--p2-mute)}
#s-proof .p2-lb figcaption b{font-family:var(--serif);font-weight:400;color:var(--p2-gold-d);margin-right:6px}
#s-proof .p2-lb figcaption em{font-style:normal;font-size:12px;margin-left:6px}
#s-proof .p2-lb-x{position:absolute;top:-6px;right:0;padding:10px 16px;border:1.5px solid #0a1a0a;border-radius:999px;font-size:14px;font-weight:700;color:#0a1a0a;background:#e8e2d4}
#s-proof .p2-lb-x:focus-visible{outline:2px solid var(--p2-gold-d);outline-offset:3px}
html.p2-lock{overflow:hidden}

/* still state (reduced motion) */
#s-proof.p2-still .p2-cue{display:none}
#s-proof.p2-still .p2-l2{opacity:1;transform:none}

@media (max-width:759px){
  #s-proof .p2-copy{left:16px;right:16px;width:auto;top:calc(var(--hdr) + var(--tabs) + 18px)}
  #s-proof .p2-odo{font-size:64px;display:inline-block;vertical-align:bottom}
  #s-proof .p2-eye{display:inline-block;margin:0 0 6px 10px;vertical-align:bottom}
  #s-proof .p2-h{margin-top:10px;font-size:34px;max-width:none}
  #s-proof .p2-steps{margin-top:12px;border:0}
  #s-proof .p2-step{display:none;padding:4px 0;border:0;font-size:14px}
  #s-proof .p2-step.on{display:grid;grid-template-columns:32px 1fr auto}
  #s-proof .p2-cue{bottom:14px}
  #s-proof .p2-after{width:calc(100% - 32px)}
  #s-proof .p2-tl{padding:22px 10px 8px;font-size:11px;gap:6px}
  #s-proof .p2-tl b{font-size:13px}
  #s-proof .p2-tl em{display:none}
  #s-proof .p2-cta .btn{width:100%;justify-content:center}
  #s-proof .p2-lb{padding:calc(var(--hdr) + 12px) 16px 16px}
  #s-proof .p2-lb-in{flex-direction:column;justify-content:center;gap:14px}
  #s-proof .p2-lb-a{width:min(46vw,200px)}
  #s-proof .p2-lb-b{width:min(100%,calc((100vh - 420px) * var(--a,1)))}
  #s-proof .p2-lb-x{top:auto;bottom:-4px;right:auto;left:50%;transform:translateX(-50%)}
}

/* every tile the same small square; the true ratio shows in the lightbox */
#s-proof .p2-tile{aspect-ratio:1 !important;flex:1 1 0 !important;min-width:0}
#s-proof .p2-tile img{width:100%;height:100%;object-fit:cover}
#s-proof .p2-row:last-child .p2-tile:only-child{max-width:calc((100% - 5 * clamp(8px,1vw,14px)) / 6)}

#s-proof .p2-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
#s-proof .p2-row{display:contents}
#s-proof .p2-tl{padding:22px 9px 8px;gap:6px;font-size:10px;line-height:1.2}
#s-proof .p2-tl b{font-size:13px}
#s-proof .p2-tl span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s-proof .p2-tl em{font-size:9px}
@media (max-width:759px){#s-proof .p2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}