/* Location template (3.1) — standalone preview, layered over Direction A's
   tokens and chrome (the body carries direction-a acs-location). Every rule
   is scoped to body.acs-location and the l- prefix, so the homepage
   directions never see it. Sections reused from home (a-cats, a-reviews,
   a-crowd) keep A's own styles untouched.

   Responsive at every width (the designer lifted CLAUDE.md 13a for this
   page): phone base, tablet 768-1023, desktop 1024+ (the chrome switch),
   small-desktop 1024-1279 last so it wins. Sections sit on A's paper
   ground; the hero and the gallery are red bands and FAQ a white one,
   torn where they meet the paper. */

body.acs-location .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.acs-location) {
		scroll-behavior: smooth;
	}
}

/* Jump-link targets clear whatever of the header stays pinned. */
body.acs-location main [id] {
	scroll-margin-top: calc(var(--acs-sticky-h) + var(--acs-tear-h) + var(--l-jump-h) + 1.25rem);
}

/* Home's category grid and the footer run to the same edges as the page
   grid here (--l-wrap), so nothing on this page is wider than the rest. */
body.acs-location .a-cats__grid {
	max-width: var(--l-wrap);
}

body.acs-location .acs-footer__main {
	max-width: var(--l-wrap); /* content-box: the gutter padding sits outside */
}

@media (min-width: 1280px) {
	body.acs-location .acs-footer__bottom {
		max-width: var(--l-wrap); /* content-box: the gutter padding sits outside */
	}
}

/* ---------- Shared pieces ---------- */

/* Intro column: heading, body. */

body.acs-location .l-h2 {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.1;
	color: var(--acs-ink);
	text-wrap: balance; /* no orphaned last word */
}

body.acs-location .l-intro__body {
	max-width: 30rem;
	margin: 1.25rem 0 0;
	color: var(--acs-ink-soft);
	font-size: 1rem;
	line-height: 1.65;
}

body.acs-location .l-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 1.75rem;
	padding: 0.9375rem 1.5rem;
	border-radius: var(--acs-radius);
	background: var(--acs-red);
	color: var(--acs-white);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

body.acs-location .l-btn:hover {
	background: var(--acs-red-deep);
}

body.acs-location .l-btn svg {
	transition: transform 0.2s ease;
}

body.acs-location .l-btn:hover svg {
	transform: translateX(3px);
}

/* Secondary: white, like the action bar's secondary buttons (All
   locations). */
body.acs-location .l-btn--secondary {
	background: var(--acs-white);
	color: var(--acs-ink);
	box-shadow: inset 0 0 0 1px var(--acs-line);
}

body.acs-location .l-btn--secondary:hover {
	background: var(--acs-hover);
	box-shadow: inset 0 0 0 1px var(--acs-ink);
}

/* The designer's round arrow, in brand red; slides on hover. */
body.acs-location .l-circle-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--acs-red);
	color: var(--acs-white);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

body.acs-location a:hover > .l-circle-arrow,
body.acs-location a:focus-visible > .l-circle-arrow {
	transform: translateX(4px);
	background: var(--acs-red-deep);
}

/* Small highlighted label (nearby distance). */
body.acs-location .l-pill {
	display: inline-block;
	padding: 0.4375rem 0.8125rem 0.3125rem; /* caps sit high in Century Gothic's box */
	line-height: 1;
	border-radius: 999px;
	background: var(--acs-yellow);
	color: var(--acs-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Where supported, trim the box to the caps and centre them exactly. */
@supports (text-box: trim-both cap alphabetic) {
	body.acs-location .l-pill {
		padding: 0.4375rem 0.8125rem;
		text-box: trim-both cap alphabetic;
	}
}

/* White link card: title over its details, circle arrow at the right
   (lunch and happy hour menus, open roles). */
body.acs-location .l-linkcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.5rem;
	padding: 1.375rem 1.25rem 1.375rem 1.5rem;
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius);
	background: var(--acs-white);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	color: var(--acs-ink);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.acs-location .l-linkcard:hover {
	border-color: var(--acs-red);
	transform: translateY(-3px);
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
}

body.acs-location .l-linkcard__title {
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-size: 1.5rem;
	line-height: 1.1;
}

body.acs-location .l-linkcard__meta {
	grid-column: 1;
	color: var(--acs-ink-soft);
	font-size: 0.875rem;
}

body.acs-location .l-linkcard .l-circle-arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
}

/* Bands torn into the paper top and bottom: FAQ on white, the gallery on
   red. */
body.acs-location .l-faq {
	position: relative;
	padding: calc(var(--l-tear) + var(--acs-section-gap) * 0.66) 0;
	background: var(--acs-white);
}

body.acs-location .l-faq::before,
body.acs-location .l-faq::after,
body.acs-location .l-stay__band::before,
body.acs-location .l-stay__band::after,
body.acs-location .l-gallery::before,
body.acs-location .l-gallery::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-location .l-faq::before,
body.acs-location .l-stay__band::before,
body.acs-location .l-gallery::before {
	top: -1px;
	background-image: url("../directions/a/media/masks/hero-top.png");
}

