/**
 * Kata footer.
 *
 * PLACED ON THE FRAME, not assembled from columns.
 *
 * The drawing is 1600 x 1084 and it is a composition, not a row of columns: the
 * hotline sits alone at 88% across and three-quarters down, the social row and
 * the site nav are stacked against the inline-start edge with a rule between
 * them, and the legal cluster is diagonally opposite in the far corner. Built
 * as a two-row grid, every one of those stretched to its track and the whole
 * thing came out 828 tall against the drawn 1084 — the pieces were right and
 * the arrangement was not.
 *
 * So each block is positioned as a percentage of that frame, the way the Kata
 * Code section is, and the footer carries the frame's aspect ratio. Measured
 * positions, all from the file:
 *
 *   image      0,141    289 x 591      form       345,204   398 wide
 *   info     959,166    511 wide       hotline   1413,813   132 wide
 *   social  1410,932    135 wide       nav       1234,1010  311 wide
 *   legal     63,948    433 wide       credit      63,1017  166 wide
 *   rules     63,989 and 1043,985      both 502 wide
 *
 * Below the tablet breakpoint it all reverts to normal flow — the frame is a
 * desktop drawing and there is no mobile one.
 */

.kata-footer {
	/* Percentages resolve against the width, so one ratio scales the lot. */
	--kata-footer-h: 67.75%; /* 1084 / 1600 */

	position: relative;
	inline-size: 100%;
	aspect-ratio: 1600 / 1084;
	overflow: clip;
	/*
	 * BLACK, NOT surface-deep. Sampling the edges of frame 2144:10873 gives
	 * grey down to 506 of 1084 and then black to the foot on both sides; ours
	 * came out #111314 there, which reads as a lift the drawing does not have.
	 * The grey band above it is the ::before wedge and is unchanged.
	 */
	/*
	 * rgb(9,11,11), not #000. Every corner of the drawing below the diagonal
	 * samples 9,11,11 — a hair off black, and the tone the fade above resolves
	 * to. Pure black under it left a step at the point the ramp finishes.
	 */
	background-color: #090b0b;
	color: var( --wp--preset--color--white );
}

/* -------------------------------------------------------------------------
 * Background facets
 *
 * Sampled off the frame: the top band and the whole right side are `surface`
 * at rgb(35,39,40), and a near-black rgb(9,11,11) takes over below a diagonal
 * running from (1600, 501) to (800, 1048) and across everything left of 800
 * beneath the panel. The form sits on a third, intermediate tone.
 *
 * Decorative, so pseudo-elements rather than markup — nothing for a screen
 * reader to announce and nothing for an editor to delete by accident.
 * ---------------------------------------------------------------------- */

.kata-footer::before,
.kata-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.kata-footer::before {
	background-color: var( --wp--preset--color--surface );
	/* Top band across the full width, then the right side down to the
	   diagonal. Coordinates are physical — clip-path is not direction-aware. */
	clip-path: polygon(
		0 0,
		100% 0,
		100% 46.2%,
		50% 96.7%,
		50% 13%,
		0 13%
	);
}

/*
 * THE FORM SIDE FADES; IT IS NOT A PANEL.
 *
 * This was a #1d2021 quadrilateral cut to the shape of the form — a lighter
 * slab with four visible edges, and the frame has no such thing. Sampling a
 * column down the drawing at x=320 and again at x=780 gives one smooth ramp:
 * `surface` at 141, and a straight line from there to rgb(9,11,11) at 760,
 * flat below it. The two columns agree to within a value the whole way down,
 * so it is vertical, and it is linear — the midpoint reads 22 against the 22
 * a straight interpolation predicts.
 *
 * It carries on the tone of the section above rather than interrupting it: the
 * band at the top of this footer IS `surface`, and the ramp simply continues
 * out of it.
 *
 * The edge at 50% is real and is not a softness I have failed to reproduce.
 * Sampled across y=300, 600 and 700, the value holds at 31/19/14 up to x=780
 * and is 39 by x=800 — the right half is the flat `surface` wedge the
 * pseudo-element above draws, and the two meet on a hard line.
 */
.kata-footer::after {
	background-image: linear-gradient(
		to bottom,
		var( --wp--preset--color--surface ) 13%, /* 141 of 1084 */
		#090b0b 70.11% /* 760 of 1084 */
	);
	clip-path: polygon( 0 13%, 50% 13%, 50% 100%, 0 100% );
}

