/*
 * Homepage and page sections.
 *
 * Layout only — every component's own styling lives in components.css.
 *
 * The desktop preview (1442x4946) is the complete reference. The tablet and
 * mobile previews are partial, so sections they do not show extend the same
 * responsive system: three columns collapse to two at 768 and to one below,
 * and the documented container margins hold at every width.
 */

/* ==========================================================================
   Section shell
   ========================================================================== */

/*
 * Section rhythm.
 *
 * --space-section-sm is the default. Measuring the approved desktop preview,
 * the gap between sections is ~86px at 1440 — which is exactly what
 * clamp(3rem, 2.25rem + 3.5vw, 5.5rem) resolves to. Using --space-section
 * (144px at 1440) made the page 23% taller than the reference. Both are
 * documented tokens; this picks the one the design actually used.
 */
.section {
	padding-block: var(--space-section-sm);
}

/* Reserved for the closing moment, which the preview does give more air. */
.section--generous {
	padding-block: var(--space-section);
}

.section--soft {
	background-color: var(--color-bg-secondary);
}

.section--light {
	background-color: var(--color-bg-light);
	color: var(--color-text-on-light);
}

.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 {
	color: var(--color-text-on-light);
}

.section--light .overline {
	color: var(--color-gold-deep);
}

.section--light p {
	color: var(--color-text-secondary-on-light);
}

.container {
	width: 100%;
	max-width: var(--container-default);
	margin-inline: auto;
	padding-inline: var(--container-margin-mobile);
}

.container--wide { max-width: var(--container-wide); }
.container--content { max-width: var(--container-content); }
.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 768px) {
	.container { padding-inline: var(--container-margin-tablet); }
}

@media (min-width: 1024px) {
	.container { padding-inline: var(--container-margin-desktop); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* The home page's first section is the hero, which starts at the very top. */
.is-front-page .site-main {
	padding-block: 0;
}

/*
 * The hero pulls up under the whole header — bar plus crest row — so the
 * photograph starts at the very top and the crest sits over it.
 */
.hero {
	position: relative;
	margin-top: calc((var(--header-bar) + var(--header-crest)) * -1);
	background-color: var(--color-bg-primary);
}

.hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero__photo,
.hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The scrim is deliberately heavy.
 *
 * A previous attempt shipped a gold overline at 1.07:1 and a cream headline at
 * 1.81:1 over this photograph even though both colours pass against the carbon
 * token in isolation. Contrast here is measured against rendered pixels, not
 * token pairs, so this gradient is tuned to what the sampler reports.
 */
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(11 10 8 / 96%) 0%, rgb(11 10 8 / 88%) 38%, rgb(11 10 8 / 62%) 70%, rgb(11 10 8 / 45%) 100%);
}

.hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 88svh;
	padding-top: calc(var(--header-bar) + var(--header-crest) + var(--space-6));
	padding-bottom: var(--space-8);
}

/*
 * No cap below 1024 — the container is the cap.
 *
 * This was 34ch (≈362px) at every width up to 1023, which is right on a phone
 * because the container is narrower than that anyway, and wrong on a tablet:
 * at 768 the copy sat in a 362px column with 350px of empty page beside it,
 * "BOOK AN APPOINTMENT" broke across two lines inside its own button, and the
 * overline dropped "DAYS" onto a second line with the rule beside neither.
 * The approved tablet preview runs this copy across the full container.
 *
 * At 1024 the photograph takes the right 46% and the copy takes the left.
 */
.hero__content {
	max-width: none;
}

.hero__title {
	margin: 0 0 var(--space-5);
	font-size: var(--text-h1);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
}

.hero__subtitle {
	margin: 0 0 var(--space-6);
	color: var(--color-text-primary);
	font-size: var(--text-body-lg);
	max-width: 42ch;
}

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.hero__actions .button {
	width: 100%;
}

/*
 * One line: address · hours, as the preview sets it.
 *
 * This is a <div>, not a <p>: it contains an <address> and the hours <p>, and
 * a <p> may not nest another <p> — the parser would close the outer one and
 * eject the address from the flex container.
 */
.hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
	margin-top: var(--space-6);
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm);
}

.hero__meta .address,
.hero__meta .hours {
	display: inline;
	margin: 0;
}