body.acs-location .l-faq::after,
body.acs-location .l-stay__band::after,
body.acs-location .l-gallery::after {
	bottom: -1px;
	background-image: url("../directions/a/media/masks/hero-bottom.png");
}

/* Desktop: the header carries the torn edge under it (direction.css), so
   the red bands straight under the header drop their own top edge. */
@media (min-width: 1024px) {
	body.acs-location :is(.l-hero, .lx-hero, .lxb-controls, .gc-hero, .pt-hero, .bl-hero, .bl-intro, .bl-art-hero, .pr-hero)::before {
		display: none;
	}
}

/* Split sections: intro left, content right on desktop; stacked on phones. */
body.acs-location .l-split {
	display: grid;
	gap: 2.25rem;
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
}

/* ---------- 3.1.1 Hero ---------- */

/* Phones: the photo on top, fading down into the red panel of details. */
body.acs-location .l-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: -0.5rem; /* tucked under the logo row like home's hero */
	padding-bottom: calc(var(--l-tear) + var(--l-parade-h) + 2.25rem);
	background: var(--acs-red);
	color: var(--acs-white);
}

/* The same torn paper edges as home's hero, top and bottom. */
body.acs-location .l-hero::before,
body.acs-location .l-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-location .l-hero::before {
	top: -1px;
	background-image: url("../directions/a/media/masks/hero-top.png");
}

body.acs-location .l-hero::after {
	bottom: -1px;
	background-image: url("../directions/a/media/masks/hero-bottom.png");
}

body.acs-location .l-hero__media {
	position: relative;
	height: clamp(15rem, 68vw, 20rem);
	background: var(--acs-placeholder-deep);
}

body.acs-location .l-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.acs-location .l-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(var(--l-red-rgb), 0.15) 0%,
		rgba(var(--l-red-rgb), 0.25) 45%,
		rgba(var(--l-red-rgb), 1) 100%
	);
}

body.acs-location .l-hero__content {
	position: relative;
	z-index: 1;
	margin-top: -1.5rem;
	padding: 0 var(--acs-gutter);
}

body.acs-location .l-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--acs-white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

body.acs-location .l-hero__back:hover {
	text-decoration: underline;
}

body.acs-location .l-hero__title {
	margin: 1.5rem 0 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2.375rem, 1.5rem + 3.8vw, 4rem);
	line-height: 1.06;
}

body.acs-location .l-hero__accent {
	color: var(--acs-yellow);
}

body.acs-location .l-hero__place {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 1.75rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--acs-white);
}

body.acs-location .l-hero__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

/* The status pill in yellow so it reads first on the red. */
body.acs-location .l-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.5rem 0.9375rem;
	border-radius: 999px;
	background: var(--acs-yellow);
	color: var(--acs-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.acs-location .l-hero__pill::before {
	content: "";
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: currentColor;
}

body.acs-location .l-hero__until {
	font-size: 0.9375rem;
	font-weight: 700;
}

/* Parade: a crab walks the bottom of the hero right to left, towing the
   banner on a wavy dashed string (location.js drives the walk and the
   wave). The lane clips the group left and right as it enters and leaves,
   but not top and bottom, so the swaying banner and its shadow can dip
   over the torn edge instead of being cut off. Without JS or with reduced
   motion the group stands at the right of the grid. */
body.acs-location .l-parade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--l-tear) * 0.35);
	z-index: 4; /* over the torn edge, so the crab walks along it */
	height: calc(var(--l-parade-h) + 1rem);
	overflow: hidden; /* fallback: clips both axes */
	pointer-events: none;
}

@supports (overflow: clip) {
	body.acs-location .l-parade {
		overflow: visible;
		overflow-x: clip;
	}
}

body.acs-location .l-parade__group {
	position: absolute;
	right: max(var(--acs-gutter), (100% - var(--l-wrap)) / 2);
	bottom: 0;
	display: flex;
	align-items: flex-start;
}

/* The footer's trident crab, cropped at the waist: its bottom edge fades
   into the torn paper, so it reads as walking along behind the tear. The
   fade starts below the claw the string is tied to. */
body.acs-location .l-parade__crab {
	position: relative;
	z-index: 1;
	width: auto;
	height: var(--l-parade-h);
	margin-top: 1rem; /* room above for the waddle */
	-webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}

/* The tow (string + banner) is a zero-height row whose centre line runs
   through the string's far end, so the banner centres on it at any number
   of lines. The string is tied round the crab's right claw: its path starts
   at (4, 34) of a 200 x 60 box, which lands on the claw tip, 92.5% across
   and 82% down the crab (1000 x 657, so 1.522h wide); the line sits 0.033h
   above that (the end is at y 30). The path's first loop wraps the claw. */
body.acs-location .l-parade__tow {
	display: flex;
	align-items: center;
	height: 0;
	margin: calc(1rem + var(--l-parade-h) * 0.787) 0 0 calc(var(--l-parade-h) * -0.146);
}

body.acs-location .l-parade__string {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: calc(var(--l-parade-h) * 1.6);
	height: calc(var(--l-parade-h) * 0.5);
	overflow: visible;
}

