@layer theme,base;@layer components{.studio-letter{isolation:isolate;width:100%;max-width:440px;color:var(--ink);text-decoration:none;display:block;position:relative;container-type:inline-size}.studio-letter-back{z-index:0;background:var(--paper-sand);box-shadow:var(--paper-shadow-low), inset 0 0 0 1px #0f172a0f;transform:translate(var(--bx,0), var(--by,0)) rotate(var(--br,0deg));transform-origin:50% 100%;border-radius:14px;position:absolute;inset:0;overflow:hidden}.studio-letter-back:before{content:"";clip-path:polygon(0 0,100% 0,50% 100%);background:#0f172a09;height:52%;position:absolute;inset:0 0 auto}.studio-letter-back[data-i="0"]{--bx:-2%;--by:3%;--br:-3.2deg}.studio-letter-back[data-i="1"]{--bx:2.5%;--by:5.5%;--br:2.6deg;background:var(--paper-card)}.studio-letter-back[data-i="2"]{--bx:-4%;--by:8%;--br:-5.5deg}@media (prefers-reduced-motion:no-preference){.studio-letter-back{transition:transform .52s var(--ease-spring)}.studio-letter-envelope,.studio-letter-sheet{transition:transform var(--dur-spring) var(--ease-spring), box-shadow var(--dur-hover) ease}}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.studio-letter[data-link]:is(:hover,:focus-visible) :is(.studio-letter-envelope,.studio-letter-sheet){box-shadow:var(--paper-shadow-lift), inset 0 0 0 1px #0f172a12;transform:translateY(-4px)}.studio-letter[data-link]:is(:hover,:focus-visible) .studio-letter-back[data-i="0"]{--br:-5.6deg}.studio-letter[data-link]:is(:hover,:focus-visible) .studio-letter-back[data-i="1"]{--br:4.4deg}.studio-letter[data-link]:is(:hover,:focus-visible) .studio-letter-back[data-i="2"]{--br:-8deg}}.studio-letter[data-link]:focus-visible{border-radius:14px}.studio-letter-envelope{z-index:1;background:var(--paper-card);min-height:60cqw;box-shadow:var(--paper-shadow), inset 0 0 0 1px #0f172a12;--ink-2:var(--ink-2-warm);border-radius:14px;padding:45cqw 6.5cqw 6cqw;display:block;position:relative;overflow:hidden}.studio-letter-flap{width:100%;height:34cqw;position:absolute;inset:0 0 auto}.studio-letter-flap-paper{fill:#f2e8d999}.studio-letter-flap-edge{fill:none;stroke:#0f172a29;stroke-width:1px;vector-effect:non-scaling-stroke}.studio-letter-seal{width:15cqw;height:15cqw;position:absolute;top:34cqw;left:50%;overflow:visible;transform:translate(-50%,-50%)rotate(-8deg)}.studio-letter-seal-shadow{fill:#3a240e3d}.studio-letter-seal-wax{fill:var(--accent-fill)}.studio-letter-seal-ring{fill:none;stroke:#3c140847;stroke-width:1.2px}.studio-letter-seal-mark{font-family:var(--font-sans);letter-spacing:.02em;fill:#3c14086b;font-size:12.5px;font-weight:800}.studio-letter-stamp{aspect-ratio:4/5;background:var(--paper);--dot:1.6cqw;width:14cqw;-webkit-mask-image:linear-gradient(#000 0 0),radial-gradient(circle,#0000 34%,#000 36%);-webkit-mask-size:calc(100% - var(--dot)) calc(100% - var(--dot)), var(--dot) var(--dot);-webkit-mask-position:center, calc(var(--dot) / -2) calc(var(--dot) / -2);mask-image:linear-gradient(#000 0 0),radial-gradient(circle,#0000 34%,#000 36%);-webkit-mask-repeat:no-repeat,repeat;-webkit-mask-size:calc(100% - var(--dot)) calc(100% - var(--dot)), var(--dot) var(--dot);mask-size:calc(100% - var(--dot)) calc(100% - var(--dot)), var(--dot) var(--dot);-webkit-mask-position:center, calc(var(--dot) / -2) calc(var(--dot) / -2);mask-position:center, calc(var(--dot) / -2) calc(var(--dot) / -2);padding:1.1cqw;position:absolute;top:6cqw;right:6cqw;box-shadow:0 1px 2px #3a240e24;-webkit-mask-repeat:no-repeat,repeat;mask-repeat:no-repeat,repeat}.studio-letter-stamp-face{background:var(--accent-wash);flex-direction:column;justify-content:center;align-items:center;gap:.8cqw;height:100%;display:flex;box-shadow:inset 0 0 0 1px #b4502e59}.studio-letter-stamp-no{font-family:var(--font-mono);letter-spacing:.02em;color:var(--accent-ink);font-size:max(9px,2.6cqw);font-weight:700}.studio-letter-stamp-line{background:var(--accent);border-radius:2px;width:50%;height:2px}.studio-letter-postmark{width:21cqw;height:21cqw;color:var(--ink);opacity:.58;pointer-events:none;position:absolute;top:7cqw;right:15cqw;transform:rotate(-12deg)}.studio-letter-stamp-mark{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.studio-letter-stamp-mark circle{fill:none;stroke:currentColor;stroke-width:2.6px}.studio-letter-stamp-mark circle+circle{stroke-width:1.4px}.studio-letter-postmark-ring{font-family:var(--font-sans);letter-spacing:.12em;fill:currentColor;font-size:9px;font-weight:700}.studio-letter-postmark-date{font-family:var(--font-mono);fill:currentColor;font-size:17px;font-weight:700}.studio-letter-waves{width:22cqw;height:11cqw;position:absolute;top:28%;right:82%;overflow:visible}.studio-letter-waves path{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round}.studio-letter-from{flex-wrap:wrap;align-items:baseline;gap:.2em .8em;font-size:max(12px,3.1cqw);line-height:1.4;display:flex;position:relative}.studio-letter-label{letter-spacing:.12em;color:var(--accent-ink);font-size:max(11px,2.7cqw);font-weight:700}.studio-letter-sender strong{color:var(--ink);font-weight:800}.studio-letter-handle{color:var(--ink-2)}.studio-letter-to{border-top:1px dashed #0f172a29;margin-top:3.2cqw;padding-top:3.2cqw;position:relative}.studio-letter-subject{color:var(--ink);text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:.6cqw 0 0;font-size:clamp(17px,5.4cqw,24px);font-weight:800;line-height:1.35;display:-webkit-box;overflow:hidden}.studio-letter-summary{color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:1.6cqw 0 0;font-size:max(13px,3.4cqw);line-height:1.6;display:-webkit-box;overflow:hidden}.studio-letter[data-variant=open]{max-width:640px}.studio-letter-sheet{z-index:1;background:var(--paper);--ink-2:var(--ink-2-base);box-shadow:var(--paper-shadow), inset 0 0 0 1px #0f172a0f;border-radius:8px 8px 16px 16px;padding:7cqw 7cqw 6cqw;display:block;position:relative}.studio-letter-head{justify-content:space-between;align-items:flex-start;gap:4cqw;display:flex;position:relative}.studio-letter-meta{min-width:0}@container (max-width:420px){.studio-letter-sheet .studio-letter-meta{padding-right:20cqw}}.studio-letter-sheet .studio-letter-subject{-webkit-line-clamp:3;font-size:clamp(20px,4.6cqw,30px)}.studio-letter-sheet .studio-letter-postmark{flex:none;width:clamp(64px,15cqw,96px);height:clamp(64px,15cqw,96px);position:relative;top:auto;right:auto}.studio-letter-lines{color:var(--ink);margin-top:4cqw;font-size:clamp(16px,2.9cqw,18px);line-height:1.85;display:block}.studio-letter-lines>*+*{margin-top:.9em}.studio-letter-signoff{color:var(--ink);margin:4cqw 0 0;font-size:clamp(14px,2.6cqw,16px);font-weight:700}}@layer utilities;
