/* Press (10.0): Direction A's chrome and tokens, Option A's shared
   location pieces (l-btn, l-h2, l-circle-arrow, --l-wrap, --l-tear) from
   location.css; everything here is pr- prefixed and scoped to
   body.acs-press. Phones first; desktop (built at 1440) at the end. */

/* Load more hides rows and empty years; the grids must not override it */
body.acs-press .pr-year[hidden],
body.acs-press .pr-row[hidden] {
	display: none;
}

/* ---------- 10.1 Hero ---------- */

/* A red band tucked under the logo row, torn into the paper top and bottom
   (the client's exported hero edges) */
body.acs-press .pr-hero {
	position: relative;
	margin-top: -0.5rem;
	padding: 4.5rem var(--acs-gutter) 0; /* the title clears the hanging logo */
	overflow: hidden;
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-press .pr-hero::before,
body.acs-press .pr-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

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

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

body.acs-press .pr-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--l-wrap);
	margin-inline: auto;
	text-align: center;
}

body.acs-press .pr-hero__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem);
	line-height: 1.2;
	color: var(--acs-white);
	text-wrap: balance;
}

body.acs-press .pr-hero__body {
	max-width: 30rem;
	margin: 1.25rem auto 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.55;
}

body.acs-press .pr-hero__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	color: var(--acs-white);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

body.acs-press .pr-hero__link svg {
	rotate: 90deg;
	transition: transform 0.2s ease;
}

body.acs-press .pr-hero__link:hover svg,
body.acs-press .pr-hero__link:focus-visible svg {
	transform: translateX(4px); /* down, after the rotation */
}

/* The photos: white frames fanned over each other, running off the band.
   Positions are percentages of the box, so the fan keeps its shape at any
   width; the band's overflow crops the bottom. */
body.acs-press .pr-hero__photos {
	position: relative;
	width: calc(100% + 2 * var(--acs-gutter));
	margin: 2.25rem calc(-1 * var(--acs-gutter)) 0;
	aspect-ratio: 720 / 440;
}

body.acs-press .pr-hero__photo {
	position: absolute;
	height: auto;
	border: clamp(0.25rem, 0.5vw, 0.4375rem) solid var(--acs-white);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

body.acs-press .pr-hero__photo--1 { left: 1%; top: 2%; width: 56%; rotate: -11deg; }
body.acs-press .pr-hero__photo--2 { left: 61%; top: 6%; width: 40%; rotate: 12deg; }
body.acs-press .pr-hero__photo--3 { left: 8%; top: 57%; width: 35%; rotate: 7deg; }
body.acs-press .pr-hero__photo--4 { left: 42%; top: 47%; width: 30%; rotate: -4deg; }
body.acs-press .pr-hero__photo--5 { left: 72%; top: 61%; width: 31%; rotate: 5deg; }

/* ---------- Shared heads and labels ---------- */

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

body.acs-press .pr-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 2rem;
}

/* The site's outlined circle arrow: white inside, grey ring, red arrow */
body.acs-press .pr-card .l-circle-arrow,
body.acs-press .pr-row .l-circle-arrow {
	background: var(--acs-white);
	box-shadow: inset 0 0 0 1px var(--acs-ctrl-line);
	color: var(--acs-red);
}