body.acs-location .l-parade__string path {
	fill: none;
	stroke: var(--acs-white);
	stroke-width: 2;
	stroke-dasharray: 5 5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

body.acs-location .l-parade__banner {
	flex-shrink: 0;
	margin: 0 0 0 -2px;
	padding: 0.75rem 1.25rem;
	border-radius: 1rem;
	background: var(--acs-yellow);
	color: var(--acs-ink);
	font-size: var(--l-banner-size);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}

/* Phones: the banner wraps to two lines so the group stays about a screen
   wide. */
@media (max-width: 767px) {
	body.acs-location .l-parade__banner {
		width: 12.5rem;
		padding: 0.625rem 1rem;
		white-space: normal;
	}

	body.acs-location .l-parade__string {
		width: calc(var(--l-parade-h) * 1.2);
	}
}

/* ---------- 3.1.2 Action bar ---------- */

body.acs-location .l-hero + .l-actions {
	margin-top: 1.5rem;
}

body.acs-location .l-actions {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
}

body.acs-location .l-actions__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.acs-location .l-actions__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 3.25rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius);
	background: var(--acs-white);
	color: var(--acs-ink);
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

body.acs-location .l-actions__btn:hover {
	background: var(--acs-hover);
}

body.acs-location .l-actions__btn svg {
	flex-shrink: 0;
}

/* Phones: Order online takes the whole first row; the other two share the
   next. */
body.acs-location .l-actions__list > li:first-child {
	grid-column: 1 / -1;
}

body.acs-location .l-actions__btn--primary {
	border-color: var(--acs-red);
	background: var(--acs-red);
	color: var(--acs-white);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.acs-location .l-actions__btn--primary:hover {
	border-color: var(--acs-red-deep);
	background: var(--acs-red-deep);
}

/* ---------- Jump links: sticky bar under the header ---------- */

/* A white box exactly as wide as the action bar above it (the page grid).
   It pins right under the header as the same box (same width, border and
   corners), and the header's torn edge drops below it, so the order is
   the nav, the box, then the tear (designer, 2026-10-06: the tear used to
   cut in between the two). The link for the section in view turns red
   with a red rule. Scrolls sideways on phones. */
body.acs-location .l-jump {
	position: sticky;
	top: calc(var(--acs-sticky-h) + var(--l-jump-gap)); /* just under the header; the torn edge follows below the box */
	z-index: 40; /* under the header (50) and its drawer */
	box-sizing: border-box;
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin: 1.5rem auto 0;
	padding-inline: 0;
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius);
	background: var(--acs-white);
}

/* Phones (under 768): the bar runs the full width of the screen, edge to
   edge, so the links get every pixel; no side borders or corners there
   (designer, 2026-10-06). Tablets and up keep the box on the page grid. */
@media (max-width: 767px) {
	body.acs-location .l-jump {
		width: 100%;
		border-inline: 0;
		border-radius: 0;
	}
}

/* Pinned, a band in the header's own colour (the page ground on phones,
   white on desktop) surrounds the box from the header down to just under
   it, the full width of the screen, so the header, the box and the torn
   edge below read as one piece and the page does not show through. It is
   the box's own spread shadow, which paints only outside the box, trimmed
   to the band by the clip. */
body.acs-location {
	--l-jump-gap: 0.25rem;   /* header to the box */
	--l-jump-under: 0.5rem;  /* the box to the torn edge */
	--l-jump-band: var(--acs-ground);
}

@media (min-width: 1024px) {
	body.acs-location {
		--l-jump-band: var(--acs-white);
		/* the logo hangs 5px under the header at 1440, so the box sits
		   16px down, 11px clear of it (was 4px: its border ran into the
		   logo; designer, 2026-10-06) */
		--l-jump-gap: 1rem;
	}
}

body.acs-location .l-jump.is-stuck {
	/* a light shadow lifts the box a little (designer, 2026-10-06), over
	   the band */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 0 0 100vmax var(--l-jump-band);
	clip-path: inset(calc(-1 * var(--l-jump-gap) - 1px) -100vmax calc(-1 * var(--l-jump-under)));
}

/* The header's torn edge, moved down to hang under the pinned box */
body.direction-a.acs-location.acs-bar-pinned .acs-header::after,
body.direction-a.acs-location.acs-bar-pinned .acs-header__topbar::after {
	opacity: 1;
	translate: 0 calc(var(--l-jump-gap) + var(--l-jump-h) + var(--l-jump-under));
}

body.acs-location .l-jump + section {
	margin-top: var(--acs-section-gap);
}