.hero__meta .address span {
	display: inline;
}

.hero__meta .address span + span::before {
	content: ", ";
}

.hero__meta-separator {
	color: var(--color-border-dark-strong);
}

@media (min-width: 768px) {
	.hero__inner {
		padding-top: calc(var(--header-bar) + var(--header-crest) + var(--space-7));
	}

	.hero__actions {
		flex-direction: row;
		align-items: center;
	}

	.hero__actions .button {
		width: auto;
	}

	/*
	 * Two lines at 768, as the preview sets it. Measured, not guessed: 22ch
	 * still broke to three. Above 1024 the copy column's own 46% is narrower
	 * than this, so the cap stops applying and the desktop is untouched.
	 */
	.hero__title {
		max-width: 26ch;
	}
}

@media (min-width: 1024px) {
	/* Desktop splits: text left, photograph right — not a full-bleed backdrop. */
	.hero__media {
		left: auto;
		width: 46%;
	}

	.hero__scrim {
		background: linear-gradient(to right, var(--color-bg-primary) 0%, rgb(11 10 8 / 55%) 40%, rgb(11 10 8 / 12%) 100%);
	}

	.hero__inner {
		justify-content: center;
		min-height: 82svh;
		padding-bottom: var(--space-9);
	}

	.hero__content {
		max-width: 46%;
	}

	.hero__title {
		font-size: var(--text-display-l);
	}
}

/* ==========================================================================
   Promise strip — attached to the hero
   ========================================================================== */

.promises {
	position: relative;
	border-top: var(--border-hairline) solid var(--color-border-dark);
	background-color: var(--color-bg-primary);
}

.promises__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.promises__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	padding-block: var(--space-4);
	border-bottom: var(--border-hairline) solid var(--color-border-dark);
}

.promises__item:last-child { border-bottom: 0; }

.promises__item .pole-rule {
	margin-top: 0.35em;
}

.promises__text {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm);
	max-width: none;
}

@media (min-width: 768px) {
	.promises__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.promises__item {
		padding-inline: var(--space-5);
		border-bottom: 0;
		border-left: var(--border-hairline) solid var(--color-border-dark);
	}

	.promises__item:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* ==========================================================================
   Intro split
   ========================================================================== */

.intro__grid {
	display: grid;
	gap: var(--space-7);
	align-items: center;
}

/*
 * The reset zeroes every heading and paragraph margin, and only `p + p` puts
 * it back. This column is an overline, a heading, a paragraph and a list, so
 * without a rule of its own the headline sat directly on the paragraph with
 * no gap at all — visible at every width, worst on a phone.
 */
.intro__copy > * + * {
	margin-top: var(--space-4);
}

.intro__copy > h2 {
	margin-top: var(--space-3);
}

.intro__copy > p:not(.overline) {
	margin-top: var(--space-5);
}

/*
 * 5:7 per the image placement map — the approved preview draws this photograph
 * much wider, roughly 11:10, which the map contradicts. The map wins and the
 * conflict is recorded (D-031).
 *
 * `width: 100%` matters: with only `aspect-ratio` and `max-height`, a short
 * viewport shrank the *box* rather than cropping the picture, so the photo sat
 * 50px narrower than its own grid column with a strip of empty page beside it.
 * Pinned to the column, the cap now trims height and the crop absorbs it.
 */
.intro__media {
	width: 100%;
	aspect-ratio: 5 / 7;
	max-height: 76svh;
}

.intro__list {
	display: grid;
	gap: 0;
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.intro__list li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-bottom: var(--border-hairline) solid var(--color-border-dark);
	font-size: var(--text-body-sm);
}

.intro__list li::before {
	content: "";
	width: 5px;
	height: 5px;
	background-color: var(--color-gold);
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.intro__list {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.intro__grid {
		grid-template-columns: 5fr 7fr;
		gap: var(--space-9);
	}

	/*
	 * The preview bleeds the intro photograph off the left edge of the page.
	 *
	 * Pulling the image by the container's padding was not enough: it landed on
	 * the container's outer edge, still 80px short of the viewport at 1440. The
	 * obvious `100vw` fix is a trap — on a platform with classic scrollbars
	 * `100vw` is wider than the page and the image would hang off the left,
	 * giving the whole site a horizontal scrollbar.
	 *
	 * So the container itself goes full width for this section and puts its
	 * inset back on the right only, where `100%` is the section's own content
	 * width and no scrollbar is involved. The grid then starts at the viewport
	 * edge and the image needs no negative margin at all; the copy column keeps
	 * the site's right-hand alignment.
	 */
	.intro > .container {
		max-width: none;
		padding-left: 0;
		padding-right: calc(
			max(0px, (100% - var(--container-default)) / 2) +
			var(--container-margin-desktop)
		);
	}
}

/* ==========================================================================
   Services
   ========================================================================== */

.services__grid {
	display: grid;
	gap: var(--space-5);
}

.services__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.services__note {
	margin-top: var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

@media (min-width: 768px) {
	.services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.services__grid { grid-template-columns: repeat(3, 1fr); }
}

/*
 * Service groups — barbering and braiding, on the full menu.
 */
.services__group + .services__group {
	margin-top: var(--space-8);
}

.services__group-title {
	margin: 0 0 var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: var(--border-hairline) solid var(--color-border-dark-strong);
	color: var(--color-gold);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps-wide);
	text-transform: uppercase;
}

/* ==========================================================================
   Process
   ========================================================================== */

/* An `<ol>`, because the four steps do happen in that order. Unstyled. */
.process__grid {
	display: grid;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.process__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.process__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}
}

/* ==========================================================================
   Gallery mosaic
   ========================================================================== */

.gallery__grid {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(2, 1fr);
}

.gallery__item {
	aspect-ratio: 4 / 3;
}

/* Two tall tiles anchor the mosaic, per the interaction notes. */
.gallery__item--tall {
	aspect-ratio: 3 / 4;
	grid-row: span 2;
}

@media (min-width: 768px) {
	.gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Testimonial + location
   ========================================================================== */

.neighbors__grid {
	display: grid;
	gap: var(--space-7);
	align-items: start;
}

@media (min-width: 1024px) {
	.neighbors__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-9);
	}
}

