/* Our story (8.0). The page reuses the Partners hero (partners.css), the
   home page's stacking cards, reviews and good-time band (direction.css)
   and the gift cards' link cards (gift-cards.css); this file holds its two
   own section, the slogan strip with the mission, and
   the placeholder for story photos still to come. Tokens only. */

/* Every box sizes as on the pages these pieces come from (.gc, .pt) */
body.acs-our-story .os *,
body.acs-our-story .os *::before,
body.acs-our-story .os *::after {
	box-sizing: border-box;
}

/* The link cards follow the reviews here, not the good-time band: they
   take the band's gap above them, as on gift cards */
body.acs-our-story .gc-links {
	margin-top: 4rem;
}

/* The site's smooth scroll-behavior throws ScrollTrigger's measuring off
   when it refreshes mid-page (a resize, late fonts), leaving the crab and
   the cards' triggers out of step with the scroll: instant on this page */
html:has(body.acs-our-story) {
	scroll-behavior: auto;
}

/* ---------- 8.2 The story, option C: the timeline ----------
   After Brets' history page (designer's reference, 2026-10-01), in the
   site's own look: an ink rail with a cream dashed centre, a yellow
   shack-sign tag on the rail for each milestone's year, Hobo
   headings and Body Base copy beside it. our-story.js slides the crab
   straight down the rail with the scroll and fills the rail red behind it. */

body.acs-our-story .os-tl {
	--os-tl-col: 5.25rem;       /* the rail's column, the tags centred on it */
	--os-tl-crab: 3.75rem;
	--os-tl-rail: 0.625rem;
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin: 4rem auto 0;
}

body.acs-our-story .os-tl__head {
	max-width: 46rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

body.acs-our-story .os-tl__title {
	text-wrap: balance;
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
	text-transform: uppercase;
	color: var(--acs-ink);
}

body.acs-our-story .os-tl__sub {
	text-wrap: balance;
	margin: 1rem 0 0;
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
	color: var(--acs-ink-soft);
}

body.acs-our-story .os-tl__sub strong {
	font-weight: 700;
	color: var(--acs-ink);
}

body.acs-our-story .os-tl__body {
	position: relative;
	width: min(68rem, 100%);
	margin: 0 auto;
	padding-top: calc(var(--os-tl-crab) + 1.5rem);
	padding-bottom: 1.5rem;
}

/* The rail: ink, a cream dashed centre, a cream cap on top */
body.acs-our-story .os-tl__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--os-tl-col) / 2 - var(--os-tl-rail) / 2);
	width: var(--os-tl-rail);
	border-radius: 999px;
	background:
		repeating-linear-gradient(to bottom, var(--acs-cream) 0 0.25rem, transparent 0.25rem 0.875rem) 50% 0 / 2px 100% no-repeat,
		var(--acs-ink);
}

/* The red line the crab leaves behind it, grown from the top by
   our-story.js (height, not a scale, so its rounded top stays round) */
body.acs-our-story .os-tl__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	border-radius: inherit;
	background: var(--acs-red);
}

body.acs-our-story .os-tl__crab {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	width: var(--os-tl-crab);
	height: auto;
	margin-left: calc(var(--os-tl-crab) / -2);
	filter: drop-shadow(0 0.25rem 0.25rem rgba(0, 0, 0, 0.2));
	will-change: transform;
}

