/* ============================================================
   CHROME & CONCRETE — "A letter to Felix" (Okt 2026)
   Contact + registration forms read as a handwritten letter on fine
   paper; on sending, the letter is folded into an envelope and closed
   with the C&C wax seal. Loads after styles.css.
   ============================================================ */

:root{
  --paper:#FCFAF4;
  --envelope:#E8E0D2;
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .07 0 0 0 0 .04 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the sheet ---------- */
.letter{position:relative;background:var(--paper-grain),var(--paper);
  padding:clamp(26px,3.6vw,48px) clamp(22px,3.4vw,46px) clamp(26px,3.4vw,40px);
  box-shadow:0 1px 1px rgba(36,2,1,.06),0 28px 60px -34px rgba(36,2,1,.38);
  --fg:var(--mahogany);--muted:rgba(36,2,1,.66);--faint:rgba(36,2,1,.46);--line:rgba(36,2,1,.16);color:var(--fg)}
.card:has(> form.letter){padding:0!important;border-top:0;background:none}

.letter .lt-greet,.lt-greet{font-family:'Thesignature','Allura',cursive;color:var(--crimson);font-size:clamp(40px,4.4vw,54px);line-height:1;margin:0 0 4px;font-weight:400}

/* what people write appears in an italic, letter-like hand */
.letter input:not([type=checkbox]):not([type=hidden]),.letter textarea,.letter select{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:18px;letter-spacing:0}
.letter input::placeholder,.letter textarea::placeholder{font-style:italic}
/* the message is written on ruled lines */
.letter textarea{border-bottom:0;line-height:32px;padding:0;min-height:160px;
  background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px);background-attachment:local}

