/* The Thursday Times: the About page (page-templates/about.php).
   Motion keeps the identity's four rules: the colon stays put (it only blinks, drops into place or stays still);
   straight lines only; a quick move (0.5 to 1.3 s) and a long hold; one blink a second. One curve for all of it. */

@property --ab-m { syntax: "<number>"; inherits: true; initial-value: 0; }

.tt-about { --ab-ease: var(--tt-ease, cubic-bezier(0.7, 0, 0.2, 1)); --ab-drop: 480px; overflow-x: clip; }
.tt-about * { box-sizing: border-box; }

/* ------------------------------------------------------------------ sections */
.ab-sec { padding-block: clamp(72px, 10vw, 144px); background: var(--tt-bg); color: var(--tt-text); }
.ab-sec--ink, .ab-hero { --tt-text: var(--tt-paper); --tt-text-secondary: #a8a8a8; --tt-border: #3a3a3a; --tt-panel: #1c1c1c; background: var(--tt-ink); color: var(--tt-paper); }
html[data-theme="dark"] .ab-sec:not(.ab-sec--ink) { border-top: 1px solid var(--tt-border); }

.ab-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ab-split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.ab-mark .ab-split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

.ab-kick { margin: 0 0 var(--tt-space-5); padding-top: var(--tt-space-4); border-top: var(--tt-rule-section-width, 3px) solid var(--tt-text); font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 500; color: var(--tt-text-secondary); }
.ab-kick span { margin-right: var(--tt-space-2); font-weight: 700; color: var(--tt-text); font-variant-numeric: tabular-nums; }
.ab-h2 { margin: 0; max-width: 17em; font-family: var(--font-display); font-weight: 900; font-size: clamp(32px, 4vw, 54px); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.ab-body { max-width: 34em; margin-top: var(--tt-space-6); font-family: var(--font-text); font-size: 19px; line-height: 31px; }
.ab-body p { margin: 0 0 var(--tt-space-5); }
.ab-body p:last-child { margin-bottom: 0; }
.ab-caption { margin-top: var(--tt-space-3); font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--tt-text-secondary); }
.ab-ur { font-family: var(--font-urdu); font-weight: 600; }

/* The usual entrance: up into place, once, as it comes into view. */
.ab-ready [data-ab-reveal=""] { transition: opacity var(--tt-move, 600ms) var(--ab-ease), translate var(--tt-move, 600ms) var(--ab-ease); }
.ab-ready [data-ab-reveal=""]:not(.is-in) { opacity: 0; translate: 0 32px; }

/* ---------------------------------------------------------------------- hero */
.ab-hero { padding-bottom: clamp(64px, 8vw, 112px); }
.ab-hero__stage { display: grid; place-items: center; min-height: clamp(260px, 50vh, 540px); padding: var(--tt-space-8) var(--tt-margin-desktop) var(--tt-space-6); }
.ab-hero__logo { width: min(900px, 100%); }
.ab-hero__wm { display: block; width: 100%; height: auto; --tt-m: var(--ab-m); }
.ab-hero__wm g { transition: none !important; }
.ab-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tt-space-5); }
.ab-hero__title { margin: 0; max-width: 13em; font-family: var(--font-display); font-weight: 900; font-size: clamp(42px, 6.6vw, 100px); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.ab-hero__deck { margin: 0; max-width: 32em; font-family: var(--font-deck); font-size: clamp(21px, 2.1vw, 28px); line-height: 1.36; }

/* The opening: the colon drops into place, the name opens from it like doors, holds, then closes into T:T. */
.ab-hero__wm { animation: ab-wipe 0.9s var(--ab-ease) 1.15s both, ab-close 0.9s var(--ab-ease) 4.3s forwards; }
.ab-hero__logo { animation: ab-centre 0.9s var(--ab-ease) 4.3s both; }
.ab-hero .tt-wm__dot1 { animation: ab-drop 0.75s var(--ab-ease) 0.2s both; }
.ab-hero .tt-wm__dot2 { animation: ab-drop 0.75s var(--ab-ease) 0.36s both; }
.ab-hero .tt-wm__t1, .ab-hero .tt-wm__rest1 { animation: ab-in-l 0.9s var(--ab-ease) 1.15s both; }
.ab-hero .tt-wm__t2, .ab-hero .tt-wm__rest2 { animation: ab-in-r 0.9s var(--ab-ease) 1.15s both; }
.ab-hero__text > * { animation: ab-rise 0.7s var(--ab-ease) both; }
.ab-hero__text > :nth-child(1) { animation-delay: 1.5s; }
.ab-hero__text > :nth-child(2) { animation-delay: 1.62s; }
.ab-hero__text > :nth-child(3) { animation-delay: 1.74s; }

/* the colon's own window is 60.85% to 62.69% of the wordmark (x 5332 to 5493.5 of 8762.5) */
@keyframes ab-wipe { from { clip-path: inset(-80% 37.31% -20% 60.85%); } to { clip-path: inset(-80% -2% -20% -2%); } }
@keyframes ab-close { to { --ab-m: 1; } }
/* folded, T:T is the first 13.6% of the box; this brings it to the middle */
@keyframes ab-centre { from { translate: 0 0; } to { translate: 43.2% 0; } }
/* each word travels in toward the colon as the window opens away from it, so nothing ever crosses the colon */
@keyframes ab-in-l { from { translate: -360px 0; } to { translate: 0 0; } }
@keyframes ab-in-r { from { translate: 360px 0; } to { translate: 0 0; } }
@keyframes ab-drop {
	0% { translate: 0 calc(-1 * var(--ab-drop)); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	30% { opacity: 1; }
	70% { translate: 0 6%; animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); }
	86% { translate: 0 -2%; }
	100% { translate: 0 0; opacity: 1; }
}
@keyframes ab-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

/* ------------------------------------------------------------------ the mark */
.ab-mark__art { padding: clamp(16px, 3vw, 48px); }
.ab-build { display: block; width: 100%; height: auto; overflow: visible; }
.ab-build rect { fill: var(--tt-text); transform-box: fill-box; }
.ab-build .ab-build__dot { fill: var(--tt-orange); }
.ab-build__arm { transform-origin: 0 50%; }
.ab-build__stem { transform-origin: 50% 0; }
.ab-ready .ab-mark__art .ab-build__arm, .ab-ready .ab-mark__art .ab-build__stem { transition: transform 0.5s var(--ab-ease); }
.ab-ready .ab-mark__art:not(.is-in) .ab-build__arm { transform: scaleX(0); }
.ab-ready .ab-mark__art:not(.is-in) .ab-build__stem { transform: scaleY(0); }
.ab-ready .ab-mark__art:not(.is-in) .ab-build__dot { opacity: 0; }
.ab-mark__art .ab-build__stem1 { transition-delay: 0.42s; }
.ab-mark__art .ab-build__arm2 { transition-delay: 0.84s; }
.ab-mark__art .ab-build__stem2 { transition-delay: 1.26s; }
.ab-mark__art.is-in .ab-build__dot1 { animation: ab-drop 0.75s var(--ab-ease) 1.8s both; }
.ab-mark__art.is-in .ab-build__dot2 { animation: ab-drop 0.75s var(--ab-ease) 1.96s both; }

/* The clock: Islamabad's time, written with the colon, which blinks once a second. */
.ab-clock { margin-top: clamp(72px, 9vw, 128px); padding-top: var(--tt-space-4); border-top: 1px solid var(--tt-border); }
.ab-clock__where, .ab-clock__day { margin: 0; font-family: var(--font-ui); font-size: 17px; line-height: 24px; color: var(--tt-text-secondary); }
.ab-clock__thu::before { content: " · "; }
.ab-clock__thu:empty::before { content: none; }
.ab-clock__time { --ab-cap: 0.72em; display: flex; align-items: baseline; margin: var(--tt-space-3) 0 var(--tt-space-5); font-family: var(--font-display); font-weight: 900; font-size: clamp(104px, 22vw, 320px); line-height: 0.86; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; }
.ab-clock__colon { position: relative; flex: none; display: inline-block; width: calc(var(--ab-cap) * 0.2354); height: var(--ab-cap); margin-inline: 0.06em; animation: ab-blink var(--tt-blink, 2s) steps(1, end) infinite; animation-delay: var(--ab-sync, 0s); }
.ab-clock__colon span { position: absolute; left: 0; width: 100%; aspect-ratio: 1; background: var(--tt-orange); }
.ab-clock__colon span:first-child { top: 19.16%; }
.ab-clock__colon span:last-child { bottom: 19.16%; }
@keyframes ab-blink { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ----------------------------------------------------------------- the label */
.ab-label { padding-top: 0; }
.ab-sting { display: grid; place-items: center; padding: clamp(72px, 11vw, 160px) var(--tt-margin-desktop) clamp(56px, 8vw, 112px); }
.ab-sting__svg { display: block; width: min(1120px, 100%); height: auto; overflow: visible; }
.ab-sting__ink { fill: var(--tt-paper); }
.ab-sting__all { transition: translate 0.6s var(--ab-ease); }
.ab-sting__word { translate: 0 780px; transition: translate 0.6s var(--ab-ease); }
.ab-sting__word.is-current { translate: 0 0; }
.ab-sting__word.is-gone { translate: 0 -780px; }

.ab-sections { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tt-space-5); }
.ab-sections li { border-top: 1px solid var(--tt-border); }
.ab-sections a { display: flex; align-items: center; justify-content: space-between; gap: var(--tt-space-4); min-height: 60px; color: var(--tt-paper); text-decoration: none; }
.ab-sections .tt-label { transition: translate var(--tt-move-fast, 300ms) var(--ab-ease); }
.ab-sections a:hover .tt-label, .ab-sections a:focus-visible .tt-label { translate: 6px 0; }
.ab-sections__n { font-family: var(--font-ui); font-size: 15px; line-height: 20px; color: var(--tt-text-secondary); white-space: nowrap; }

/* ------------------------------------------------------------------ pictures */
.ab-illo { margin: 0; }
.ab-illo svg { display: block; width: 100%; height: auto; background: var(--tt-panel); }
.ab-illo__bar, .ab-illo__ground, .ab-illo__sun { fill: var(--tt-text); transform-box: fill-box; }
.ab-illo__point { fill: var(--tt-orange); }
.ab-illo__bar { transform-origin: 50% 100%; }
.ab-illo__ground { transform-origin: 0 50%; }
.ab-ready .ab-illo .ab-illo__bar { transition: transform 0.6s var(--ab-ease) calc(0.35s + var(--i) * 0.1s); }
.ab-ready .ab-illo .ab-illo__ground { transition: transform 0.6s var(--ab-ease); }
.ab-ready .ab-illo .ab-illo__sun { transition: translate 0.9s var(--ab-ease) 0.6s, opacity 0.9s var(--ab-ease) 0.6s; }
.ab-ready .ab-illo:not(.is-in) .ab-illo__bar { transform: scaleY(0); }
.ab-ready .ab-illo:not(.is-in) .ab-illo__ground { transform: scaleX(0); }
.ab-ready .ab-illo:not(.is-in) .ab-illo__sun { translate: 160px 0; opacity: 0; }
.ab-ready .ab-illo:not(.is-in) .ab-illo__point { opacity: 0; }
.ab-illo.is-in .ab-illo__point { --ab-drop: 220px; animation: ab-drop 0.75s var(--ab-ease) 1.3s both; }
.ab-ready .ab-illo .ab-caption { transition: opacity 0.6s var(--ab-ease) 1.6s; }
.ab-ready .ab-illo:not(.is-in) .ab-caption { opacity: 0; }

/* ------------------------------------------------------------------- numbers */
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--tt-space-8) 0 0; }
.ab-stat { margin: 0; padding: var(--tt-space-5) var(--tt-space-5) 0 0; border-top: 1px solid var(--tt-border); }
.ab-stat + .ab-stat { padding-left: var(--tt-space-5); border-left: 1px solid var(--tt-border); }
.ab-stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 6.2vw, 104px); line-height: 1; letter-spacing: -0.035em; }
.ab-stat dd { margin: var(--tt-space-4) 0 0; max-width: 20em; font-family: var(--font-text); font-size: 17px; line-height: 26px; color: var(--tt-text-secondary); }
.ab-odo { display: inline-flex; align-items: flex-start; height: 1em; overflow: hidden; font-variant-numeric: tabular-nums lining-nums; }
.ab-odo__col { display: block; height: 1em; overflow: hidden; }
.ab-odo__reel { display: block; width: min-content; line-height: 1em; text-align: center; transform: translateY(calc(var(--d) * -1em)); }
.ab-ready .ab-stats .ab-odo__reel { transition: transform 1.2s var(--ab-ease) calc(var(--i) * 0.08s); }
.ab-ready .ab-stats:not(.is-in) .ab-odo__reel { transform: translateY(0); }
.ab-ready .ab-stats .ab-stat dd { transition: opacity 0.6s var(--ab-ease) 0.5s; }
.ab-ready .ab-stats:not(.is-in) .ab-stat dd { opacity: 0; }