body.acs-our-story .os-tl__list {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phone: the rail on the left, the tag on it, the copy beside it */
body.acs-our-story .os-tl__item {
	display: grid;
	grid-template-columns: var(--os-tl-col) minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: start;
}

/* The year tag: a shack sign. Shack Yellow, an ink outline with a hard
   ink offset shadow (as the heading's comic edge) and the Hobo display
   face; tilted a little, the other way on every
   second one, on the rail level with the heading */
body.acs-our-story .os-tl__tag {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	margin-top: 0.125rem;
	padding: 0.4375rem 0.625rem 0.3125rem;
	border: 2px solid var(--acs-ink);
	border-radius: 0.5rem;
	background: var(--acs-yellow);
	box-shadow: 0.1875rem 0.1875rem 0 var(--acs-ink);
	font-family: var(--acs-font-display);
	font-size: var(--acs-text-lg-size);
	line-height: 1;
	white-space: nowrap;
	color: var(--acs-ink);
	transform: rotate(-4deg);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}

body.acs-our-story .os-tl__item:nth-child(even) .os-tl__tag {
	transform: rotate(3deg);
}

/* The crab has reached it: Crabbin' Red, white year, a little pop */
body.acs-our-story .os-tl__item.is-reached .os-tl__tag {
	background: var(--acs-red);
	color: var(--acs-white);
	transform: rotate(-4deg) scale(1.1);
}

body.acs-our-story .os-tl__item.is-reached:nth-child(even) .os-tl__tag {
	transform: rotate(3deg) scale(1.1);
}

body.acs-our-story .os-tl__copy {
	grid-column: 2;
	grid-row: 1;
}

/* Two lines at most at every width (designer's rule, 2026-10-01): keep
   headings short; balance splits them evenly ("More shacks, / one big
   family") */
body.acs-our-story .os-tl__heading {
	text-wrap: balance;
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
	text-transform: uppercase;
	color: var(--acs-ink);
}

/* Balanced: every line about as long as the next, no short tail */
body.acs-our-story .os-tl__text {
	text-wrap: balance;
	max-width: 40rem;
	margin: 0.5rem 0 0;
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
	color: var(--acs-ink);
}

body.acs-our-story .os-tl__text strong {
	font-weight: 700;
}

body.acs-our-story .os-tl__cta {
	margin-top: 2.5rem;
	text-align: center;
}

/* The values' heading reads in two balanced lines from tablets up (the
   home head's 44rem cap would wrap it to three) */
body.acs-our-story #values .a-crowd__head {
	max-width: 60rem;
}

body.acs-our-story #values .a-crowd__title {
	text-wrap: balance;
}

/* Room between the timeline's button and the values' heading */
body.acs-our-story .os-tl + .a-crowd,
body.acs-our-story .os-tl + .os-values {
	margin-top: 4rem;
}

/* ---------- 8.2 The story, option B: journey cards ----------
   The location template's Shack hours card (cream, cream border, cream
   offset shadow) as the card; the key words of each heading on the hours
   card's "today" band (--l-today), swept in as the card arrives. Spaced
   and zigzagging down the centre: each card sits a touch left or right
   and tilts the other way. our-story.js brings each one up from below to
   settle under the one before (.is-in). */

body.acs-our-story .os-journey {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin: 4rem auto 0;
}

body.acs-our-story .os-journey__head {
	margin-bottom: 2.5rem;
	text-align: center;
}

body.acs-our-story .os-journey__title {
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
	text-transform: uppercase;
	color: var(--acs-ink);
}

body.acs-our-story .os-journey__sub {
	margin: 0.75rem 0 0;
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
	color: var(--acs-ink-soft);
}