@media (min-width: 768px) {
	.location-card__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta {
	text-align: center;
	background:
		radial-gradient(ellipse at 50% 0%, rgb(217 168 82 / 10%) 0%, transparent 60%),
		var(--color-bg-primary);
}

.final-cta__emblem {
	display: inline-block;
	margin-bottom: var(--space-5);
}

.final-cta__emblem img {
	width: 120px;
	height: auto;
}

.final-cta__title {
	margin: 0 0 var(--space-4);
	font-size: var(--text-h1);
	text-transform: uppercase;
}

.final-cta__subtitle {
	margin: 0 auto var(--space-6);
	color: var(--color-text-secondary);
}

@media (min-width: 768px) {
	.final-cta__emblem img { width: 150px; height: auto; }
}

@media (min-width: 1024px) {
	.final-cta__emblem img { width: 210px; height: auto; }
	.final-cta__title { font-size: var(--text-display-l); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/*
 * Two bands, not four columns: the practicals, then a legal line. Four equal
 * columns read as a sitemap; this reads as a closing.
 */
.site-footer {
	padding-block: var(--space-8) var(--space-5);
	padding-inline: 0;
	border-top: var(--border-hairline) solid var(--color-border-dark);
	background-color: var(--color-bg-secondary);
}

/* -- Where, when, what next -- */

/*
 * No padding of its own. The footer already sets `padding-block`, and the two
 * stacked to 128px of empty band above "Visit" — a third of the footer's whole
 * height was nothing at all, which is most of why it read as unfinished.
 */
.site-footer__grid {
	display: grid;
	gap: var(--space-7);
	padding-block: 0 var(--space-8);
}

@media (min-width: 600px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	/*
	 * Two equal columns and a third sized to its content.
	 *
	 * "Visit" held two short lines in a track half again as wide as its
	 * neighbour, so the widest column was the emptiest one — the thing that
	 * made this read as three lists dropped on a page rather than a designed
	 * band.
	 */
	.site-footer__grid {
		grid-template-columns: 1fr 1fr auto;
		gap: var(--space-8);
	}

	/*
	 * The last column is a block pushed to the right edge, not right-aligned
	 * text. That distinction is the whole fix: right-aligned text put every
	 * icon at a different x, so a four-item list came out as a zigzag. As a
	 * block the items keep one left edge, and the block's right edge lands on
	 * "Site by …" in the row directly beneath it.
	 */
	.site-footer__col:last-child > * {
		width: max-content;
		margin-left: auto;
	}
}

.site-footer__col > * + * {
	margin-top: var(--space-4);
}

.site-footer__heading {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.site-footer__address {
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm);
}

.site-footer__phone {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	max-width: none;
	font-size: var(--text-body-sm);
}

.site-footer__hours {
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm);
}

.site-footer__hours .hours__label {
	margin-bottom: var(--space-1);
}

.site-footer__hours .hours__value {
	color: var(--color-text-primary);
	font-size: var(--text-body);
}

.site-footer__status .location-card__status {
	font-size: var(--text-label);
}

.site-footer__social {
	margin-top: var(--space-5);
}

.site-footer .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .menu li + li {
	margin-top: var(--space-3);
}

/*
 * Inline-flex, not inline.
 *
 * The reset makes every `svg` a block, and a block inside an inline anchor
 * breaks the line — so each footer link rendered its icon on one line and its
 * label on the next. The header nav never showed this because its anchors were
 * already flex.
 */
.site-footer .menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--text-body-sm);
	text-decoration: none;
}

