/* ==========================================================================
   Contact page (/contact) in the portfolio look. Loaded after events.css on /contact only (the page links both); the tokens, the
   --th-* theme variables and the ax- utilities come from site.css, the slim header, the section colour (data-section-bg="dark"), the
   stripe slot, the dotted screen, the link buttons (.pf-btn) and the fixed footer that is uncovered at the very end come from
   events.css (they are keyed on body.page-portfolio and .pf-main / .event-section). This file only lays the page out:

     - ONE section, the dark tone, a one-row stripe header (CONTACT) and the label Nº001 / CONTACT;
     - the contacts on the left: a big light title, a mono line, two groups (почта, соц. сети) whose rows are the pxpush bottom
       buttons (thin rule on top, a mono key and the value at the left, the arrow at the right);
     - girlphone.gif on the very right, flush with the page edge (reduced motion: its first frame);
     - the colours of that gif (the --ct-* tokens below): its dark blue on the interface, its pink on the hover states;
     - only the key (telegram, discord, ...) and the arrow of a row are shown; the value comes in on hover / keyboard focus
       (always shown where there is no hover: touch);
     - the entrance (contact.js adds .pf-anim and then .is-in item by item: a quick staggered fade / slide, the rules drawn from the left,
       the picture opened from the top). Without the script, or under reduced motion, everything is simply there.
   ========================================================================== */

/* ---------- the colours of girlphone.gif ----------
   Sampled with PIL over all ten frames (quantised, weighted by area): the girl's sweater is a dark blue (#444780 / #3e4173 / #3b3c69,
   hue ~238), her hair clip and the phone a soft pink (light parts, and a more saturated one in the shading), the backdrop a dark warm brown
   (#523433 / #42353c). The page takes the blue and the pink: the section turns to a deep blue made from the sweater's shade, the
   interface (rules, fills, labels, dots) is the sweater blue and its lighter reading, the hover states are pink.
   The only pink colours in the stylesheets: exactly these named tokens, declared in this one block, and used nowhere but in this file
   (tests/palette.test.js; the palette test forbids pink and violet everywhere else). Contrast of the pairs used (computed in that test): text on --ct-bg 15:1, --ct-navy-lit on
   --ct-bg 6.5:1, pink on --ct-navy (the hover fill) 5.1:1. */
body.page-contact {
  --ct-bg: #1b1c36;           /* the section: the sweater's shade, darkened */
  --ct-dots: #2e3059;         /* the dot texture, a lighter step of it */
  --ct-navy: #444780;         /* the sweater: the hover fill of a cell, the header rules */
  --ct-navy-lit: #9a9dd8;     /* the sweater in light: rules and small labels on --ct-bg */
  --ct-pink: #e9bcd1;         /* the phone / hair clip: hover text and arrows (on --ct-navy) */
  --ct-pink-deep: #e793af;    /* its saturated part: the small markers */
}
body.page-contact {
  --pf-stripe-rows: 1;                      /* a single row: the contacts must be in the first screen */
  --pf-wrap-pt: clamp(24px, 4vw, 64px);
  --pf-end-pad: clamp(64px, 12vh, 140px);
}

/* the section wears the blues: the ground, the quiet ink (labels, the rule under the stripe) and the dot texture (portfolio-dots.js
   reads --pf-bg / --pf-dots from the section) */
body.page-contact .event-section[data-section-bg="dark"] {
  --pf-bg: var(--ct-bg);
  --pf-soft: var(--ct-navy-lit);
  --pf-dots: var(--ct-dots);
}
body.page-contact ::selection {
  background: var(--ct-pink);
  color: var(--ct-bg);
}

/* the header (only here): the navy of the section itself, light text; the tab rules and the fills that rise on hover are the sweater
   blue, the arrow of a tab turns pink on its fill, the wordmark is underlined in the sweater blue (pink on hover); the call to
   action keeps its bright blue and gets a pale hairline, as the blue alone would melt into the navy */
