/**
 * Creation Symposium landing page — "field notebook".
 *
 * Everything is scoped to .ftk-cs so the page can render either as a
 * full-screen route (its own document) or as a shortcode inside a themed page
 * without the theme and this file fighting each other.
 *
 * The palette is the house navy/gold from the Elementor global kit. Two faces
 * carry the page — Playfair for display, Nunito for everything else — and the
 * mono is reserved for the one place it earns its keep, the schedule times.
 * Contrast is spent in two places only: the gold schedule band and the navy
 * register band. Everything else sits on the same cream.
 *
 * @package FranktownBulletin
 */

.ftk-cs {
	/* Navy / blue — structure, headings */
	--cs-navy-950: #112C49;
	--cs-navy-900: #15314E;
	--cs-navy-800: #1C4E80;
	--cs-blue-600: #3A7CA5;
	--cs-blue-200: #C5D6E8;

	/* Gold — the action colour on this brand */
	--cs-gold-700: #A87A14;
	--cs-gold-600: #CDA31F;
	--cs-gold-400: #E2B65F;
	--cs-gold-300: #D9C48A;
	--cs-gold-200: #F6EBC8;
	--cs-gold-050: #FCF8EE;

	/* Warm neutrals & ink */
	--cs-white: #FFFFFF;
	--cs-cream: #FBF6EB;
	--cs-warm-100: #F1F0EC;
	--cs-warm-200: #E4E2DB;
	--cs-slate: #53687C;
	--cs-ink: #2B2B2B;
	--cs-border: #E5E7EA;

	/* FTK_Render::logo() paints its dark-tone wordmark with the design
	   system's --ink and --blue-800. This route loads only this stylesheet, so
	   those two tokens have to exist here — otherwise both declarations are
	   invalid at computed-value time and the lockup inherits the link colour,
	   printing FRANKTOWN in steel blue. */
	--ink: #2B2B2B;
	--blue-800: #1C4E80;
	--font-sans: "Nunito Sans", system-ui, -apple-system, sans-serif;

	/* Two faces carry the page. --cs-head is kept as a role name so the heading
	   rules below still read as headings, but it resolves to the body family:
	   a second sans was saying the same thing in a slightly different voice,
	   and that duplication is most of what made the page feel busy.
	   The mono has exactly one job left — session times, where the digits line
	   up in a column and a monospaced face earns its keep. */
	--cs-display: "Playfair Display", Georgia, serif;
	--cs-sans: "Nunito Sans", system-ui, -apple-system, sans-serif;
	--cs-head: var(--cs-sans);
	--cs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

	--cs-radius: 6px;
	--cs-radius-lg: 12px;

	--cs-maxw: 1440px;
	--cs-pad-x: 56px;
	--cs-pad-y: 84px;
	--cs-rule: 1px solid rgba(28, 78, 128, .22);

	/* The hero used to sit on ruled notebook paper. It was texture competing
	   with the headline for the same space, so the field is plain now and the
	   "field notebook" idea is carried by the type and the ledger instead. */

	/* The button label. White-on-gold is the brand default but only reaches
	   1.89:1 contrast; switch this to var(--cs-navy-950) for 7.49:1. See the
	   Accessibility note in the Creation Symposium settings tab. */
	--cs-btn-fg: var(--cs-white);

	background: var(--cs-cream);
	color: var(--cs-ink);
	font: 400 18px/1.6 var(--cs-sans);
	-webkit-font-smoothing: antialiased;
}

/* Full-screen route mode: the page is served as its own bare document, so it
   owns the body. (Shortcode mode inherits the theme's.) */
body.ftk-creation-body {
	margin: 0;
	background: #FBF6EB;
}

/* Smooth in-page anchors, only on documents that actually host the page. The
   offset clears the sticky header so a jumped-to heading isn't hidden by it. */