/* ----------------------------------------------------------------------- map */
/* The world in squares, with no borders drawn. The land opens out from Islamabad as the name opens from the colon;
   the home desk drops into place in orange, the desks at home light, then straight lines reach the bureaus a region
   at a time. When it is all there, Islamabad blinks once a second: the paper is live. */
.ab-map__fig { margin: var(--tt-space-8) 0 0; }
.ab-map__frame { position: relative; }
.ab-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ab-map__land { fill: var(--tt-slate, #2e2e2e); }
.ab-map__line { fill: none; stroke: var(--tt-paper); stroke-width: 2; stroke-opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ab-map__desk, .ab-map__bureau { fill: var(--tt-paper); }
.ab-map__home { fill: var(--tt-orange); transform-box: fill-box; }
.ab-ready .ab-map__frame { transition: clip-path 1.2s var(--ab-ease); }
.ab-ready .ab-map__line { transition: stroke-dashoffset 0.6s var(--ab-ease) calc(2s + var(--g) * 1.1s + var(--k) * 0.12s); }
.ab-ready .ab-map__desk { transition: opacity 0.3s var(--ab-ease) calc(1.3s + var(--k) * 0.08s); }
.ab-ready .ab-map__bureau { transition: opacity 0.3s var(--ab-ease) calc(2.5s + var(--g) * 1.1s + var(--k) * 0.12s); }
.ab-ready .ab-map__fig:not(.is-in) .ab-map__frame { clip-path: inset(-4% calc(100% - var(--hx)) -4% var(--hx)); }
.ab-ready .ab-map__fig:not(.is-in) .ab-map__line { stroke-dashoffset: 1; }
.ab-ready .ab-map__fig:not(.is-in) :is(.ab-map__desk, .ab-map__bureau, .ab-map__home) { opacity: 0; }
.ab-map__fig.is-in .ab-map__home { --ab-drop: 90px; animation: ab-drop 0.75s var(--ab-ease) 0.9s both, ab-blink var(--tt-blink, 2s) steps(1, end) 7.4s infinite; }

.ab-places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--tt-space-5); margin-top: var(--tt-space-7); padding-top: var(--tt-space-5); border-top: 1px solid var(--tt-border); }
.ab-place { color: var(--tt-text-secondary); transition: color 0.6s var(--ab-ease); }
.ab-ready .ab-map:has(.ab-map__fig.is-in) .ab-place { color: var(--tt-paper); transition-delay: calc(2.4s + var(--g) * 1.1s); }
.ab-place__h { margin: 0 0 var(--tt-space-2); font-family: var(--font-display); font-weight: 900; font-size: 21px; line-height: 26px; letter-spacing: -0.02em; color: inherit; }
.ab-place__list { margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 25px; color: inherit; }
@media (max-width: 1023px) { .ab-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ab-places { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------- family */
.ab-rows { list-style: none; margin: var(--tt-space-8) 0 0; padding: 0; border-bottom: 1px solid var(--tt-border); }
.ab-row { position: relative; }
.ab-row::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--tt-border); transform-origin: 0 50%; }
.ab-row a { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr) 24px; align-items: center; gap: var(--tt-space-5); min-height: 112px; padding: var(--tt-space-5) 0; color: var(--tt-text); text-decoration: none; }
.ab-row__name { display: flex; align-items: center; min-width: 0; }
.ab-row__name .tt-logo { width: min(200px, 100%); height: auto; }
.ab-row__name--text { font-family: var(--font-display); font-weight: 900; font-size: 27px; line-height: 30px; letter-spacing: -0.025em; }
.ab-row__name--ur { font-family: var(--font-urdu); font-weight: 700; font-size: 32px; line-height: 1.4; }
.ab-row__line { max-width: 36em; font-family: var(--font-text); font-size: 18px; line-height: 28px; color: var(--tt-text-secondary); }
.ab-row__go { color: var(--tt-text); transition: translate var(--tt-move-fast, 300ms) var(--ab-ease); }
.ab-row a:hover .ab-row__line, .ab-row a:focus-visible .ab-row__line { color: var(--tt-text); }
.ab-row a:hover .ab-row__go, .ab-row a:focus-visible .ab-row__go { translate: 6px 0; }
.ab-ready .ab-row::before { transition: transform 0.8s var(--ab-ease); }
.ab-ready .ab-row a { transition: opacity 0.6s var(--ab-ease) 0.2s, translate 0.6s var(--ab-ease) 0.2s; }
.ab-ready .ab-row:not(.is-in)::before { transform: scaleX(0); }
.ab-ready .ab-row:not(.is-in) a { opacity: 0; translate: -24px 0; }