.kata-footer > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * Placed blocks
 * ---------------------------------------------------------------------- */

.kata-footer__panel,
.kata-footer__form-col,
.kata-footer__info-col,
.kata-footer__hotline,
.kata-footer__social,
.kata-footer__nav,
.kata-footer__legal {
	position: absolute;
	/*
	 * WordPress's flow layout puts `margin-block-start: var(--wp--style--
	 * block-gap)` on every child of a flow group, and a margin still applies to
	 * an absolutely positioned box — it is added to whatever `top` resolves to.
	 * Every block here landed exactly 24px low because of it, which reads as a
	 * placement error and is not one.
	 */
	margin: 0;
}

/*
 * `inset-inline-start` resolves against the ELEMENT's own direction, and these
 * are all RTL, so inline-start is the physical RIGHT — which is what the
 * design's coordinates are measured from anyway for everything but the image
 * and the legal cluster. Each block below states which edge it is pinned to.
 */

/* Image: pinned to the physical left, 289 wide, 591 tall, 141 down. */
.kata-footer__panel {
	inset-block-start: 13.007%;
	inset-inline-end: 0;
	inline-size: 18.0625%;
}

.kata-footer__image {
	margin: 0;
}

.kata-footer__image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 289 / 591;
	object-fit: cover;
	/* The lower corner is cut away on the diagonal, as drawn. */
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 62% );
}

/* An empty image placeholder must not leave a hole in the layout. */
.kata-footer__image img:not( [src] ),
.kata-footer__image img[src=""] {
	display: none;
}

/* Form: 398 wide, its inline-start edge at 743 of 1600. */
.kata-footer__form-col {
	inset-block-start: 18.82%;
	inset-inline-start: 53.5625%;
	inline-size: 24.875%;
}

/* Info: 511 wide, its inline-start edge at 1470 of 1600. */
.kata-footer__info-col {
	inset-block-start: 15.31%;
	inset-inline-start: 8.125%;
	inline-size: 31.9375%;
	text-align: start;
}

/*
 * 40px in a 1600 frame — the drawn heading box is 55 tall on one line. `xl` at
 * 32px came out 37 and left the block reading a size smaller than everything
 * around it, so this scales with the frame like the rest of the composition.
 */
.kata-footer__heading {
	margin: 0 0 0.4em;
	/* Figma 523:2318 — 42px. */
	font-size: clamp( 32px, 2.625vw, 2.625rem ) !important; /* mobile 32 per Figma 2130:3032 */
	line-height: 1.375;
}

.kata-footer__intro {
	margin: 0;
	/*
	 * Figma 523:2319 — 24px.
	 *
	 * `!important` for the same reason as the heading above: the paragraph
	 * carries `has-md-font-size`, a preset class, and core emits those with
	 * `!important`. Nothing but `!important` outranks one.
	 */
	font-size: clamp( 18px, 1.5vw, 1.5rem ) !important; /* mobile 18 per Figma 2130:3033 */
}

.kata-footer__contact {
	/* The heading block ends at 283 and the details start at 347: 64 of clear
	   air, which is a proportion of the frame rather than of this column. */
	margin-block-start: clamp( 20px, 3.5vw, 56px );
}

.kata-footer__contact p {
	margin: 0;
}

.kata-footer__contact-title {
	margin-block-start: var( --wp--preset--spacing--30 ) !important;
}

.kata-footer__contact a,
.kata-footer__hotline a {
	color: inherit;
}

/* Hotline: alone at 1413, three-quarters down, and drawn at 132 wide — which
   is a 20px line, not the 14px the rest of the contact details use. */
.kata-footer__hotline {
	inset-block-start: 75%;
	inset-inline-start: 3.4375%;
	font-size: clamp( 15px, 1.25vw, 20px );
	text-align: start;
}

.kata-footer__hotline p {
	margin: 0;
	font-size: inherit !important;
}

/*
 * Brand icon rows read left-to-right even in an RTL document — Facebook,
 * Instagram, YouTube in that physical order, as drawn. Forcing LTR on the
 * container is the standard treatment and keeps the row from mirroring.
 */
