/* Original CSS of String Tie Footer (EASE = cubic-bezier(.22,1,.36,1); GRAIN = inline SVG fractalNoise data URI, see --grain-img) */
.stt{--grain-img:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:relative;isolation:isolate;overflow:hidden;overflow:clip;container-type:inline-size;width:100%;box-sizing:border-box;background:var(--stt-ink);color:var(--stt-ink);font-family:var(--stt-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:where(.stt) *,:where(.stt) *::before,:where(.stt) *::after{box-sizing:border-box}
:where(.stt) button{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
:where(.stt) a{color:inherit;text-decoration:none}
:where(.stt) h2,:where(.stt) p{margin:0}
.stt :focus-visible{outline:2px solid var(--stt-accent);outline-offset:4px;border-radius:4px}
.stt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stt-frame{--r:clamp(44px,7cqw,92px);--fold:0px;--R:clamp(36px,10cqw,150px);position:relative;display:flex;flex-direction:column;min-height:var(--stt-h)}
.stt.is-open .stt-frame{--fold:calc(var(--r) * 2.46)}
.stt-flapwrap{position:relative;z-index:3;pointer-events:none;filter:drop-shadow(0 calc(var(--r) * .12) calc(var(--r) * .2) rgba(0,0,0,.28))}
.stt-flap{position:relative;pointer-events:auto;background:var(--stt-paper);color:var(--stt-ink);clip-path:inset(0 0 var(--fold) 0 round 0 0 var(--R) var(--R));transition:clip-path .85s cubic-bezier(.22,1,.36,1);padding:clamp(26px,4.4cqw,64px) clamp(16px,6cqw,110px) 0}
.stt-flap::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--grain-img);background-size:220px;opacity:calc(var(--stt-grain) * .9);mix-blend-mode:soft-light}
.stt-crease{position:absolute;left:0;right:0;bottom:var(--fold);height:calc(var(--r) * .5);pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.09),transparent);opacity:0;transition:opacity .5s,bottom .85s cubic-bezier(.22,1,.36,1)}
.stt.is-open .stt-crease{opacity:1}
.stt-meta{position:relative;display:flex;justify-content:space-between;gap:12px;font-size:clamp(11px,1.45cqw,19px);letter-spacing:.01em}
.stt-meta span{opacity:0;transform:translateY(-6px);transition:opacity .8s,transform .8s cubic-bezier(.22,1,.36,1)}
.stt-meta span:nth-child(2){transition-delay:.08s}.stt-meta span:nth-child(3){transition-delay:.16s}
.stt.is-in .stt-meta span{opacity:1;transform:none}
.stt-head{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:clamp(36px,7.5cqw,120px)}
.stt-title{font-family:var(--stt-display);font-weight:400;font-size:clamp(58px,13.4cqw,200px);line-height:.9;letter-spacing:-.045em;white-space:nowrap;text-align:center;clip-path:inset(-.25em -.4em -.02em -.4em)}
.stt-title em{font-style:italic;letter-spacing:-.06em;margin-left:.06em}
.stt-ch{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.22,1,.36,1);transition-delay:calc(.15s + var(--i) * .045s)}
.stt.is-in .stt-ch{transform:none}
.stt.is-in .stt-title:hover .stt-ch{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.stt.is-in .stt-title .stt-ch:hover{transform:translateY(-.045em)}
.stt-tapes{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:clamp(10px,1.6cqw,22px);font-family:var(--stt-display);font-size:clamp(20px,4cqw,56px);line-height:1;letter-spacing:-.03em}
.stt-tape{position:relative;display:inline-block;padding:.12em .42em .16em;white-space:nowrap;clip-path:inset(-20% 100% -20% 0);transition:clip-path .75s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.stt-tape::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--tb);clip-path:polygon(0 4%,1.2% 0,98.6% 3%,100% 0,99.2% 30%,100% 58%,98.8% 100%,1.6% 97%,0 100%,.9% 64%,0 34%);box-shadow:0 0 0 transparent;transition:filter .4s}
.stt-tape span{position:relative;color:var(--tc)}
.stt-tape-a{--tb:var(--stt-accent);--tc:#fff;transform:rotate(-1.6deg) translateX(-.2em);transition-delay:.75s,0s}
.stt-tape-b{--tb:var(--stt-ink);--tc:var(--stt-paper);margin-top:.06em;transform:rotate(.5deg) translateX(.12em);transition-delay:.95s,0s}
.stt.is-in .stt-tape{clip-path:inset(-20% -2% -20% -2%)}
.stt-tape:hover{transition-delay:0s,0s}
.stt-tape-a:hover{transform:rotate(-3deg) translate(-.24em,-.06em)}
.stt-tape-b:hover{transform:rotate(1.6deg) translate(.16em,-.05em)}
.stt-tape:hover::before{filter:drop-shadow(0 .12em .1em rgba(0,0,0,.25))}
.stt-dock{position:relative;height:calc(var(--r) * 2.62);display:flex;justify-content:center;align-items:flex-end;padding-bottom:calc(var(--r) * .22)}
.stt-btn{position:relative;display:block;width:calc(var(--r) * 2);height:calc(var(--r) * 2);border-radius:50%;filter:drop-shadow(0 calc(var(--r) * .07) calc(var(--r) * .09) rgba(0,0,0,.32)) drop-shadow(0 1px 1px rgba(0,0,0,.28));transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}
.stt-btn:hover{transform:translateY(-3px) scale(1.025);filter:drop-shadow(0 calc(var(--r) * .14) calc(var(--r) * .16) rgba(0,0,0,.3)) drop-shadow(0 1px 1px rgba(0,0,0,.24))}
.stt-btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}
.stt-btn:focus-visible{outline-offset:6px;border-radius:50%}
.stt-spin{display:block;width:100%;height:100%;will-change:transform}
.stt-btn svg{display:block;width:100%;height:100%;max-width:none;overflow:visible}
.stt-gloss{position:absolute;inset:0;pointer-events:none}
.stt-btn-top{transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s cubic-bezier(.22,1,.36,1),opacity .4s}
.stt.is-open .stt-btn-top{opacity:0;pointer-events:none}
.stt-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;color:var(--stt-body-ink)}
.stt-panel{position:absolute;inset:0;z-index:2;background:var(--stt-ink)}
.stt-panel::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--grain-img);background-size:220px;opacity:calc(var(--stt-grain) * .7);mix-blend-mode:soft-light}
.stt-dock-b{position:relative;z-index:4;height:calc(var(--r) * 2.62);display:flex;justify-content:center;align-items:flex-start;padding-top:calc(var(--r) * .22)}
.stt-content{position:relative;z-index:3;flex:1;display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;padding:clamp(28px,5cqw,80px) clamp(16px,8cqw,140px) clamp(36px,6.5cqw,110px)}
.stt-contacts{display:flex;flex-direction:column;gap:clamp(14px,1.6cqw,22px);font-size:clamp(14px,1.55cqw,20px);opacity:0;transform:translateY(14px);transition:opacity .9s .5s,transform .9s .5s cubic-bezier(.22,1,.36,1)}
.stt.is-in .stt-contacts{opacity:1;transform:none}
.stt-k{display:block;font-size:.88em;opacity:.62;margin-bottom:.28em;font-weight:300;letter-spacing:.01em}
.stt-v{position:relative;display:inline-flex;align-items:center;gap:.5em;font-weight:500;letter-spacing:.005em;text-align:left;transition:color .25s}
.stt-v:hover{color:var(--stt-paper)}
.stt-copied{font-size:.68em;font-weight:500;padding:.25em .65em;border-radius:99px;background:var(--stt-accent);color:#fff;opacity:0;transform:translateX(-6px) scale(.9);transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.stt-copied.is-on{opacity:1;transform:none}
.stt-links{display:flex;flex-direction:column;gap:.3em}
.stt-link{position:relative;display:inline-flex;align-items:center;gap:.35em;width:fit-content;padding-bottom:.06em;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s cubic-bezier(.22,1,.36,1),color .25s}
.stt-link:hover{background-size:0 1px;background-position:100% 100%;color:var(--stt-paper)}
.stt-link svg{width:.7em;height:.7em;flex:none;max-width:none;opacity:0;transform:translate(-4px,4px);transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.stt-link:hover svg{opacity:1;transform:none}
.stt-regards{display:flex;flex-direction:column;align-items:center;padding-right:clamp(0px,2cqw,40px);opacity:0;transform:translateY(14px);transition:opacity .9s .65s,transform .9s .65s cubic-bezier(.22,1,.36,1)}
.stt.is-in .stt-regards{opacity:1;transform:none}
.stt-regards-t{font-family:var(--stt-display);font-size:clamp(22px,2.9cqw,40px);letter-spacing:-.035em;line-height:1;margin-right:-.4em}
.stt-sign{display:block;width:clamp(190px,24cqw,340px);height:auto;max-width:none;margin-top:-.2em;color:var(--stt-body-ink);overflow:visible}
.stt-sign path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l,1200) var(--l,1200);stroke-dashoffset:var(--l,1200)}
.stt.is-signed .stt-sign path{transition:stroke-dashoffset var(--d,1s) cubic-bezier(.55,.1,.35,1) var(--w,0s);stroke-dashoffset:0}
.stt-sign-text{display:block;font-family:var(--stt-script);font-size:clamp(40px,5.4cqw,76px);line-height:1.1;padding:0 .2em;clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.6s cubic-bezier(.55,.1,.35,1)}
.stt.is-signed .stt-sign-text{clip-path:inset(-20% -10% -20% 0)}
.stt-letter{position:absolute;z-index:1;left:50%;bottom:calc(100% - var(--tuck));--tuck:clamp(30px,4cqw,60px);width:min(620px,calc(100% - 32px));height:calc(var(--r) * 2.46 - var(--r) * .14 + var(--tuck));transform:translate(-50%,calc(var(--r) * 1.2));transition:transform .7s cubic-bezier(.22,1,.36,1);background:#f7f3ea;color:var(--stt-ink);border-radius:4px 4px 0 0;box-shadow:0 -1px 0 rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.25);padding:clamp(12px,1.9cqw,26px) clamp(16px,2.6cqw,36px) var(--tuck);display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1cqw,12px);overflow:hidden}
.stt-letter::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 calc(1.7em - 1px),rgba(30,60,140,.07) calc(1.7em - 1px) 1.7em);opacity:.9}
.stt-letter::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:var(--grain-img);background-size:220px;opacity:calc(var(--stt-grain) * .8);mix-blend-mode:soft-light}
.stt.is-open .stt-letter{transform:translate(-50%,0);transition:transform .9s .3s cubic-bezier(.22,1,.36,1)}
.stt-letter>*{position:relative;z-index:1}
.stt-letter>.stt-stamp{position:absolute;right:clamp(12px,2cqw,28px);top:clamp(10px,1.6cqw,22px);width:clamp(84px,10cqw,130px);height:auto;max-width:none;overflow:visible;color:var(--stt-accent);opacity:.5;transform:rotate(-9deg);fill:none;stroke:currentColor;stroke-width:1.4}
.stt-stamp text{fill:currentColor;stroke:none;font-family:var(--stt-sans);font-size:6.5px;font-weight:600;letter-spacing:.04em;text-anchor:middle}
.stt-note-k{font-size:clamp(10px,1.05cqw,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--stt-accent);font-weight:600}
.stt-note-t{font-family:var(--stt-display);font-size:clamp(16px,2.1cqw,28px);line-height:1.12;letter-spacing:-.02em;max-width:26em;padding-right:clamp(0px,7cqw,90px)}
.stt-note-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:clamp(12px,1.2cqw,15px)}
.stt-cta{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.05em;border-radius:99px;background:var(--stt-ink);color:var(--stt-paper);font-weight:500;transition:background .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.stt-cta:hover{background:var(--stt-accent);transform:translateY(-1px)}
.stt-cta svg{width:.8em;height:.8em;max-width:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.stt-cta:hover svg{transform:translate(2px,-2px)}
.stt-ghost{font-weight:500;opacity:.75;text-decoration:underline;text-underline-offset:3px;transition:opacity .2s}
.stt-ghost:hover{opacity:1}
.stt-cord{position:absolute;left:0;top:0;z-index:5;overflow:visible;max-width:none;pointer-events:none}
.stt-cord path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.stt-cord .stt-hit{stroke:transparent;stroke-width:22px;pointer-events:none;cursor:grab;touch-action:none}
.stt-cord.is-loose .stt-hit{pointer-events:stroke}
.stt-cord.is-drag .stt-hit{cursor:grabbing}
@container (max-width: 640px){
.stt-content{grid-template-columns:1fr;align-items:start;gap:40px}
.stt-regards{align-items:flex-start;padding-right:0}
.stt-regards-t{margin-right:0}
.stt-note-t{font-size:15px}
.stt-meta span:nth-child(2){display:none}
}
@media (prefers-reduced-motion: reduce){
.stt *,.stt *::before{transition-duration:.01s !important;transition-delay:0s !important}
.stt-ch,.stt-meta span{transform:none}
}

/* Jo Lam defaults. Override these variables on the server-rendered root. */
.stt{
  --stt-paper:#f6f2ea;--stt-ink:#111111;--stt-body-ink:#efe9dd;
  --stt-accent:#9c8f73;--stt-cord:#6b5d43;
  --stt-display:'Noto Serif TC','Songti TC',serif;
  --stt-sans:'Noto Sans TC','PingFang HK',sans-serif;
  --stt-script:'Snell Roundhand','Segoe Script',cursive;
  --stt-grain:.5;--stt-h:100svh;
  line-height:1.5;
}
/* Readable Chinese spacing; 8 Chinese characters fit on a 390px screen. */
.stt-title{font-size:clamp(32px,9.2cqw,138px);line-height:1.15;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.stt-title em{letter-spacing:0;color:var(--stt-accent);display:inline-block;margin-left:.08em}
.stt-tapes{letter-spacing:.02em;line-height:1.2}
.stt-tape-a{--tc:var(--stt-ink)}
.stt-regards-t,.stt-note-t{letter-spacing:0}
.stt-note-t{line-height:1.55;padding-right:0}
.stt-note-k{color:var(--stt-ink);opacity:.65;letter-spacing:.08em}
.stt-content>*{min-width:0}
.stt-contacts{overflow-wrap:anywhere}
.stt-sign{max-width:100%}
.stt-note-row .stt-cta{color:var(--stt-paper)}
.stt-note-row a,.stt-note-row button{min-height:44px;display:inline-flex;align-items:center}
.stt-note-row .stt-ghost{padding:4px 0}
.stt-letter{background:var(--stt-paper);height:auto;min-height:calc(var(--r) * 2.32 + var(--tuck));justify-content:flex-start}
.stt-letter::before{background:repeating-linear-gradient(transparent 0 calc(1.7em - 1px),rgba(107,93,67,.07) calc(1.7em - 1px) 1.7em)}
.stt-enhanced .stt-dock{height:max(calc(var(--r) * 2.62),calc(var(--stt-reveal,0px) + var(--r) * .2))}
.stt-enhanced.is-open .stt-frame{--fold:var(--stt-reveal,calc(var(--r) * 2.46))}
.stt-enhanced:not(.is-open) .stt-letter{visibility:hidden}
.stt-enhanced.is-open .stt-letter{visibility:visible}
/* In the closed state inert also removes the note's links from keyboard order. */
.stt-btn{touch-action:manipulation}
.stt-cord .stt-hit{touch-action:none}
/* Only the small SVG hit stroke captures touches; all other surfaces scroll. */
.stt-cord{user-select:none;-webkit-user-select:none}

/* Progressive enhancement: these rules also cover a failed/blocked JS load. */
.stt:not(.stt-enhanced) .stt-meta span,
.stt:not(.stt-enhanced) .stt-contacts,
.stt:not(.stt-enhanced) .stt-regards{opacity:1;transform:none}
.stt:not(.stt-enhanced) .stt-ch{transform:none}
.stt:not(.stt-enhanced) .stt-tape,
.stt:not(.stt-enhanced) .stt-sign-text{clip-path:none}
.stt:not(.stt-enhanced) .stt-sign path{stroke-dashoffset:0}
.stt:not(.stt-enhanced) .stt-dock{height:clamp(36px,5cqw,72px)}
.stt:not(.stt-enhanced) .stt-dock-b,
.stt:not(.stt-enhanced) .stt-panel{display:none}
.stt:not(.stt-enhanced) .stt-letter{
  position:relative;left:auto;bottom:auto;transform:none;visibility:visible;
  width:calc(100% - 32px);margin:24px auto 0;min-height:0;
  padding:24px;border-radius:4px;z-index:3;
}
@container (max-width:640px){
  .stt-meta{gap:8px;font-size:10px;flex-wrap:wrap}
  .stt-meta span:nth-child(2){display:inline}
  .stt-note-t{font-size:16px}
  .stt-note-row{gap:4px 12px}
}
@media (prefers-reduced-motion:reduce){
  .stt *,.stt *::before,.stt *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .stt .stt-ch,.stt .stt-ch:hover,.stt .stt-meta span,
  .stt .stt-contacts,.stt .stt-regards{opacity:1;transform:none!important}
  .stt .stt-tape,.stt .stt-sign-text{clip-path:none}
  .stt .stt-tape-a:hover{transform:rotate(-1.6deg) translateX(-.2em)}
  .stt .stt-tape-b:hover{transform:rotate(.5deg) translateX(.12em)}
  .stt .stt-btn:hover,.stt .stt-btn:active,.stt .stt-cta:hover{transform:none}
  .stt .stt-sign path{stroke-dashoffset:0}
  .stt .stt-cord .stt-hit{pointer-events:none;touch-action:auto}
}