/* Contact v581 (23.10.2026): "Write to Maezos" as a letter on a candlelit desk. The sheet is paper, the message is written on ruled lines,
   the topic is a row of ink tabs, and sending seals the letter with Maezos' signature in wax. The form is not connected yet (probe). */
.ct{--ink:#2A1A12;--ink-2:#5A4434;--paper-line:rgba(90,60,40,.18);--wax:#8f2a24;--ct-ease:cubic-bezier(.2,.7,.2,1)}

/* hero */
.ct-hero{padding-block:clamp(90px,11vw,150px) clamp(150px,16vw,230px);text-align:center;background:var(--night)}
.ct-hero>.bg{object-position:60% 55%;filter:brightness(.5) saturate(.85)}
main>section.ct-hero>.shade{background:radial-gradient(ellipse 50% 60% at 50% 45%,rgba(6,4,4,.15),rgba(6,4,4,.7) 85%),linear-gradient(180deg,rgba(6,4,4,.55),transparent 30%,transparent 55%,var(--night) 100%)}
.ct-flame{position:absolute;z-index:-1;left:61%;top:28%;width:min(520px,60vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,196,120,.22),rgba(217,162,95,.08) 40%,transparent 68%);pointer-events:none;animation:ct-flick 3.6s ease-in-out infinite}
@keyframes ct-flick{0%,100%{opacity:.85;scale:1}20%{opacity:1;scale:1.03}35%{opacity:.75;scale:.98}60%{opacity:.95;scale:1.02}80%{opacity:.8}}
.ct-hero-in{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:1}
.ct-hero h1{font-size:clamp(34px,5.4vw,64px);letter-spacing:.14em;text-shadow:0 2px 30px rgba(0,0,0,.9),0 0 60px rgba(217,162,95,.14)}
.ct-lead{margin:0;max-width:32em;font-family:var(--f-sub);font-size:clamp(17px,1.9vw,21px);color:var(--ivory);text-shadow:0 1px 12px rgba(0,0,0,.9)}

/* desk */
.ct-desk{position:relative;margin-top:calc(-1 * clamp(110px,12vw,170px));padding-bottom:clamp(70px,9vw,120px);z-index:1}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(28px,5vw,64px);align-items:start}
.ct-stage{position:relative;perspective:1600px}