:root:has(.ftk-cs) {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

.ftk-cs *,
.ftk-cs *::before,
.ftk-cs *::after { box-sizing: border-box; }

/* Wrapped in :where() so the reset never out-specifies the component rules
   below. A plain `.ftk-cs p { margin: 0 }` is one class heavier than every
   single-class selector in this file: it silently flattens the page's whole
   vertical rhythm, and `.ftk-cs a { color }` repaints every button in link
   blue. Same trap franktown-seminar.css documents. */
.ftk-cs :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.ftk-cs :where(h1, h2, h3, h4) { text-wrap: balance; }
.ftk-cs :where(p) { text-wrap: pretty; }
.ftk-cs :where(ul, ol) { list-style: none; }
.ftk-cs :where(img, svg) { display: block; max-width: 100%; }
.ftk-cs :where(a) { color: var(--cs-blue-600); text-decoration: none; }
.ftk-cs :where(a:hover) { color: var(--cs-navy-800); }

.ftk-cs :focus-visible {
	outline: 3px solid var(--cs-navy-800);
	outline-offset: 3px;
	border-radius: 2px;
}

.cs-sronly {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shared primitives ─────────────────────────────────────────────────── */

.cs-shell {
	max-width: var(--cs-maxw);
	margin-inline: auto;
	width: 100%;
}
.cs-band { border-bottom: var(--cs-rule); }
.cs-pad { padding: var(--cs-pad-y) var(--cs-pad-x); }

/* The only eyebrow left on the page is the hero's, and it is there to carry
   the date and the city rather than to label a section. Sentence case, no
   tracking: a line of information, not a tag. */
.cs-eyebrow {
	font: 600 17px/1.5 var(--cs-sans);
	color: var(--cs-gold-700);
}

.cs-h2 {
	font: 700 44px/1.1 var(--cs-head);
	color: var(--cs-navy-800);
	margin: 18px 0 20px;
}
/* Face and colour only. Each section sets its own measure and spacing below —
   a shared max-width here forces the schedule heading onto a second line, and
   a shared bottom margin puts 42px under headings the design gives 18px. */
.cs-h2--serif {
	font: 900 48px/1.08 var(--cs-display);
	letter-spacing: -.01em;
	color: var(--cs-navy-950);
}
.cs-speakers .cs-h2--serif { max-width: 1000px; margin: 18px 0 42px; }
.cs-schedule .cs-h2--serif { margin: 18px 0 44px; }
.cs-faq .cs-h2--serif { margin-bottom: 44px; }
.cs-share .cs-h2--serif { max-width: 820px; margin: 18px auto; }

/* FTK_Render::logo() returns its own inline-flex lockup. Left as a plain
   inline span, this wrapper adds a text line box around it — ~9px of leading
   that shows up as a taller header and footer. */
.cs-logo { display: inline-flex; align-items: center; }

.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 24px;
	background: var(--cs-gold-400);
	color: var(--cs-btn-fg);
	border: 1.5px solid var(--cs-gold-400);
	border-radius: var(--cs-radius);
	font: 600 15px/1.2 var(--cs-sans);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.cs-btn:hover { background: var(--cs-gold-600); border-color: var(--cs-gold-600); color: var(--cs-btn-fg); }
.cs-btn:active { transform: translateY(1px); }
.cs-btn--lg { min-height: 54px; }
.cs-btn--head { width: 230px; }

.cs-cta__short { display: none; }

/* ── Header ────────────────────────────────────────────────────────────── */

.cs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cs-cream);
	border-bottom: var(--cs-rule);
}
.cs-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 48px;
}
.cs-header__right { display: flex; align-items: center; gap: 32px; }

.cs-nav { display: flex; align-items: center; gap: 32px; }
.cs-nav a {
	font: 600 15px/1 var(--cs-sans);
	color: var(--cs-navy-800);
	padding: 6px 0;
}
.cs-nav a:hover { color: var(--cs-gold-700); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.cs-hero__in { display: grid; grid-template-columns: 1.05fr 1fr; }

.cs-hero__text {
	padding: 76px 56px 68px;
	background-color: var(--cs-cream);
}

.cs-hero__title {
	font: 900 92px/.86 var(--cs-display);
	letter-spacing: -.03em;
	color: var(--cs-navy-950);
	margin: 26px 0 24px;
}
.cs-hero__subtitle {
	max-width: 560px;
	margin-bottom: 22px;
	font: 700 27px/1.25 var(--cs-head);
	color: var(--cs-navy-800);
}
.cs-hero__lede {
	max-width: 560px;
	margin-bottom: 22px;
	font: 400 21px/1.55 var(--cs-sans);
	color: var(--cs-ink);
}
/* The line the Three Questions section used to close on. It lands harder here,
   directly under the paragraph it was restating. */
.cs-hero__note {
	max-width: 560px;
	margin-bottom: 38px;
	font: 700 21px/1.45 var(--cs-display);
	color: var(--cs-navy-950);
}

.cs-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 26px;
}