body.acs-location .l-jump__list {
	display: flex;
	gap: 1.5rem;
	height: calc(var(--l-jump-h) - 2px); /* the bar's two borders complete --l-jump-h */
	margin: 0;
	padding: 0 1.125rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

body.acs-location .l-jump__list::-webkit-scrollbar {
	display: none;
}

body.acs-location .l-jump__list li {
	display: flex;
	flex-shrink: 0;
}

body.acs-location .l-jump__link {
	display: flex;
	align-items: center;
	border-bottom: 3px solid transparent;
	padding-top: 3px; /* balances the rule so the label sits centred */
	color: var(--acs-ink-soft);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

body.acs-location .l-jump__link:hover {
	color: var(--acs-ink);
}

body.acs-location .l-jump__link[aria-current="true"] {
	border-bottom-color: var(--acs-red);
	color: var(--acs-red);
}

/* ---------- 3.1.3 Hours ---------- */

body.acs-location .l-hours .l-intro__body {
	margin-top: 1.75rem;
}

body.acs-location .l-hours .l-btn {
	margin-top: 2.5rem;
}

body.acs-location .l-hours__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--acs-ink);
	font-size: 0.9375rem;
}

body.acs-location .l-hours__features li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

body.acs-location .l-hours__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);
}

body.acs-location .l-hours__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0.625rem 1rem;
}

body.acs-location .l-hours__card-title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.1;
	color: var(--acs-ink);
}

body.acs-location .l-hours__tag {
	padding: 0.3125rem 0.625rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 0.25rem;
	background: var(--acs-white);
	color: var(--acs-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.acs-location .l-hours__list {
	margin: 0;
}

body.acs-location .l-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5625rem 0.625rem;
	border-radius: 0.25rem;
	color: var(--acs-ink);
	font-size: 0.9375rem;
}

body.acs-location .l-hours__row dd {
	margin: 0;
	white-space: nowrap;
}

body.acs-location .l-hours__row.is-today {
	background: var(--l-today);
	font-weight: 700;
}

body.acs-location .l-hours__holiday {
	margin: 1.125rem 0.625rem 0;
	color: var(--acs-ink-soft);
	font-size: 0.8125rem;
}

/* ---------- 3.1.4 More menus: white link cards under the grid ---------- */

body.acs-location .a-cats + .l-menus {
	margin-top: 3.5rem;
}

body.acs-location .l-menus {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
}

body.acs-location .l-menus__list {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- 3.1.7 Gallery ---------- */

/* A red band torn top and bottom; the white-framed photos sit on it. */
body.acs-location .l-gallery {
	position: relative;
	padding: calc(var(--l-tear) + var(--acs-section-gap) * 0.66) var(--acs-gutter);
	background: var(--acs-red);
}

body.acs-location .l-gallery__title {
	margin: 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	color: var(--acs-white);
}

body.acs-location .l-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.125rem 0.875rem;
	max-width: var(--l-wrap);
	margin: 2rem auto 0;
	padding: 0;
	list-style: none;
}

body.acs-location .l-gallery__photo {
	padding: 0.375rem;
	border-radius: 0.1875rem;
	background: var(--acs-white);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

body.acs-location .l-gallery__photo:nth-child(1) { transform: rotate(-2deg); }

body.acs-location .l-gallery__photo:nth-child(2) { transform: rotate(1.5deg); }

body.acs-location .l-gallery__photo:nth-child(3) { transform: rotate(-1deg); }

body.acs-location .l-gallery__photo:nth-child(4) { transform: rotate(1.25deg); }

body.acs-location .l-gallery__photo:nth-child(5) { transform: rotate(-1.5deg); }

body.acs-location .l-gallery__photo:nth-child(6) { transform: rotate(2deg); }

body.acs-location .l-gallery__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- 3.1.9 Map ---------- */

/* The heading, line and button start level with the map's top edge
   (designer, 2026-10-07; they were centred on its height) */
body.acs-location .l-map {
	align-items: start;
}

/* The shack's name and address on a white card over the map, top left at
   every width (designer, 2026-10-06; first bottom right), in the map
   buttons' own style (white, 8px corners, their shadow) */
body.acs-location .l-map__address {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	max-width: calc(100% - 5rem); /* clear of the buttons down the right edge */
	margin: 0;
	padding: 0.625rem 0.875rem;
	border-radius: var(--acs-radius);
	background: var(--acs-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	color: var(--acs-ink-soft);
	font-size: 1rem;
	font-style: normal;
	line-height: 1.7;
}

body.acs-location .l-map__address strong {
	color: var(--acs-ink);
}

/* Phones: the map is short and narrow, so the card is set a little tighter
   and higher to stay clear of the crab at the map's centre */
@media (max-width: 639px) {
	body.acs-location .l-map__address {
		top: 0.5rem;
		left: 0.5rem;
		padding: 0.5rem 0.75rem;
		line-height: 1.45;
	}
}

/* the line sits 12px under the heading, as every heading's line */
body.acs-location .l-map .l-intro__body {
	margin-top: 0.75rem;
}

body.acs-location .l-map__frame {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--acs-line);
	border-radius: 0.75rem;
	background: var(--acs-white);
}

/* The locations page's crab-pin map (locations-b.css's rules, one pin):
   OpenStreetMap tiles drawn by map.js. A sideways drag pans it; up and
   down scrolls the page. */
body.acs-location .l-map__map {
	--l-map-crab-w: 3rem;
	position: relative;
	height: 17rem;
	overflow: hidden;
	background: var(--acs-hover);
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}

body.acs-location .l-map__map.is-dragging {
	cursor: grabbing;
}

body.acs-location .l-map__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: var(--acs-ink);
	font-size: var(--acs-text-base-size);
	font-weight: 700;
	line-height: var(--acs-text-base-lh);
	text-align: center;
}

body.acs-location .l-map__map.is-live .l-map__fallback {
	display: none;
}

body.acs-location .l-map__tiles {
	position: absolute;
	inset: 0;
}

body.acs-location .l-map__tiles img {
	position: absolute;
	top: 0;
	left: 0;
	width: 256px;
	height: 256px;
	max-width: none;
	filter: grayscale(1) sepia(0.14) contrast(0.92) brightness(1.04);
	-webkit-user-drag: none;
	pointer-events: none;
}

/* The badge crab standing on a red dot; the dot's centre is the shack */
body.acs-location .l-map__pin {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--l-map-crab-w);
	height: calc(var(--l-map-crab-w) * 0.8 + 0.5rem);
	translate: -50% calc(-100% + 0.25rem);
	pointer-events: none;
}

