/* ==========================================================================
   ABOUT US  —  /about-us/  (page-about-us.php)
   --------------------------------------------------------------------------
   Enqueued by inc/pages.php on the page whose slug is `about-us`, after
   style.css and ds.css. Every colour here is a token from style.css :root;
   there is no brand hex in this file.

   WHAT THE PAGE IS DOING, IN CSS TERMS
   ------------------------------------
   One device, used once: a hanging serif label in the margin of the owner's
   "What Makes Us Unique?" paragraphs, sitting on a hairline with a single
   gold dot where each strand begins. That is the whole of the decoration.
   Everything else is type, measure and white space, because the owner has
   rejected two designs this session for being busy and one stack of cards
   with icons already renders below this page in the site-wide "why" block.

   BANDS
   -----
   white (open)  ->  cream (the case)  ->  photograph  ->  --ac-dark (the
   line)  ->  white (onward).  Alternating, and the full-bleed photograph
   between cream and green counts as neither.

   MEASURED CONTRAST (composite backgrounds, not assumed)
   ------------------------------------------------------
   Read out of the live page with getComputedStyle, compositing each colour
   over the background its element actually resolves to:

     --body     #5F564E  on --cream #F7F3EE    6.49:1
     --body     #5F564E  on #fff               7.17:1
     --ink      #3A2E25  on #fff              13.15:1
     --ink      #3A2E25  on --cream           11.90:1
     --ac       #124933  on --cream            9.38:1  (the serif labels)
     --ac       #124933  on #fff              10.36:1  (the kickers)
     --muted    #7A6F66  on #fff               4.89:1  (his caption)
     --gold-ink #8F6A0A  on #fff               4.96:1  (the accent lines)
     --gold-ink #8F6A0A  on --cream            4.49:1
     --gold     #EAB924  on --ac-dark #0C3323  7.57:1  (dark surface only)
     #fff                on --ac-dark         13.88:1
     rgba(255,255,255,.86) over --ac-dark     10.62:1
   ========================================================================== */

.ts-ab {
	/* The rhythm of the page, so one change retunes every band. */
	--ts-ab-band: clamp(64px, 8vw, 118px);
	--ts-ab-gap: clamp(32px, 5vw, 76px);
}

/* Section headings share the house scale rather than inventing one. */
.ts-ab-kick {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ac);
	margin-bottom: 14px;
}

/* ==========================================================================
   1. OPEN — white
   --------------------------------------------------------------------------
   His first two paragraphs beside his own photograph, then his third
   paragraph full width underneath in the serif. The third paragraph is the
   one about the guides being at your side, and the photograph is a guide
   standing with two travellers, so the picture sits between the two halves
   of the thought rather than beside one of them.
   ========================================================================== */

.ts-ab-open {
	background: var(--white);
	padding: clamp(46px, 6vw, 84px) 0 var(--ts-ab-band);
}

.ts-ab-open__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ts-ab-gap);
	align-items: start;
}