.kata-footer__social {
	inset-block-start: 85.98%;
	/*
	 * inset-inline-END, uniquely in this file, and the `direction: ltr` below
	 * is why: inline offsets resolve against the element's OWN direction, so on
	 * an LTR row inline-start is the physical LEFT and this block flew to the
	 * far side of the footer. End is the right here, which is where it belongs.
	 */
	inset-inline-end: 3.4375%;
	direction: ltr;
}

.kata-footer__social .wp-social-link {
	padding: 0;
}

/*
 * The rule under the social row, and its twin under the legal links. Drawn as
 * borders on the blocks beneath them so they cannot drift apart from the rows
 * they belong to.
 */
.kata-footer__nav {
	inset-block-start: 90.87%;
	inset-inline-start: 3.4375%;
	inline-size: 31.375%;
	justify-content: flex-start;
	padding-block-start: 1.5%;
	border-block-start: 1px solid rgba( 255, 255, 255, 0.2 );
}

/*
 * Four links across 311 in the drawing. At the block's default 32px gap they
 * needed 502 and wrapped onto a second line that fell out of the footer, so
 * the gap and the size both come off the frame instead.
 */
.kata-footer__nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp( 14px, 1.94vw, 31px );
	/*
	 * The navigation block puts its border support on the inner list as well as
	 * the wrapper, so the single rule above the links was being drawn twice —
	 * once in the right place and once, shorter, immediately beneath it.
	 */
	border: 0;
}

.kata-footer__nav .wp-block-navigation-item__content {
	font-size: clamp( 11px, 0.85vw, 14px );
	white-space: nowrap;
}

/* The hotline is a link but is drawn as plain text. */
.kata-footer__hotline a {
	text-decoration: none;
}

/* Legal cluster: the far corner, pinned to the physical left. */
.kata-footer__legal {
	inset-block-start: 87.45%;
	inset-inline-end: 3.9375%;
	inline-size: 31.375%;
	display: flex;
	flex-direction: column;
	/*
	 * NOT a percentage. Row-gap percentages resolve against the container's own
	 * HEIGHT, which is auto here, so they compute to zero — the credit line was
	 * sitting hard against the rule above it. The drawn gap is 28 of 1600.
	 */
	gap: clamp( 12px, 1.75vw, 28px );
	text-align: end;
}

/*
 * The links sit at 948 and the rule at 989: 29 of clear air beneath a 12px
 * line. Padding, for the same reason as the gap above — a percentage would
 * resolve against the width and come out four times too large.
 */
.kata-footer__legal-row {
	align-items: baseline;
	justify-content: flex-end;
	padding-block-end: clamp( 10px, 1.375vw, 22px );
	border-block-end: 1px solid rgba( 255, 255, 255, 0.2 );
}

.kata-footer__copyright,
/*
 * One rule, not two — they were split across the file and the second silently
 * carried half the styling. The size is stated here because the block no longer
 * carries a `fontSize` preset: WordPress emits those with `!important`, which
 * left the narrow frame's 14 unreachable from any stylesheet.
 */
.kata-footer__credit {
	margin: 0;
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 0.75rem; /* 12, as the xxs preset gave it */
	text-align: end;
}

.kata-footer__legal-nav .wp-block-navigation-item__content,
.kata-footer__nav .wp-block-navigation-item__content {
	color: var( --wp--preset--color--white );
	text-decoration: none;
}