.cs-note {
	flex: 0 1 340px;
	padding: 16px 22px;
	background: var(--cs-gold-050);
	border: 1px solid var(--cs-warm-200);
	border-radius: 8px;
}
.cs-note strong {
	display: block;
	margin-bottom: 6px;
	font: 900 30px/1 var(--cs-display);
	color: var(--cs-gold-700);
}
.cs-note span {
	display: block;
	font: 400 15px/1.45 var(--cs-sans);
	color: var(--cs-slate);
}
.cs-hero__cta { flex: none; width: 250px; }

.cs-hero__photo {
	min-height: 640px;
	border-left: var(--cs-rule);
	background: var(--cs-warm-100);
}
.cs-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* One paper colour runs the whole page. Contrast is spent in exactly two
   places — the gold schedule band and the navy register band — because those
   are the two moments worth stopping at. The hairline rules do the rest of
   the dividing; alternating surfaces just made the eye work for nothing. */

/* ── Three questions ───────────────────────────────────────────────────── */

.cs-questions { background: var(--cs-cream); }
.cs-qgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px;
	margin: 34px 0 48px;
}
.cs-q { display: flex; gap: 18px; border-top: var(--cs-rule); padding-top: 22px; }
.cs-q__num { flex: none; font: 700 15px/1.3 var(--cs-sans); color: var(--cs-gold-700); }
.cs-q__text { font: 700 28px/1.2 var(--cs-head); color: var(--cs-navy-800); }

.cs-qbody {
	max-width: 820px;
	margin-bottom: 30px;
	font: 400 20px/1.6 var(--cs-sans);
	color: var(--cs-ink);
}
.cs-qkicker { font: 900 26px/1.3 var(--cs-display); color: var(--cs-navy-950); }

/* ── Speakers ──────────────────────────────────────────────────────────── */

.cs-speakers { background: var(--cs-cream); }
.cs-spgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
}
.cs-sp {
	min-width: 0;
	background: var(--cs-white);
	border: 1px solid var(--cs-warm-200);
	border-radius: var(--cs-radius-lg);
	overflow: hidden;
}
/* Fixed height, never aspect-ratio: an intrinsically-sized image in a grid
   item inflates the track. Pair with min-width:0 on the card. */
.cs-sp__photo { height: 460px; overflow: hidden; background: var(--cs-warm-100); }
.cs-sp__photo img { width: 100%; height: 100%; object-fit: cover; }

.cs-sp__body { padding: 30px 34px 34px; }
.cs-sp__name {
	font: 900 32px/1.1 var(--cs-display);
	color: var(--cs-navy-950);
	margin-bottom: 10px;
}
.cs-sp__cred {
	font: 400 14px/1.55 var(--cs-sans);
	color: var(--cs-gold-700);
	margin-bottom: 18px;
}
.cs-sp__bio { font: 400 18px/1.6 var(--cs-sans); color: var(--cs-ink); }
/* 18px bottom is the reference card's rhythm (the browser's default 1em
   on a <dl>, made explicit now that the reset zeroes it). */
.cs-sp__sessions {
	margin: 24px 0 18px;
	padding-top: 20px;
	border-top: 1px solid var(--cs-warm-200);
}
.cs-sp__sessions dt {
	font: 700 13px/1.4 var(--cs-sans);
	color: var(--cs-gold-700);
	margin-bottom: 8px;
}
.cs-sp__sessions dd { margin: 0; font: 400 16px/1.6 var(--cs-sans); color: var(--cs-slate); }

/* ── Schedule ──────────────────────────────────────────────────────────── */

.cs-schedule { background: var(--cs-gold-200); }

