/* STARS NETWORK · /contact
   A typographic poster: the address is the page. Its @ is a solid chrome
   letter from the same face, lying over the real one (which stays in the
   text for copying and for screen readers). Then the other ways in, set as
   big running lines, and the message written as a letter, the quietest type
   on the site after all that volume. */

/* ------------------------------------------------------------------ hero */
.k-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 4vh) var(--pad) calc(5vh + env(safe-area-inset-bottom, 0px)); }
.k-hero__title { font-size: clamp(38px, 3.8vw, 70px); line-height: 1; letter-spacing: -0.016em; margin: 0; }
.k-hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.k-hero__title .line > span { display: block; }
.js .k-hero__title .line > span { transform: translate3d(0, 108%, 0); }
.intro .k-hero__title .line > span { transform: none; transition: transform 1s var(--ease-out) .15s; }
.k-hero__sub { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--bone-dim); max-width: 34ch; }

.k-address { margin-top: auto; padding-top: 6vh; }
.k-mail { display: block; width: fit-content; max-width: 100%; font-family: var(--serif); font-weight: 400; color: var(--bone);
  font-size: clamp(48px, 9.4vw, 178px); line-height: .88; letter-spacing: -0.036em; }
.k-mail__line { display: block; }
.k-mail__line + .k-mail__line { padding-left: 0.02em; }
.k-at { position: relative; transition: color .9s linear; }
.has-at .k-at { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
html.is-dragging .k-at { cursor: grabbing; }
.k-at__base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.has-at .k-at { color: transparent; }
/* a hairline that draws under the address when it is the thing being pointed at */
.k-mail { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .5s var(--ease-out); padding-bottom: .06em; }
@media (hover: hover) and (pointer: fine) { .k-mail:hover { background-size: 100% 1px; } }
.k-mail:focus-visible { outline-offset: 10px; }
.k-address__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 30px; }
.k-copy { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: rgba(8, 8, 10, .5);
  color: var(--bone); cursor: pointer; font: 600 10px/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: border-color .16s ease, background-color .16s ease, transform .12s var(--ease-out); }
.k-copy svg { width: 14px; height: 14px; }
.k-copy:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .k-copy:hover { border-color: var(--bone); } }
.k-copy.is-copied { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.k-copied { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--bone-dim); }
.k-hint { margin: 0 0 0 auto; font-size: 9.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .6s ease; }
.has-at .k-hint { opacity: 1; }
@media (pointer: coarse) { .k-hint { display: none; } }

/* --------------------------------------------------- the other ways in */
.k-ways { position: relative; padding: 16vh var(--pad) 14vh; display: grid; gap: clamp(14px, 2.6vh, 30px); }
.k-ways__line { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.5vw, 64px); line-height: 1.12; letter-spacing: -0.014em; color: var(--bone-dim); }
.k-ways__line:nth-child(2) { padding-left: 12vw; }
.k-ways__line:nth-child(3) { padding-left: 24vw; }
.k-ways a { color: var(--bone); white-space: nowrap; background: linear-gradient(currentColor, currentColor) no-repeat 0 92% / 100% 1px; transition: background-size .4s var(--ease-out); }
.k-ways a svg { display: inline-block; width: .42em; height: .42em; margin-left: .16em; vertical-align: .08em; transition: transform .25s var(--ease-out); }
.k-ways a[href^="/"] svg { width: .6em; height: .4em; }
@media (hover: hover) and (pointer: fine) { .k-ways a:hover svg { transform: translateX(4px); } }

/* -------------------------------------------------------------- the letter */
.k-letter { position: relative; padding: 14vh var(--pad) 18vh; }
.k-letter > * { max-width: 46rem; margin-left: max(0px, calc(38vw - var(--pad))); }
.k-letter__title { margin-top: 0; margin-bottom: 36px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim); }
.k-form { display: grid; gap: 0; }
.k-field { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 0 18px; border-bottom: 1px solid var(--line); }
.k-field__label { font-family: var(--serif); font-size: clamp(17px, 1.3vw, 21px); color: var(--bone-dim); padding: 14px 0; }
.k-field__cell { min-width: 0; display: grid; gap: 6px; padding-bottom: 8px; }
.k-field__input { width: 100%; min-height: 50px; margin: 0; padding: 12px 0 6px; border: 0; border-radius: 0; background: transparent; color: var(--bone);
  font: 400 clamp(18px, 1.4vw, 23px)/1.35 var(--serif); -webkit-appearance: none; appearance: none; }