/* closing + live signature */
.lt-close{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.lt-yours{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:17px;color:var(--muted)}
.lt-sign{display:block;min-height:58px;font-family:'Thesignature','Allura',cursive;font-size:clamp(40px,4.2vw,52px);line-height:1.2;color:var(--mahogany);
  border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:clip}

/* ---------- sealing ---------- */
.letter > *{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.letter.sealing > *:not(.lt-stage){opacity:0;transform:translateY(-12px)}
.letter.sealed > *:not(.lt-stage){display:none!important}
.letter.sealed{background:none;box-shadow:none;padding-inline:0}

.lt-stage{display:grid;justify-items:center;gap:clamp(22px,3vw,30px);padding:clamp(20px,4vw,40px) 0 clamp(8px,2vw,16px)}
.lt-env{position:relative;width:min(100%,440px);aspect-ratio:10/7;background:var(--paper-grain),var(--envelope);
  box-shadow:0 1px 1px rgba(36,2,1,.08),0 34px 60px -30px rgba(36,2,1,.5);opacity:0;transform:translateY(26px) scale(.96)}
.lt-flap{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lt-flap path{fill:none;stroke:rgba(36,2,1,.2);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.lt-flap .lt-flap-top{fill:rgba(255,255,255,.22)}
.lt-seal{position:absolute;left:50%;top:56%;width:32%;height:auto;opacity:0;
  transform:translate(-50%,-50%) scale(2.4) rotate(-16deg);filter:drop-shadow(0 7px 9px rgba(36,2,1,.35))}
.letter .lt-cap,.lt-cap{text-align:center;max-width:34ch;color:var(--muted);font-size:15px;line-height:1.6;opacity:0;transform:translateY(8px)}
.lt-cap .script{display:block;font-size:3.2em;line-height:1;top:0;margin:0 0 6px;color:var(--crimson)}

.lt-stage.go .lt-env{animation:ltEnv .75s var(--ease) forwards,ltThud .3s 1.42s ease-out}
.lt-stage.go .lt-flap path{animation:ltDraw .8s .35s cubic-bezier(.45,.05,.3,1) forwards}
.lt-stage.go .lt-seal{animation:ltStamp .6s 1s cubic-bezier(.2,.85,.25,1.15) forwards}
.lt-stage.go .lt-cap{animation:ltCap .7s 1.75s var(--ease) forwards}
@keyframes ltEnv{to{opacity:1;transform:none}}
@keyframes ltDraw{to{stroke-dashoffset:0}}
@keyframes ltStamp{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4) rotate(-16deg)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(.93) rotate(-5deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg)}}
@keyframes ltThud{0%{transform:none}40%{transform:translateY(3px) scale(.995)}100%{transform:none}}
@keyframes ltCap{to{opacity:1;transform:none}}

/* ---------- thank-you pages: the seal, already pressed ---------- */
.lt-received-seal{display:block;width:clamp(96px,11vw,128px);height:auto;margin:0 auto 26px;
  filter:drop-shadow(0 7px 9px rgba(36,2,1,.3));animation:ltPressed .7s .2s cubic-bezier(.2,.85,.25,1.15) both}
@keyframes ltPressed{from{opacity:0;transform:scale(1.9) rotate(-14deg)}to{opacity:1;transform:rotate(-6deg)}}

@media(prefers-reduced-motion:reduce){
  .lt-env,.lt-cap{opacity:1;transform:none}
  .lt-flap path{stroke-dashoffset:0}
  .lt-seal{opacity:1;transform:translate(-50%,-50%) rotate(-6deg)}
  .lt-received-seal{transform:rotate(-6deg)}
}

/* ============================================================
   LETTERS FROM FELIX (homepage band + subscription letter)
   ============================================================ */
.letters-band{overflow:hidden}
.lf-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.lf-text h2{font-size:clamp(28px,4vw,46px);font-weight:300;color:var(--fg);margin:.55em 0 .6em;line-height:1.12}
.lf-text h2 .script{font-size:1.9em}
.lf-text p{color:var(--muted);max-width:44ch;margin-bottom:2em}
.lf-letter{display:flex;justify-content:center;padding:10px 0 30px}
.lf-paper{position:relative;width:min(100%,420px);background:var(--paper-grain),var(--paper);color:var(--mahogany);
  padding:clamp(30px,4vw,48px) clamp(26px,3.6vw,44px) clamp(54px,6vw,70px);transform:rotate(-2.4deg);
  box-shadow:0 2px 4px rgba(0,0,0,.25),0 44px 70px -30px rgba(0,0,0,.65)}
.lf-greet{font-family:'Thesignature','Allura',cursive;color:var(--crimson);font-size:clamp(36px,3.6vw,46px);line-height:1;margin:0 0 14px}
.lf-body{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:17px;line-height:32px;color:var(--mahogany);
  background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(36,2,1,.12) 31px 32px)}
.lf-sign{font-family:'Thesignature','Allura',cursive;font-size:clamp(46px,4.6vw,58px);color:var(--mahogany);margin-top:14px;line-height:1}
.lf-seal{position:absolute;right:-24px;bottom:-28px;width:clamp(78px,8vw,100px);height:auto;transform:rotate(-8deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
/* the letter writes itself when it comes into view */
.lf-letter .lf-greet,.lf-letter .lf-body,.lf-letter .lf-sign{
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.lf-letter.in .lf-greet{animation:lfWrite 1.2s .35s cubic-bezier(.45,.05,.3,1) forwards}
.lf-letter.in .lf-body{animation:lfWrite 2.4s 1.1s cubic-bezier(.45,.05,.3,1) forwards}
.lf-letter.in .lf-sign{animation:lfWrite 1.1s 3.3s cubic-bezier(.45,.05,.3,1) forwards}
.lf-letter .lf-seal{opacity:0;transform:rotate(-20deg) scale(1.8)}
.lf-letter.in .lf-seal{animation:lfSeal .55s 4.2s cubic-bezier(.2,.85,.25,1.15) forwards}
@keyframes lfWrite{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes lfSeal{to{opacity:1;transform:rotate(-8deg) scale(1)}}
@media(max-width:820px){
  .lf-wrap{grid-template-columns:1fr;gap:44px}
  .lf-seal{right:-4px;bottom:-22px}
  .lf-paper{transform:rotate(-1.4deg)}
}

/* subscription modal as a sheet of letter paper */
#join-box{background:var(--paper-grain),var(--paper);border:0;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
#join-form.letter{background:none;box-shadow:none;padding:0}
#join-form.letter .join-field input{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:10px 0;
  font-family:var(--font-display);font-style:italic;font-weight:300;font-size:18px}
#join-form.letter .join-field input:focus{border-bottom-color:var(--crimson)}
#join-form .lt-greet{font-size:40px;margin-bottom:10px}
#join-form .lt-sign{min-height:52px;font-size:44px}

@media(prefers-reduced-motion:reduce){
  .lf-letter .lf-greet,.lf-letter .lf-body,.lf-letter .lf-sign{-webkit-mask-image:none;mask-image:none}
  .lf-letter .lf-seal{opacity:1;transform:rotate(-8deg)}
}

/* give the handwriting room so the write-in mask never clips swashes */
.lf-letter .lf-greet,.lf-letter .lf-sign{padding:.3em .1em .25em;margin-top:-.3em;margin-bottom:-.25em}
.lf-letter .lf-greet{margin-bottom:calc(14px - .25em)}
.lf-letter .lf-sign{margin-top:calc(14px - .3em)}

/* short card text with a closing line */
.lf-close{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:17px;color:rgba(36,2,1,.66);margin-top:22px}
.lf-letter .lf-close{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.lf-letter.in .lf-body{animation:lfWrite 1.5s 1.1s cubic-bezier(.45,.05,.3,1) forwards}
.lf-letter.in .lf-close{animation:lfWrite 1s 2.7s cubic-bezier(.45,.05,.3,1) forwards}
.lf-letter.in .lf-sign{animation:lfWrite 1.1s 3.6s cubic-bezier(.45,.05,.3,1) forwards}
.lf-letter.in .lf-seal{animation:lfSeal .55s 4.6s cubic-bezier(.2,.85,.25,1.15) forwards}
.lf-letter .lf-sign{margin-top:calc(4px - .3em)}
@media(prefers-reduced-motion:reduce){.lf-letter .lf-close{-webkit-mask-image:none;mask-image:none}}

/* letter without the wax seal: even margins */
.lf-paper{padding-bottom:clamp(30px,4vw,44px)}

/* Phone: handwriting in proportion to the rest of the type */
@media (max-width:600px){
  .letter .lt-greet,.lt-greet{font-size:32px}
  .lt-sign{font-size:34px;min-height:48px}
  .lf-greet{font-size:30px}
  .lf-body{font-size:16px}
  .lf-sign{font-size:38px}
  .lf-text h2{font-size:24px}
  #join-form .lt-greet{font-size:32px}
  #join-form .lt-sign{font-size:36px;min-height:46px}
}