/* --------------------------------------------------------------------- reach */
.ab-reach { padding-top: 0; }
.ab-reach__grid { list-style: none; margin: var(--tt-space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--tt-border); }
.ab-reach__grid a { display: flex; flex-direction: column; gap: var(--tt-space-2); height: 100%; padding: var(--tt-space-5) var(--tt-space-5) var(--tt-space-5) 0; color: var(--tt-text); text-decoration: none; }
.ab-reach__grid li + li a { padding-left: var(--tt-space-5); border-left: 1px solid var(--tt-border); }
.ab-reach__grid strong { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 26px; letter-spacing: -0.02em; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color var(--tt-move-fast, 300ms) var(--ab-ease); }
.ab-reach__grid a:hover strong, .ab-reach__grid a:focus-visible strong { text-decoration-color: var(--tt-orange); }
.ab-reach__grid span { font-family: var(--font-text); font-size: 16px; line-height: 24px; color: var(--tt-text-secondary); }
.ab-social { margin: var(--tt-space-6) 0 0; font-family: var(--font-ui); font-size: 17px; line-height: 26px; color: var(--tt-text-secondary); }
.ab-social a { color: var(--tt-text); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ end card */
.ab-end { padding: clamp(80px, 11vw, 160px) var(--tt-margin-desktop); background: var(--tt-orange); color: var(--tt-ink); }
/* the end card runs straight into the footer */
body:has(.tt-about) .tt-footer { margin-top: 0; }
.ab-end__stage { display: grid; place-items: center; max-width: 1180px; min-height: clamp(300px, 34vw, 460px); margin: 0 auto; }
.ab-end__stage > * { grid-area: 1 / 1; }
.ab-end__mark { display: none; width: min(440px, 62vw); height: auto; overflow: visible; }
.ab-end__t { fill: var(--tt-ink); }
.ab-end__dot { fill: var(--tt-paper); transform-box: fill-box; }
.ab-end__doors { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tt-space-5); width: 100%; }
.ab-end__panel { display: block; min-height: clamp(220px, 24vw, 300px); background: var(--tt-paper); color: var(--tt-ink); text-decoration: none; will-change: transform; }
.ab-end__in { display: flex; flex-direction: column; gap: var(--tt-space-3); height: 100%; padding: clamp(24px, 3vw, 40px); }
.ab-end__in strong { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -0.025em; }
.ab-end__in > span { max-width: 22em; font-family: var(--font-text); font-size: 18px; line-height: 28px; color: var(--tt-graphite); }
.ab-end__go { margin-top: auto; color: var(--tt-ink); transition: translate var(--tt-move-fast, 300ms) var(--ab-ease); }
.ab-end__panel:hover .ab-end__go, .ab-end__panel:focus-visible .ab-end__go { translate: 8px 0; }

