/* FinFormed Letter: correspondence.
   The letter ceremonies and the reader's own details. Colours come only from the tokens in main.css,
   so light and dark both work. Motion values live in assets/js/correspondence.js. */

:root{--ffc-ease:cubic-bezier(.16,1,.3,1);--ffc-u:rgba(28,68,148,.3)}
@media (prefers-color-scheme:dark){:root{--ffc-u:rgba(157,187,255,.34)}}

/* ---------- holds before the first paint, each with a failsafe if the script never runs ---------- */
html[data-arrive] .aero,
html[data-unfold] .post>.sheet,
html[data-unfold] .rail{opacity:0;animation:ffc-show 0s linear 3s forwards}
@keyframes ffc-show{to{opacity:1}}
@keyframes ffc-unclip{to{clip-path:none}}

/* ---------- the hand: the reader's name, the greeting, the signature ---------- */
.ffc-to{display:inline-block;font-family:var(--gh-font-heading);font-style:italic;font-weight:500;font-size:20px;line-height:1.15;color:var(--ink)}
@media (min-width:900px){.ffc-to{font-size:22px}}
.ffc-nib{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:currentColor;pointer-events:none;z-index:2}

/* ---------- welcome back ---------- */
.ffc-greet{color:var(--onfield);margin:4px 0 18px}
@media (min-width:900px){.ffc-greet{margin:0 0 26px}}
.ffc-g1{margin:0;font-family:var(--gh-font-heading);font-style:italic;font-weight:500;font-size:26px;line-height:1.2;color:var(--onfield)}
@media (min-width:900px){.ffc-g1{font-size:32px}}
.ffc-g1 span{display:inline-block}
.ffc-g2{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--onfield-2);max-width:62ch}
.ffc-greet.is-pending .ffc-g1 span{clip-path:inset(-.3em 100% -.35em -.25em);animation:ffc-unclip 0s linear 3s forwards}
.ffc-greet.is-pending .ffc-g2{opacity:0;animation:ffc-show 0s linear 3s forwards}

/* ---------- new and opened letters ---------- */
.rows>li{position:relative}
.ffc-new{display:inline-block;margin-left:.45em;padding:0 6px;border:1.5px solid var(--red);border-radius:999px;color:var(--red);font-family:var(--gh-font-body);font-size:11px;font-weight:700;font-style:normal;letter-spacing:.08em;line-height:15px;text-transform:uppercase;vertical-align:.25em;white-space:nowrap;transform:rotate(-5deg);text-decoration:none}
.rows .ffc-new{position:absolute;top:19px;right:0;margin:0;vertical-align:0;pointer-events:none}
.ffc-new.strike{animation:ffc-stamp-new 340ms var(--ffc-ease) both}
@keyframes ffc-stamp-new{from{opacity:.35;transform:rotate(-5deg) scale(1.3)}to{opacity:1;transform:rotate(-5deg) scale(1)}}
.ffc-opened{white-space:nowrap}

/* ---------- the ink underline on letter titles (mouse and trackpad only) ---------- */
@media (hover:hover) and (pointer:fine){
 .rows .t,.reg .t{text-decoration:none}
 .ink-u{background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--ffc-u),var(--ffc-u));background-repeat:no-repeat;background-size:0% 1px,100% 1px;background-position:0 100%,0 100%;padding-bottom:2px;transition:background-size 240ms var(--ffc-ease)}
 .rows a:hover .ink-u,.reg li a:hover .ink-u{background-size:100% 1px,100% 1px}
 .rows .t,.reg .t{transition:color 150ms ease}
 .rows a:hover .t,.reg li a:hover .t{text-decoration:none}
}

/* the row lifts as the letter is taken from it */
.rows>li.ffc-lift-row>a,.reg li.ffc-lift-row>a{transform:translateY(-2px);transition:transform 150ms var(--ffc-ease)}