body.acs-press .pr-cat {
	margin: 0;
	color: var(--acs-red);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- 10.2 In the press ---------- */

body.acs-press .pr-featured {
	scroll-margin-top: calc(var(--acs-pin-h) + 1.5rem);
}

body.acs-press .pr-featured__note {
	margin: 0;
	color: var(--acs-ink-soft);
	font-size: 0.875rem;
	line-height: 1.55;
}

body.acs-press .pr-featured__note-tab {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

body.acs-press .pr-featured__note .pr-ext {
	display: inline-flex;
	color: var(--acs-ink);
}

/* The location page's hours card look: cream, warm line, hard shadow */
body.acs-press .pr-card {
	position: relative;
	display: grid;
	gap: 1.5rem;
	margin-top: 1.75rem;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--l-cream-line);
	border-radius: var(--acs-radius);
	background: var(--acs-cream);
	box-shadow: 0 4px 0 var(--l-cream-line);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.acs-press .pr-card:hover,
body.acs-press .pr-card:has(.pr-card__link:focus-visible) {
	transform: translateY(-3px);
	box-shadow: 0 7px 0 var(--l-cream-line);
}

body.acs-press .pr-card__source {
	display: grid;
	justify-items: start;
	align-content: start;
	gap: 0.625rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--l-cream-line);
}

/* A strip of yellow tape, slightly askew */
body.acs-press .pr-card__badge {
	margin: 0 0 0.375rem;
	padding: 0.5rem 0.8125rem;
	border-radius: 2px;
	background: var(--acs-yellow);
	color: var(--acs-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	rotate: 3deg;
}

body.acs-press .pr-card__outlet {
	margin: 0;
	color: var(--acs-ink);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
	line-height: 1.12;
}

body.acs-press .pr-card__domain {
	margin: 0;
	color: var(--acs-ink-soft);
	font-size: 0.875rem;
}

body.acs-press .pr-card__story {
	display: grid;
	gap: 0.875rem;
}

body.acs-press .pr-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0;
}

body.acs-press .pr-card__meta .pr-cat {
	font-weight: 700;
}

body.acs-press .pr-card__date,
body.acs-press .pr-row__date {
	color: var(--acs-ink-soft);
	font-size: 0.875rem;
	text-transform: uppercase;
}

body.acs-press .pr-card__title {
	margin: 0;
	max-width: 42rem;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
	line-height: 1.22;
	text-wrap: balance;
}

body.acs-press .pr-card__link,
body.acs-press .pr-row__link {
	color: var(--acs-ink);
	text-decoration: none;
}

/* The headline's link covers the whole card or row */
body.acs-press .pr-card__link::after,
body.acs-press .pr-row__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

body.acs-press .pr-card__link:focus-visible,
body.acs-press .pr-row__link:focus-visible {
	outline: none;
}

body.acs-press .pr-card__link:focus-visible::after,
body.acs-press .pr-row__link:focus-visible::after {
	outline: 2px solid var(--acs-red);
	outline-offset: 3px;
}

body.acs-press .pr-card__desc {
	margin: 0;
	max-width: 42rem;
	color: var(--acs-ink-soft);
	font-size: 1rem;
	line-height: 1.4;
}

body.acs-press .pr-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	font-weight: 700;
}

body.acs-press .pr-card .l-circle-arrow,
body.acs-press .pr-row .l-circle-arrow {
	width: 2rem;
	height: 2rem;
}

body.acs-press .pr-card:hover .l-circle-arrow,
body.acs-press .pr-card:has(.pr-card__link:focus-visible) .l-circle-arrow {
	transform: translateX(4px);
	background: var(--acs-red);
	box-shadow: inset 0 0 0 1px var(--acs-red);
	color: var(--acs-white);
}

/* ---------- 10.3 More from the headlines ---------- */

body.acs-press .pr-list__title {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2rem);
}

body.acs-press .pr-list__count {
	margin: 0;
	color: var(--acs-ink-soft);
	font-size: 1rem;
}

body.acs-press .pr-year {
	margin-top: 2rem;
}

body.acs-press .pr-year__label {
	margin: 0 0 0.5rem;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.25;
	color: var(--acs-ink-soft);
	opacity: 0.7;
}

body.acs-press .pr-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Outlet and date, then category and headline; the arrow at the right */
body.acs-press .pr-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1rem;
	row-gap: 0.625rem;
	align-items: start;
	padding: 1.5rem 0;
	border-top: 1px solid var(--acs-ctrl-bg);
}

body.acs-press .pr-row__source {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.75rem;
	margin: 0;
	grid-column: 1;
}

body.acs-press .pr-row__outlet {
	color: var(--acs-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
}

body.acs-press .pr-row__story {
	display: grid;
	gap: 0.5rem;
	grid-column: 1;
}

body.acs-press .pr-row__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.3;
}