.cs-day {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.cs-day--second { margin-top: 44px; }
.cs-day__name { font: 700 32px/1.2 var(--cs-head); color: var(--cs-navy-800); }
.cs-day__note {
	font: 400 14px/1.4 var(--cs-sans);
	color: var(--cs-gold-700);
}

.cs-row {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 32px;
	padding: 22px 0;
	border-top: 1px solid rgba(28, 78, 128, .22);
}
/* The one place the mono stays: a column of times that should line up. It
   prints them as written ("6:30 p.m.") rather than shouting them. */
.cs-row__time {
	font: 700 14px/1.5 var(--cs-mono);
	color: var(--cs-gold-700);
}
.cs-row__title {
	font: 700 27px/1.2 var(--cs-head);
	color: var(--cs-navy-800);
	margin-bottom: 6px;
}
.cs-row__speaker { font: 700 17px/1.5 var(--cs-sans); color: var(--cs-ink); margin-bottom: 6px; }
.cs-row__desc { max-width: 820px; font: 400 17px/1.55 var(--cs-sans); color: var(--cs-slate); }

.cs-tracks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	margin-top: 22px;
}
.cs-track {
	padding: 22px 26px;
	background: var(--cs-gold-050);
	border: 1px solid var(--cs-warm-200);
	border-radius: 10px;
}
.cs-track h4 { font: 700 20px/1.3 var(--cs-head); color: var(--cs-navy-800); margin-bottom: 16px; }
.cs-track__item + .cs-track__item { margin-top: 16px; }
.cs-track__time { font: 700 13px/1.5 var(--cs-mono); letter-spacing: .04em; color: var(--cs-gold-700); }
.cs-track__name { font: 700 17px/1.4 var(--cs-sans); color: var(--cs-ink); }
.cs-track__desc { font: 400 16px/1.5 var(--cs-sans); color: var(--cs-slate); }

/* ── Kids ──────────────────────────────────────────────────────────────── */

.cs-kids { background: var(--cs-cream); }
.cs-kids__in { display: grid; grid-template-columns: 1fr 1fr; }
.cs-kids__photo { min-height: 440px; background: var(--cs-warm-100); }
.cs-kids__photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-kids__text {
	padding: 76px 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cs-kids__body { font: 400 19px/1.6 var(--cs-sans); color: var(--cs-ink); }
.cs-kids__note { margin-top: 18px; font: 700 17px/1.5 var(--cs-sans); color: var(--cs-slate); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.cs-faq { background: var(--cs-cream); }
.cs-faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; }
.cs-faq__item { border-top: var(--cs-rule); padding-top: 20px; }
.cs-faq__item h3 {
	font: 700 24px/1.3 var(--cs-head);
	color: var(--cs-navy-800);
	margin-bottom: 10px;
}
.cs-faq__item p { font: 400 18px/1.6 var(--cs-sans); color: var(--cs-ink); }

/* ── Register ──────────────────────────────────────────────────────────── */

.cs-register { background: var(--cs-navy-800); }
.cs-register__in {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
}
.cs-register__title {
	font: 900 56px/1.02 var(--cs-display);
	letter-spacing: -.015em;
	color: var(--cs-white);
	margin-bottom: 24px;
}
.cs-register__body {
	font: 400 19px/1.6 var(--cs-sans);
	color: var(--cs-blue-200);
	margin-bottom: 32px;
	max-width: 620px;
}
.cs-register__cta { width: 300px; margin-bottom: 36px; }
.cs-register__addr {
	font: 400 16px/1.7 var(--cs-sans);
	font-style: normal;
	color: var(--cs-blue-200);
	margin-bottom: 12px;
}
.cs-directions {
	display: inline-block;
	font: 600 15px/1.5 var(--cs-sans);
	color: var(--cs-gold-400);
}
.cs-directions:hover { color: var(--cs-gold-300); text-decoration: underline; text-underline-offset: 4px; }

.cs-map {
	min-height: 320px;
	border-radius: var(--cs-radius-lg);
	overflow: hidden;
	background: var(--cs-navy-900);
	border: 1px solid rgba(255, 255, 255, .18);
}
.cs-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ── Share ─────────────────────────────────────────────────────────────── */

.cs-share { background: var(--cs-cream); }
.cs-share .cs-pad { text-align: center; }
.cs-share__deck {
	max-width: 660px;
	margin: 0 auto;
	font: 400 19px/1.6 var(--cs-sans);
	color: var(--cs-slate);
}

.cs-sharerow {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.cs-sharebtn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 12px 20px;
	background: var(--cs-white);
	border: 1.5px solid var(--cs-navy-800);
	border-radius: var(--cs-radius);
	color: var(--cs-navy-800);
	font: 600 15px/1 var(--cs-sans);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .12s ease;
}
.cs-sharebtn svg { width: 18px; height: 18px; flex: none; }
.cs-sharebtn:hover { background: var(--cs-navy-800); color: var(--cs-white); }
.cs-sharebtn:active { transform: translateY(1px); }
.cs-sharebtn.is-copied {
	background: var(--cs-gold-400);
	border-color: var(--cs-gold-400);
	color: var(--cs-btn-fg);
}

.cs-share__or {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 46px 0 26px;
	font: 400 15px/1.4 var(--cs-sans);
	color: var(--cs-gold-700);
}
.cs-share__or::before,
.cs-share__or::after {
	content: "";
	flex: 1;
	height: 1.5px;
	background: rgba(28, 78, 128, .35);
}

.cs-kit {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	text-align: left;
}
.cs-kit__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--cs-white);
	border: 1px solid var(--cs-warm-200);
	border-radius: var(--cs-radius-lg);
	overflow: hidden;
}
.cs-kit__fig {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* One window of a fixed height for all six, so a 9:16 story and a 1.91:1
	   banner share a row without it growing to fit the tallest. The artwork is
	   centred and always shown whole, never cropped. */
	height: 210px;
	padding: 18px;
	background: var(--cs-warm-100);
	border-bottom: 1px solid var(--cs-border);
}
.cs-kit__img {
	position: relative; /* paints over the placeholder once it actually loads */
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 4px;
}
/* The placeholder sits behind the image rather than being toggled on: a
   missing image has no box, so this shows through on its own — no JavaScript
   required. JS only adds is-pending, which suppresses the browser's
   broken-image glyph and disables the dead download. */