body.acs-location .l-map__pin img {
	position: absolute;
	left: 0;
	bottom: 0.5rem;
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

body.acs-location .l-map__pin span {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--acs-red);
	box-shadow: 0 0 0 2px var(--acs-white);
	translate: -50% 0;
}

body.acs-location .l-map__controls {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

body.acs-location .l-map__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--acs-radius);
	background: var(--acs-white);
	color: var(--acs-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

body.acs-location .l-map__btn:hover {
	background: var(--acs-hover);
}

body.acs-location .l-map__btn svg {
	display: block;
	flex-shrink: 0;
}

/* Find my location, above the zoom buttons, as on the locations page
   (designer, 2026-10-06): red while it is on, pulsing while the browser
   looks, its message beside it on the map; the guest's place is an ink
   dot ringed in white. */
body.acs-location .l-map__locate {
	margin-bottom: 0.375rem;
}

body.acs-location .l-map__locate[aria-pressed="true"] {
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-location .l-map__locate.is-busy {
	animation: l-map-locate 1s ease-in-out infinite alternate;
}

@keyframes l-map-locate {
	to {
		opacity: 0.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.acs-location .l-map__locate.is-busy {
		animation: none;
	}
}

body.acs-location .l-map__msg {
	position: absolute;
	top: 0.75rem;
	right: 3.75rem;
	z-index: 2;
	max-width: calc(100% - 4.5rem);
	margin: 0;
	padding: 0.625rem 0.75rem;
	border-radius: var(--acs-radius);
	background: var(--acs-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	color: var(--acs-ink);
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
	font-weight: 700;
}

body.acs-location .l-map__msg[hidden] {
	display: none;
}

body.acs-location .l-map__me {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border: 3px solid var(--acs-white);
	border-radius: 50%;
	background: var(--acs-ink);
	box-shadow: 0 0 0 6px var(--acs-ctrl-line);
	pointer-events: none;
}

body.acs-location .l-map__me[hidden] {
	display: none;
}

body.acs-location .l-map__note {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 0.125rem 0.375rem;
	background: var(--acs-white);
	font-size: var(--acs-text-sm-size-mobile);
	line-height: var(--acs-text-sm-lh-mobile);
}

body.acs-location .l-map__note a {
	color: var(--acs-ink);
}

/* ---------- 3.1.11 Careers: one white box, a crab on its top edge ---------- */

/* Extra room above so the crab standing on the box clears the section
   before it. */
body.acs-location .l-careers {
	margin-top: calc(var(--acs-section-gap) + var(--l-crab-h));
}

body.acs-location .l-careers__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
	box-sizing: border-box;
	padding: 2.75rem 1.5rem;
	border-radius: 0.75rem;
	background: var(--acs-white);
}

/* The mascot is cropped at the waist, so resting its bottom on the box's
   top edge reads as a crab standing behind the box, peeking over. It
   starts at the top right; location.js paces it along the edge. */
body.acs-location .l-careers__crab {
	position: absolute;
	right: 1.5rem;
	bottom: calc(100% - 1px);
	width: calc(var(--l-crab-h) * 1000 / 657);
	height: var(--l-crab-h);
	pointer-events: none;
}

body.acs-location .l-careers__box .l-intro__body {
	max-width: 34rem;
}

/* ---------- 3.1.12 Nearby ---------- */

body.acs-location .l-nearby {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
}

body.acs-location .l-nearby__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body.acs-location .l-nearby__head .l-btn {
	margin-top: 1.25rem;
}

body.acs-location .l-nearby__grid {
	display: grid;
	gap: 1rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

/* ---------- 3.1.13 FAQ ---------- */

body.acs-location .l-faq__item {
	border-bottom: 1px solid var(--acs-line);
}

body.acs-location .l-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.25rem 0;
	color: var(--acs-ink);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

body.acs-location .l-faq__q::-webkit-details-marker {
	display: none;
}

body.acs-location .l-faq__q:hover {
	color: var(--acs-red);
}

body.acs-location .l-faq__mark {
	flex-shrink: 0;
	color: var(--acs-red);
	transition: transform 0.2s ease;
}

body.acs-location .l-faq__item[open] .l-faq__mark {
	transform: rotate(45deg);
}

body.acs-location .l-faq__a {
	margin: 0;
	padding: 0 2.5rem 1.25rem 0;
	color: var(--acs-ink-soft);
	line-height: 1.6;
}

/* Got a crowd's rows pin under the header; here they also clear the
   jump bar. Same maths as Direction A, minus the bar. */
body.acs-location .a-crowd__row {
	top: calc(var(--acs-sticky-h) + var(--l-jump-h) + var(--acs-tear-h));
	height: calc(100svh - var(--acs-pin-h) - var(--l-jump-h) - var(--acs-nav-clear) - env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
	body.acs-location .a-crowd__row {
		height: auto;
		min-height: calc(100svh - var(--acs-pin-h) - var(--l-jump-h) - var(--acs-nav-clear));
	}
}

/* ==== Tablet (768-1023): the phone layout, opened up ====
   Wide enough to put things side by side, not yet the 10-column page. */

@media (min-width: 768px) and (max-width: 1023px) {
	body.acs-location .l-actions__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.acs-location .l-actions__list > li:first-child {
		grid-column: auto;
	}

	body.acs-location .l-split {
		gap: 2.5rem;
	}

	/* Hours: intro and card side by side. */
	body.acs-location .l-hours {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}

	body.acs-location .l-menus__list {
		grid-template-columns: 1fr 1fr;
	}

	body.acs-location .l-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem 1.125rem;
	}

	body.acs-location .l-map__map {
		height: 22rem;
	}

	body.acs-location .l-careers__box {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		padding: 3.5rem 2.5rem;
	}

	body.acs-location .l-careers__box > .l-btn {
		flex-shrink: 0;
		margin-top: 0;
	}

	body.acs-location .l-careers__crab {
		right: 2.5rem;
	}

	body.acs-location .l-nearby__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1.5rem;
	}

	body.acs-location .l-nearby__head .l-btn {
		margin-top: 0;
		flex-shrink: 0;
	}

	body.acs-location .l-nearby__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

/* ==== Desktop (1024 carries the chrome switch; designed at 1440) ====
   Every section sits on one 10-column grid whose outer edges match home's
   Start your order grid. Split sections: intro on columns 1-4, content on
   6-10 (hours evens out 1-5 / 7-10; the map widens to 5-10). */

@media (min-width: 1024px) {
	/* Hero: details on solid red at the left, the photo filling the right
	   with the red fading into it, left to right. */
	body.acs-location .l-hero {
		flex-direction: row;
		align-items: center;
		min-height: 36rem;
		margin-top: -1.75rem; /* tucked under the desktop bar like home */
		padding-bottom: 0;
	}

	body.acs-location .l-hero__media {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 56%;
		height: auto;
	}

	body.acs-location .l-hero__media::after {
		background: linear-gradient(
			90deg,
			rgba(var(--l-red-rgb), 1) 0%,
			rgba(var(--l-red-rgb), 0.82) 14%,
			rgba(var(--l-red-rgb), 0.45) 36%,
			rgba(var(--l-red-rgb), 0.15) 64%,
			rgba(var(--l-red-rgb), 0.05) 100%
		);
	}

	/* Copy starts on the grid's left edge, same as every section below. */
	body.acs-location .l-hero__content {
		box-sizing: border-box;
		width: 50%;
		margin-top: 0;
		padding: 2rem 2rem calc(var(--l-tear) + 2rem) max(var(--acs-gutter), (100% - var(--l-wrap)) / 2);
		display: flex;
		flex-direction: column;
		justify-content: center; /* the copy sits centred in the band */
	}

	body.acs-location .l-hero__title {
		margin-top: 2.25rem;
		font-size: 3.5rem;
	}

	body.acs-location .l-hero__place {
		font-size: 1.0625rem;
	}

	body.acs-location .l-hero + .l-actions {
		margin-top: 2.5rem;
	}

	/* 20px between the three buttons (designer, 2026-10-02) */
	body.acs-location .l-actions__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 1.25rem;
	}

	body.acs-location .l-actions__list > li:first-child {
		grid-column: auto;
	}

	body.acs-location .l-actions__btn {
		min-height: 3.5rem;
		font-size: 0.9375rem;
	}

	/* Jump bar: the ten links spread across it, edge to edge. */
	body.acs-location .l-jump {
		margin-top: 2rem;
	}

	/* Spread edge to edge; if eleven links ever outgrow the bar it
	   scrolls sideways (space-between falls back to flex-start). */
	body.acs-location .l-jump__list {
		justify-content: space-between;
		padding: 0 1.75rem;
		transition: padding 0.3s ease;
	}


	/* The 10-column grid. */
	body.acs-location .l-split {
		grid-template-columns: repeat(var(--l-cols), minmax(0, 1fr));
		column-gap: var(--l-col-gap);
	}

	body.acs-location .l-split > :first-child {
		grid-column: 1 / span 4;
	}

	body.acs-location .l-split > :last-child {
		grid-column: 6 / span 5;
	}

	body.acs-location .l-h2 {
		font-size: 2.75rem;
	}

	body.acs-location .l-hours {
		align-items: center;
	}

	body.acs-location .l-hours > .l-intro {
		grid-column: 1 / span 5;
	}

	body.acs-location .l-hours > .l-hours__card {
		grid-column: 7 / span 4;
		padding: 2rem 1.75rem 1.75rem;
	}

	body.acs-location .l-faq .l-split {
		align-items: start;
	}

	body.acs-location .a-cats + .l-menus {
		margin-top: 4.5rem;
	}

	/* Careers box: copy left, button right, on the grid's width. */
	body.acs-location .l-careers__box {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		padding: 4.5rem 3.5rem;
	}

	body.acs-location .l-careers__box > .l-btn {
		flex-shrink: 0;
		margin-top: 0;
	}

	body.acs-location .l-careers__crab {
		right: 3.5rem;
	}

	/* 20px between the menu cards at every width (designer, 2026-10-02) */
	body.acs-location .l-menus__list {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}

	body.acs-location .l-linkcard {
		padding: 1.5rem 1.5rem 1.5rem 2rem;
	}

	/* Map runs wide: intro 1-4, map 5-10. */
	body.acs-location .l-map > .l-map__frame {
		grid-column: 5 / span 6;
	}

	body.acs-location .l-map__map {
		height: 26rem;
	}

	body.acs-location .l-gallery__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem var(--l-col-gap);
		margin-top: 2.75rem;
	}

	body.acs-location .l-gallery__photo {
		padding: 0.625rem;
	}

	body.acs-location .l-nearby__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
	}

	body.acs-location .l-nearby__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--l-col-gap);
		margin-top: 2.5rem;
	}
}