.site-footer .menu a:hover {
	color: var(--color-gold);
}

/* -- Band three: the legal line -- */

.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: var(--border-hairline) solid var(--color-border-dark);
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

.site-footer__legal p {
	margin: 0;
	max-width: none;
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal-links a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.site-footer__legal-links a:hover {
	color: var(--color-gold);
}

a.site-footer__credit-name {
	color: var(--color-text-secondary);
	text-decoration: none;
}

a.site-footer__credit-name:hover,
a.site-footer__credit-name:focus-visible {
	color: var(--color-gold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 768px) {
	.site-footer__legal {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
	}

	/* The build credit sits last and quietest, on its own edge. */
	.site-footer__credit {
		order: 3;
		margin-left: auto;
	}

	.site-footer__legal-links {
		order: 2;
	}
}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */

.page-header {
	padding-block: var(--space-8) var(--space-6);
	border-bottom: var(--border-hairline) solid var(--color-border-dark);
}

.page-title {
	margin: 0;
	font-size: var(--text-h1);
	text-transform: uppercase;
}

.page-intro {
	margin-top: var(--space-4);
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
}

.breadcrumbs {
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--color-border-dark-strong);
}

.breadcrumbs a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-gold); }

/* ==========================================================================
   Editorial (journal)
   ========================================================================== */

.entry-content {
	max-width: var(--container-narrow);
}

.entry-content > * + * { margin-top: var(--space-5); }

.entry-content h2,
.entry-content h3 { margin-top: var(--space-7); }

/*
 * Give lists back their bullets.
 *
 * The base reset strips `ul[class]`, which is right for components — every one
 * of them carries a class and brings its own markers. But WordPress's editor
 * writes `<ul class="wp-block-list">`, so the reset caught every list a person
 * types into a page as well. The legal documents came out as flush paragraphs
 * with no bullets and no indent, which in a privacy policy is exactly where a
 * reader most needs to see that they are looking at a list of things.
 */
.entry-content ul,
.entry-content ol {
	margin-left: 0;
	padding-left: var(--space-6);
	list-style: revert;
}

.entry-content li + li {
	margin-top: var(--space-3);
}

.entry-content li::marker {
	color: var(--color-gold);
}

.entry-header { margin-bottom: var(--space-6); }

.entry-title { margin: 0; font-size: var(--text-h1); }