.kata-footer__legal-nav .wp-block-navigation-item__content:hover,
.kata-footer__nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Tablet and below
 *
 * The frame is a desktop drawing; there is no mobile one. Rather than invent a
 * composition, the placement is dropped entirely and the blocks run in normal
 * order — form, details, then the two link rows.
 * ---------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.kata-footer {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: var( --wp--preset--spacing--50 );
		padding-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--40 );
		padding-inline: clamp( 1.25rem, 3.9375vw, 4rem );
	}

	.kata-footer::before,
	.kata-footer::after {
		display: none;
	}

	.kata-footer__panel,
	.kata-footer__form-col,
	.kata-footer__info-col,
	.kata-footer__hotline,
	.kata-footer__social,
	.kata-footer__nav,
	.kata-footer__legal {
		position: static;
		inline-size: 100%;
		padding-block-start: 0;
	}

	/* The decorative image drops out before any content does. */
	.kata-footer__panel {
		display: none;
	}

	.kata-footer__info-col {
		order: 1;
	}

	.kata-footer__form-col {
		order: 2;
	}

	.kata-footer__hotline {
		order: 3;
	}

	/*
	 * NARROW FOOTER — Figma 2130:3004.
	 *
	 * Everything below the contact block is centred on a phone rather than run
	 * along the reading edge, and it is divided into two banded groups by rules
	 * that span the full measure: marks over a row of sections, then the legal
	 * links over the credit.
	 */

	/* Three marks, centred, 39 across with 27.5 between — then a rule. */
	.kata-footer__social {
		order: 4;
		justify-content: center;
		/* The gap belongs to the mark sizes and is stated with them, below. */
		padding-block-end: 1.563rem; /* 25 */
		/* Figma 2130:3023 Line 524: stroke="white", 1px — not a tinted rule. */
		border-block-end: 1px solid var( --wp--preset--color--white );
	}

	/*
	 * The row item takes the mark's own width rather than a square 39.
	 *
	 * Two of the three marks are square and the third is not: 2130:3019 draws
	 * YouTube at 55.467 x 39, the same 1.42 the wide frame gives it. Held to
	 * 39 the item cropped its own mask and the play button came out narrow
	 * beside the other two.
	 */
	.kata-footer__social .wp-social-link {
		inline-size: auto;
		block-size: auto;
		margin: 0;
	}

	/*
	 * The four sections are set apart across the full measure — `space-between`
	 * rather than a wrapping row, so they read as one band of equal weight.
	 */
	.kata-footer__nav {
		order: 5;
		margin-block-start: 1.563rem; /* 25 */
		border-block-start: 0;
	}

	.kata-footer__nav .wp-block-navigation__container {
		justify-content: space-between;
		inline-size: 100%;
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	.kata-footer .kata-footer__nav .wp-block-navigation-item__content {
		font-size: 0.875rem; /* 14 */
		white-space: nowrap;
	}

	.kata-footer__legal {
		order: 6;
		margin-block-start: 3.375rem; /* 54 between the two banded groups */
		text-align: center;
	}

	/*
	 * The legal links lead and the copyright sits under them — the reverse of
	 * the wide arrangement, where the two share a line. `order` rather than
	 * `column-reverse` so what is read aloud still follows what is seen.
	 */
	.kata-footer__legal-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.938rem; /* 31 */
		padding-block-end: 1.813rem; /* 29 */
		/* The credit draws the rule between them; this one made it two. */
		border-block-end: 0;
	}

	.kata-footer__legal-nav {
		order: -1;
	}

	.kata-footer__legal-nav .wp-block-navigation__container {
		justify-content: center;
		gap: 1.938rem; /* 31 */
	}

	/*
	 * Set below its own rule and held back to half strength — it names the
	 * people who built the site, not the people whose site it is.
	 */
	/*
	 * 14 here against 12 everywhere else, which is the one size in this footer
	 * that the narrow frame actually changes.
	 *
	 * Its `fontSize` attribute had to come off the block to allow it: WordPress
	 * emits `.has-*-font-size` with `!important`, so no stylesheet rule of any
	 * specificity can move it. The size now lives here for both widths instead —
	 * 12 in the base rule, 14 in this one.
	 */
	.kata-footer .kata-footer__credit {
		font-size: 0.875rem; /* 14 */
		padding-block-start: 1.813rem; /* 29 */
		/* Figma 2130:3015 Line 523: stroke="white", 1px. */
		border-block-start: 1px solid var( --wp--preset--color--white );
		text-align: center;
		/*
		 * The dimming belongs to the TEXT, not to the element. As `opacity` it
		 * also took the rule above down with it — 0.35 of white at half opacity
		 * is about 18%, which is the washed-out separator. The colour renders
		 * the words exactly as before and leaves the border at full strength.
		 */
		color: rgba( 255, 255, 255, 0.5 );
	}

	.kata-footer__contact {
		margin-block-start: var( --wp--preset--spacing--40 );
	}
}