/* ==== Small desktop (1024-1279): the 10-column page, tightened ====
   After the desktop block so these win at equal specificity. */

@media (min-width: 1024px) and (max-width: 1279px) {
	/* The headline keeps to two lines in the narrower red half. */
	body.acs-location .l-hero__title {
		font-size: 3rem;
	}

	/* Eleven jump links fit the bar. */
	body.acs-location .l-jump__list {
		gap: 1rem;
	}

	body.acs-location .l-jump__link {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}
}

/* ---------- Buttons: text centred on the container (style guide) ----------
   Line height is the font size + 8px; the text moves down by Century
   Gothic's cap offset (0.125em) and icons move back up. Heights as before:
   the page button 47px at 14px (12.5px padding each side on a 22px line). */
body.acs-location .l-btn {
	line-height: calc(1em + 8px);
	padding-top: calc(0.78125rem + 0.125em);
	padding-bottom: calc(0.78125rem - 0.125em);
}

body.acs-location .l-btn svg {
	position: relative;
	top: -0.125em;
}

/* The shack page's action buttons: border-box with a min-height, so the
   nudge fits inside it. On phones two of them wrap to two lines; 5px of
   padding each side keeps those at their 56px (2 x 22 + 10 + the border),
   while the min-height still sets the one-line buttons */