.ts-ab-h1 {
	font-weight: 700;
	font-size: clamp(38px, 5.4vw, 62px);
	line-height: 1.04;
	color: var(--ink);
	letter-spacing: -.01em;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   THE SERIF ACCENT LINE, AND WHY IT IS NOT --gold HERE
   --------------------------------------------------------------------------
   style.css defines `.sf` as --ac in its type helpers and then repaints it
   --gold in its section 24, whose own comment says gold on white is "only
   ~2:1" and is therefore restricted to large display type. Measured on this
   page, that is the accent line: --gold on #fff is 1.83:1 and on --cream
   1.66:1. The brief's floor for large text is 3:1, so the site-wide value
   fails here by a factor of two, and it fails on every other page that uses
   the pattern (flagged to the coordinator in the notes — style.css is not
   this agent's file to change).

   --gold-ink is the token the brief keeps for exactly this: gold AS TEXT on
   cream or white. It measures 4.49:1 on cream and 4.96:1 on white, so the
   flourish survives and the line is legible. On the dark green band below,
   --gold is correct and is used.
   -------------------------------------------------------------------------- */

.ts-ab-h1 .sf,
.ts-ab-h2 .sf,
.ts-ab-more__h .sf {
	color: var(--gold-ink);
}

.ts-ab-lede {
	margin-top: clamp(24px, 3vw, 36px);
	max-width: 36em;
}

.ts-ab-lede p {
	color: var(--body);
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.78;
}

.ts-ab-lede p + p {
	margin-top: 20px;
}

/* --- his figure ---------------------------------------------------------- */

/*
 * Centred while the page is one column. Measured at 768: left-aligned, a
 * 440px portrait in a 705px column left 265px of empty cream down the right
 * of the first screen, and the serif paragraph under it is centred, so the
 * column read as though the photograph had slipped.
 */
.ts-ab-shot {
	margin: 0 auto;
	max-width: 440px;
}

.ts-ab-shot__img {
	width: 100%;
	height: auto;
	border-radius: 22px;
	box-shadow: var(--shadow);
}

.ts-ab-shot__cap {
	position: relative;
	margin-top: 26px;
	padding-top: 18px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}

/* The one gold mark in this band: a short rule over his caption. */
.ts-ab-shot__cap::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 34px;
	height: 2px;
	border-radius: 999px;
	background: var(--gold);
}

/* --- the third paragraph, in the serif ----------------------------------- */

.ts-ab-open__after {
	margin: clamp(52px, 6.5vw, 92px) auto 0;
	max-width: 900px;
	text-align: center;
}

.ts-ab-open__after p {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(21px, 2.6vw, 30px);
	line-height: 1.46;
	color: var(--ink);
	text-wrap: pretty;
}

.ts-ab-open__after p + p {
	margin-top: 22px;
}

/* ==========================================================================
   2. THE CASE — cream
   --------------------------------------------------------------------------
   The hanging labels. On a wide screen the label sits in its own column and
   sticks while its two paragraphs scroll past; the prose column carries the
   hairline and the gold dot that marks where the strand starts. Below 900px
   the columns collapse, the vertical hairline goes with them (a 1px rule
   down the left of a full-width paragraph reads as a quote, which these are
   not), and the dot moves beside the label.
   ========================================================================== */

.ts-ab-case {
	background: var(--cream);
	padding: var(--ts-ab-band) 0;
}

.ts-ab-case__head {
	max-width: 820px;
	margin-bottom: clamp(40px, 5.5vw, 74px);
}

.ts-ab-h2 {
	font-weight: 700;
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.05;
	color: var(--ink);
	text-wrap: balance;
}

.ts-ab-strands {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.ts-ab-strand {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: clamp(28px, 3.4vw, 44px) 0;
}

.ts-ab-strand + .ts-ab-strand {
	border-top: 1px solid var(--line);
}

.ts-ab-strand:first-child {
	padding-top: 0;
}

.ts-ab-strand:last-child {
	padding-bottom: 0;
}

.ts-ab-strand__label {
	position: relative;
	margin: 0;
	padding-left: 24px;
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(23px, 2.5vw, 29px);
	line-height: 1.16;
	color: var(--ac);
	letter-spacing: .005em;
}

/* THE dot. One per strand, nothing else on the page is gold-filled. */
.ts-ab-strand__label::before {
	content: "";
	position: absolute;
	left: 0;
	top: .52em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gold);
}

.ts-ab-strand__body {
	max-width: 68ch;
}

.ts-ab-strand__body p {
	color: var(--body);
	font-size: clamp(16.5px, 1.4vw, 18px);
	line-height: 1.8;
}

.ts-ab-strand__body p + p {
	margin-top: 18px;
}

/* The fallback shape, when the section is no longer six paragraphs. */
.ts-ab-strands--plain .ts-ab-strand__body {
	max-width: 74ch;
}

/* ==========================================================================
   3. THE PHOTOGRAPH — a plate, not a full bleed, and here is why
   --------------------------------------------------------------------------
   The obvious treatment is the site's own full-bleed band (site-photo.php),
   and it was built that way first. Measured: this photograph's original is
   1080x810, so its largest srcset candidate is 1080w, and a full-bleed band
   on a 1425px viewport was asking the browser to blow 1080 pixels across
   1425 — 1.32x at 1x, 2.6x on a laptop's own display. Full bleed is not
   worth a soft photograph.

   So the band is capped at the width the photograph actually has, centred,
   with the house 22px radius, on white. The picture is never upscaled at any
   viewport, and the page keeps its alternation: cream above, white here,
   --ac-dark below.
   ========================================================================== */

.ts-ab-plate {
	background: var(--white);
	padding: var(--ts-ab-band) 0;
}

.ts-ab-band {
	margin: 0 auto;
	width: 100%;
	max-width: 1080px;
	height: clamp(230px, 34vw, 500px);
	overflow: hidden;
	border-radius: 22px;
	background: var(--ac-soft);
	box-shadow: var(--shadow-sm);
}

.ts-ab-band__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 58%;
}

/* ==========================================================================
   4. THE LINE — --ac-dark
   --------------------------------------------------------------------------
   The company's own strapline, and the photograph in which it is legible on
   the spare wheel. Gold is used AS TEXT here, which is allowed only because
   the surface is dark: on cream or white this weight of gold measures 2.30:1
   and --gold-ink would be the only legal choice.
   ========================================================================== */

.ts-ab-line {
	background: var(--ac-dark);
	color: var(--white);
	padding: var(--ts-ab-band) 0;
}

.ts-ab-line__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 4.5vw, 72px);
	align-items: center;
}