/* With the script: the mark arrives as in the kit's Drop (the Ts close in, the colon drops), holds, and its two
   white dots grow into the two panels. Without it, the panels simply stand there. */
.ab-end--js .ab-end__mark { display: block; }
.ab-end--js:not(.is-growing) .ab-end__doors { visibility: hidden; }
.ab-end--js .ab-end__t { transition: translate 0.8s var(--ab-ease), opacity 0.8s var(--ab-ease); }
.ab-end--js:not(.is-in) .ab-end__t1 { translate: -260px 0; opacity: 0; }
.ab-end--js:not(.is-in) .ab-end__t2 { translate: 260px 0; opacity: 0; }
.ab-end--js:not(.is-in) .ab-end__dot { opacity: 0; }
.ab-end--js.is-in .ab-end__dot:nth-of-type(1) { animation: ab-drop 0.75s var(--ab-ease) 0.75s both; }
.ab-end--js.is-in .ab-end__dot:nth-of-type(2) { animation: ab-drop 0.75s var(--ab-ease) 0.9s both; }
.ab-end--js.is-growing .ab-end__t1 { translate: -900px 0; opacity: 0; }
.ab-end--js.is-growing .ab-end__t2 { translate: 900px 0; opacity: 0; }
.ab-end--js.is-growing .ab-end__dot { visibility: hidden; }
.ab-end--js .ab-end__in { transition: opacity 0.5s var(--ab-ease), translate 0.5s var(--ab-ease); }
.ab-end--js:not(.is-open) .ab-end__in { opacity: 0; translate: 0 16px; }

