@charset "UTF-8";
/**
 * Catcha 2026 — page-specific blocks
 *
 * 18 Careers culture code / 18b Grow with Us intro
 * 19 Email alert & embeds / 20 Article (single) / 21 Editor content
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

/* =====================================================================
 * 18  CAREERS CULTURE CODE
 * ================================================================== */
/* One continuous ruled ledger rather than five separated slabs. */
.code-row {
	display: grid;
	gap: clamp(16px, 2.4vw, 40px);
	padding: clamp(28px, 3.2vw, 44px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-bottom: 0;
}
@media (min-width: 900px) { .code-row { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); } }
.code-row:last-child { border-bottom: 1px solid var(--line); }

.code-row__letter {
	font-family: var(--serif);
	font-size: clamp(52px, 6vw, 88px);
	font-weight: 700;
	line-height: 0.84;
	color: var(--accent);
	letter-spacing: -0.03em;
}
.code-row__name {
	font-family: var(--serif);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700;
	letter-spacing: -0.016em;
	color: var(--ink);
	margin-top: 10px;
}

.principle + .principle { margin-top: 20px; }
.principle__lead {
	font-family: var(--serif);
	font-size: 17.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 4px;
}
.principle__body { font-size: var(--fs-sm); line-height: 1.68; color: var(--ink-2); max-width: 70ch; margin: 0; }

.code-row__closing {
	display: inline-block;
	margin: 26px 0 0;
	padding: 14px 0 0;
	border-top: 2px solid var(--accent);
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

/* =====================================================================
 * 18b  GROW WITH US — intro
 * ================================================================== */
.grow-intro__heading { max-width: 16em; margin-bottom: clamp(26px, 3vw, 42px); }

.grow-intro { display: grid; gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (min-width: 900px) {
	/* The deck is the thing to look at; the copy beside it is supporting. */
	.grow-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.grow-intro__deck { max-width: none; aspect-ratio: 476 / 400; }
.grow-intro__copy { max-width: 60ch; }

/* This closing line is the page's call to action. As a .statement it was
   set at display size and broke into five ragged lines; as a plain lede on
   a rule it read as a stray paragraph. It is now what it says it is: an
   invitation, in a ruled white panel like the tiles below it. The serif
   marks it as a voice rather than as body copy; the size stays on the
   lede step. */
.grow-note {
	margin: clamp(36px, 4vw, 56px) 0 0;
	padding: clamp(16px, 1.8vw, 22px) clamp(22px, 3vw, 44px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
}
.grow-note__text {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--fs-lede);
	line-height: 1.55;
	color: var(--ink);
	text-wrap: pretty;
}

/* =====================================================================
 * 19  EMAIL ALERT & EMBEDS
 * ================================================================== */
/* A heading row, then the form in a frame — the same shape as every other
   section on the site.
 *
 * This was a two-tone panel: a 395px slab of --ink holding a small mark and
 * three words, beside the form. Three problems. It was 40% of the width for
 * three words, so most of it was empty. It forced the whole block to the
 * height of the taller column. And it was the only dark surface anywhere in
 * the page body, which read as an import from another design rather than
 * part of this one — the footer is the only place this site goes dark now.
 *
 * The form is a cross-origin Enginemailer iframe, so its inputs and Subscribe
 * button cannot be styled from here; the frame around it can.
 */
/* The form panel below is centred; this heading row is not — it stays on the
   page's left margin, in line with every other section heading here. */
.email-alert__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(20px, 2.4vw, 30px);
}
.email-alert__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	flex: none;
	background: var(--accent);
	color: #fff;
}
.email-alert__icon svg { width: 19px; height: 19px; }
.email-alert__title {
	font-family: var(--serif);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.018em;
	color: var(--ink);
}

.email-alert {
	/* The embed caps its own content at 680px; scaled by --em-zoom (§28)
	   that is the widest the panel can be and still be filled by the form
	   rather than framing air. */
	max-width: calc(680px * var(--em-zoom) + 2 * clamp(24px, 3vw, 40px) + 2px);
	margin-inline: auto;
	background: var(--surface);
	border: 1px solid var(--line-firm);
}
.email-alert__form { min-width: 0; padding: clamp(24px, 3vw, 40px); }
/* Enginemailer ships both an inline iframe and a loader script that injects a
   second copy of it, so the form arrives twice. The clip that used to hide the
   duplicate also cut 44px off the real one; show the first and drop the rest. */
.email-alert__form > div { max-height: none; overflow: visible; }
/* The frame itself — sizing and the duplicate — is handled with the CTA Form
   page's copy of the same embed, in §28. */

/* Tinted, not white. Third-party embeds (the SlideShare deck, the mail
   form) paint their own background once they load; until then a white box
   on a light page reads as a hole rather than a frame. */
.embed-frame {
	width: 100%;
	border: 1px solid var(--line-firm);
	overflow: hidden;
	background: var(--tint);
}
.embed-frame iframe { display: block; width: 100%; border: 0; }
/* Full shell width. A 940px cap left the deck hanging on the left of a
   1200px page with dead space beside it. */
.embed-frame--deck { aspect-ratio: 16 / 9; }
.embed-frame--deck iframe { width: 100%; height: 100%; }

/* =====================================================================
 * 20  ARTICLE  (single post)
 * ================================================================== */
.article-head { max-width: 30ch; }
.article-head__title { max-width: 20ch; }
.article-media { margin-top: clamp(-36px, -3vw, -20px); position: relative; z-index: 1; }
.article-media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--line);
}
.article-body { margin-inline: auto; }

.article-nav {
	display: grid;
	gap: 16px;
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(24px, 3vw, 40px);
	border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .article-nav { grid-template-columns: repeat(2, 1fr); } }
.article-nav__link {
	display: block;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease);
}
.article-nav__link--end { text-align: right; }
.article-nav__link .index-row__meta { margin-bottom: 8px; }

/* =====================================================================
 * 21  EDITOR CONTENT
 * ================================================================== */
.entry-content { font-size: var(--fs-body); line-height: 1.72; color: var(--ink-2); }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: clamp(23px, 2.3vw, 32px); line-height: 1.16; margin-top: 1.7em; }
.entry-content h3 { font-size: clamp(19px, 1.8vw, 25px); line-height: 1.2; margin-top: 1.5em; }
.entry-content h4 { font-size: 19px; margin-top: 1.4em; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.16em; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content li { margin-bottom: 0.45em; }
.entry-content li::marker { color: var(--accent); }
.entry-content blockquote {
	margin: 1.6em 0;
	padding: 18px 24px;
	background: var(--tint);
	border-left: 3px solid var(--accent);
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink);
}
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content .tribe-common { max-width: none; }