.ts-ab-line__shot img {
	width: 100%;
	height: auto;
	border-radius: 22px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

.ts-ab-line__kick {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 18px;
}

.ts-ab-line__h {
	font-weight: 700;
	font-size: clamp(26px, 3.6vw, 46px);
	line-height: 1.06;
	color: var(--white);
	overflow-wrap: break-word;
}

.ts-ab-line__h span {
	display: block;
}

/* .sf paints itself --ac, which is invisible on --ac-dark. */
.ts-ab-line__h .sf {
	color: var(--gold);
}

.ts-ab-line__p {
	margin-top: clamp(22px, 2.6vw, 32px);
	max-width: 44ch;
	font-size: clamp(16px, 1.4vw, 17.5px);
	line-height: 1.78;
	color: rgba(255, 255, 255, .86);
}

/* The global focus ring is --ac and would vanish on this surface. */
.ts-ab-line a:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* ==========================================================================
   5. ONWARD — white
   --------------------------------------------------------------------------
   His own two links, as rows on hairlines. Not cards: the site-wide block
   below this page is already a set of cards, and two cards side by side
   would read as a second, shorter version of it.
   ========================================================================== */

.ts-ab-more {
	background: var(--white);
	padding: var(--ts-ab-band) 0;
}

.ts-ab-more__h {
	font-weight: 700;
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1.06;
	color: var(--ink);
	margin-bottom: clamp(28px, 3.4vw, 46px);
}

.ts-ab-more__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid var(--line);
}

.ts-ab-more__i {
	border-bottom: 1px solid var(--line);
}

.ts-ab-more__a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 22px;
	padding: clamp(22px, 2.6vw, 34px) 0;
	transition: color .2s;
}

.ts-ab-more__t {
	font-weight: 600;
	font-size: clamp(21px, 2.2vw, 27px);
	line-height: 1.2;
	color: var(--ink);
	transition: color .2s;
}

.ts-ab-more__d {
	grid-column: 1 / -1;
	color: var(--body);
	font-size: clamp(15.5px, 1.3vw, 17px);
	line-height: 1.7;
	max-width: 62ch;
}

.ts-ab-more__arrow {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--ac-soft);
	color: var(--ac);
	transition: background .2s, transform .2s;
}

.ts-ab-more__arrow svg {
	width: 19px;
	height: 19px;
}

.ts-ab-more__a:hover .ts-ab-more__t,
.ts-ab-more__a:focus-visible .ts-ab-more__t {
	color: var(--ac);
}

.ts-ab-more__a:hover .ts-ab-more__arrow,
.ts-ab-more__a:focus-visible .ts-ab-more__arrow {
	background: var(--ac);
	color: var(--white);
	transform: translateX(5px);
}

/* ==========================================================================
   6. THE NET — the unparsed fallback
   ========================================================================== */

.ts-ab-raw {
	background: var(--white);
	padding: var(--ts-ab-band) 0;
}

.ts-ab-raw__prose {
	max-width: 74ch;
	color: var(--body);
	line-height: 1.8;
}

.ts-ab-raw__prose > * + * {
	margin-top: 18px;
}

.ts-ab-raw__prose img {
	height: auto;
	border-radius: 18px;
}

/* ==========================================================================
   7. WIDER SCREENS
   ========================================================================== */

/*
 * 860, not 720: at 768 the three-column row leaves the description 297px,
 * which breaks a one-line sentence into three. Stacked reads better there.
 */
@media (min-width: 860px) {

	.ts-ab-more__a {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 10px 32px;
	}

	.ts-ab-more__d {
		grid-column: 2;
		grid-row: 1;
	}

	.ts-ab-more__arrow {
		grid-column: 3;
		grid-row: 1;
		align-self: center;
	}
}

@media (min-width: 900px) {

	.ts-ab-strand {
		grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
		gap: clamp(28px, 4vw, 64px);
		align-items: start;
	}

	.ts-ab-strand__label {
		position: sticky;
		top: calc(var(--header-height) + 26px);
		padding-left: 0;
	}

	/* The dot moves onto the prose column's hairline. */
	.ts-ab-strand__label::before {
		display: none;
	}

	.ts-ab-strand__body {
		position: relative;
		padding-left: clamp(26px, 2.6vw, 38px);
		border-left: 1px solid var(--line);
	}

	.ts-ab-strand__body::before {
		content: "";
		position: absolute;
		left: -5px;
		top: .62em;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--gold);
	}

	.ts-ab-line__grid {
		grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	}
}

@media (min-width: 1000px) {

	.ts-ab-open__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	}

	.ts-ab-shot {
		margin: 0;
		max-width: none;
	}
}

/* ==========================================================================
   8. REDUCED MOTION
   --------------------------------------------------------------------------
   Nothing on this page depends on hover: the arrow's shift and the title's
   colour change are both confirmations of a link that is already obviously
   a link. Sticky labels are dropped too — a label that moves while the page
   scrolls is exactly the kind of motion this query is asked about.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ts-ab-more__a,
	.ts-ab-more__t,
	.ts-ab-more__arrow {
		transition: none;
	}

	.ts-ab-more__a:hover .ts-ab-more__arrow,
	.ts-ab-more__a:focus-visible .ts-ab-more__arrow {
		transform: none;
	}

	.ts-ab-strand__label {
		position: static;
	}
}