.entry-meta {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

.entry-thumbnail { margin: var(--space-6) 0; }

.post-list {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.post-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.post-list { grid-template-columns: repeat(3, 1fr); }
}

.post-list article {
	padding-bottom: var(--space-5);
	border-bottom: var(--border-hairline) solid var(--color-border-dark);
}

/* ==========================================================================
   404
   ========================================================================== */

.error-404 {
	padding-block: var(--space-9);
	text-align: center;
}

/* inline-block, or text-align:center on the parent cannot reach it. */
/* The emblem this styled is gone — the header crest already shows it (404.php). */

/*
 * Spacing that used to live in `style` attributes on the templates. Inline
 * styles are unreachable from a stylesheet, invisible to Stylelint and cannot
 * be adjusted per breakpoint — a theme that claims a token system should not
 * be scattering half of it through its markup.
 */
.alert--spaced {
	margin-block: var(--space-6);
}

.gallery__grid--spaced {
	margin-top: var(--space-7);
}

.gallery__note {
	margin-top: var(--space-6);
}

/*
 * The "neighbors" section is two columns: a customer quote beside the hours
 * and location card. No quote is approved yet, so the card runs alone and
 * centred rather than stranded in a half-width column.
 */
.neighbors__grid--single {
	grid-template-columns: 1fr;
	max-width: var(--container-content);
	margin-inline: auto;
}

.error-404__search {
	margin-top: var(--space-7);
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments {
	max-width: var(--container-narrow);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--border-hairline) solid var(--color-border-dark);
}

.comments__title {
	margin: 0 0 var(--space-5);
	font-size: var(--text-h3);
}

.comments__list {
	margin: 0 0 var(--space-7);
	padding: 0;
	list-style: none;
}

.comments__list .comment {
	padding-block: var(--space-5);
	border-bottom: var(--border-hairline) solid var(--color-border-dark);
}

.comments__list .children {
	margin: var(--space-5) 0 0 var(--space-6);
	padding: 0;
	list-style: none;
	border-left: var(--border-hairline) solid var(--color-border-dark);
	padding-left: var(--space-5);
}

.comments__closed {
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

.comment-form .field:last-of-type {
	margin-bottom: var(--space-5);
}

/* ==========================================================================
   The braiding room
   ========================================================================== */

.braiding__lead {
	margin: 0 0 var(--space-7);
	max-width: 52ch;
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
}

/*
 * A band of four photographs across the full width.
 *
 * They used to sit in a column beside the price list, where four photographs
 * ran out 456px before fifteen prices did and left half the section empty.
 * Across the top they set the section up and nothing is stranded.
 */
.braiding__shots {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin-bottom: var(--space-8);
	min-width: 0;
}

.braiding__shot {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: var(--border-hairline) solid var(--color-border-dark);
}

.braiding__shot .photo,
.braiding__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.braiding__menu {
	min-width: 0;
}

.braiding__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.braiding__row {
	break-inside: avoid;
	border-top: var(--border-hairline) solid var(--color-border-dark);
}

/*
 * The whole row is the link, and the leader between name and price is a
 * flexible element rather than a row of dot characters — a screen reader
 * reading out forty full stops is what a printed menu's dot leader becomes if
 * you set it in text.
 */
.braiding__row-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	padding-block: var(--space-4);
	color: inherit;
	text-decoration: none;
}

.braiding__row-link:hover .braiding__name,
.braiding__row-link:focus-visible .braiding__name {
	color: var(--color-gold);
}

.braiding__name {
	min-width: 0;
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	transition: color var(--duration-fast) var(--ease-standard);
}

.braiding__dots {
	flex: 1 1 auto;
	min-width: var(--space-4);
	border-bottom: var(--border-hairline) dotted var(--color-border-dark-strong);
	transform: translateY(-0.25em);
}

.braiding__figures {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	flex: 0 0 auto;
	white-space: nowrap;
}

.braiding__duration {
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

.braiding__note {
	margin-top: var(--space-6);
	max-width: 62ch;
	color: var(--color-text-muted);
	font-size: var(--text-body-sm);
}

@media (max-width: 419px) {
	.braiding__dots {
		display: none;
	}

	.braiding__figures {
		flex-basis: 100%;
	}
}

@media (min-width: 600px) {
	.braiding__shots {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}
}

@media (min-width: 1024px) {
	/*
	 * Fifteen rows in one column is a very tall list under a very wide band.
	 * Two columns keeps the section in proportion and puts every price within
	 * one glance of the photographs above it. `break-inside: avoid` on the row
	 * stops a name and its price landing in different columns.
	 */
	.braiding__list {
		columns: 2;
		column-gap: var(--space-9);
	}
}