/* The Thursday Times: Contact (page-templates/contact.php). Builds on about.css. */

/* ---------------------------------------------------------------------- hero */
.ct-hero { padding-block: clamp(80px, 11vw, 160px) clamp(64px, 8vw, 112px); }
.ct-hero__in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-6); }
.ct-title { margin: 0; max-width: 12em; font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 7vw, 108px); line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; }
.ct-router { width: 100%; }
.ct-router__ask { margin: 0 0 var(--tt-space-3); font-family: var(--font-ui); font-size: 18px; line-height: 24px; color: var(--tt-text-secondary); }
.ct-router__opts { display: flex; flex-wrap: wrap; gap: var(--tt-space-2); }
.ct-opt { appearance: none; min-height: 48px; padding: 0 var(--tt-space-4); border: 1.5px solid var(--tt-paper); border-radius: 0; background: transparent; color: var(--tt-paper); font-family: var(--font-ui); font-size: 17px; font-weight: 700; cursor: pointer; transition: background var(--tt-move-fast, 300ms) var(--ab-ease), color var(--tt-move-fast, 300ms) var(--ab-ease); }
.ct-opt:hover { background: #1c1c1c; }
.ct-opt[aria-pressed="true"] { background: var(--tt-paper); color: var(--tt-ink); }
.ct-answer { margin-top: var(--tt-space-7); padding-top: var(--tt-space-5); border-top: 1px solid var(--tt-border); }
.ct-answer__desk { margin: 0; font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--tt-text-secondary); }
.ct-answer__email { --ab-cap: 0.686em; display: flex; align-items: baseline; flex-wrap: wrap; margin: var(--tt-space-3) 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 5.6vw, 84px); line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ct-answer__email a { color: var(--tt-paper); text-decoration: none; }
.ct-answer__email a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: var(--tt-orange); }
.ct-cursor { position: relative; display: inline-block; flex: none; width: calc(var(--ab-cap) * 0.2354); height: var(--ab-cap); margin-left: 0.06em; }
.ct-cursor span { position: absolute; left: 0; width: 100%; aspect-ratio: 1; background: var(--tt-orange); }
.ct-cursor span:first-child { top: 19.16%; }
.ct-cursor span:last-child { bottom: 19.16%; }
.ct-cursor.is-idle { animation: ab-blink var(--tt-blink, 2s) steps(1, end) infinite; }
.ct-answer__line { margin: 0; max-width: 34em; font-family: var(--font-deck); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.38; }
.ct-answer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tt-space-4); margin-top: var(--tt-space-5); }
.ct-button { min-height: 52px; font-size: 17px; }
.ct-hero .tt-button--main { background: var(--tt-paper); color: var(--tt-ink); border-color: var(--tt-paper); }
.ct-hero .tt-button--secondary { color: var(--tt-paper); border-color: var(--tt-paper); }
.ct-hero .tt-button--secondary:hover, .ct-hero .tt-button--secondary:focus-visible { background: var(--tt-paper); color: var(--tt-ink); }
.ct-answer__more { font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--tt-paper); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--tt-orange); }

/* --------------------------------------------------------------- directory */
.ct-rows { list-style: none; margin: var(--tt-space-8) 0 0; padding: 0; border-bottom: 1px solid var(--tt-border); }
.ct-row { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); align-items: baseline; gap: var(--tt-space-5); padding: var(--tt-space-5) 0; }
.ct-row::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--tt-border); transform-origin: 0 50%; }
.ct-row__want { font-family: var(--font-display); font-weight: 900; font-size: clamp(21px, 2vw, 27px); line-height: 1.15; letter-spacing: -0.02em; }
.ct-row__desk { font-family: var(--font-ui); font-size: 16px; color: var(--tt-text-secondary); }
.ct-row__email { font-family: var(--font-text); font-size: 19px; color: var(--tt-text); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--tt-orange); overflow-wrap: anywhere; }
.ab-ready .ct-row::before { transition: transform 0.7s var(--ab-ease) calc(var(--i) * 0.07s); }
.ab-ready .ct-row > * { transition: opacity 0.6s var(--ab-ease) calc(0.15s + var(--i) * 0.07s), translate 0.6s var(--ab-ease) calc(0.15s + var(--i) * 0.07s); }
.ab-ready .ct-row:not(.is-in)::before { transform: scaleX(0); }
.ab-ready .ct-row:not(.is-in) > * { opacity: 0; translate: -24px 0; }

/* ----------------------------------------------------------------- networks */
.ct-nets { list-style: none; margin: var(--tt-space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-space-3); }
.ct-net a { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--tt-space-4); align-items: center; min-height: 88px; padding: var(--tt-space-4) var(--tt-space-5); border: 1.5px solid var(--tt-paper); color: var(--tt-paper); text-decoration: none; transition: background var(--tt-move-fast, 300ms) var(--ab-ease), color var(--tt-move-fast, 300ms) var(--ab-ease); }
.ct-net .tt-social-icon { grid-row: 1 / 3; width: 30px; height: 30px; fill: currentColor; }
.ct-net__name { font-family: var(--font-display); font-weight: 900; font-size: 21px; line-height: 24px; letter-spacing: -0.02em; }
.ct-net__handle { font-family: var(--font-ui); font-size: 15px; color: var(--tt-text-secondary); }
.ct-net a:hover, .ct-net a:focus-visible { background: var(--tt-paper); color: var(--tt-ink); }
.ct-net a:hover .ct-net__handle, .ct-net a:focus-visible .ct-net__handle { color: var(--tt-graphite); }
.ab-ready .ct-net { transition: opacity 0.5s var(--ab-ease) calc(var(--i) * 0.06s), translate 0.5s var(--ab-ease) calc(var(--i) * 0.06s); }
.ab-ready .ct-net:not(.is-in) { opacity: 0; translate: 0 20px; }

@media (max-width: 1023px) { .ct-nets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ct-row__email { grid-column: 1 / -1; } }
@media (max-width: 767px) {
	.ct-nets { grid-template-columns: minmax(0, 1fr); }
	.ct-row { grid-template-columns: minmax(0, 1fr); gap: var(--tt-space-2); }
	.ct-opt { flex: 1 1 100%; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ct-cursor { display: none; } }