/* -------------------------------------------------------------------- phones */
@media (max-width: 1023px) {
	.ab-split, .ab-split--wide, .ab-mark .ab-split { grid-template-columns: minmax(0, 1fr); }
	.ab-mark__art { max-width: 520px; padding: 0; }
	.ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ab-stat:nth-child(3) { padding-left: 0; border-left: 0; }
	.ab-reach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ab-reach__grid li + li a { padding-left: 0; border-left: 0; }
	.ab-reach__grid li { border-bottom: 1px solid var(--tt-border); }
	.ab-reach__grid li:nth-child(even) a { padding-left: var(--tt-space-5); border-left: 1px solid var(--tt-border); }
}
@media (max-width: 767px) {
	.ab-hero__stage { min-height: 38vh; padding-inline: var(--tt-margin-phone); }
	.ab-sections { grid-template-columns: minmax(0, 1fr); }
	.ab-body { font-size: 18px; line-height: 29px; }
	.ab-stats { grid-template-columns: minmax(0, 1fr); }
	.ab-stat, .ab-stat + .ab-stat { padding-left: 0; border-left: 0; padding-bottom: var(--tt-space-5); }
	.ab-row a { grid-template-columns: minmax(0, 1fr) 24px; gap: var(--tt-space-3) var(--tt-space-4); min-height: 0; }
	.ab-row__name { grid-column: 1; }
	.ab-row__line { grid-column: 1; grid-row: 2; }
	.ab-row__go { grid-column: 2; grid-row: 1 / 3; }
	.ab-reach__grid { grid-template-columns: minmax(0, 1fr); }
	.ab-reach__grid li:nth-child(even) a { padding-left: 0; border-left: 0; }
	.ab-end { padding-inline: var(--tt-margin-phone); }
	.ab-end__doors { grid-template-columns: minmax(0, 1fr); }
	.ab-end__panel { min-height: 180px; }
}

/* Reduced motion: every piece at rest in its final place; the wordmark stays open; the colon does not blink. */
@media (prefers-reduced-motion: reduce) {
	.tt-about *, .tt-about *::before, .tt-about *::after { animation: none !important; transition: none !important; }
	.ab-hero__wm { --ab-m: 0; clip-path: none; }
	.ab-hero__logo { translate: none; }
}