/* Kontakt: the address to write to as the object of the page, the two doors carried by their house numbers, the island
   with the lines of its coordinates, a signpost onward. Page prefix: ct-. */

.pc { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 11.5px/1.4 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.pc::before { content: ''; width: 22px; height: 1.5px; background: var(--ink); flex: none; }
.ln { display: block; clip-path: inset(-45% -8% -.24em -8%); }
.lni { display: inline-block; }

/* =================== the address to write to =================== */
.ct-open { padding: clamp(28px, 3.4vw, 64px) var(--g) clamp(30px, 3vw, 50px); }
.ct-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.2vw; row-gap: 26px; align-items: end; }
.ct-tl { grid-column: 1 / 7; }
.ct-tr { grid-column: 8 / 13; }
.ct-kick { display: flex; align-items: center; gap: 12px; font: 600 12.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.ct-kick::before { content: ''; width: 22px; height: 1.6px; background: currentColor; flex: none; }
.ct-h1 { margin: clamp(12px, 1.4vw, 22px) 0 0 -.04em; font: 900 clamp(46px, 5.6vw, 104px)/.9 var(--fd); letter-spacing: -.037em; }
.ct-h1 .lni { text-wrap: balance; }
.js .ct-h1 .lni { animation: ct-rise 1.2s var(--ease) .05s both; }
@keyframes ct-rise { from { transform: translateY(112%); } to { transform: none; } }
.ct-lead { max-width: 26em; font: 500 clamp(17px, 1.35vw, 20.5px)/1.5 var(--ft); color: var(--ink2); text-wrap: pretty; }
.ct-who { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.ct-who-l { font: 600 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.ct-names { font: 800 clamp(22px, 1.9vw, 30px)/1.2 var(--fd); letter-spacing: -.012em; color: var(--green); }
/* the e-mail: fitted to the width by the script (--mfs), one tap opens it */
.ct-mail { display: block; width: fit-content; max-width: 100%; margin-top: clamp(34px, 3.8vw, 66px); color: var(--ink); text-decoration: none; font: 900 var(--mfs, calc((100vw - 2 * var(--g)) / 9.9))/.94 var(--fd); letter-spacing: -.04em; }
.ct-m1 { display: block; width: fit-content; white-space: nowrap; margin-left: -.035em; padding-bottom: .05em; background: linear-gradient(var(--terra), var(--terra)) 0 100% / 0 .045em no-repeat; transition: background-size .9s var(--ease); }
.ct-m2 { display: flex; align-items: center; justify-content: flex-end; gap: .18em; margin-top: .02em; color: var(--green); white-space: nowrap; }
.ct-mgo { display: grid; place-items: center; flex: none; width: .74em; height: .74em; border-radius: 50%; background: var(--terra); color: #FFF8EF; transition: transform .7s var(--ease); }
.ct-mgo svg { width: .32em; height: .32em; }
.ct-mail:hover .ct-m1, .ct-mail:focus-visible .ct-m1 { background-size: 100% .045em; }
.ct-mail:hover .ct-mgo, .ct-mail:focus-visible .ct-mgo { transform: rotate(-45deg); }
.ct-ch { display: inline-block; }
.js .ct-m1.split .ct-ch, .js .ct-m2t.split .ct-ch { animation: ct-rise 1s var(--ease) both; animation-delay: calc(var(--i) * 28ms + .25s); }
.ct-m1.split, .ct-m2t.split { clip-path: inset(-18% -3% -24% -3%); }
.ct-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: clamp(30px, 3.2vw, 52px); }
.ct-copy { gap: 12px; min-height: 64px; padding: 0 30px 0 24px; font-size: 17px; }
.ct-copy svg { width: 22px; height: 22px; }
.ct-copy.done { background: var(--green); border-color: var(--green); color: var(--lime); }
.ct-copied { font: 600 14.5px/1.3 var(--ft); color: var(--green); }
.ct-crumbs { margin-top: clamp(36px, 3.6vw, 64px); padding-top: 16px; border-top: 1px solid var(--rule); }

/* =================== the town where both doors are =================== */
.ct-town-ph { margin: clamp(20px, 3vw, 50px) clamp(8px, 1.2vw, 18px) 0; }
.ct-tf { position: relative; height: min(78vh, 56vw); overflow: hidden; border-radius: clamp(14px, 1.8vw, 26px); background: #cbbfa8; }
.ct-tz { position: absolute; left: 0; right: 0; top: -9%; bottom: -9%; will-change: transform; }
.ct-tz img { width: 100%; height: 100%; object-fit: cover; }
.ct-town-ph .pc { margin-left: calc(var(--g) - clamp(8px, 1.2vw, 18px)); }

/* =================== the two doors =================== */
.ct-doors { padding: clamp(100px, 11vw, 180px) var(--g) clamp(70px, 8vw, 130px); }
.ct-dhd { max-width: 1000px; }
.ct-house { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.2vw; align-items: end; margin-top: clamp(60px, 7vw, 120px); }
.ct-num { margin: 0; font: 900 clamp(240px, 33vw, 600px)/.74 var(--fd); letter-spacing: -.065em; color: var(--ink); }
.ct-num span { display: block; }
.js .ct-num.rv { opacity: 1; transform: none; clip-path: inset(-10% -4% -6% -4%); }
.js .ct-num.rv span { transform: translateY(102%); transition: transform 1.5s var(--ease); }
.js .ct-num.rv.in span { transform: none; }
.ct-hw { font: 700 12.5px/1.4 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--green); }
.ct-st { margin: 10px 0 0 -.03em; font: 900 clamp(34px, 3.4vw, 62px)/.98 var(--fd); letter-spacing: -.032em; text-wrap: balance; }
.ct-town { margin-top: 10px; font: 500 clamp(16.5px, 1.25vw, 19px)/1.4 var(--ft); color: var(--ink2); }
.ct-apts { margin-top: 26px; border-top: 1.6px solid var(--ink); }
.ct-ap { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 14px; padding: 15px 0 16px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.ct-an { font: 850 clamp(24px, 2.2vw, 34px)/1.05 var(--fd); letter-spacing: -.02em; transition: transform .6s var(--ease); }
.ct-an-a { color: var(--green); }
.ct-as { grid-column: 1; display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 7px; font: 600 12px/1.45 var(--ft); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.ct-ag { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(34, 28, 22, .3); transition: background-color .35s, border-color .35s, color .35s; }
.ct-ag svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.ct-ap:hover .ct-an { transform: translateX(6px); }
.ct-ap:hover .ct-ag { background: var(--terra); border-color: var(--terra); color: #FFF8EF; }
.ct-ph { margin: 0; }
.ct-ph img { width: 100%; height: auto; border-radius: 3px; }
.ct-arch img { border-radius: 999px 999px 3px 3px; }
/* 3: the number, the words, the arched entrance */
.ct-ha { row-gap: clamp(30px, 3vw, 50px); }
.ct-ha .ct-num { grid-column: 1 / 5; grid-row: 1 / span 2; }
.ct-ha .ct-street { grid-column: 5 / 8; grid-row: 1; }
.ct-ha .ct-hx { grid-column: 5 / 9; grid-row: 2; padding-bottom: clamp(4px, 1vw, 16px); }
.ct-ha .ct-arch { grid-column: 9 / 13; grid-row: 1 / span 2; }
/* 27: the words and the number over the two entrances */
.ct-hb { row-gap: clamp(40px, 4vw, 70px); }
.ct-hb .ct-hx { grid-column: 1 / 6; grid-row: 1; padding-bottom: clamp(4px, 1vw, 16px); }
.ct-hb .ct-num { grid-column: 6 / 13; grid-row: 1; justify-self: end; }
.ct-hb .ct-p1 { grid-column: 1 / 8; grid-row: 2; align-self: start; }
.ct-hb .ct-p2 { grid-column: 9 / 13; grid-row: 2; align-self: start; margin-top: clamp(60px, 9vw, 170px); }

/* =================== the island =================== */
.ct-where { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.2vw; row-gap: 50px; align-items: center; padding: clamp(90px, 10vw, 160px) var(--g); }
.ct-wx { grid-column: 1 / 5; }
.ct-wh { font-size: clamp(38px, 4vw, 74px); }
.ct-co { margin: 26px 0 26px; font: 850 clamp(22px, 2vw, 32px)/1 var(--fd); letter-spacing: -.01em; }
.ct-co span { display: inline-block; padding-top: 14px; border-top: 1.6px solid var(--ink); }
.ct-map { grid-column: 6 / 13; }
.ct-grat line { stroke: var(--terra); stroke-width: 1.3; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.ct-grat text { font: 700 4.6px/1 var(--ft); font-stretch: 75%; letter-spacing: .1em; fill: var(--terra); }

/* =================== onward =================== */
.ct-next { padding: clamp(90px, 10vw, 160px) var(--g) clamp(100px, 11vw, 170px); }
.ct-sign { margin-top: clamp(36px, 4vw, 64px); border-top: 1.6px solid var(--ink); }
.ct-sg { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1fr) 64px; align-items: center; column-gap: 2.2vw; padding: clamp(22px, 2.4vw, 38px) 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.ct-sg::before { content: ''; position: absolute; inset: 0 calc(var(--g) * -1); z-index: -1; background-color: var(--plaster); background-image: var(--tex); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--door); }
.ct-sg:hover::before, .ct-sg:focus-visible::before { transform: none; }
.ct-sgn { font: 600 13px/1 var(--ft); font-stretch: 75%; letter-spacing: .15em; color: var(--terra); }
.ct-sgt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; column-gap: 2.2vw; row-gap: 8px; }
.ct-sgh { font: 900 clamp(40px, 5vw, 92px)/.95 var(--fd); letter-spacing: -.035em; transition: transform .7s var(--ease); }
.ct-sgl { max-width: 26em; font: 500 clamp(16.5px, 1.3vw, 19.5px)/1.5 var(--ft); color: var(--ink2); }
.ct-sgg { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(34, 28, 22, .3); transition: background-color .35s, border-color .35s, color .35s; }
.ct-sgg svg { width: 22px; height: 22px; }
.ct-sg-enq .ct-sgg { background: var(--green); border-color: var(--green); color: var(--lime); }
.ct-sg:hover .ct-sgh { transform: translateX(12px); }
.ct-sg:hover .ct-sgg { background: var(--terra); border-color: var(--terra); color: #FFF8EF; }

/* =================== responsive =================== */
@media (max-width: 999px) {
  .ct-tl, .ct-tr { grid-column: 1 / 13; }
  .ct-ha .ct-num { grid-column: 1 / 6; grid-row: 1; }
  .ct-ha .ct-hx { grid-column: 6 / 13; grid-row: 1; }
  .ct-ha .ct-arch { grid-column: 1 / 8; grid-row: 2; margin-top: 30px; }
  .ct-ha .ct-street { grid-column: 9 / 13; grid-row: 2; align-self: end; }
  .ct-hb .ct-hx { grid-column: 1 / 8; }
  .ct-hb .ct-num { grid-column: 8 / 13; }
  .ct-hb .ct-p1 { grid-column: 1 / 13; }
  .ct-hb .ct-p2 { grid-column: 5 / 13; grid-row: 3; margin-top: 0; }
  .ct-wx, .ct-map { grid-column: 1 / 13; }
  .ct-sgt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .ct-town-ph { margin: 10px 8px 0; }
  .ct-tf { height: 62vh; height: 62svh; border-radius: 14px; }
  .ct-h1 { font-size: clamp(44px, 13vw, 64px); }
  .ct-mail { font-size: var(--mfs, calc((100vw - 2 * var(--g)) / 9.9)); }
  .ct-acts { gap: 12px; }
  .ct-acts .btn, .ct-acts .door { width: 100%; }
  .ct-copy { min-height: 56px; }
  .ct-house { row-gap: 26px; }
  .ct-num { font-size: clamp(170px, 56vw, 260px); }
  .ct-ha .ct-num, .ct-ha .ct-hx, .ct-hb .ct-hx, .ct-hb .ct-num { grid-column: 1 / 13; }
  .ct-hb .ct-hx { grid-row: 2; }
  .ct-hb .ct-num { grid-row: 1; justify-self: start; }
  .ct-hb .ct-p1 { grid-row: 3; margin: 0 calc(var(--g) * -1); }
  .ct-hb .ct-p1 img { border-radius: 0; }
  .ct-hb .ct-p1 .pc { margin-left: var(--g); }
  .ct-hb .ct-p2 { grid-row: 4; grid-column: 3 / 13; }
  .ct-ha .ct-num { grid-row: 1; }
  .ct-ha .ct-hx { grid-row: 2; }
  .ct-ha .ct-arch { grid-column: 1 / 9; grid-row: 3; margin-top: 10px; }
  .ct-ha .ct-street { grid-column: 7 / 13; grid-row: 4; margin-top: -40px; }
  .ct-st { font-size: clamp(34px, 10.6vw, 46px); }
  .ct-sg { grid-template-columns: 30px minmax(0, 1fr) 48px; column-gap: 14px; }
  .ct-sgh { font-size: clamp(36px, 11vw, 50px); }
  .ct-sgl { font-size: 15.5px; }
  .ct-sgg { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ct-h1 .lni, .js .ct-m1.split .ct-ch, .js .ct-m2t.split .ct-ch { animation: none; }
  .js .ct-num.rv span { transform: none; transition: none; }
  .ct-m1, .ct-mgo, .ct-sg::before, .ct-sgh, .ct-an { transition: none; }
}