body.page-contact {
  --hdr-bg: var(--ct-bg);
  --hdr-paint: var(--ct-bg);
  --hdr-fg: var(--yh-paper-hi);
  --hdr-soft: var(--ct-navy-lit);
  --hdr-line: var(--ct-navy);
  --hdr-fill: var(--ct-navy);
  --hdr-fill-fg: var(--yh-paper-hi);
  --hdr-hover: var(--yh-paper-hi);
  --hdr-led: var(--yh-accent-lit);
  --hdr-cta-ring: var(--yh-accent-lit);
  /* the footer (fixed under the content, uncovered at the end) is the same navy; it reads --hdr-* through --ftr-* (site.css), only the
     icons' hairline is its own: the pale sweater blue */
  --ftr-edge: var(--ct-navy-lit);
}
body.page-contact .header-logo {
  text-decoration: underline;
  text-decoration-color: var(--ct-navy);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
body.page-contact .header-logo:hover,
body.page-contact .header-logo:focus-visible {
  text-decoration-color: var(--ct-pink-deep);
}
body.page-contact .header-nav a:not(.header-nav__cta):hover::after,
body.page-contact .header-nav a:not(.header-nav__cta):focus-visible::after,
body.page-contact .header-nav a:not(.header-nav__cta)[aria-current="page"]::after {
  color: var(--ct-pink);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(240px, 33vw, 560px));
  align-items: start;
  gap: clamp(24px, 4vw, 80px);
  padding-top: var(--pf-wrap-pt);
  margin-right: calc(-1 * var(--yh-g));      /* the picture touches the right edge of the page */
}
.contact-body {
  min-width: 0;
  max-width: 46rem;
  margin-left: clamp(0px, 13vw, 240px);       /* clear of the section label in the left column */
  color: var(--pf-fg);
}

.contact-title {
  margin: 0 0 clamp(12px, 1.4vw, 24px);
  color: var(--pf-fg);
  font-family: var(--hud-display);
  font-size: clamp(2rem, 4.4vw, 5.6rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.contact-subtitle {
  margin: 0 0 clamp(24px, 3vw, 48px);
  color: var(--pf-fg);
  font-family: var(--hud-mono);
  font-size: clamp(0.82rem, 1.19vw, 1.2rem);
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.contact-group {
  margin: 0 0 clamp(16px, 2vw, 32px);
}
/* group label: a square bullet and a small mono caps line */
.contact-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--pf-soft);
  font-family: var(--hud-mono);
  font-size: clamp(0.72rem, 0.85vw, 1rem);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.contact-section-title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--ct-pink-deep);
}
body.page-contact .pf-label::before {
  background: var(--ct-pink-deep);
}

