/* ---------- Напишите мне: письменный стол под лампой ---------- */
.contact{--ink-c:#1f2b5c;--paper-c:#f2eadb;--lh:clamp(28px,calc((88.4vh - 200px) / 13.4),46px);--lw:calc(var(--lh) * 15.2);background:#0c0a09}
.ct-pin{position:relative}
.ct-canvas{display:none}
.ct-dark{display:none}
.ct-plane{position:relative;display:flex;flex-direction:column;align-items:center;padding:16vh var(--pad) 12vh}
.contact-title{margin:0 0 4vh;font:600 clamp(46px,8.6vh,104px)/1 var(--serif);letter-spacing:-.01em;text-align:center;color:var(--bone)}
.contact-title em{font-weight:600}

/* письмо */
.letter{position:relative;width:100%;max-width:var(--lw);margin:0 auto;perspective:1400px}
.lt-paper{position:relative;padding:calc(var(--lh)*.8) calc(var(--lh)*1.1) calc(var(--lh)*.7);border-radius:6px;background:var(--paper-c);background-image:linear-gradient(168deg,#f7f0e3 0%,#efe6d5 60%,#e9dfcc 100%);color:#2a221c;box-shadow:14px 22px 34px rgba(0,0,0,.5),4px 6px 10px rgba(0,0,0,.35);transform-origin:50% 100%;font:500 calc(var(--lh)*.52)/var(--lh) var(--serif)}
.lt-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:calc(var(--lh)*.3);margin-bottom:calc(var(--lh)*.32);border-bottom:1px solid rgba(42,34,28,.16);font:500 12px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(42,34,28,.72)}
.lt-hi{margin:0 0 calc(var(--lh)*.08);font:italic 500 calc(var(--lh)*.78)/calc(var(--lh)*1.2) var(--serif);letter-spacing:-.01em;color:#221a14}
.lt-p{margin:0;font-size:calc(var(--lh)*.56);letter-spacing:.005em}
.nb{display:block;white-space:nowrap}
.lt-k{margin-top:calc(var(--lh)*.2);font:500 12px/var(--lh) var(--font);letter-spacing:.14em;text-transform:uppercase;color:rgba(42,34,28,.72)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.field{position:relative}
.field input,.field textarea{-webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:0;background:none;outline:none;font:600 calc(var(--lh)*.74)/var(--lh) 'Caveat',cursive;letter-spacing:.01em;color:transparent;caret-color:var(--ink-c)}
.field input::placeholder,.field textarea::placeholder{font:500 max(12px,calc(var(--lh)*.36))/var(--lh) var(--font);letter-spacing:.04em;color:rgba(42,34,28,.45)}
.field input::selection,.field textarea::selection{background:rgba(31,43,92,.18);color:transparent}
.field.inl{display:inline-block;vertical-align:top;max-width:100%}
.field.inl input{display:block;height:var(--lh);padding:0 3px;min-width:3em;max-width:100%;background:linear-gradient(rgba(42,34,28,.32),rgba(42,34,28,.32)) 0 calc(100% - 6px)/100% 1px no-repeat;transition:background-color .3s}
.field.inl input:focus{background-image:linear-gradient(rgba(31,43,92,.6),rgba(31,43,92,.6))}
.ink{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;font:600 calc(var(--lh)*.74)/var(--lh) 'Caveat',cursive;letter-spacing:.01em;color:var(--ink-c);white-space:pre}
.field.inl .ink{padding:0 3px}
.ink-in{display:block;will-change:transform}
.ink i{font-style:normal}
.ink i.w{animation:inkw var(--wd,.24s) cubic-bezier(.35,.4,.45,1) both;animation-delay:var(--wl,0s)}
@keyframes inkw{from{clip-path:inset(-40% 100% -40% -20%);color:#0b1440}to{clip-path:inset(-40% -20% -40% -20%)}}
.field.invalid input{background-image:linear-gradient(var(--ember),var(--ember));background-size:100% 2px}
.field.area{display:block;margin-top:calc(var(--lh)*.06)}
.field.area textarea{display:block;width:100%;height:calc(var(--lh)*3);padding:0;resize:none;overflow:auto;scrollbar-width:none;background:repeating-linear-gradient(180deg,transparent 0 calc(var(--lh) - 7px),rgba(42,34,28,.16) calc(var(--lh) - 7px) calc(var(--lh) - 6px),transparent calc(var(--lh) - 6px) var(--lh))}
.field.area textarea::-webkit-scrollbar{display:none}
.field.area .ink{white-space:pre-wrap;overflow-wrap:break-word}
.field.area textarea::placeholder{line-height:var(--lh)}

.letter .topics{display:flex;flex-wrap:wrap;column-gap:calc(var(--lh)*.5);row-gap:0;margin:0 0 calc(var(--lh)*.1)}
.topics label{position:relative;cursor:pointer}
.topics input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.letter .topics span{display:block;padding:0 4px;font:500 max(12px,calc(var(--lh)*.34))/var(--lh) var(--font);letter-spacing:.07em;text-transform:uppercase;color:rgba(42,34,28,.78);white-space:nowrap;transition:color .4s}
.letter .topics label:hover span{color:#221a14}
.letter .topics input:checked+span{color:#221a14}
.letter .topics input:focus-visible+span{outline:2px solid var(--ember);outline-offset:2px}
.lt-sign{margin:calc(var(--lh)*.04) 0 0;text-align:right;font:italic 500 calc(var(--lh)*.56)/var(--lh) var(--serif);color:rgba(42,34,28,.7)}
.lt-name{display:inline-block;min-width:4em;font:600 calc(var(--lh)*.8)/var(--lh) 'Caveat',cursive;font-style:normal;color:var(--ink-c);text-align:left}
.lt-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:calc(var(--lh)*.22)}
.consent{position:relative;display:flex;gap:12px;align-items:flex-start;max-width:30em;font:400 12.5px/1.4 var(--font);color:rgba(42,34,28,.8);cursor:pointer}
.consent input{position:absolute;left:0;top:0;width:18px;height:18px;margin:0;opacity:0}
.consent .box{flex:none;width:17px;height:17px;margin-top:1px;border:1.3px solid rgba(42,34,28,.55);border-radius:3px}
.consent input:focus-visible+.box{outline:2px solid var(--ember);outline-offset:2px}
.consent a{text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--ember-2)}
.consent.invalid{color:var(--ember-2)}
.consent.invalid .box{border-color:var(--ember)}
.lt-send{position:relative;flex:none;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 22px 0 10px;border-radius:14px;background:#1d1713;color:#f4ecdf;font:500 14px/1 var(--font);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 10px 24px rgba(30,18,10,.28);transition:background-color .4s,transform .5s var(--ease)}
.lt-send:hover{background:#2c221c}
.lt-send:active{transform:scale(.98)}
.lt-wax{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#e2593a,#a8260d 62%,#7a1806);color:#ffd8c8;font:600 11px/1 var(--serif);letter-spacing:.02em;box-shadow:inset 0 0 0 3px rgba(0,0,0,.14),inset 0 0 0 4px rgba(255,180,150,.18);transition:transform .6s var(--ease)}
.lt-send:hover .lt-wax{transform:rotate(-18deg) scale(1.06)}
.form-note{flex:1;min-width:0;margin:0;font:500 12.5px/1.35 var(--font);color:rgba(42,34,28,.75)}
.lt-end{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:calc(var(--lh)*.12)}
.lt-end .consent{flex:1;min-width:0;max-width:22em;margin-top:calc(var(--lh)*.18)}
.lt-end .lt-sign{flex:none;margin:0}
.form-note.bad{color:var(--ember-2)}

/* конверт */
.lt-env{position:absolute;left:50%;top:50%;width:min(460px,78%);aspect-ratio:1.62;margin:0;transform:translate(-50%,-50%);opacity:0;pointer-events:none;perspective:900px}
.lt-env i{position:absolute;inset:0;border-radius:6px}
.lt-back{background:#d8c7aa;box-shadow:14px 22px 34px rgba(0,0,0,.5)}
.lt-front{background:linear-gradient(160deg,#ece0ca,#dccbad);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.lt-flap{background:linear-gradient(180deg,#e6d8bf,#d6c3a3);clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:50% 0;backface-visibility:visible}
.lt-seal{position:absolute;left:50%;top:60%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50% 47% 52% 49%;background:radial-gradient(circle at 36% 30%,#e2593a,#a8260d 60%,#741504);color:#ffd8c8;font:600 19px/1 var(--serif);letter-spacing:.02em;box-shadow:0 6px 14px rgba(90,15,0,.45),inset 0 0 0 6px rgba(0,0,0,.12),inset 0 0 0 7px rgba(255,170,140,.16);transform:scale(0)}

/* перо, ластик, следы */
.ct-tools{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3}
.ct-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.ct-defs{position:absolute;width:0;height:0}
.ct-obj{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.ct-obj svg{display:block;width:100%;height:100%;overflow:visible}
.ct-ghosts{position:absolute;left:0;top:0;width:0;height:0}
.ct-ghosts i{position:absolute;font-style:normal;white-space:pre;color:var(--ink-c);transition:opacity .42s ease,filter .42s ease}
.ct-ghosts i.gone{opacity:0;filter:blur(1.5px)}
.ct-mark{fill:none;stroke:var(--ink-c);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transition:opacity .35s}

/* ---------- Сцена на широком экране ---------- */
@media (min-width:900px) and (min-height:560px){
  /* лежит под концом Доброграда: закреплённый кадр встаёт под его последние 100vh и показывается, когда город ушёл в ровный #0c0a09 */
  .contact:not(.no3d){height:220vh;margin-top:-100vh}
  .contact:not(.no3d) .ct-pin{position:sticky;top:0;height:100vh;overflow:hidden}
  .contact:not(.no3d) .ct-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
  .contact:not(.no3d) .ct-dark{display:block;position:absolute;inset:0;background:#0c0a09;pointer-events:none;z-index:4}
  .contact:not(.no3d) .ct-view{position:absolute;inset:0;perspective:var(--f,2000px);perspective-origin:50% 50%}
  .contact:not(.no3d) .ct-plane{position:absolute;inset:0;padding:calc(62px + 1.2vh) var(--pad) 3vh;transform-origin:50% 50%}
  .contact:not(.no3d) .contact-title{margin:0 0 3.2vh}
  .contact:not(.no3d) .letter{width:var(--lw);max-width:none;margin:auto}
}

/* ---------- Подвал: стена над столом ---------- */
.credits{position:relative;z-index:2;padding:12vh var(--pad) 28px;background:#0c0a09;color:var(--bone)}
.cr-wall{display:flex;flex-direction:column;align-items:center;text-align:center}
.cr-mark{margin:0;font:500 clamp(54px,8.4vw,168px)/1 var(--serif);letter-spacing:.035em;text-transform:uppercase;color:#f1e7d6;white-space:nowrap;text-shadow:0 .04em .1em rgba(0,0,0,.55);user-select:none}
.cr-w{display:inline-block}
.cr-mark i{font-style:normal;display:inline-block}
.cr-mid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;width:100%;max-width:1320px;margin-top:6vh}
.cr-side{display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.4vw,44px)}
.cr-txt{display:flex;flex-direction:column;align-items:center;gap:.2em;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.cr-mail .cr-txt{text-align:center;align-items:center}
.cr-k{font:600 italic clamp(30px,2.6vw,48px)/1 var(--serif);letter-spacing:.005em;color:var(--ember);margin-bottom:.22em}
.cr-txt a{font:500 clamp(24px,2.3vw,40px)/1.15 var(--serif);letter-spacing:.005em;color:var(--bone);transition:color .35s}
.cr-txt a:hover{color:var(--ember)}
.cr-obj{display:none;flex:none;padding:0;border:0;background:none;cursor:pointer}
.cr-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;width:100%;margin-top:8vh;padding-top:16px;border-top:1px solid rgba(241,235,225,.16);font:500 14px/1.45 var(--font);color:var(--bone);text-align:left}
.cr-l{display:flex;flex-direction:column;gap:2px;justify-self:start}
.cr-r{display:flex;align-items:center;gap:28px;justify-self:end}
.cr-row a{transition:color .35s}
.cr-row a:hover{color:var(--ember)}
.cr-soc{display:flex;gap:18px}
.cr-soc a{display:block;width:24px;height:24px;color:var(--bone)}
.cr-soc svg{display:block;width:100%;height:100%;fill:currentColor}
/* подпись студии: рукописно, зелёные буквы как в логотипе, «Удачника» уходит в росчерк */
.studio{display:block;text-align:center}
.sig{display:inline-block;font:600 clamp(24px,1.85vw,32px)/1.2 'Caveat',cursive;letter-spacing:.01em;color:var(--bone);white-space:nowrap}
.gl{display:inline-block;height:1em;vertical-align:-.16em;overflow:visible;fill:none;stroke:#8be22d;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(139,226,45,.28))}
.gl .t{stroke-width:2.1}
.gc{width:.82em;height:1.05em;margin:0 -.1em 0 .02em;vertical-align:-.22em}
.ga{width:.78em;margin:0 .02em 0 .01em}
.sig-u{position:relative;display:inline-block}
.sig-fl{position:absolute;left:-4%;bottom:-.42em;width:118%;height:.62em;overflow:visible;pointer-events:none}
.sig-fl path{fill:none;stroke:#8be22d;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:420;stroke-dashoffset:0}

@media (min-width:900px) and (min-height:560px){
  .credits:not(.no3d){height:100vh;margin-top:-100vh;padding:0;background:none;pointer-events:none}
  .credits:not(.no3d) .cr-fix{position:absolute;left:0;top:0;width:100%;height:100vh;perspective:var(--f,2000px);perspective-origin:50% 50%;visibility:hidden}
  .credits:not(.no3d) .cr-wall{position:absolute;inset:0;padding:0 var(--pad) 16px;transform-origin:50% 50%;backface-visibility:hidden}
  .credits:not(.no3d) .cr-mark{margin-top:calc(25vh - .5em)}
  .credits:not(.no3d) .cr-mid{flex:1;margin-top:2vh}
  .credits:not(.no3d) .cr-obj{display:block;width:21vh;height:34vh}
  .credits:not(.no3d) .cr-box{width:20vh;height:31vh}
  .credits:not(.no3d) .cr-row{margin-top:0}
  .credits:not(.no3d).on .cr-fix{visibility:visible}
  .credits:not(.no3d).on a,.credits:not(.no3d).on button{pointer-events:auto}
}

@media (max-width:899px){
  .ct-plane{padding:14vh 20px 8vh;gap:40px}
  .lt-paper{padding:22px 20px 18px}
  .lt-foot{flex-direction:column;align-items:flex-start}
  .cr-row{grid-template-columns:1fr;justify-items:center;text-align:center}
  .cr-l{align-items:center;justify-self:center;text-align:center}
  .cr-r{justify-self:center}
  .cr-mark{white-space:normal}
  .cr-mid{grid-template-columns:1fr;gap:5vh}
  .cr-txt,.cr-mail .cr-txt{align-items:center;text-align:center}
  .sig{white-space:normal}
  .lt-end{flex-direction:column;gap:4px}
  .lt-end .consent{max-width:none}
  .lt-end .lt-sign{align-self:flex-end}
}

@media (min-width:900px) and (max-height:820px){.field.area textarea{height:calc(var(--lh)*2)}}

/* ---------- Телефон (портрет): та же сцена, что на ноутбуке. Письмо во всю ширину на бюваре, под ним перо и ластик;
   прокрутка сначала ведёт стол под камерой, затем камера поднимается на стену (сам кадр раскладывает contact.js) ---------- */
.contact.ph3d{--lh:clamp(24px,7.3vw,32px);margin-top:-100vh}
.contact.ph3d .ct-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.contact.ph3d .ct-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.contact.ph3d .ct-dark{display:block;position:absolute;inset:0;background:#0c0a09;pointer-events:none;z-index:4}
.contact.ph3d .ct-view{position:absolute;inset:0;perspective:var(--f,2000px);perspective-origin:50% 50%}
.contact.ph3d .ct-plane{position:absolute;left:0;top:0;right:0;gap:0;padding:calc(70px + 1.5vh) 31px calc(var(--lh) * 4.6 + 6px)}
.contact.ph3d .contact-title{margin:0 0 calc(12px + 1.6vh);font-size:clamp(40px,11.6vw,50px);text-shadow:0 2px 18px rgba(0,0,0,.55)}
.contact.ph3d .letter{width:100%;max-width:none}
.contact.ph3d .lt-paper{padding:calc(var(--lh)*.72) calc(var(--lh)*.78) calc(var(--lh)*.66)}
.contact.ph3d .lt-top{font-size:10px;letter-spacing:.12em;gap:10px}
.contact.ph3d .lt-k{font-size:10.5px}
.contact.ph3d .consent{font-size:11.5px}
.contact.ph3d .lt-foot{margin-top:calc(var(--lh)*.3);gap:10px}
.contact.ph3d .lt-send{align-self:stretch;justify-content:center;height:50px}
.contact.ph3d .form-note:empty{display:none}

.credits.ph3d{height:100vh;margin-top:-100vh;padding:0;background:none;pointer-events:none}
.credits.ph3d .cr-fix{position:absolute;left:0;top:0;width:100%;height:100vh;perspective:var(--f,2000px);perspective-origin:50% 50%;visibility:hidden}
.credits.ph3d .cr-wall{position:absolute;inset:0;padding:0 20px calc(14px + env(safe-area-inset-bottom,0px));transform-origin:50% 50%;backface-visibility:hidden}
.credits.ph3d .cr-mark{margin-top:calc(19vh - .1em);font-size:clamp(44px,13.4vw,60px);line-height:1;white-space:normal}
.credits.ph3d .cr-mark .cr-w{display:block}
.credits.ph3d .cr-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3vh;margin-top:1vh}
.credits.ph3d .cr-side{justify-content:center;gap:clamp(16px,5vw,26px)}
.credits.ph3d .cr-obj{display:block;width:12vh;height:16.5vh}
.credits.ph3d .cr-box{width:11vh;height:15vh}
.credits.ph3d .cr-tel .cr-txt{align-items:flex-start;text-align:left}
.credits.ph3d .cr-mail .cr-txt{align-items:flex-end;text-align:right}
.credits.ph3d .cr-k{font-size:clamp(26px,7.4vw,32px)}
.credits.ph3d .cr-txt a{font-size:clamp(19px,5.4vw,23px)}
.credits.ph3d .cr-row{grid-template-columns:1fr auto;grid-template-areas:"l r" "s s";justify-items:stretch;align-items:end;gap:12px 16px;margin-top:0;padding-top:12px;font-size:12.5px;line-height:1.4;text-align:left}
.credits.ph3d .cr-l{grid-area:l;align-items:flex-start;justify-self:start;text-align:left}
.credits.ph3d .cr-r{grid-area:r;gap:18px}
.credits.ph3d .cr-soc{gap:14px}
.credits.ph3d .cr-soc a{width:21px;height:21px}
.credits.ph3d .studio{grid-area:s;justify-self:center}
.credits.ph3d .sig{font-size:clamp(18px,5vw,21px)}
.credits.ph3d.on .cr-fix{visibility:visible}
.credits.ph3d.on a,.credits.ph3d.on button{pointer-events:auto}