/* Outlined: grey ring, red arrow; fills red on hover */
body.acs-press .pr-row .l-circle-arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.acs-press .pr-row:hover .l-circle-arrow,
body.acs-press .pr-row:has(.pr-row__link:focus-visible) .l-circle-arrow {
	transform: translateX(4px);
	background: var(--acs-red);
	box-shadow: inset 0 0 0 1px var(--acs-red);
	color: var(--acs-white);
}

body.acs-press .pr-row:hover .pr-row__link {
	color: var(--acs-red);
}

/* Load more: the secondary button with a red arrow pointing down */
body.acs-press .pr-more {
	display: flex;
	justify-content: center;
	margin: 1.5rem 0 0;
}

body.acs-press .pr-more[hidden] {
	display: none;
}

body.acs-press .pr-more__btn {
	margin-top: 0;
	border: 0;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}

body.acs-press .pr-more__btn svg {
	rotate: 90deg;
	color: var(--acs-red);
}

/* ================= Desktop (built at 1440) ================= */

@media (min-width: 1024px) {
	/* Copy at the left; the photo fan fills the right half, from under the
	   top tear down past the band's torn bottom */
	/* The copy centred between the tears */
	body.acs-press .pr-hero {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		min-height: 35.5rem; /* the Figma band: 568 at 1440 */
		margin-top: 0;
		padding: calc(var(--l-tear) + 2rem) var(--acs-gutter);
	}

	body.acs-press .pr-hero__inner {
		width: 100%;
		text-align: left;
	}

	body.acs-press .pr-hero__copy {
		max-width: 31rem;
	}

	body.acs-press .pr-hero__title {
		max-width: 25rem;
	}

	body.acs-press .pr-hero__body {
		margin-left: 0;
	}

	body.acs-press .pr-hero__photos {
		position: absolute;
		top: 5.625rem;
		left: 50%;
		width: 50%;
		margin: 0;
		aspect-ratio: 720 / 478;
	}

	body.acs-press .pr-head {
		flex-wrap: nowrap;
	}

	body.acs-press .pr-featured__note {
		text-align: left;
	}

	/* Outlet | rule | story */
	body.acs-press .pr-card {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: 3.875rem;
		margin-top: 2.5rem;
		padding: 2.5rem;
	}

	body.acs-press .pr-card__source {
		position: relative;
		padding-bottom: 0;
		border-bottom: 0;
	}

	body.acs-press .pr-card__source::after {
		content: "";
		position: absolute;
		top: 0.875rem;
		bottom: 0.875rem;
		right: -1.9375rem;
		width: 1px;
		background: var(--l-cream-line);
	}

	body.acs-press .pr-card__domain {
		margin-top: auto;
	}

	body.acs-press .pr-card__source {
		align-content: stretch;
		grid-template-rows: auto auto 1fr;
	}

	body.acs-press .pr-card__story {
		gap: 1rem;
	}

	body.acs-press .pr-card__title {
		margin-top: 0.25rem;
	}

	/* The year in its own column; rows are outlet | story | arrow */
	body.acs-press .pr-list .pr-head {
		padding-left: 0;
	}

	body.acs-press .pr-year {
		display: grid;
		grid-template-columns: 7.1875rem minmax(0, 1fr);
		margin-top: 0;
	}

	body.acs-press .pr-list .pr-head + .pr-year {
		margin-top: 2.6875rem;
	}

	body.acs-press .pr-year__label {
		margin: 1.5rem 0 0;
		font-size: 2rem;
	}

	body.acs-press .pr-row {
		grid-template-columns: 13.125rem minmax(0, 1fr) auto;
		column-gap: 0;
		padding: 2rem 0;
	}

	body.acs-press .pr-row__source {
		display: grid;
		gap: 0.5rem;
		align-content: start;
	}

	body.acs-press .pr-row__outlet {
		font-size: 1.125rem;
		line-height: 1.55;
	}

	body.acs-press .pr-row__story {
		grid-column: 2;
		grid-row: 1;
		max-width: 44.3125rem;
		gap: 0.75rem;
	}

	body.acs-press .pr-row .l-circle-arrow {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
	}

	body.acs-press .pr-more {
		margin-top: 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.acs-press .pr-card,
	body.acs-press .pr-row .l-circle-arrow,
	body.acs-press .pr-hero__link svg {
		transition: none;
	}
}

/* Load more headlines: its font shorthand resets the line height, so the
   button restates it; 48px as before (13px padding each side on a 22px line) */
body.acs-press .pr-more__btn {
	line-height: calc(1em + 8px);
	padding-top: calc(0.8125rem + 0.125em);
	padding-bottom: calc(0.8125rem - 0.125em);
}

/* ---------- Press: 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 (Start
   your order, the good-time band, the footer and the logo follow from
   direction.css). Button labels, the hero's jump link, the featured badge and
   Read the feature are UI labels and keep their sizes. */
body.acs-press .pr-hero__title {
	font-size: var(--acs-h1-size);
	line-height: var(--acs-h1-lh);
}

body.acs-press .pr-hero__body,
body.acs-press .pr-card__outlet {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

body.acs-press .l-h2,
body.acs-press .l-h2.pr-list__title {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

body.acs-press .pr-year__label {
	font-size: var(--acs-h3-size);
	line-height: var(--acs-h3-lh);
}

body.acs-press .pr-card__title {
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
}

body.acs-press .pr-row__title {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-press .pr-row__outlet {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-press .pr-card__desc,
body.acs-press .pr-list__count {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-press .pr-card__domain,
body.acs-press .pr-card__date,
body.acs-press .pr-row__date,
body.acs-press .pr-cat,
body.acs-press .pr-featured__note {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

/* ---------- Hero copy centred (second pass, 2026-09-29) ----------
   Phones and tablets: the copy had 54 to 56px of red above its title and
   44 to 45px under its line before the photo fan; 0.375rem moves from the
   top padding to the photos' margin, so both sides match and the band keeps
   its height. Desktop: the padding was even, but the title's capitals start
   lower in their box than the line's last baseline ends, so the copy sat
   2.2 to 2.4px high; it moves down 0.145rem by trading padding. */
body.acs-press .pr-hero {
	padding-top: calc(4.5rem - 0.375rem);
}

body.acs-press .pr-hero__photos {
	margin-top: calc(2.25rem + 0.375rem);
}

@media (min-width: 1024px) {
	body.acs-press .pr-hero {
		padding-top: calc(var(--l-tear) + 2rem + 0.145rem);
		padding-bottom: calc(var(--l-tear) + 2rem - 0.145rem);
	}

	body.acs-press .pr-hero__photos {
		margin-top: 0;
	}
}

/* ---------- Labels and arrows centred (second pass, 2026-09-29) ----------
   Measured on the real baseline. The In the spotlight sticker keeps its
   size and tilt (see below). Read the
   feature sat 1.5px above its circle arrow, which moves up Century Gothic's
   0.125em cap offset. The headline rows' arrow was pinned to the row's top
   on desktop (32px above its middle); it now centres on the row, as on
   phones. */
/* In the spotlight, measured flat (its 3deg tilt removed, which had skewed
   the first reading): the capitals sat 2.8px high, so the text moves down
   0.129em inside the same height */
body.acs-press .pr-card__badge {
	padding-top: calc(0.5rem + 0.129em);
	padding-bottom: calc(0.5rem - 0.129em);
}

body.acs-press .pr-card__cta .l-circle-arrow {
	position: relative;
	top: -0.125em;
}

@media (min-width: 1024px) {
	body.acs-press .pr-row .l-circle-arrow {
		align-self: center;
	}
}

/* The headline sets on two lines, Big flavor. / Big headlines. (designer):
   the lines come from the template; the old 25rem cap that broke it into
   four is lifted and each line holds together */
body.acs-press .pr-hero__title {
	max-width: none;
	white-space: nowrap;
}

/* The featured headline uses the story column's full width on desktop
   (designer): the 42rem cap set it on three lines with empty card to its
   right; it now balances over two where the column allows */
@media (min-width: 1024px) {
	body.acs-press .pr-card__title {
		max-width: none;
	}
}