/* the rows: the pxpush bottom buttons of events.css (.pf-btn) with a key column, the value and, for the mail, a small note */
.contact-row:last-child {
  border-bottom: 1px solid var(--ct-navy-lit);   /* (on the row, so it comes in with it) */
}
.contact-row {
  gap: clamp(12px, 1.6vw, 24px);
}
/* the blues: the rule over a row, the fill that rises on hover; on it the text stays light, the key and the arrow turn pink */
body.page-contact .contact-row::after {
  background: var(--ct-navy-lit);
}
body.page-contact .contact-row::before {
  background: var(--ct-navy);
}
body.page-contact .contact-row:hover,
body.page-contact .contact-row:focus-visible {
  color: var(--pf-fg);
}
body.page-contact .contact-row:focus-visible {
  outline: 2px solid var(--ct-pink);
}
body.page-contact .contact-row:hover .pf-btn__arrow,
body.page-contact .contact-row:focus-visible .pf-btn__arrow,
body.page-contact .contact-row:hover .contact-key,
body.page-contact .contact-row:focus-visible .contact-key {
  color: var(--ct-pink);
}
.contact-row .pf-btn__label {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: baseline;
  gap: clamp(12px, 2vw, 32px);
}
.contact-key {
  flex: 0 0 8ch;
  color: var(--pf-soft);
  font-family: var(--hud-mono);
  font-weight: 400;
  text-transform: lowercase;
}
.contact-value {
  min-width: 0;
  margin-left: auto;          /* the value stands at the right of its row, next to the arrow */
  overflow-wrap: anywhere;
  text-align: right;
}
.contact-note,
.contact-hint {
  flex: none;
  font-family: var(--hud-mono);
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---------- the mail row: link, address, copy button ----------
   The one row that is not a single link: «email (написать) ↗» is the mailto link; the address is plain text beside it, ALWAYS shown (the
   one value people must copy; the other rows keep the hover reveal below), selectable with one click or a double click (user-select: all,
   a text cursor); then a small «копировать» button (contact.js; it is not shown without the script, where it could do nothing). The
   row still fills on hover and when the link or the button has focus. */

.contact-row--mail {
  flex-wrap: wrap;
  cursor: default;
}
.contact-mail {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  gap: clamp(8px, 1.2vw, 16px);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.contact-address {
  flex: 1 1 12ch;
  min-width: 0;
  margin-left: auto;
  overflow-wrap: anywhere;
  text-align: right;
  cursor: text;
  -webkit-user-select: all;
  user-select: all;
}
.contact-copy {
  flex: none;
  width: auto;
  min-height: 0;
  padding: 4px 10px;
  border: 1px solid var(--ct-navy-lit);
  font-size: 0.82em;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.contact-copy::after {
  display: none;               /* (no rule over a small button: it has its own border) */
}
body.page-contact .contact-copy::before {
  background: var(--ct-pink);
}
body.page-contact .contact-copy:hover,
body.page-contact .contact-copy:focus-visible {
  border-color: var(--ct-pink);
}
body.page-contact .contact-copy:focus-visible {
  outline: 2px solid var(--ct-pink);
  outline-offset: 2px;
}
.contact-copy .pf-btn__label {
  min-width: 11ch;             /* «скопировано» is one letter longer than «копировать»: the button keeps its width */
  text-align: center;
}
body.page-contact .contact-copy.is-copied {
  border-color: var(--ct-pink);
  color: var(--ct-pink);
}
body.page-contact .contact-copy.is-copied:hover,
body.page-contact .contact-copy.is-copied:focus-visible {
  color: var(--ct-bg);
}
.contact-copy-buffer {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
html:not(.pf-js) .contact-copy {
  display: none;
}
body.page-contact .contact-row--mail:focus-within::before {
  transform: scaleY(1);
  transform-origin: 50% 100%;
}
body.page-contact .contact-row--mail:focus-within {
  color: var(--pf-fg);
}
body.page-contact .contact-row--mail:hover .contact-key,
body.page-contact .contact-row--mail:focus-within .contact-key,
body.page-contact .contact-row--mail:focus-within .pf-btn__arrow {
  color: var(--ct-pink);
}
body.page-contact .contact-mail:focus-visible {
  outline: 2px solid var(--ct-pink);
  outline-offset: 2px;
}
@media (max-width: 719px) {
  .contact-mail {
    flex: 1 1 100%;
  }
  .contact-address {
    flex-basis: 0;
    text-align: left;
  }
}

/* ---------- the values come in on hover ----------
   By default a row shows its key (telegram, discord, ...) and the arrow only; the value (the handle, the address, and the mail's note)
   slides in from the arrow's side, clipped open, when the row is hovered or has keyboard focus (contact.js rolls its letters in as
   it opens). It stays in the document and in the accessibility tree (opacity and a clip, never display / visibility: the link reads
   "telegram @cyiiiectba" to a screen reader whether or not it is shown) and it takes its room, so nothing shifts. Only where a pointer can
   really hover ((hover: hover) and a fine pointer) is it hidden: on touch, and wherever hover is not available, every value is just shown. */

@media (hover: hover) and (pointer: fine) {
  .contact-row .contact-value,
  .contact-row .contact-note {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transform: translateX(20px);
    transition: opacity 0.2s ease, clip-path 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .contact-row:hover .contact-value,
  .contact-row:focus-visible .contact-value,
  .contact-row:hover .contact-note,
  .contact-row:focus-visible .contact-note {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}

/* the animation: a plain picture on the far right */
.contact-gif {
  min-width: 0;
  margin: 0;
}
.contact-gif img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- the entrance (contact.js) ---------- */

.pf-anim .contact-item {
  opacity: 0;
  transform: translateY(10px);
}
.pf-anim .contact-item.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* the rule over a row is drawn from the left once the row is in */
.pf-anim .contact-row::after {
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pf-anim .contact-row.is-in::after {
  transform: scaleX(1);
}
/* the picture opens from the top edge downwards instead of sliding */
.pf-anim .contact-gif {
  clip-path: inset(0 0 100% 0);
  transform: none;
}
.pf-anim .contact-gif.is-in {
  clip-path: inset(0 0 0 0);
  transition: opacity 0.25s ease, clip-path 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- small screens: one column, the picture under the contacts ---------- */

@media (max-width: 899px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .contact-body {
    max-width: none;
    margin-left: 0;
  }
  .contact-gif {
    width: min(100%, 420px);
    margin-left: auto;
  }
}
@media (max-width: 719px) {
  .contact-layout {
    margin-right: -12px;
    padding-top: clamp(8px, 3vw, 16px);
  }
  .contact-key {
    flex-basis: 7ch;
  }
}

/* ---------- reduced motion: no entrance at all, every contact is simply there ---------- */

@media (prefers-reduced-motion: reduce) {
  .contact-row .contact-value,
  .contact-row .contact-note {
    transition: none;
  }
  .pf-anim .contact-item,
  .pf-anim .contact-gif {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .pf-anim .contact-row::after {
    transform: scaleX(1);
    transition: none;
  }
}