/* ---------------------------------------------------------------------------
 * Narrow — frame 2130:3004 (395 x 1705)
 *
 * THE PHOTOGRAPH AND BOTH WEDGES ARE IN THE MOBILE FRAME.
 *
 * They were switched off here — the panel with `display: none` under the note
 * "the decorative image drops out before any content does", and the two wedges
 * with the pseudo-elements. Neither is a decision the frame makes: it draws
 * `byond_600_600 1` 395 x 446 across the top, a black wedge 395 x 707 at y=100
 * cutting the photograph on the diagonal, and the same wedge again at y=1284
 * turned through 180 for the foot.
 *
 * The wide layout's clip paths are fitted to the wide frame and cannot serve
 * here, so this block states the narrow ones. Every number is the frame's:
 *   photo      395 x 446                    -> aspect 395/446
 *   wedge      395 x 707, black             -> 179.0% of the width tall
 *   its cut    (0,0) to (395,285)           -> 285/707 = 40.31%
 *   placed at  y=100                        -> 100/395 = 25.32%
 *   the cut on the photo, in footer terms, runs (0,100) to (395,385)
 *   -> 100/446 = 22.42% on the near edge, 385/446 = 86.32% on the far one
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	.kata-footer {
		position: relative;
		background-color: var( --wp--preset--color--surface );
	}

	.kata-footer__panel {
		display: block;
		/* Shows through the photograph's diagonal cut — this IS the wedge. */
		background-color: #000;
		position: relative;
		z-index: 0;
		/*
		 * EDGE TO EDGE. The frame puts the photograph at x=0 across the full
		 * 395 while the content it sits above is inset to 20. Left inside the
		 * footer's own padding it came out 355 wide with a band of ground either
		 * side, which the frame does not have.
		 */
		margin-inline: calc( -1 * clamp( 1.25rem, 3.9375vw, 4rem ) );
	}

	.kata-footer__image img {
		aspect-ratio: 395 / 446;
		/* Kept above the diagonal; the wedge below it is the footer's own ground. */
		clip-path: polygon( 0 0, 100% 0, 100% 86.32%, 0 22.42% );
	}

	/*
	 * THE BLACK UNDER THE PHOTOGRAPH IS NOT A FIXED SHAPE — it is the ground
	 * behind the content, and it ends where the content ends.
	 *
	 * It was a pseudo-element placed at 25.32vw and 179vw tall. Those scale
	 * with the WIDTH while the rhythm below is set in px, so the two only
	 * agreed at the 395 the frame is drawn at: at 430 the black ran to 878
	 * while the legend stayed at 846 and the whole subject row sat on it.
	 *
	 * The photograph already carries the diagonal in its own clip path, so
	 * whatever sits behind it shows through the cut. Giving the panel and the
	 * text column a black ground draws the same wedge with no second set of
	 * coordinates to keep in step — and its foot follows the text at any width.
	 */
	.kata-footer::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 0;
		inline-size: 100%;
		/*
		 * vw, NOT %. A percentage block-size resolves against the containing
		 * block's HEIGHT, so 179% of a 1788-tall footer came out 3200 — four
		 * and a half times the wedge's real size. Both diagonals fell far off
		 * the bottom of the screen and the black covered the whole footer,
		 * which is why no grey ever showed. The wedge is 707 against a 395
		 * frame: 179% of the WIDTH.
		 */
		block-size: 179vw;
		background-color: #000;
		clip-path: polygon( 0 0, 100% 40.31%, 100% 100%, 0 100% );
		pointer-events: none;
	}

	/*
	 * THE FOOT — measured off the frame's own pixels, not derived.
	 *
	 * Sampling the left and right edges of 2130:3004 gives black from 1566 on
	 * the near edge and from 1288 on the far one, both running to the bottom.
	 * So its top edge DESCENDS right-to-left — the shape mirrored, not turned
	 * through 180 as this had it, which put the diagonal the other way and left
	 * no grey triangle at the foot at all.
	 *
	 * 1705 - 1288 = 417 tall, and the near edge starts (1566 - 1288) / 417 =
	 * 66.7% down it. Anchored to the bottom so it holds when the content makes
	 * this footer taller than the frame.
	 */
	.kata-footer::after {
		inset: auto 0 0 0;
		block-size: 105.6vw; /* 417 / 395 */
		clip-path: polygon( 0 66.7%, 100% 0, 100% 100%, 0 100% );
		transform: none;
	}

	/* Everything readable sits over both. */
	.kata-footer > * {
		position: relative;
		z-index: 1;
	}

	/*
	 * The wide layout places these columns with insets. `position: static`
	 * alone does not undo them once something else has restored `relative`,
	 * and a leftover inset was carrying the form 190 off the reading edge —
	 * its rows measured -170..185 against the frame's 20..375. Cleared here
	 * so the column simply stacks.
	 */
	.kata-footer__panel,
	.kata-footer__form-col,
	.kata-footer__info-col,
	.kata-footer__hotline,
	.kata-footer__social,
	.kata-footer__nav,
	.kata-footer__legal {
		inset: auto;
		inline-size: auto;
		max-inline-size: none;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Social marks
 *
 * TWO DRAWINGS, NOT ONE — and the row is not square.
 *
 * The wide footer draws them at 2144:10972, 135.351 x 28: Facebook 28 x 28,
 * Instagram 28 x 28 at 47.765, YouTube 39.822 x 28 at 95.529 — so 19.765
 * between them. The narrow one draws the same three at 2130:3018, 188.525 x 39,
 * with 27.529 between. YouTube keeps its 1.4222 in both, which is what says
 * these are one mark set at two sizes rather than two sets.
 *
 * What was here stated the NARROW sizes with no query around them, so the 39s
 * and a 30 gap were being used at every width — the wide row came out 188 where
 * it is drawn 135 — and a third rule further up asked for 28px marks with a 25
 * gap that never took effect. All three sets of numbers are now in one place,
 * each behind the width it belongs to.
 *
 * All three are SOLID marks: filled rounded squares, white. Core's `social-link`
 * blocks ship their own outline glyphs, which is what was on the page.
 *
 * The exported paths are masked over a white ground rather than dropped in as
 * <img>: the anchor keeps core's markup, its label and its focus handling, and
 * the mark takes its colour from `currentColor` so a hover or a theme change
 * still reaches it.
 * ------------------------------------------------------------------------ */

.kata-footer__social .wp-block-social-link {
	background-color: transparent !important;
	padding: 0;
}

.kata-footer__social .wp-block-social-link-anchor svg {
	display: none;
}

.kata-footer__social .wp-block-social-link-anchor {
	display: block;
	background-color: currentColor;
	color: var( --wp--preset--color--white );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.kata-footer__social .wp-social-link-facebook .wp-block-social-link-anchor {
	-webkit-mask-image: url( "../images/social/facebook.svg" );
	mask-image: url( "../images/social/facebook.svg" );
}

.kata-footer__social .wp-social-link-instagram .wp-block-social-link-anchor {
	-webkit-mask-image: url( "../images/social/instagram.svg" );
	mask-image: url( "../images/social/instagram.svg" );
}

.kata-footer__social .wp-social-link-youtube .wp-block-social-link-anchor {
	-webkit-mask-image: url( "../images/social/youtube.svg" );
	mask-image: url( "../images/social/youtube.svg" );
}

/* The wide row — 2144:10972, 135.351 across. */
.kata-footer__social {
	gap: 19.765px;
}

.kata-footer__social .wp-block-social-link-anchor {
	block-size: 28px;
}

.kata-footer__social .wp-social-link-facebook .wp-block-social-link-anchor,
.kata-footer__social .wp-social-link-instagram .wp-block-social-link-anchor {
	inline-size: 28px;
}

.kata-footer__social .wp-social-link-youtube .wp-block-social-link-anchor {
	inline-size: 39.822px;
}

/* The narrow row — 2130:3018, 188.525 across, the same marks a size up. */
@media ( max-width: 781px ) {
	.kata-footer__social {
		gap: 27.529px;
	}

	.kata-footer__social .wp-block-social-link-anchor {
		block-size: 39px;
	}

	.kata-footer__social .wp-social-link-facebook .wp-block-social-link-anchor,
	.kata-footer__social .wp-social-link-instagram .wp-block-social-link-anchor {
		inline-size: 39px;
	}

	.kata-footer__social .wp-social-link-youtube .wp-block-social-link-anchor {
		inline-size: 55.467px;
	}
}

/* ---------------------------------------------------------------------------
 * Narrow — the foot, frame 2130:3017 + 2130:3008
 *
 * The frame's narrow footer has no telephone line: 2130:3017 holds the social
 * marks, a rule and the four links, and 2130:3008 the legal links, the
 * copyright, a rule and the credit. Nothing else. The hotline is a wide-layout
 * element and is dropped here rather than deleted, so the wide footer keeps it.
 *
 * The gaps are the frame's:
 *   social  -> rule       25   (2130:3017 gap-[25px])
 *   rule    -> links      25
 *   links   -> legal      54   (1546 - 1492)
 *   legal   -> copyright  31   (1589 - 1558)
 *   copy    -> rule       29   (1630 - 1601)
 *   rule    -> credit     29   (1659 - 1630)
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	.kata-footer__hotline {
		display: none;
	}

	.kata-footer__social {
		margin-block-end: 0;
		padding-block-end: 25px;
	}

	.kata-footer__nav {
		margin-block-start: 25px;
	}

	.kata-footer__legal {
		margin-block-start: 54px;
	}

	.kata-footer__copyright {
		margin-block-start: 31px;
	}

	.kata-footer .kata-footer__credit {
		margin-block-start: 29px;
		padding-block-start: 29px;
	}
}

/* ---------------------------------------------------------------------------
 * Narrow — the whole vertical rhythm, frame 2130:3004 (395 x 1705)
 *
 * Measured top to bottom rather than one gap at a time, which is how this got
 * fixed piecemeal and stayed wrong:
 *
 *   photo      0    .. 446
 *   heading    411  .. 495     <- STARTS 35 ABOVE THE PHOTO'S FOOT
 *   intro      495  .. 541
 *   address    605  .. 766      (64 under the intro)
 *   form       846  .. 1219     (80 under the address)
 *   social     1389 .. 1428     (170 under the form)
 *   rule       1453             (25)
 *   links      1478 .. 1492     (25)
 *   legal      1546 .. 1558     (54)
 *   copyright  1589 .. 1601     (31)
 *   rule       1630             (29)
 *   credit     1659 .. 1673     (29)
 *
 * The content block overlaps the photograph by 35 — the frame puts it at 411
 * against a photograph that runs to 446 — so it is pulled up rather than
 * spaced down. The footer's own flex gap is cleared here, otherwise every one
 * of these lands 24 too far apart.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {
	.kata-footer {
		gap: 0;
		padding-block-start: 0;
	}

	.kata-footer__panel {
		margin-block-start: 0;
	}

	/* Over the photograph's foot, as drawn. The black continues behind it and
	   stops 37 short of the form, which is the frame's gap at 809 -> 846. */
	.kata-footer__info-col {
		margin-block-start: -35px;
		background-color: #000;
		/*
		 * EDGE TO EDGE. The wedge spans the full 395 in the frame; confined to
		 * the text column it left a grey gutter either side of the black.
		 */
		margin-inline: calc( -1 * clamp( 1.25rem, 3.9375vw, 4rem ) );
		padding-inline: clamp( 1.25rem, 3.9375vw, 4rem );
		/* 809 - 766: the black runs on past the address before it stops. */
		padding-block-end: 43px;
	}

	.kata-footer__heading {
		margin-block-start: 0;
	}

	.kata-footer__intro {
		margin-block-start: 0;
	}

	.kata-footer__contact {
		margin-block-start: 64px;
	}

	/*
	 * 77, not the frame's 80. The blocks above render 3 taller than they are
	 * drawn — our font wraps the address a little differently — and the frame's
	 * gap on top of that put the legend at 849 against its 846, so the grey
	 * above it measured 41 where the frame gives 37. Taking the drift off here
	 * lands the legend on its mark instead of carrying the error down.
	 */
	/* 846 - 809 = 37, less the 3 our blocks above render taller than drawn. */
	.kata-footer__form-col {
		margin-block-start: 34px;
	}

	/*
	 * 105, not 170. 2130:3035 declares a height of 373 but its children run to
	 * 438 — the frame is smaller than what is inside it. Measured from where
	 * the content actually ends (1284) to the marks (1389).
	 */
	.kata-footer__social {
		margin-block-start: 105px;
	}

	.kata-footer__nav {
		margin-block-start: 25px;
	}

	.kata-footer__legal {
		margin-block-start: 54px;
	}

	/*
	 * 1.3 THROUGHOUT, as the frame sets it. Ours ran 1.375 on the heading and
	 * 1.5 on the prose, which made each block a little taller than drawn and
	 * pushed everything below it down — 17 by the intro, 37 by the form.
	 */
	.kata-footer__heading,
	.kata-footer__intro,
	.kata-footer__contact,
	.kata-footer__contact p {
		line-height: 1.3;
	}

	.kata-footer__copyright {
		margin-block-start: 31px;
	}

	.kata-footer .kata-footer__credit {
		margin-block-start: 29px;
		padding-block-start: 29px;
	}
}