/* Contact page styles. Owned by the contact page agent. Shared classes live in ../style.css (see INNER-PAGE KIT); do not redefine them here. */
/* Little text by design: the page works through scale (outline numerals, mega headline) and space. Animated: transform, opacity, clip-path, translate, scale only. */

/* ---------- 01 Directly / 02 Elsewhere ---------- */
.way { display: grid; row-gap: clamp(14px, 2vw, 24px); align-items: start; }
.way + .way { margin-top: clamp(56px, 9vw, 140px); }
.way-n { font: italic 300 clamp(4.6rem, 17vw, 17rem)/.8 var(--serif); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.4px var(--mist); }
.way + .way .way-n { -webkit-text-stroke-color: var(--orange); }
.way-h { font: 300 clamp(2.6rem, 7.2vw, 7.4rem)/1 var(--serif); letter-spacing: -.025em; }
.way-h em { font-weight: 400; }
.way-note { max-width: 20ch; font: 300 clamp(1.7rem, 3.4vw, 3.2rem)/1.15 var(--serif); letter-spacing: -.015em; color: var(--mist); }
.way-note em { font-weight: 400; color: var(--orange); }
.way-mail { max-width: none; overflow-wrap: anywhere; font-size: clamp(1.2rem, 4.7vw, 2.2rem); }
.way-mail a { display: inline-block; min-height: 44px; padding: .35em 0; font-style: italic; font-weight: 400; color: var(--orange); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.way-mail a:hover { color: var(--cream); }

/* external links: the kit's magnetic pill; the wash grows out of the arrow disc (clip-path), the disc turns (kit) */
.ext { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0px, .6vw, 8px); list-style: none; padding: 0; }
.ext .mag-wrap { margin-top: 0; }
.ext .mag { position: relative; isolation: isolate; overflow: hidden; transition: translate .4s var(--ease), scale .25s var(--ease); }
.ext .mag::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--mist); clip-path: circle(0 at calc(100% - .8rem - .92em) 50%); transition: clip-path .6s var(--ease); }
.ext .mag:hover::before, .ext .mag:focus-visible::before { clip-path: circle(150% at calc(100% - .8rem - .92em) 50%); }
.ext .mag:active { scale: .965; }

/* ---------- closing: mega headline + one calm portrait ---------- */
.close { padding-bottom: clamp(72px, 10vw, 150px); }
.close .mega { font-size: clamp(3rem, 11vw, 12rem); }
.c1, .c2 { display: block; }
.c2 { padding-inline-start: .55em; }
.close-photo { margin-top: clamp(40px, 6vw, 96px); aspect-ratio: 5 / 4; }
.close-photo img { object-position: 50% 50%; }
.close-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(14, 26, 94, .7) 0, rgba(14, 26, 94, 0) 48%); }
.close .arrow-link { margin-top: clamp(28px, 4vw, 56px); padding: 1rem 0; }   /* 44px+ touch target */

/* ---------- widths ---------- */
@media (min-width: 640px) {
  .way > :where(:not(.bow)), .close .mega { max-width: 66%; }   /* text stays left of the strings (72%) */
}
@media (min-width: 800px) {
  .way { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(18px, 2.4vw, 36px); }
  .way > :where(:not(.bow)) { max-width: none; }
  .way-n { grid-column: 1 / 4; grid-row: 1 / 3; }
  .way-h, .way-note, .ext { grid-column: 4 / 9; }
  .close .inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); align-items: end; }
  .close .mega { grid-column: 1 / 9; grid-row: 1; max-width: none; }
  .close-photo { grid-column: 5 / 13; grid-row: 2 / 4; }   /* the strings (66% to 78%) cross the cello neck, not the face */
  .close .arrow-link { grid-column: 1 / 5; grid-row: 3; justify-self: start; margin-top: 0; }
}
@media (max-width: 639px) {
  .way-n { font-size: 5.2rem; }
  .close-photo { margin-inline-end: calc(var(--lane) * -1); }   /* full-bleed photo may run into the string lane, like .bio-photo */
}