/* ---------- the arrival on the home page ---------- */
.hero{position:relative}
.ffc-ap{position:absolute;pointer-events:none}
.ffc-back{border-radius:6px;background:var(--bg);box-shadow:inset 0 6px 18px rgba(18,35,58,.24)}
.ffc-elev{transform-origin:0 0;border-radius:4px;box-shadow:0 30px 60px rgba(18,35,58,.28),0 8px 18px rgba(18,35,58,.14)}
.ffc-pocket,.ffc-envframe{border:6px solid transparent;border-radius:6px;background:linear-gradient(var(--sheet),var(--sheet)) padding-box,repeating-linear-gradient(-45deg,var(--red) 0 8px,var(--sheet) 8px 12px,var(--blue) 12px 20px,var(--sheet) 20px 24px) border-box;box-shadow:var(--shadow)}
.ffc-pocket svg{position:absolute;left:-6px;top:-6px;overflow:visible}
.ffc-aflap{transform-origin:50% 0;transform-style:preserve-3d}
.ffc-aflap svg{position:absolute;left:0;top:0;overflow:visible;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ffc-aflap .b{transform:rotateX(180deg)}

/* ---------- the letter unfolding ---------- */
.ffc-unfold{position:absolute;z-index:4;pointer-events:none;perspective:1400px}
.ffc-fold{position:absolute;inset:0;transform-style:preserve-3d}
.ffc-panel{position:absolute;left:0;width:100%;transform-style:preserve-3d}
.ffc-face,.ffc-back-face{position:absolute;inset:0;overflow:hidden;background:var(--sheet);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ffc-back-face{transform:rotateX(180deg);background:linear-gradient(180deg,rgba(183,198,217,.3),rgba(183,198,217,.1)),var(--sheet)}
.ffc-face>.sheet{position:absolute;left:0}
.ffc-shade{position:absolute;inset:0;background:#12233A;opacity:0}
.ffc-liftbox{position:absolute;left:0;width:100%;transform:translateZ(-1px);background:var(--sheet);box-shadow:0 1px 2px rgba(18,35,58,.08),0 16px 34px rgba(18,35,58,.22)}
.ffc-crease{position:absolute;left:0;width:100%;height:12px;transform:translateZ(.5px);margin-top:-6px;background:linear-gradient(180deg,rgba(183,198,217,0),rgba(183,198,217,.55) 50%,rgba(183,198,217,0));opacity:0}
.ffc-outer{position:absolute;inset:0;padding:22px 24px}
@media (min-width:900px){.ffc-outer{padding:28px 48px}}
.ffc-outer .k{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.ffc-outer .ffc-to{margin-top:2px;font-size:24px}
.ffc-outer .ot{display:block;margin-top:8px;max-width:30ch;font-size:13px;line-height:1.4;color:var(--muted)}
.ffc-outer .opm{position:absolute;right:20px;top:14px;width:68px;height:68px;color:var(--red);transform:rotate(-8deg)}
.ffc-outer .opm svg{width:100%;height:100%;display:block}
.ffc-outer .opm text{font-family:var(--gh-font-body)}

/* ---------- the close of the letter ---------- */
.ffc-close{position:relative;min-height:116px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
@media (min-width:900px){.ffc-close{min-height:124px}}
.ffc-close~.sign{border-top:0;margin-top:14px;padding-top:0}
.ffc-vale{margin:0;font-family:var(--gh-font-heading);font-style:italic;font-size:17px;color:var(--ink)}
.ffc-hands{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:4px;padding-right:100px;min-height:56px}
.ffc-hand{position:relative;display:inline-block;margin:0;font-family:var(--gh-font-heading);font-style:italic;font-weight:500;font-size:34px;line-height:1.3;color:var(--ink)}
@media (min-width:900px){.ffc-hand{font-size:40px}.ffc-hands{padding-right:120px}}
.ffc-close.is-pending .ffc-hand{clip-path:inset(-.3em 100% -.35em -.25em)}
.ffc-stamp{color:var(--red)}
.ffc-stamp svg{display:block;width:100%;height:100%}
.ffc-stamp text{font-family:var(--gh-font-body)}
.ffc-read{position:absolute;right:0;top:14px;width:92px;height:92px;transform:rotate(-8deg)}
@media (min-width:900px){.ffc-read{width:100px;height:100px;top:14px}}
.ffc-read.strike,.ffc-seal.strike{animation:ffc-strike 340ms var(--ffc-ease) both}
@keyframes ffc-strike{from{opacity:.35;transform:rotate(-8deg) scale(1.18)}to{opacity:1;transform:rotate(-8deg) scale(1)}}

/* next in the post */
.ffc-next{display:block;margin-top:24px;padding:16px 20px;border:6px solid transparent;border-radius:6px;text-decoration:none;background:linear-gradient(var(--sheet),var(--sheet)) padding-box,repeating-linear-gradient(-45deg,var(--red) 0 8px,var(--sheet) 8px 12px,var(--blue) 12px 20px,var(--sheet) 20px 24px) border-box;box-shadow:var(--shadow)}
.ffc-next .k{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.ffc-next .t{display:block;margin-top:4px;font-family:var(--gh-font-heading);font-size:19px;line-height:1.3;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.ffc-next:hover .t{color:var(--blue)}}
.ffc-next:active{opacity:.72}
.ffc-next.is-pending{opacity:0;transform:translateY(14px)}

/* ---------- the subscribe envelope ---------- */
.envelope .in{position:relative}
.subform{position:relative}
.ffc-flap{position:absolute;left:0;right:0;top:0;height:var(--ffc-flap-h,120px);transform-origin:50% 0;pointer-events:none;z-index:2;display:none}
.ffc-flap svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 2px rgba(18,35,58,.12))}
.ffc-seal{position:absolute;left:50%;top:var(--ffc-seal-top,40px);width:92px;height:92px;margin-left:-46px;z-index:3;display:none;transform:rotate(-8deg)}
.envelope.is-sealed .ffc-flap,.envelope.is-sealed .ffc-seal{display:block}
.envelope.is-sealed .in>h2,.envelope.is-sealed .in>h2+p,.envelope.is-sealed .subform>label,.envelope.is-sealed .subform .row{opacity:0}
.envelope.is-sealed .subform .msg.success{position:absolute;left:0;right:0;bottom:0;margin:0;font-family:var(--gh-font-heading);font-size:17px;line-height:1.45}
.envelope.is-member .ffc-seal{display:block;left:auto;right:14px;top:14px;margin:0;width:92px;height:92px}
.envelope.is-member .in>h2,.envelope.is-member .in>h2+p{padding-right:104px}
@media (min-width:900px){.envelope.is-member .ffc-seal{right:28px;top:20px}}

/* ---------- reduced motion and print ---------- */
@media (prefers-reduced-motion:reduce){
 .ink-u{transition:none}
 .rows>li.ffc-lift-row>a,.reg li.ffc-lift-row>a{transform:none}
 .ffc-new.strike,.ffc-read.strike,.ffc-seal.strike{animation:none}
}
@media print{
 .ffc-ap,.ffc-unfold,.ffc-nib,.ffc-next,.ffc-greet{display:none!important}
 .ffc-close.is-pending .ffc-hand{clip-path:none}
}