body.acs-our-story .os-journey__list {
	display: grid;
	gap: 1.25rem;
	width: min(44rem, 100%);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

body.acs-our-story .os-card {
	padding: 1.5rem 1.25rem 1.375rem;
	border: 1px solid var(--l-cream-line);
	border-radius: 0.75rem;
	background: var(--acs-cream);
	box-shadow: 0.375rem 0.375rem 0 var(--l-cream-shadow);
	rotate: -1deg;
}

body.acs-our-story .os-card:nth-child(even) {
	rotate: 1deg;
}

body.acs-our-story .os-card__heading {
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
	text-transform: uppercase;
	color: var(--acs-ink);
}

/* The hours card's today band behind the key words */
body.acs-our-story .os-card__heading mark {
	padding: 0 0.25em;
	border-radius: 0.25rem;
	background: linear-gradient(var(--l-today), var(--l-today)) 0 0 / 100% 100% no-repeat;
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

body.acs-our-story .os-card__body {
	margin: 0.75rem 0 0;
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
	color: var(--acs-ink);
}

body.acs-our-story .os-card__body strong {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* Armed by our-story.js: the band starts empty and sweeps in */
body.acs-our-story .os-journey.is-armed .os-card__heading mark {
	background-size: 0% 100%;
	transition: background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
}

body.acs-our-story .os-journey.is-armed .os-card.is-in .os-card__heading mark {
	background-size: 100% 100%;
}

/* ---------- 8.3 The story, option A ---------- */

/* Room above the photo cards */
body.acs-our-story .os-journey + .a-crowd,
body.acs-our-story .os-journey + .os-values {
	margin-top: 4rem;
}

/* ---------- 8.4b The crab parade ----------
   The location hero's parade (.l-parade, location.css) in its own lane on
   the page ground, the section gap above and below it. Off the hero
   there's no torn edge to walk behind, so the crab keeps its feet, and the
   string is ink (white is lost on the light ground). */
/* The lane is the parade's own height: the crab's head 1rem (waddle room)
   below its top. It walks in right where the values end, as the location
   hero's walks along the hero's foot (designer, 2026-10-01): no margin
   above. Below, 3rem to the reviews on phones and tablets, 4rem from 1024,
   measured from the banner's foot, which hangs a little below the crab
   (two lines on phones) */
body.acs-our-story .os-parade {
	position: relative;
	height: calc(var(--l-parade-h) + 1rem);
	margin-top: 0;
	margin-bottom: 3.9375rem;
}

body.acs-our-story .os-parade .l-parade {
	bottom: 0;
}

body.acs-our-story .os-parade .l-parade__crab {
	-webkit-mask-image: none;
	mask-image: none;
}

body.acs-our-story .os-parade .l-parade__string path {
	stroke: var(--acs-ink);
}

/* ---------- 8.4 Slogan strip and mission ---------- */

/* The strip sits between the values' last card and the reviews, with the
   page's section gap (4rem, 6rem from 1024) on both sides */
body.acs-our-story .os-mission {
	margin-top: 4rem;
	padding-bottom: 4rem;
}

body.acs-our-story .os-strip {
	overflow: hidden;
	padding: 1rem 0;
	background: var(--acs-yellow);
}

body.acs-our-story .os-strip__track {
	display: flex;
	width: max-content;
	animation: os-strip 28s linear infinite;
}

body.acs-our-story .os-strip__group {
	display: flex;
	flex: none;
}

body.acs-our-story .os-strip__item {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	padding-right: 1.5rem;
	font-family: var(--acs-font-display);
	font-size: var(--acs-h3-size);
	line-height: var(--acs-h3-lh);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--acs-ink);
}

/* A red dot between the calls */
body.acs-our-story .os-strip__item::after {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--acs-red);
}

@keyframes os-strip {
	to {
		transform: translateX(-50%);
	}
}

body.acs-our-story .os-mission__body {
	width: min(56rem, 100% - 2 * var(--acs-gutter));
	margin: 0 auto;
	padding-top: 4rem;
	text-align: center;
}

body.acs-our-story .os-mission__title {
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
	text-transform: uppercase;
	color: var(--acs-ink);
}

body.acs-our-story .os-mission__text {
	margin: 1.25rem auto 0;
	max-width: 40rem;
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
	color: var(--acs-ink-soft);
}

body.acs-our-story .os-mission .l-btn {
	margin-top: 2rem;
}

/* ---------- 8.3 Story photos still to come ---------- */

body.acs-our-story .a-crowd__media .acs-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: radial-gradient(120% 90% at 50% 30%, var(--acs-placeholder) 0%, var(--acs-placeholder-deep) 100%);
	color: var(--acs-white);
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

/* ---------- 768: the rail in the centre, milestones right, left, right ---------- */

@media (min-width: 768px) {
	/* The banner is one line from here: it hangs less below the crab */
	body.acs-our-story .os-parade {
		margin-bottom: 3.625rem;
	}

	body.acs-our-story .os-tl__rail {
		left: calc(50% - var(--os-tl-rail) / 2);
	}

	body.acs-our-story .os-tl__item {
		grid-template-columns: minmax(0, 1fr) var(--os-tl-col) minmax(0, 1fr);
		column-gap: 1.5rem;
	}

	body.acs-our-story .os-tl__tag {
		grid-column: 2;
	}

	body.acs-our-story .os-tl__copy {
		grid-column: 3;
	}

	body.acs-our-story .os-tl__item:nth-child(even) .os-tl__copy {
		grid-column: 1;
		text-align: right;
	}

	body.acs-our-story .os-tl__item:nth-child(even) .os-tl__text {
		margin-left: auto;
	}
}

/* ---------- 1024 ---------- */

@media (min-width: 1024px) {
	body.acs-our-story .os-tl {
		--os-tl-col: 7rem;
		--os-tl-crab: 5.5rem;
		--os-tl-rail: 0.875rem;
		margin-top: 6rem;
	}

	body.acs-our-story .os-tl__head {
		margin-bottom: 3.5rem;
	}

	body.acs-our-story .os-tl__list {
		gap: 4rem;
	}

	body.acs-our-story .os-tl__tag {
		margin-top: 0.25rem;
		padding: 0.5625rem 0.875rem 0.4375rem;
		font-size: var(--acs-h5-size);
	}

	body.acs-our-story .os-tl__text {
		margin-top: 0.75rem;
	}

	body.acs-our-story .os-tl__cta {
		margin-top: 3.5rem;
	}

	body.acs-our-story .os-tl + .a-crowd,
	body.acs-our-story .os-tl + .os-values {
		margin-top: 6rem;
	}

	body.acs-our-story .os-journey {
		margin-top: 6rem;
	}

	body.acs-our-story .os-journey__head {
		margin-bottom: 3.5rem;
	}

	body.acs-our-story .os-journey__list {
		gap: 1.75rem;
	}

	/* The zigzag: odd cards a touch left, even a touch right */
	body.acs-our-story .os-card {
		padding: 2rem 1.75rem 1.75rem;
		translate: -1.5rem 0;
	}

	body.acs-our-story .os-card:nth-child(even) {
		translate: 1.5rem 0;
	}

	body.acs-our-story .os-journey + .a-crowd,
	body.acs-our-story .os-journey + .os-values {
		margin-top: 6rem;
	}

	body.acs-our-story .gc-links {
		margin-top: 6rem;
	}

	body.acs-our-story .os-mission {
		margin-top: 6rem;
		padding-bottom: 6rem;
	}

	body.acs-our-story .os-parade {
		margin-top: 0;
		margin-bottom: 4.5625rem;
	}

	body.acs-our-story .os-mission__body {
		padding-top: 6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.acs-our-story .os-tl__tag {
		transition: none;
	}

	body.acs-our-story .os-strip__track {
		animation: none;
	}

	body.acs-our-story .os-journey.is-armed .os-card__heading mark {
		transition: none;
	}
}

/* ---------- Type: the style guide's scale, exactly ----------
   Every heading and paragraph on this page takes the token of its tag
   (/styleguide/, designer 2026-10-01): h1 H1, h2 H2, h3 H3; the line under
   a section heading Body L, paragraphs Body Base. Headings Hobo 400
   uppercase, body Century Gothic 400, no letter-spacing. The shared pieces
   (the home page's values rows, reviews and good-time band, the gift
   cards' link cards) set their own sizes; here they follow the scale. */

body.acs-our-story main .pt-hero__title {
	letter-spacing: normal;
}

/* The hero's line: two lines on desktop (designer, 2026-10-01), so it
   takes the copy column's width, not the Partners hero's 26rem */
@media (min-width: 1024px) {
	body.acs-our-story main .pt-hero__sub {
		max-width: 36rem;
		text-wrap: balance;
	}
}

body.acs-our-story main .a-crowd__title,
body.acs-our-story main .a-reviews__title,
body.acs-our-story main .a-goodtime__title {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
	letter-spacing: normal;
}

body.acs-our-story main .os-tl__heading,
body.acs-our-story main .a-crowd__heading,
body.acs-our-story main .gc-link__title {
	text-wrap: balance;
	font-size: var(--acs-h3-size);
	line-height: var(--acs-h3-lh);
	letter-spacing: normal;
}

body.acs-our-story main .a-crowd__sub,
body.acs-our-story main .a-reviews__sub,
body.acs-our-story main .a-goodtime__sub {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
	letter-spacing: normal;
}

body.acs-our-story main .a-crowd__body,
body.acs-our-story main .a-review__text {
	text-wrap: pretty;
}

body.acs-our-story main .a-crowd__body {
	text-wrap: balance;
}

body.acs-our-story main .a-crowd__body,
body.acs-our-story main .a-review__text {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
	font-weight: 400;
	letter-spacing: normal;
}

/* The reviews sit one section gap under the values (designer, 2026-10-07:
   the crab parade that stood between them is removed; the values' pinned
   wrapper keeps the page's own section rule from reaching the reviews) */
body.acs-our-story main .a-reviews {
	margin-top: var(--acs-section-gap);
}

/* ---------- 8.4 The values in the Partners giving layout ----------
   (designer, 2026-10-07; they were the home page's stacking rows.) The
   blocks are partners.css's pt-giving: photo one side, copy the other,
   swapping. Here they sit under the section's heading, a section gap
   apart, with no logo or amount above the block's heading. */
body.acs-our-story .os-values .a-crowd__head + .pt-giving {
	margin-top: 2rem;
}

body.acs-our-story .os-values .pt-giving + .pt-giving {
	margin-top: var(--acs-section-gap);
}

body.acs-our-story .os-values .pt-giving__title,
body.acs-our-story .os-values .pt-giving__label {
	margin-top: 0;
}

@media (min-width: 1024px) {
	body.acs-our-story .os-values .a-crowd__head + .pt-giving {
		margin-top: 3.5rem;
	}

	body.acs-our-story .os-values .pt-giving + .pt-giving {
		margin-top: var(--acs-section-gap);
	}
}

/* Two buttons side by side under a block (the crew and franchise links),
   wrapping when the column is narrow; centred on phones with the copy */
body.acs-our-story .os-values .pt-giving__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

body.acs-our-story .os-values .pt-giving__ctas .pt-giving__cta {
	margin-top: 0;
}

@media (max-width: 767px) {
	body.acs-our-story .os-values .pt-giving__ctas {
		justify-content: center;
	}
}

/* "Our passion is to serve / delicious seafood" keeps to two lines: its
   first line is about 13em wide (set without kerning), so where the
   column is narrower than that at H4 the blocks' headings step down to
   fit: the half column on tablets, the full column on small phones
   (headings never run to three lines). */
@media (max-width: 767px) {
	body.acs-our-story .os-values .pt-giving__label {
		font-size: min(var(--acs-h4-size), calc((100vw - 2 * var(--acs-gutter) - 1rem) / 13.3));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	body.acs-our-story .os-values .pt-giving__label {
		font-size: min(var(--acs-h4-size), calc(((100vw - 2 * var(--acs-gutter) - 2.5rem) / 2 - 0.5rem) / 13.3));
		line-height: 1.25;
	}
}

/* Side by side (from 768), each block's heading, lines and buttons start
   level with the photo's top edge (designer, 2026-10-07; on Partners they
   are centred on the photo's height) */
@media (min-width: 768px) {
	body.acs-our-story .os-values .pt-giving {
		align-items: start;
	}
}

/* ---------- Section rhythm: the style guide's one gap ----------
   (designer, 2026-10-07.) Every section on this page sits the site's
   section gap from the last (--acs-section-gap: 60px on phones, 120px on
   desktop). The page had its own 64 / 96px gaps above the timeline, the
   values and the link cards and under the link cards. */
body.acs-our-story main > .os-tl,
body.acs-our-story main > .os-journey,
body.acs-our-story main > .os-values,
body.acs-our-story main > .os-tl + .os-values,
body.acs-our-story main > .os-journey + .os-values,
body.acs-our-story main > .os-mission,
body.acs-our-story main > .gc-links {
	margin-top: var(--acs-section-gap);
}

body.acs-our-story main > .gc-links {
	margin-bottom: var(--acs-section-gap);
}

/* The band carries no bottom margin here, so the footer keeps the site's
   own gap under it (40px on phones and tablets, the section gap on
   desktop); its 64px pushed the footer to 64 on phones */
body.acs-our-story main > .a-goodtime {
	margin-bottom: 0;
}

/* The link cards' titles (Locations, Partners, Press) are H5 at every
   width (designer, 2026-10-07; they were H3 here, then H4 for a moment) */
body.acs-our-story main .gc-link__title {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

/* Best seafood in town: the home page's good-time band as it is on home.
   Its line is white, as home's (the base rule's 92% white showed here). */
body.acs-our-story main .a-goodtime__sub {
	color: var(--acs-white);
}

/* ---------- 8.4c Option 2: the paragraph in a centred column ----------
   (designer's mock-up, 2026-10-07; /our-story-option-2/ only.) The About
   page's paragraph in an 800px column centred on the page, in the display
   face at the H4 size, sentence case as in the mock-up. our-story.js
   writes it on letter by letter as the Partners headings write on. Three
   small crabs keep it company, far apart: one stands on the first line at
   the left, one sits after a sentence in the middle, one follows the last
   word; each moves on the spot (still under reduced motion). */
body.acs-our-story .os-creed {
	--os-creed-crab: clamp(2.75rem, 2.3rem + 1.4vw, 3.75rem);  /* on the first line: 44 to 60px */
	--os-creed-inline: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);   /* in the text: 36 to 48px */
	position: relative;
	width: min(50rem, 100% - 2 * var(--acs-gutter));
	margin: var(--acs-section-gap) auto 0;
}

/* Set without kerning pairs: letters in their own boxes cannot kern, so
   the text would shift as the plain text came back (as on Partners) */
body.acs-our-story .os-creed__text {
	margin: 0;
	color: var(--acs-ink);
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
	font-kerning: none;
	font-variant-ligatures: none;
	text-wrap: pretty;
}

/* A phrase on the yellow highlighter, ink on yellow as the Partners giving
   amounts; our-story.js draws the swipe across from the left once the
   phrase is written. A phrase that wraps keeps its ends on each line. */
body.acs-our-story .os-creed__text mark {
	padding: 0.05em 0.2em 0;
	margin-inline: -0.2em;
	border-radius: 0.2em;
	background: linear-gradient(var(--acs-yellow), var(--acs-yellow)) left center / 100% 100% no-repeat;
	color: var(--acs-ink);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* A word and the crab after it stay on one line */
body.acs-our-story .os-creed__end {
	white-space: nowrap;
}

/* The word and letter spans the text writes on with */
body.acs-our-story .os-creed__word {
	display: inline-block;
	white-space: nowrap;
}

body.acs-our-story .os-creed__letter {
	display: inline-block;
}

body.acs-our-story .os-creed__crab {
	pointer-events: none;
}

body.acs-our-story .os-creed__crab img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Standing on the first line, at its left end */
body.acs-our-story .os-creed__crab--top {
	position: absolute;
	top: calc(0.625rem - var(--os-creed-crab));
	left: 0;
	display: block;
	width: var(--os-creed-crab);
	height: var(--os-creed-crab);
}

/* In the text, sitting on the line after its word. The box is one line
   tall and the art stands up out of it, so a crab taller than the line
   never pushes the lines apart */
body.acs-our-story .os-creed__crab--in {
	position: relative;
	display: inline-block;
	width: var(--os-creed-inline);
	height: 1em;
	margin-left: 0.25em;
	vertical-align: baseline;
}

body.acs-our-story .os-creed__crab--in img {
	position: absolute;
	left: 0;
	bottom: -0.16em;
	height: var(--os-creed-inline);
}

/* The last one faces back at the text */
body.acs-our-story .os-creed__crab--end img {
	scale: -1 1;
}

@media (prefers-reduced-motion: no-preference) {
	body.acs-our-story .os-creed__crab--top img {
		animation: os-creed-scuttle 2.8s ease-in-out infinite alternate;
	}

	body.acs-our-story .os-creed__crab--mid img {
		animation: os-creed-wave 1.5s ease-in-out infinite alternate;
		transform-origin: 50% 100%;
	}

	body.acs-our-story .os-creed__crab--end img {
		animation: os-creed-hop 1.9s ease-in-out infinite;
	}
}

/* A sideways scuttle along the line: a few steps, rocking leg to leg */
@keyframes os-creed-scuttle {
	0% { transform: translate(0, 0) rotate(-6deg); }
	20% { transform: translate(0.375rem, -0.125rem) rotate(5deg); }
	40% { transform: translate(0.75rem, 0) rotate(-5deg); }
	60% { transform: translate(1.125rem, -0.125rem) rotate(5deg); }
	80% { transform: translate(1.5rem, 0) rotate(-5deg); }
	100% { transform: translate(1.875rem, -0.0625rem) rotate(6deg); }
}

/* Rocking on the spot, claws up */
@keyframes os-creed-wave {
	0% { transform: rotate(-9deg); }
	50% { transform: translateY(-0.125rem) rotate(0deg); }
	100% { transform: rotate(9deg); }
}

/* Two little hops, then a rest */
@keyframes os-creed-hop {
	0%, 46%, 100% { transform: translateY(0) rotate(0deg); }
	12% { transform: translateY(-0.3125rem) rotate(-9deg); }
	24% { transform: translateY(0) rotate(5deg); }
	34% { transform: translateY(-0.1875rem) rotate(-4deg); }
}