.cs-kit__ph {
	position: absolute;
	z-index: 0;
	padding: 26px 30px;
	border: 1px solid var(--cs-warm-200);
	border-radius: 8px;
	background: var(--cs-gold-050);
	font: 400 14px/1.4 var(--cs-sans);
	color: var(--cs-gold-700);
}
.cs-kit__item.is-pending .cs-kit__img { display: none; }

.cs-kit__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.cs-kit__label { font: 700 18px/1.35 var(--cs-head); color: var(--cs-navy-800); }
.cs-kit__size {
	margin-top: 4px;
	font: 400 14px/1.5 var(--cs-sans);
	color: var(--cs-gold-700);
}
.cs-kit__note {
	margin-top: 10px;
	margin-bottom: 20px;
	font: 400 16px/1.55 var(--cs-sans);
	color: var(--cs-slate);
}
.cs-kit__dl {
	/* auto pushes to the bottom so the buttons line up across the row even when
	   one card's note wraps to an extra line; the note's own margin-bottom
	   supplies the minimum gap above it. */
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 20px 11px 18px;
	background: var(--cs-gold-400);
	border-radius: var(--cs-radius);
	color: var(--cs-btn-fg);
	font: 600 14px/1 var(--cs-sans);
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .18s ease, transform .12s ease;
}
.cs-kit__dl svg { width: 17px; height: 17px; flex: none; }
.cs-kit__dl:hover { background: var(--cs-gold-600); color: var(--cs-btn-fg); }
.cs-kit__dl:active { transform: translateY(1px); }
.cs-kit__dl[aria-disabled="true"] {
	background: var(--cs-warm-200);
	color: var(--cs-slate);
	cursor: default;
	pointer-events: none;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.cs-footer { background: var(--cs-ink); }
.cs-footer__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 34px 56px;
}
.cs-footer__tag {
	font: 400 14px/1.6 var(--cs-sans);
	color: rgba(255, 255, 255, .6);
}

/* ── Hero entrance ─────────────────────────────────────────────────────── */

@keyframes csRise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.cs-rise {
	opacity: 0;
	animation: csRise .65s ease-out var(--cs-d, 0ms) forwards;
}

/* ══ Responsive — mobile is the primary case (QR codes and lead ads) ══════ */

@media (max-width: 1180px) {
	.ftk-cs { --cs-pad-x: 40px; --cs-pad-y: 68px; }
	.cs-hero__title { font-size: 74px; }
	.cs-register__title { font-size: 46px; }
	.cs-h2--serif { font-size: 40px; }
	.cs-hero__text { padding: 60px 40px 56px; }
	.cs-kids__text { padding: 60px 40px; }
	.cs-header__in { padding: 16px 32px; }
	.cs-header__right, .cs-nav { gap: 22px; }
	.cs-btn--head { width: 190px; }
}