/* the sheet of paper */
.ct-letter{position:relative;margin:0;padding:clamp(30px,4.5vw,58px) clamp(22px,5vw,64px) clamp(28px,4vw,46px);color:var(--ink);font-family:var(--f-body);
  background:linear-gradient(rgba(244,232,210,.55),rgba(232,214,184,.5)),url(https://static.wixstatic.com/media/5e8914_827ce63f0f36450ea83341166f62edca~mv2.webp) center/cover,#E9DCC2;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 1px rgba(120,84,52,.25),0 40px 80px -30px rgba(0,0,0,.95),0 14px 30px -12px rgba(0,0,0,.7);
  transform:rotate(-.6deg);transform-origin:50% 0;transition:transform .9s var(--ct-ease),opacity .6s,filter .6s}
.ct-letter::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 80% at 50% 50%,transparent 55%,rgba(110,70,40,.22) 100%)}
.ct-corner{position:absolute;right:0;top:0;width:54px;height:54px;background:linear-gradient(225deg,var(--night) 50%,rgba(205,184,150,.95) 50%,#c7ab80);box-shadow:-3px 3px 6px rgba(0,0,0,.18);pointer-events:none}
.ct-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid rgba(90,60,40,.3);margin-bottom:22px}
.ct-to{margin:0;font-family:var(--f-label);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.ct-to b{display:block;margin-top:4px;font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3vw,32px);letter-spacing:.14em;color:var(--ink)}
.ct-date{margin:0;font-style:italic;font-size:17px;color:var(--ink-2)}

/* topic tabs */
.ct-topic{border:0;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ct-topic legend{width:100%;margin-bottom:10px;font-family:var(--f-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.ct-topic label{position:relative;cursor:pointer}
.ct-topic input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ct-topic span{display:inline-block;padding:7px 15px 8px;border:1px solid rgba(90,60,40,.4);border-radius:999px;font-style:italic;font-size:16px;color:var(--ink-2);background:rgba(255,250,240,.25);transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.ct-topic label:hover span{border-color:rgba(90,60,40,.7);color:var(--ink)}
.ct-topic input:checked+span{background:#2A1A12;border-color:#2A1A12;color:#F3E6CF;box-shadow:0 4px 12px -4px rgba(42,26,18,.6)}
.ct-topic input:focus-visible+span{outline:2px solid #8f2a24;outline-offset:2px}

/* the letter itself, on ruled lines */
.ct-dear{margin:0 0 4px;font-style:italic;font-size:clamp(20px,2.2vw,24px);color:var(--ink)}
.ct-letter textarea{display:block;width:100%;min-height:calc(34px * 7 + 8px);padding:0 2px 8px;border:0;resize:none;overflow:hidden;outline:none;color:var(--ink);font-family:var(--f-body);font-size:19px;line-height:34px;
  background:repeating-linear-gradient(180deg,transparent 0 33px,var(--paper-line) 33px 34px);background-attachment:local}
.ct-letter textarea::placeholder{color:rgba(90,60,40,.55);font-style:italic}
.ct-letter textarea:focus{background:repeating-linear-gradient(180deg,transparent 0 33px,rgba(143,42,36,.28) 33px 34px)}
.ct-letter [aria-invalid="true"]{box-shadow:0 2px 0 #a8322a}
.ct-ink{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:8px 0 22px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ct-ink-bar{width:90px;height:3px;border-radius:2px;background:rgba(90,60,40,.18);overflow:hidden}
.ct-ink-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2A1A12,#5A4434);transform-origin:0 50%;transition:transform .3s}

/* signature block */
.ct-sign{display:grid;gap:10px;justify-items:end;margin-bottom:26px}
.ct-yours{margin:0;font-style:italic;font-size:20px}
.ct-line{display:flex;align-items:baseline;gap:12px;width:min(380px,100%);border-bottom:1px solid rgba(90,60,40,.45)}
.ct-line span{flex:none;font-family:var(--f-label);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.ct-line input{flex:1;min-width:0;border:0;background:none;outline:none;padding:6px 0 5px;color:var(--ink);font-family:var(--f-body);font-style:italic;font-size:19px;text-align:right}
.ct-line input::placeholder{color:rgba(90,60,40,.5)}
.ct-line:focus-within{border-color:#8f2a24}

/* seal & send */
.ct-send{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(90,60,40,.3)}
.ct-btn{display:inline-flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border:1px solid #2A1A12;border-radius:999px;background:#2A1A12;color:#F3E6CF;font-family:var(--f-label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s,transform .3s var(--ct-ease),box-shadow .3s}
.ct-btn:hover,.ct-btn:focus-visible{background:#3a251a;transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(42,26,18,.8)}
.ct-btn:focus-visible{outline:2px solid #8f2a24;outline-offset:3px}
.ct-wax{position:relative;display:block;width:40px;height:40px;flex:none;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 34% 28%,#c24a3d,#8f2a24 55%,#4a1512);box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 -2px 4px rgba(0,0,0,.35);transition:transform .5s var(--ct-ease)}
.ct-btn:hover .ct-wax{transform:rotate(-12deg)}
.ct-wax .s{position:absolute;inset:22% 20%;-webkit-mask:url(https://static.wixstatic.com/media/5e8914_c2e26461d7c74b868a64d730b62c283b~mv2.webp) center/contain no-repeat;mask:url(https://static.wixstatic.com/media/5e8914_c2e26461d7c74b868a64d730b62c283b~mv2.webp) center/contain no-repeat;background:rgba(255,206,186,.6)}
.ct-wax .s.d{background:rgba(40,6,4,.6);transform:translate(.8px,1px)}
.ct-priv{margin:0;flex:1 1 220px;font-size:14.5px;color:var(--ink-2)}
.ct-priv a{color:var(--ink)}
.ct-note{margin:14px 0 0;min-height:1em;font-style:italic;font-size:16px;color:#8f2a24}
.ct-note:empty{display:none}

/* folding away */
.ct-letter.folding{transform:rotateX(78deg) scale(.6) translateY(-20px);opacity:0;filter:brightness(.7)}
.ct-done{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:clamp(40px,6vw,80px) 20px;animation:ct-up .8s var(--ct-ease) both}
@keyframes ct-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ct-done .ttl{font-size:clamp(28px,3.6vw,42px);outline:none}
.ct-done p{margin:0;color:var(--ash);font-size:18px}
.ct-done .ct-probe{font-size:14px;font-style:italic;opacity:.8}
.ct-done .btn{margin-top:14px}
.ct-env{position:relative;width:min(300px,80vw);aspect-ratio:1.6;margin-bottom:22px;background:linear-gradient(160deg,#E4D3B3,#CDB58C);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(120,84,52,.35);animation:ct-env .9s var(--ct-ease) both}
.ct-env::before,.ct-env::after{content:"";position:absolute;bottom:0;width:50%;height:62%;background:linear-gradient(160deg,#D9C59F,#C2A97F)}
.ct-env::before{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.ct-env::after{right:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ct-env .flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:1;background:linear-gradient(180deg,#CDB58C,#BFA578);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.ct-wax.big{position:absolute;left:50%;top:58%;z-index:2;width:66px;height:66px;margin:-33px 0 0 -33px;animation:ct-stamp .7s .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ct-env{from{opacity:0;transform:translateY(-30px) rotate(-4deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes ct-stamp{0%{opacity:0;transform:translateY(-60px) scale(1.6)}60%{opacity:1;transform:translateY(0) scale(.9,1.08)}100%{opacity:1;transform:none}}

/* side */
.ct-side{display:flex;flex-direction:column;gap:18px;padding-top:clamp(20px,5vw,60px)}
.ct-card{padding:22px 22px 20px;border:1px solid var(--line);background:linear-gradient(165deg,rgba(43,28,21,.85),rgba(20,13,10,.9));box-shadow:0 24px 40px -24px rgba(0,0,0,.9)}
.ct-card .lbl{margin-bottom:10px}
.ct-card>p:not(.lbl){margin:0 0 12px;color:var(--ash);font-size:16px}
.ct-q,.ct-else{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column}
.ct-q a{display:block;padding:9px 0 9px 18px;border-top:1px solid var(--line);color:var(--ivory);text-decoration:none;font-size:16.5px;position:relative;transition:color .3s,padding .3s}
.ct-q a::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1px solid var(--candle);border-right:1px solid var(--candle);transform:rotate(45deg)}
.ct-q a:hover,.ct-q a:focus-visible{color:#F3C98B;padding-left:24px}
.ct-else{margin:0}
.ct-else a{display:flex;flex-direction:column;padding:10px 0;border-top:1px solid var(--line);color:var(--ivory);text-decoration:none}
.ct-else b{font-family:var(--f-label);font-weight:400;font-size:13px;letter-spacing:.12em}
.ct-else span{font-size:15px;font-style:italic;color:var(--ash)}
.ct-else a:hover b{color:#F3C98B}

@media (max-width:900px){
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .ct-side{padding-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .ct-letter{transform:none}
}
@media (max-width:560px){
  .ct-letter{padding:28px 18px 24px}
  .ct-sign{justify-items:stretch}
  .ct-line{width:100%}
  .ct-letter textarea{font-size:18px}
  .ct-corner{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){.ct-flame,.ct-env,.ct-wax.big,.ct-done{animation:none}.ct-letter{transition:none}}

/* ===== v582 (23.10.2026) ===== */
/* the sheet lies straight (a tilted sheet made the ruled lines step up and down), no dog-ear */
.ct-letter{transform:none}
.ct-corner{display:none}
/* ruled lines live on a wrapper behind a transparent textarea: always whole, even lines */
.ct-lines{position:relative;background-image:linear-gradient(180deg,transparent 33px,var(--paper-line) 33px);background-size:100% 34px;background-repeat:repeat-y}
.ct-letter textarea,.ct-letter textarea:focus{background:none!important;box-shadow:none!important}
.ct-letter [aria-invalid="true"]{box-shadow:none}
.ct-line:has([aria-invalid="true"]){border-color:#a8322a}
.ct-lines:has([aria-invalid="true"]) ~ .ct-ink,.ct-lines:has([aria-invalid="true"]){--paper-line:rgba(168,50,42,.35)}
/* hero: more of the candle */
.ct-hero{padding-bottom:clamp(220px,24vw,330px)}
.ct-hero>.bg{object-position:62% 30%}
.ct-desk{margin-top:calc(-1 * clamp(80px,9vw,120px))}
/* side: wider, questions stay on one line on hover */
.ct-grid{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.ct-q a{transition:color .3s,transform .3s}
.ct-q a:hover,.ct-q a:focus-visible{padding-left:18px;transform:translateX(5px)}
/* wax: the same seal as elsewhere on the site (wavy wax, inner ring, signature) */
.ct-wax{border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.ct-wax .wx{position:absolute;inset:0;width:100%;height:100%}
.ct-wax .s{inset:26% 24%}
.ct-wax.big{width:84px;height:84px;margin:-42px 0 0 -42px}
/* sending: the ink dries, the sheet folds into thirds where it lies, then the envelope is sealed in its place */
.ct-letter.folding{transform:none;opacity:1;filter:none}
.ct-letter.sealing{animation:ct-fold 1.2s cubic-bezier(.6,.05,.3,1) forwards;transform-origin:50% 50%}
.ct-letter.sealing>*{transition:opacity .4s;opacity:.15}
@keyframes ct-fold{0%{transform:none;opacity:1}35%{transform:perspective(1400px) rotateX(18deg) scaleY(.66)}65%{transform:perspective(1400px) rotateX(0) scaleY(.34) scaleX(.92);opacity:1;filter:brightness(.92)}100%{transform:scaleY(.3) scaleX(.55);opacity:0;filter:brightness(.8)}}
.ct-done{animation:ct-in .6s ease both}
@keyframes ct-in{from{opacity:0}to{opacity:1}}
.ct-env{animation:ct-env2 .7s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes ct-env2{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.ct-wax.big{animation:ct-stamp2 .6s .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes ct-stamp2{0%{opacity:0;transform:scale(1.8)}55%{opacity:1;transform:scale(.88)}75%{transform:scale(1.04)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ct-letter.sealing{animation:none}}
@media (max-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr)}}

/* ===== v583 (23.10.2026) ===== */
.ct-priv a{white-space:nowrap}
.ct-flame{width:min(380px,44vw);background:radial-gradient(circle,rgba(255,200,120,.28),rgba(217,162,95,.1) 38%,transparent 66%);mix-blend-mode:screen}
/* a real envelope: paper fibre, a tinted inside, soft folds, a slightly lifted flap, set down at a small angle */
.ct-env{width:min(320px,82vw);aspect-ratio:1.48;transform:rotate(-2.5deg);background:
  linear-gradient(180deg,rgba(255,250,238,.25),rgba(160,130,90,.12)),url(https://static.wixstatic.com/media/5e8914_827ce63f0f36450ea83341166f62edca~mv2.webp) 30% 40%/420px auto,#DCC8A2;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 0 0 1px rgba(110,80,50,.28),0 28px 50px -18px rgba(0,0,0,.95),0 8px 14px -6px rgba(0,0,0,.6);animation-name:ct-env3}
@keyframes ct-env3{from{opacity:0;transform:rotate(-2.5deg) scale(.7)}to{opacity:1;transform:rotate(-2.5deg)}}
.ct-env::before,.ct-env::after{height:64%;background:linear-gradient(180deg,rgba(255,248,232,.18),rgba(120,90,55,.16)),url(https://static.wixstatic.com/media/5e8914_827ce63f0f36450ea83341166f62edca~mv2.webp) 70% 60%/420px auto,#D3BC92;filter:drop-shadow(0 -1px 0 rgba(120,85,50,.25))}
.ct-env::before{clip-path:polygon(0 0,52% 62%,0 100%);height:100%;width:100%;left:0}
.ct-env::after{clip-path:polygon(100% 0,48% 62%,100% 100%);height:100%;width:100%;right:0;background:linear-gradient(180deg,rgba(255,248,232,.1),rgba(110,80,45,.2)),url(https://static.wixstatic.com/media/5e8914_827ce63f0f36450ea83341166f62edca~mv2.webp) 20% 70%/420px auto,#CDB58A}
.ct-env .flap{height:62%;z-index:2;background:linear-gradient(180deg,rgba(255,250,238,.3),rgba(150,115,70,.18) 80%),url(https://static.wixstatic.com/media/5e8914_827ce63f0f36450ea83341166f62edca~mv2.webp) 50% 10%/420px auto,#D8C39C;clip-path:polygon(0 0,100% 0,52% 100%,48% 100%);filter:drop-shadow(0 4px 4px rgba(60,40,20,.35))}
.ct-env .bottom{position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;background:linear-gradient(0deg,rgba(110,80,45,.18),rgba(255,248,232,.1)),url(https://static.wixstatic.com/media/5e8914_827ce63f0f36450ea83341166f62edca~mv2.webp) 40% 90%/420px auto,#D6BF95;clip-path:polygon(0 100%,50% 8%,100% 100%);filter:drop-shadow(0 -2px 3px rgba(80,55,30,.25))}
.ct-wax.big{z-index:3;top:62%}
/* v586: hover for the small links on the letter and the side cards, as on the other pages */
.ct-priv a{text-decoration-color:rgba(90,60,40,.45);text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}
.ct-priv a:hover,.ct-priv a:focus-visible{color:var(--wax);text-decoration-color:var(--wax)}
.ct-more{align-self:flex-start;display:inline-block;font-family:var(--f-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--candle);text-decoration:none;border-bottom:1px solid rgba(217,162,95,.45);padding-bottom:3px;transition:color .25s,border-color .25s}
.ct-more:hover,.ct-more:focus-visible{color:#F3C98B;border-color:#F3C98B}

/* v593 */
.ct-card>p.ct-one{white-space:nowrap;font-size:clamp(14px,4.2vw,16px)}
.ct-q li,.ct-else span{text-wrap:balance}

/* v677 (owner 02.11.2026, phone and narrow screens): the "Before you write" card sits above the letter; less space between the intro text and the first card */
@media (max-width:900px){
  .ct-grid{display:flex;flex-direction:column;gap:22px}
  .ct-side{display:contents}
  .ct-side>.ct-card:first-child{order:-1}
  .ct-side>.ct-card{width:100%;box-sizing:border-box}
}
@media (max-width:700px){
  .ct-hero{padding-bottom:118px!important}
  .ct-desk{margin-top:-64px!important}
}