body.acs-location .l-actions__btn {
	line-height: calc(1em + 8px);
	padding-top: calc(0.3125rem + 0.125em);
	padding-bottom: calc(0.3125rem - 0.125em);
}

body.acs-location .l-actions__btn svg {
	position: relative;
	top: -0.125em;
}

/* ---------- Location template: the style guide applied (2026-09-29) ----------
   Every text role takes the scale in assets/css/tokens.css, fluid from the
   phone value at 375 to the desktop value at 1440, as on the home page (the
   home sections this page reuses, the footer and the logo follow from
   direction.css). Button labels, the action bar, the jump links, All
   locations, View shack, the pills and the hours tag are UI labels and keep
   their sizes; the towed banner is part of the parade art and keeps its own. */
body.acs-location.page-template-location .l-hero__title {
	font-size: var(--acs-h1-size);
	line-height: var(--acs-h1-lh);
}

body.acs-location.page-template-location .l-hero__place {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

body.acs-location.page-template-location .l-h2,
body.acs-location.page-template-location .l-gallery__title {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

body.acs-location.page-template-location .l-hours__card-title {
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
}

body.acs-location.page-template-location .l-linkcard__title {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-location.page-template-location .l-intro__body,
body.acs-location.page-template-location .l-faq__q {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-location.page-template-location .l-hero__until,
body.acs-location.page-template-location .l-hours__features,
body.acs-location.page-template-location .l-hours__row,
body.acs-location.page-template-location .l-map__address,
body.acs-location.page-template-location .l-faq__a {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-location.page-template-location .l-hours__holiday,
body.acs-location.page-template-location .l-linkcard__meta {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

/* ---------- Location template: hero copy centred in the red the eye sees ----------
   Desktop. The hero tucks 1.75rem under the header, whose torn edge then
   covers 0.668 of --l-tear more; its own bottom edge covers 0.668 of
   --l-tear. The copy's padding starts from those visible edges (the top
   one 1.75rem further, for the tuck), with a 2.5rem gap each side, measured
   from the All locations arrow to the status pill once the intro has
   played, so the red above and below the copy match (it used to
   centre on the whole band and sat 13 to 37px high, under the header's edge
   at 1440). */
@media (min-width: 1024px) {
	body.acs-location.page-template-location .l-hero__content {
		padding-top: calc(var(--l-tear) * 0.668 + 4.25rem);
		padding-bottom: calc(var(--l-tear) * 0.668 + 2.5rem);
	}
}

/* ---------- Location template: tags, jump links and icon links centred ----------
   Measured on the real baseline, these labels sat 1.5 to 1.9px above the
   middle of their box or beside their icon (Century Gothic's capitals sit
   0.125em high). As the buttons: the text moves down that offset and any
   icon moves back up; every height is unchanged. */

/* The hours card's shack tag takes the style guide's pill (l-pill's size,
   padding, tracking and cap centring), in its white outline */
body.acs-location.page-template-location .l-hours__tag {
	padding: 0.4375rem 0.8125rem 0.3125rem;
	border-color: var(--acs-ctrl-line);
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.06em;
}

@supports (text-box: trim-both cap alphabetic) {
	body.acs-location.page-template-location .l-hours__tag {
		padding: 0.4375rem 0.8125rem;
		text-box: trim-both cap alphabetic;
	}
}

/* Open now: its size kept (the hero's status pill), text and dot centred */
body.acs-location.page-template-location .l-hero__pill {
	padding-top: calc(0.5rem + 0.125em);
	padding-bottom: calc(0.5rem - 0.125em);
}

body.acs-location.page-template-location .l-hero__pill::before {
	position: relative;
	top: -0.125em;
}

/* Jump links: the rule's 3px balance plus the cap offset */
body.acs-location.page-template-location .l-jump__link {
	padding-top: calc(3px + 0.25em);
}

/* All locations: the arrow moves up to the text */
body.acs-location.page-template-location .l-hero__back svg {
	position: relative;
	top: -0.125em;
}

/* ---------- Location template: hero copy tightened (2026-09-29) ----------
   The headline sets on three lines (Big flavor. / Right here / in Mesa.), the
   copy block sits closer together, and the shack's name and address run on
   one 16px line, name then address. With less copy height the block sits
   centred in the red with room above and below. */
body.acs-location.page-template-location .l-hero__title {
	margin-top: 1rem;
}

body.acs-location.page-template-location .l-hero__place {
	gap: 0;
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.5;
}

/* One line where it fits (tablet's full-width column, and 1280 up); phones
   and the narrow red column at 1024-1279 keep name over address */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 1280px) {
	body.acs-location.page-template-location .l-hero__place {
		flex-direction: row;
		flex-wrap: wrap;
	}

	body.acs-location.page-template-location .l-hero__address::before {
		content: "\00a0\00b7\00a0";
	}
}

body.acs-location.page-template-location .l-hero__status {
	margin-top: 1.25rem;
}

/* At 1280 the line needs 3px more than the red column; it takes them from
   the column's right padding rather than wrapping */
@media (min-width: 1280px) {
	body.acs-location.page-template-location .l-hero__place {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

/* Three set lines (Big flavor. / Right here / in Mesa.), never rewrapped */
body.acs-location.page-template-location .l-hero__title {
	white-space: nowrap;
}

@media (min-width: 1024px) {
	body.acs-location.page-template-location .l-hero__title {
		margin-top: 1.25rem;
	}
}

/* Phones: the hero copy sits centred in the red between the photo and the
   crab parade, the same space above as below (designer, 2026-09-30; it was
   pulled up over the photo's fade with 33px left before the parade) */
@media (max-width: 1023px) {
	body.acs-location.page-template-location .l-hero__content {
		margin-top: 2rem;
	}
}


/* ---------- Location template: the style guide's type, exactly ----------
   (designer, 2026-10-02) Each heading and paragraph takes its tag's token:
   h1 H1 (the name and address under it stay one 16px line, 2026-09-30),
   h2 H2, h3 H3, paragraphs Body Base,
   notes Body S; no letter-spacing. Scoped to this template
   (acs-location-a) so the pages sharing these pieces keep theirs. */

body.acs-location.acs-location-a main .l-hero__title {
	letter-spacing: normal;
}

body.acs-location.acs-location-a main .l-hero__status,
body.acs-location.acs-location-a main .l-parade__banner,
body.acs-location.acs-location-a main .lb-book__status,
body.acs-location.acs-location-a main .lx-card__status {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-location.acs-location-a main .l-stay .lb-main .lb-h2 {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

body.acs-location.acs-location-a main .l-h2 {
	text-wrap: balance;
}

/* Inside this shack to Join the Mesa crew (designer, 2026-10-02): the crab
   peeks up into the section gap instead of adding its height to it; its
   head clears the gallery by a third of the gap (20px phones, 40 desktop) */
body.acs-location.acs-location-a main .l-careers {
	margin-top: calc(var(--l-crab-h) + var(--acs-section-gap) / 3);
}

/* Nearby: each shack card is as tall as its own content, so a wrapped
   name in one card never opens a gap above the others' buttons; every
   gap inside a card stays at 20px or less (designer, 2026-10-02) */
body.acs-location.acs-location-a main .l-nearby .lx-card {
	align-self: start;
}

body.acs-location.acs-location-a main .l-nearby .lx-card__actions {
	margin-top: 0;
}