@media (max-width: 900px) {
	.ftk-cs { --cs-pad-x: 24px; --cs-pad-y: 52px; }

	/* The sticky header is shorter here, so the anchor offset follows it. */
	:root:has(.ftk-cs) { scroll-padding-top: 68px; }

	.cs-hero__in,
	.cs-kids__in,
	.cs-register__in,
	.cs-spgrid,
	.cs-faqgrid,
	.cs-tracks,
	.cs-kit { grid-template-columns: 1fr; }
	.cs-qgrid { grid-template-columns: 1fr; gap: 28px; }
	.cs-faqgrid { gap: 32px; }
	.cs-tracks { gap: 20px; }
	.cs-kit { gap: 20px; }
	.cs-register__in { gap: 40px; }

	/* Compact sticky header: the wordmark alone reads fine, and the CTA must
	   stay on one line so the bar doesn't eat the top of a phone screen.
	   FTK_Render::logo() sizes the lockup with inline styles, so trimming it
	   for a phone has to out-rank them. The "Seventh-day Adventist Church"
	   line goes first: at this width it wraps to two lines and collides with
	   the button. Scoped to the header — the footer has room for the full
	   lockup and keeps it. */
	.cs-header__in { padding: 12px 20px; }
	.cs-header .cs-logo svg { height: 32px !important; }
	.cs-header .cs-logo a > span > span:first-child { font-size: 20px !important; }
	.cs-header .cs-logo a > span > span:last-child { display: none !important; }
	.cs-nav { display: none; }
	.cs-btn--head {
		width: auto;
		font-size: 12px;
		letter-spacing: .03em;
		padding: 11px 16px;
		white-space: nowrap;
	}

	.cs-hero__text { padding: 44px 24px 40px; }
	.cs-hero__title { font-size: 56px; line-height: .9; margin: 20px 0; }
	.cs-hero__subtitle { font-size: 22px; }
	.cs-hero__lede { font-size: 18px; }
	.cs-hero__actions { gap: 20px; }
	.cs-hero__photo { min-height: 360px; border-left: 0; border-top: var(--cs-rule); }
	.cs-note { width: 100%; }
	.cs-hero__cta, .cs-register__cta { width: 100%; }

	.cs-h2, .cs-h2--serif { font-size: 30px; }
	.cs-q__text { font-size: 23px; }
	.cs-qbody { font-size: 18px; }
	.cs-qkicker { font-size: 22px; }

	.cs-sp__photo { height: 300px; }
	.cs-sp__body { padding: 24px 24px 28px; }
	.cs-sp__name { font-size: 27px; }
	.cs-sp__bio { font-size: 17px; }

	.cs-day__name { font-size: 25px; }
	.cs-row__title { font-size: 22px; }

	.cs-kids__photo { min-height: 300px; }
	.cs-kids__text { padding: 44px 24px; }
	.cs-kids__body { font-size: 18px; }

	.cs-faq__item h3 { font-size: 21px; }
	.cs-faq__item p { font-size: 17px; }

	.cs-register__title { font-size: 34px; }
	.cs-register__body { font-size: 18px; }
	.cs-map, .cs-map iframe { min-height: 260px; }

	.cs-share__deck { font-size: 18px; }
	/* Two per row keeps the chips tappable. The <li> is the flex item, not the
	   <a> — sizing the anchor here would do nothing. */
	.cs-sharerow { gap: 10px; }
	.cs-sharerow li { flex: 1 1 calc(50% - 5px); display: flex; }
	.cs-sharebtn { width: 100%; justify-content: center; font-size: 14px; padding: 12px 14px; }
	.cs-share__or { margin: 36px 0 22px; }
	.cs-kit__fig { height: 190px; }

	.cs-footer__in { padding: 28px 24px; gap: 18px; }
	.cs-footer__tag { font-size: 11px; }
}

@media (max-width: 700px) {
	/* Schedule ledger becomes stacked rows: time label above the title */
	.cs-row { grid-template-columns: 1fr; gap: 8px; }
	.cs-row__time { letter-spacing: .1em; }
	.cs-day { margin-bottom: 4px; }
}

@media (max-width: 380px) {
	.cs-hero__title { font-size: 46px; }
	.cs-header__in { padding: 12px 16px; }
	.cs-header__right { gap: 12px; }
	.cs-header .cs-logo a > span > span:first-child { font-size: 18px !important; }
	.cs-btn--head { font-size: 11px; padding: 11px 14px; }
	.cs-cta__full { display: none; }
	.cs-cta__short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-rise { opacity: 1; animation: none; }
	.ftk-cs *,
	.ftk-cs *::before,
	.ftk-cs *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.cs-header, .cs-map, .cs-btn { display: none; }
	.ftk-cs { background: #fff; }
	.cs-band { border-bottom: 1px solid #999; }
}