.k-field__input::placeholder { color: rgba(236, 230, 216, .38); opacity: 1; }
.k-field__input:focus { outline: none; }
.k-field:focus-within { border-bottom-color: var(--bone); }
.k-field__input:focus-visible { outline: none; }
.k-dear { margin: 44px 0 6px; font-family: var(--serif); font-size: clamp(26px, 2.4vw, 40px); line-height: 1.1; color: var(--bone); }
.k-field.k-field--body { grid-template-columns: 1fr; border-bottom: 0; }
/* ruled like writing paper */
.k-field__input--area { min-height: calc(39px * 6 + 12px); padding: 6px 0 0; resize: vertical; line-height: 39px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 38px, var(--line-soft) 38px, var(--line-soft) 39px);
  background-position: 0 6px; background-attachment: local; }
.k-sign { width: min(30rem, 100%); margin: 40px 0 0 auto; }
.k-sign .k-field:first-child { border-top: 1px solid var(--line); }
.k-field.is-bad { border-bottom-color: var(--bone); }
.k-letter .field__error { margin: 0; }
.k-form__foot { display: grid; gap: 14px; margin-top: 40px; }
.k-send { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; width: min(30rem, 100%); min-height: 60px; margin-left: auto; padding: 0 24px;
  border: 1px solid var(--bone); background: var(--bone); color: var(--ink); cursor: pointer;
  font: 600 10px/1 var(--sans); letter-spacing: var(--track-label); text-transform: uppercase; transition: background-color .16s ease, transform .12s var(--ease-out); }
.k-send svg { width: 16px; height: 10px; }
.k-send:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .k-send:hover { background: #fffaf0; } }
.k-send--link { margin: 30px 0 0; width: auto; }
.k-form.is-busy .cta__spin { display: block; }
.k-form.is-busy .k-send svg { display: none; }
.k-form.is-busy .k-send { cursor: progress; }
.k-form__note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); text-align: right; }
.k-form__note a { color: var(--bone-dim); border-bottom: 1px solid var(--line); }
.k-done__title { font-size: clamp(40px, 4.6vw, 80px); line-height: .96; }
.k-done__body { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--bone-dim); }
.is-done > .k-letter__title { display: none; }

/* ----------------------------------------------------------------- footer */
.k-foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 26px var(--pad) calc(26px + env(safe-area-inset-bottom, 0px));
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.k-foot span { margin-right: auto; }
.k-foot a { transition: color .16s ease; }
@media (hover: hover) and (pointer: fine) { .k-foot a:hover { color: var(--bone); } }
@media (pointer: coarse) { .k-foot { row-gap: 0; } .k-foot > * { display: inline-flex; align-items: center; min-height: 44px; } }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .k-hero__title .line > span { transform: none; opacity: 0; }
  .intro .k-hero__title .line > span { opacity: 1; transition: opacity .5s linear .1s; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .k-mail { font-size: clamp(44px, 14.4vw, 72px); line-height: .92; }
  .k-address__foot { gap: 10px 16px; }
  .k-ways { padding: 11vh var(--pad) 10vh; }
  .k-ways__line { font-size: clamp(24px, 7vw, 34px); }
  .k-ways__line:nth-child(2), .k-ways__line:nth-child(3) { padding-left: 0; }
  .k-letter { padding: 10vh var(--pad) 14vh; }
  .k-letter > * { margin-left: 0; }
  .k-field { grid-template-columns: 5rem minmax(0, 1fr); gap: 0 12px; }
  .k-sign { width: 100%; }
  .k-send { width: 100%; }
  .k-form__note { text-align: left; }
}