/* A letter from Jacob: one sheet of ivory paper in three states (resting, revealed, expanded). Behaviour is in letter.js,
   the words in letter-copy.js, the crease artwork in assets/letter-paper.svg (made by tests/tools/make-paper.mjs).
   The paper is an original recreation in CSS and SVG. Nothing here comes from the Framer component that inspired it. */
.letter{
 --lt-ink:#1d1a14;--lt-muted:#5b5648;--lt-rule:rgba(84,62,26,.45);
 --lt-serif:'Iowan Old Style','Palatino Linotype',Palatino,Charter,Georgia,serif;
 --lt-paper:linear-gradient(135deg,#f9f3e3 0%,#f0e7d0 52%,#e7dbc1 100%);
 --lt-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .25 0 0 0 0 .12 1.3 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
 --lt-ease:cubic-bezier(.22,.8,.24,1);
 --lt-shadow-rest:drop-shadow(13px 18px 10px rgba(58,46,28,.34)) drop-shadow(0 1px 1px rgba(52,38,12,.22));
 --lt-shadow-flat:drop-shadow(5px 14px 14px rgba(52,38,12,.2)) drop-shadow(0 2px 3px rgba(52,38,12,.16));
 --clip-0:polygon(31.87% 23.47%,36.2% 20.89%,40.82% 14.06%,50% 16.57%,58.68% 15.57%,64.74% 19.49%,67.47% 24.13%,70.32% 26.36%,73.46% 29.87%,73.09% 35.83%,78.27% 41.6%,70.78% 46.79%,73.42% 53.31%,70.65% 57.08%,68% 59.6%,64.46% 63.29%,58.05% 65.74%,50% 69.21%,41.34% 67.59%,35.99% 62.62%,31.09% 60.51%,31.37% 55.57%,25.46% 53.87%,29.14% 46.81%,24.96% 41.6%,28.52% 36.23%,26.75% 29.97%,30.93% 27.3%);
 --clip-1:polygon(20.88% 16.01%,21.61% 6.95%,39.03% 3.08%,55.87% 12.6%,57.74% 8.56%,78.88% 14.86%,85.16% 11.06%,76.77% 22.87%,90.17% 28.71%,81.33% 31.73%,94.11% 42.54%,86.43% 56.1%,88.73% 63.11%,78.93% 71.25%,80.68% 74.84%,76.81% 78.72%,58.52% 84.83%,45.74% 77.81%,38.42% 82.2%,26.25% 74.05%,13.77% 77.84%,24.31% 70.21%,16.98% 59.9%,10.88% 58.16%,17% 49.27%,16.08% 37.92%,18.21% 25.85%,19.29% 15.88%);
 --clip-2:polygon(7.81% 5.7%,19.94% 4.84%,36.64% 3.53%,49.93% 2.67%,63% 3.95%,79.3% 4.9%,91.04% 5.74%,94.12% 14.51%,93.64% 26.13%,94.39% 37.42%,94.96% 49.07%,92.59% 59.53%,94.46% 68.87%,93.32% 79.68%,92.05% 91.23%,80.09% 91.21%,66.59% 91.02%,50.49% 94.68%,34.51% 92.28%,19.11% 93.15%,8.29% 91.49%,5.2% 80.61%,5.79% 70.15%,5.38% 59.07%,4.11% 47.79%,5.3% 37.26%,5.74% 24.67%,7.97% 14.67%);
 --clip-3:polygon(0% 0%,16.67% 0%,33.33% 0%,50% 0%,66.67% 0%,83.33% 0%,100% 0%,100% 12.5%,100% 25%,100% 37.5%,100% 50%,100% 62.5%,100% 75%,100% 87.5%,100% 100%,83.33% 100%,66.67% 100%,50% 100%,33.33% 100%,16.67% 100%,0% 100%,0% 87.5%,0% 75%,0% 62.5%,0% 50%,0% 37.5%,0% 25%,0% 12.5%);
}
.letter-dialog{--lt-ink:#1d1a14;--lt-muted:#5b5648;--lt-rule:rgba(84,62,26,.45);--lt-serif:'Iowan Old Style','Palatino Linotype',Palatino,Charter,Georgia,serif;
 --lt-paper:linear-gradient(135deg,#f9f3e3 0%,#f0e7d0 52%,#e7dbc1 100%)}
.letter-dialog{--lt-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .25 0 0 0 0 .12 1.3 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Placement: beside the introduction. Three columns on wide screens, under the paragraph on narrower ones. */
.letter[hidden]{display:none}
.personal-statement>.letter{grid-area:l;width:100%;max-width:280px;container-type:inline-size}
@media(min-width:1180px){
 .personal-statement{grid-template-columns:minmax(240px,340px) minmax(0,1fr) minmax(220px,280px);grid-template-areas:"k k k" "c h h" "c t l"}
 .personal-statement>.letter{margin-top:4px}
}
@media(min-width:801px) and (max-width:1179px){.personal-statement{grid-template-areas:"k k" "c h" "c t" "l t"}.personal-statement>.letter{margin-top:18px;justify-self:center}}
@media(max-width:800px){.personal-statement{grid-template-areas:"k" "c" "h" "t" "l"}.personal-statement>.letter{max-width:300px;margin-top:6px;justify-self:center}}
/* The crumpled ball only takes the room it needs; the space opens up as the sheet unfolds and closes again as it crumples
   (user-started, so no unexpected shift). Only the ball itself takes clicks while crumpled. */
.letter .lt-frame{transition:filter .7s var(--lt-ease),margin .8s var(--lt-ease)}
.letter[data-state=resting] .lt-frame,.letter[data-state=crumpling] .lt-frame{margin:-13cqw 0 -35cqw;pointer-events:none}
.letter[data-state=resting] .lt-sheet,.letter[data-state=crumpling] .lt-sheet{pointer-events:auto}
.letter[data-state=resting] .letter-label,.letter[data-state=crumpling] .letter-label{transform:translateY(calc(73cqw + 14px))}

/* The whole paper is one button. */
.letter-paper{appearance:none;-webkit-appearance:none;display:block;position:relative;width:100%;margin:0;padding:0 0 46px;border:0;border-radius:8px;background:none;color:var(--lt-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.letter-paper:focus{outline:none}
.letter-paper:focus-visible{outline:3px solid var(--cobalt,#2C3480);outline-offset:6px}
.lt-frame{position:relative;display:block;width:100%;aspect-ratio:1/1.25;filter:var(--lt-shadow-rest);transition:filter .7s var(--lt-ease)}
.lt-sheet{position:absolute;inset:0;display:block;overflow:hidden;container-type:inline-size;background:var(--lt-paper);clip-path:var(--clip-0);transform:rotate(-8deg) scale(.97)}
.lt-grain{position:absolute;inset:0;display:block;background-image:var(--lt-grain);background-size:38cqw 38cqw;opacity:.5;pointer-events:none}
.lt-grain:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 3.5cqw rgba(84,62,26,.2)}
.lt-art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;overflow:visible}

/* What each state shows. */
.lt-facets{opacity:1;transition:opacity .55s .05s}
.lt-wrinkles{opacity:.55;transition:opacity .7s .1s}
.lt-folds{opacity:0;transition:opacity .7s .1s}
.letter[data-state=revealing] .lt-facets,.letter[data-state=revealed] .lt-facets,.letter[data-state=opening] .lt-facets,.letter[data-state=expanded] .lt-facets,.letter[data-state=closing] .lt-facets{opacity:0}
.letter[data-state=revealing] .lt-wrinkles,.letter[data-state=revealed] .lt-wrinkles,.letter[data-state=opening] .lt-wrinkles,.letter[data-state=expanded] .lt-wrinkles,.letter[data-state=closing] .lt-wrinkles{opacity:.85}
.letter[data-state=revealing] .lt-folds,.letter[data-state=revealed] .lt-folds,.letter[data-state=opening] .lt-folds,.letter[data-state=expanded] .lt-folds,.letter[data-state=closing] .lt-folds{opacity:1}
.letter:not([data-state=resting]):not([data-state=crumpling]) .lt-sheet{clip-path:var(--clip-3);transform:none}
.letter[data-state=revealing] .lt-sheet{animation:lt-unfold 1000ms cubic-bezier(.3,.7,.2,1) both}
.letter:not([data-state=resting]):not([data-state=crumpling]) .lt-frame{filter:var(--lt-shadow-flat)}
@keyframes lt-unfold{
 0%{clip-path:var(--clip-0);transform:rotate(-8deg) scale(.97);animation-timing-function:cubic-bezier(.4,0,.3,1)}
 34%{clip-path:var(--clip-1);transform:rotate(4deg) scale(.99)}
 70%{clip-path:var(--clip-2);transform:rotate(-1.5deg) scale(1.012)}
 100%{clip-path:var(--clip-3);transform:none}
}
/* Closing the letter squeezes the sheet back into the ball, the unfold in reverse. */
.letter[data-state=crumpling] .lt-sheet{animation:lt-crumple 900ms cubic-bezier(.5,0,.3,1) both}
.letter[data-state=crumpling] .lt-facets{transform-origin:50% 41.6%;animation:lt-crumple-facets 900ms cubic-bezier(.5,0,.3,1) both}
@keyframes lt-crumple-facets{0%{opacity:0;transform:scale(1.6)}45%{opacity:0}100%{opacity:1;transform:none}}
@keyframes lt-crumple{
 0%{clip-path:var(--clip-3);transform:none}
 30%{clip-path:var(--clip-2);transform:rotate(1.5deg) scale(1.01)}
 66%{clip-path:var(--clip-1);transform:rotate(-4deg) scale(.99)}
 100%{clip-path:var(--clip-0);transform:rotate(-8deg) scale(.97)}
}
.letter[data-state=resting] .lt-sheet{transition:transform .35s var(--lt-ease)}
@media(hover:hover){.letter[data-state=resting] .letter-paper:hover .lt-sheet{transform:rotate(-11deg) scale(.985) translateY(-1.5%)}
 .letter[data-state=revealed] .letter-paper:hover .lt-frame{filter:drop-shadow(5px 18px 18px rgba(52,38,12,.22)) drop-shadow(0 2px 3px rgba(52,38,12,.16))}}
.letter-paper:active .lt-sheet{translate:0 1px}

/* The words on the sheet: the opening lines, fading out before the bottom edge. Sized in cqw so the same text fits the
   small paper and the large one. */
.sheet-lines{position:absolute;inset:0;display:block;padding:24px 28px 0;padding:9cqw 10cqw 0;font:400 12.5px/1.62 var(--lt-serif);font-size:4.5cqw;color:var(--lt-ink);-webkit-mask-image:linear-gradient(#000 58%,transparent 84%);mask-image:linear-gradient(#000 58%,transparent 84%);opacity:0;pointer-events:none}
.sheet-lines span{display:block;margin:0 0 .75em}
.sheet-lines .lt-draft{font:700 11px/1.3 var(--font-sans,Arial,sans-serif);font-size:max(11px,3cqw);letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt,#2C3480);margin-bottom:1.5em}
.sheet-lines .lt-greeting{font-style:italic}
.letter .sheet-lines{transition:opacity .45s}
.letter[data-state=resting] .sheet-lines,.letter[data-state=crumpling] .sheet-lines{opacity:.3;color:#2C3480;mix-blend-mode:multiply}
.letter[data-state=revealing] .sheet-lines,.letter[data-state=revealed] .sheet-lines{opacity:1;transition-delay:.55s}
.letter-cue{position:absolute;left:0;right:0;bottom:6cqw;display:block;text-align:center;font:600 12px/1 var(--font-sans,Arial,sans-serif);font-size:max(12px,3.7cqw);letter-spacing:.05em;color:var(--cobalt,#2C3480);opacity:0;pointer-events:none;transition:opacity .35s}
.letter[data-state=revealed] .letter-cue{opacity:1;transition-delay:.1s}
.cue-arrow{display:inline-block;transition:transform .25s var(--lt-ease)}
@media(hover:hover){.letter-paper:hover .cue-arrow{transform:translateX(3px)}}

/* The label stays under the paper: close under the ball while crumpled, below the sheet once it is open. */
.letter-label{position:absolute;left:0;right:0;top:0;display:block;text-align:center;font:600 12px/1.2 var(--font-sans,Arial,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light,#55555C);transform:translateY(calc(86cqw + 14px));transition:opacity .4s .1s}
.letter:not([data-state=resting]):not([data-state=crumpling]) .letter-label{transform:translateY(calc(125cqw + 14px))}
/* While the paper unfolds the label steps aside, then returns under the finished sheet. */
.letter[data-state=revealing] .letter-label,.letter[data-state=crumpling] .letter-label{opacity:0;transition:opacity .12s,transform 0s .12s}
.letter-paper:hover .letter-label{color:var(--cobalt,#2C3480)}
.lt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The reading overlay: the same sheet, brought closer. */
.letter-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;background:transparent;color:var(--lt-ink);overflow:hidden;
 --gy:max(28px,env(safe-area-inset-top),env(safe-area-inset-bottom));
 padding:var(--gy) max(16px,env(safe-area-inset-right)) var(--gy) max(16px,env(safe-area-inset-left))}
.letter-dialog[open]{display:grid;place-items:center}
.letter-dialog::backdrop{background:rgba(14,14,17,.72);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .4s}
.letter-dialog[data-on]::backdrop{opacity:1}
.letter-dialog .lt-frame{transform-origin:0 0;width:min(620px,100%,calc((100vh - 2*var(--gy))/1.25));width:min(620px,100%,calc((100dvh - 2*var(--gy))/1.25));filter:drop-shadow(5px 14px 14px rgba(0,0,0,.3)) drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:filter .7s var(--lt-ease)}
.letter-dialog[data-on] .lt-frame{filter:drop-shadow(0 26px 34px rgba(0,0,0,.42)) drop-shadow(0 3px 6px rgba(0,0,0,.26))}
.letter-dialog .lt-sheet{clip-path:none;transform:none;border-radius:1px}
.letter-dialog .lt-wrinkles{opacity:.55}
.letter-dialog .lt-folds{opacity:.8}
.letter-dialog .sheet-lines{opacity:1;transition:opacity .25s}
.letter-dialog[data-text] .sheet-lines{opacity:0}
.lt-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;padding:28px 26px 34px;padding:9cqw 9.5cqw 10cqw;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(84,62,26,.4) transparent;opacity:0;user-select:text;-webkit-user-select:text;transition:opacity .15s}
.letter-dialog[data-text] .lt-scroll{opacity:1;transition:opacity .35s .22s}
.lt-scroll:focus{outline:none}
.lt-scroll:focus-visible{outline:2px solid var(--cobalt,#2C3480);outline-offset:-8px}
.lt-text{max-width:34em;margin:0 auto;font:400 16px/1.72 var(--lt-serif);font-size:clamp(16px,3.35cqw,19px);color:var(--lt-ink)}
.lt-text p{margin:0 0 1.1em}
.lt-text .lt-draft{display:inline-block;margin:0 0 1.6em;padding:.45em .8em;border:1px solid var(--cobalt,#2C3480);border-radius:2px;font:700 11px/1.2 var(--font-sans,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt,#2C3480)}
.lt-text h2{margin:0 0 1em;font:italic 400 clamp(22px,5cqw,30px)/1.2 var(--lt-serif);letter-spacing:0;color:var(--lt-ink)}
.lt-text .lt-closing{margin-top:1.6em;margin-bottom:.4em}
.lt-text .lt-signature{display:flex;align-items:flex-end;min-height:3.4em;margin:0 0 .5em;padding:0 0 .4em;border-bottom:1px dashed var(--lt-rule);font-size:.82em;font-style:italic;color:var(--lt-muted)}
.lt-text .lt-signature img{display:block;height:3.2em;width:auto;max-width:100%}
.lt-text .lt-signature.has-image{border-bottom-style:solid}
.lt-text .lt-name{margin:0;font-weight:600;letter-spacing:.01em}
.letter-close{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 18px 0 14px;border:1px solid rgba(17,17,20,.14);border-radius:100px;background:#f5f4f0;color:#111114;font:600 14px/1 var(--font-sans,Arial,sans-serif);letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;transition:opacity .3s .25s,background .2s;touch-action:manipulation}
.letter-dialog[data-on] .letter-close{opacity:1}
.letter-close:hover{background:#fff}
.letter-close:focus-visible{outline:3px solid #9AA6FF;outline-offset:3px}
@media(max-height:520px) and (orientation:landscape){
 .letter-dialog{--gy:14px}
 .letter-dialog .lt-frame{aspect-ratio:auto;width:min(560px,calc(100% - 232px));height:calc(100vh - 28px);height:calc(100dvh - 28px)}
}
@media(prefers-reduced-motion:reduce){
 .letter *,.letter-dialog *{animation:none!important;transition:none!important}
 .letter-dialog::backdrop{transition:none!important}
}