/**
 * GGP Focus Slice — front end and editor.
 *
 * Built to GGP-DESIGN-SYSTEM.md. No JavaScript anywhere: the open slice is a
 * checked radio, and everything else is a sibling combinator reading it.
 *
 * Namespaces on this site are deliberate and must not be crossed:
 *   .ggp       page content blocks
 *   .gsh-      header
 *   .gsf-      footer
 *   .fd-       fan deck
 *   .gss-      slideshow
 *   .gmc-      multicolumn
 *   .ggl-      gallery
 *   .fsc-      this block
 */

.ggp-fsc {
	/* Design-system tokens. On the wrapper, never on :root — a page block must
	   not reach outside itself. */
	--red: #c8102e;
	--red-tint: #fdecef;
	--ink: #000000;
	--ink-soft: rgba( 60, 60, 67, 0.70 );
	--line: rgba( 0, 0, 0, 0.08 );

	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var( --ink );
}

/*
 * An explicit reset, because this block is full of padded labels and spans.
 *
 * The slideshow block skipped it and lost an afternoon to a `<label>` that was
 * still `content-box`: 18px wide with 6px of padding painted a 30px element
 * around an 18px dot. Not a mistake worth repeating.
 */
.ggp-fsc,
.ggp-fsc *,
.ggp-fsc *::before,
.ggp-fsc *::after {
	box-sizing: border-box;
}

.ggp-fsc .fsc-inner {
	max-width: 1600px;
	margin-inline: auto;
	padding: 0 clamp( 16px, 3vw, 28px );
}

/* -------------------------------------------------------------------------
   Section header
   ------------------------------------------------------------------------- */

.ggp-fsc .fsc-head {
	max-width: 720px;
	margin: 0 auto 28px;
	text-align: center;
}

.ggp-fsc .fsc-eyebrow {
	display: inline-block;
	background: none;
	color: var( --red );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0;
	border-radius: 0;
	margin-bottom: 14px;
}

.ggp-fsc .fsc-title {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp( 2rem, 4.2vw, 3.2rem );
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.06;
}

.ggp-fsc .fsc-title em {
	/* v2: serif accent retired; an <em> renders as ordinary text. */
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* -------------------------------------------------------------------------
   Easing
   -------------------------------------------------------------------------

   Set by class rather than by an inline custom property, because WordPress's
   safecss_filter_attr deletes `cubic-bezier(...)` out of the style attribute
   and the setting silently stops existing. Learned in 1.0.0.
   ------------------------------------------------------------------------- */

.ggp-fsc.is-ease-smooth { --fsc-ease: cubic-bezier( 0.16, 1, 0.3, 1 ); }
.ggp-fsc.is-ease-spring { --fsc-ease: cubic-bezier( 0.34, 1.56, 0.64, 1 ); }
.ggp-fsc.is-ease-ease   { --fsc-ease: ease-in-out; }
.ggp-fsc.is-ease-linear { --fsc-ease: linear; }

/* -------------------------------------------------------------------------
   The state
   -------------------------------------------------------------------------

   Visually hidden, deliberately NOT `display: none` and NOT
   `visibility: hidden`. Either would pull the radios out of the tab order, and
   with them the keyboard support this component gets for nothing: tab into the
   group, arrow between slices, exactly like any radio group.
   ------------------------------------------------------------------------- */

.ggp-fsc .fsc-in {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   The track
   ------------------------------------------------------------------------- */

.ggp-fsc .fsc-track {
	display: flex;
	gap: var( --fsc-gap, 10px );
	height: var( --fsc-h, 520px );
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `flex-grow` is the whole animation.
 *
 * Not `width`, not `flex-basis`: with `flex-basis: 0` and `min-width: 0`, grow
 * alone distributes the free space, so every slice's share is one animatable
 * number and the row always adds up to the container. Animating widths instead
 * means the total drifts mid-transition and the last slice visibly overshoots
 * the edge.
 */
.ggp-fsc .fsc-slice {
	position: relative;
	flex: var( --fsc-inactive, 1 ) 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var( --fsc-r, 16px );
	background: rgba( 0, 0, 0, 0.05 );
	transition: flex-grow var( --fsc-dur, 620ms ) var( --fsc-ease, cubic-bezier( 0.16, 1, 0.3, 1 ) );
	will-change: flex-grow;
}

.ggp-fsc .fsc-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The scrim darkens a collapsed slice so the open one reads as the subject,
 * and lifts as it opens. It also gives the white slice text something to sit
 * on: a bottom-weighted gradient rather than a flat wash, so the photo is not
 * muddied across the middle.
 */
.ggp-fsc .fsc-scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.72 ) 0%, rgba( 0, 0, 0, 0.12 ) 42%, rgba( 0, 0, 0, 0 ) 68% ),
		rgba( 10, 10, 12, var( --fsc-dim, 0.4 ) );
	transition: background var( --fsc-dur, 620ms ) var( --fsc-ease, ease );
}

/* The click target: the entire slice. A label, so no script is involved. */
.ggp-fsc .fsc-hit {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

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

/* -------------------------------------------------------------------------
   The sideways name on a collapsed slice
   -------------------------------------------------------------------------

   A sliver of photograph says nothing on its own. Rotating the name up the
   slice is what makes a 60px-wide strip legible as "The Arboretum" rather than
   a green smear — and it is the detail that makes the row feel navigable
   instead of decorative.
   ------------------------------------------------------------------------- */

.ggp-fsc .fsc-spine {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 3;
	transform: translateX( -50% ) rotate( 180deg );
	writing-mode: vertical-rl;
	white-space: nowrap;
	pointer-events: none;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.55 );
	opacity: 1;
	transition: opacity calc( var( --fsc-dur, 620ms ) * 0.5 ) ease;
}

/* -------------------------------------------------------------------------
   The open slice's copy
   ------------------------------------------------------------------------- */

.ggp-fsc .fsc-open {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: clamp( 18px, 2vw, 30px );
	color: #fff;
	pointer-events: none;
	opacity: 0;
	transform: translateY( 14px );
	transition:
		opacity calc( var( --fsc-dur, 620ms ) * 0.55 ) ease,
		transform calc( var( --fsc-dur, 620ms ) * 0.55 ) var( --fsc-ease, ease );
}

/*
 * Nothing inside the copy wraps while the slice is closing.
 *
 * A heading reflowing from three lines to one mid-transition reads as a
 * glitch. Pinning the copy to the open width and letting it clip keeps the
 * movement to one axis.
 */
.ggp-fsc .fsc-open > * {
	white-space: normal;
}

.ggp-fsc .fsc-slice-title {
	margin: 0;
	font-size: clamp( 1.15rem, 1.6vw, 1.55rem );
	font-weight: 700;
	letter-spacing: -0.016em;
	line-height: 1.15;
}

.ggp-fsc .fsc-slice-title em {
	/* v2: serif accent retired. */
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
}

.ggp-fsc .fsc-desc {
	margin: 8px 0 0;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.82 );
	max-width: 46ch;
}

.ggp-fsc .fsc-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 9px 18px;
	border-radius: 100px;
	background: #fff;
	color: var( --ink );
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	pointer-events: auto;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ggp-fsc .fsc-link:hover {
	opacity: 0.88;
	transform: scale( 0.97 );
}

.ggp-fsc .fsc-arrow {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	transition: transform 0.2s ease;
}

.ggp-fsc .fsc-link:hover .fsc-arrow {
	transform: translateX( 3px );
}

/* -------------------------------------------------------------------------
   Hover: a hint, never a commitment
   -------------------------------------------------------------------------

   Only on devices that really hover. `@media (hover: hover)` keeps a phone
   from latching the hover state on tap and leaving a slice half-lit after the
   finger has gone.
   ------------------------------------------------------------------------- */

@media ( hover: hover ) {
	.ggp-fsc .fsc-slice:hover .fsc-scrim {
		background:
			linear-gradient( to top, rgba( 0, 0, 0, 0.72 ) 0%, rgba( 0, 0, 0, 0.12 ) 42%, rgba( 0, 0, 0, 0 ) 68% ),
			rgba( 10, 10, 12, calc( var( --fsc-dim, 0.4 ) * 0.55 ) );
	}
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.ggp-fsc .fsc-slice,
	.ggp-fsc .fsc-scrim,
	.ggp-fsc .fsc-open,
	.ggp-fsc .fsc-spine,
	.ggp-fsc .fsc-link,
	.ggp-fsc .fsc-arrow {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   The checked state
   -------------------------------------------------------------------------

   GENERATED — see the generator at the bottom of the plugin's build notes.
   One rule set per index because `nth-of-type(k)` on the radio has to be
   paired with `nth-child(k)` on the slice, and CSS has no arithmetic to do it
   in one.

   Sibling combinators and NOT `:has()`. The slideshow block measured 47fps
   with `:has()` against 59-61fps with siblings for identical output and pulled
   it out in v1.1.0. Do not reintroduce it.

   GGP_FOCUS_SLICE_MAX_ITEMS is 10 and this list is 10 long. They move
   together.
   ------------------------------------------------------------------------- */

.ggp-fsc .fsc-in:nth-of-type(1):checked ~ .fsc-track .fsc-slice:nth-child(1) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(1):checked ~ .fsc-track .fsc-slice:nth-child(1) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(1):checked ~ .fsc-track .fsc-slice:nth-child(1) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(1):checked ~ .fsc-track .fsc-slice:nth-child(1) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(1):checked ~ .fsc-track .fsc-slice:nth-child(1) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(2):checked ~ .fsc-track .fsc-slice:nth-child(2) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(2):checked ~ .fsc-track .fsc-slice:nth-child(2) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(2):checked ~ .fsc-track .fsc-slice:nth-child(2) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(2):checked ~ .fsc-track .fsc-slice:nth-child(2) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(2):checked ~ .fsc-track .fsc-slice:nth-child(2) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(3):checked ~ .fsc-track .fsc-slice:nth-child(3) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(3):checked ~ .fsc-track .fsc-slice:nth-child(3) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(3):checked ~ .fsc-track .fsc-slice:nth-child(3) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(3):checked ~ .fsc-track .fsc-slice:nth-child(3) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(3):checked ~ .fsc-track .fsc-slice:nth-child(3) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(4):checked ~ .fsc-track .fsc-slice:nth-child(4) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(4):checked ~ .fsc-track .fsc-slice:nth-child(4) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(4):checked ~ .fsc-track .fsc-slice:nth-child(4) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(4):checked ~ .fsc-track .fsc-slice:nth-child(4) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(4):checked ~ .fsc-track .fsc-slice:nth-child(4) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(5):checked ~ .fsc-track .fsc-slice:nth-child(5) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(5):checked ~ .fsc-track .fsc-slice:nth-child(5) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(5):checked ~ .fsc-track .fsc-slice:nth-child(5) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(5):checked ~ .fsc-track .fsc-slice:nth-child(5) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(5):checked ~ .fsc-track .fsc-slice:nth-child(5) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(6):checked ~ .fsc-track .fsc-slice:nth-child(6) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(6):checked ~ .fsc-track .fsc-slice:nth-child(6) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(6):checked ~ .fsc-track .fsc-slice:nth-child(6) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(6):checked ~ .fsc-track .fsc-slice:nth-child(6) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(6):checked ~ .fsc-track .fsc-slice:nth-child(6) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(7):checked ~ .fsc-track .fsc-slice:nth-child(7) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(7):checked ~ .fsc-track .fsc-slice:nth-child(7) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(7):checked ~ .fsc-track .fsc-slice:nth-child(7) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(7):checked ~ .fsc-track .fsc-slice:nth-child(7) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(7):checked ~ .fsc-track .fsc-slice:nth-child(7) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(8):checked ~ .fsc-track .fsc-slice:nth-child(8) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(8):checked ~ .fsc-track .fsc-slice:nth-child(8) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(8):checked ~ .fsc-track .fsc-slice:nth-child(8) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(8):checked ~ .fsc-track .fsc-slice:nth-child(8) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(8):checked ~ .fsc-track .fsc-slice:nth-child(8) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(9):checked ~ .fsc-track .fsc-slice:nth-child(9) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(9):checked ~ .fsc-track .fsc-slice:nth-child(9) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(9):checked ~ .fsc-track .fsc-slice:nth-child(9) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(9):checked ~ .fsc-track .fsc-slice:nth-child(9) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(9):checked ~ .fsc-track .fsc-slice:nth-child(9) .fsc-hit {
	cursor: default;
}

.ggp-fsc .fsc-in:nth-of-type(10):checked ~ .fsc-track .fsc-slice:nth-child(10) {
	flex-grow: var( --fsc-active, 5 );
}

.ggp-fsc .fsc-in:nth-of-type(10):checked ~ .fsc-track .fsc-slice:nth-child(10) .fsc-scrim {
	background:
		linear-gradient( to top, rgba( 0, 0, 0, 0.78 ) 0%, rgba( 0, 0, 0, 0.14 ) 46%, rgba( 0, 0, 0, 0 ) 72% ),
		rgba( 10, 10, 12, 0 );
}

.ggp-fsc .fsc-in:nth-of-type(10):checked ~ .fsc-track .fsc-slice:nth-child(10) .fsc-spine {
	opacity: 0;
}

.ggp-fsc .fsc-in:nth-of-type(10):checked ~ .fsc-track .fsc-slice:nth-child(10) .fsc-open {
	opacity: 1;
	transform: none;
	transition-delay: calc( var( --fsc-dur, 620ms ) * 0.3 );
}

.ggp-fsc .fsc-in:nth-of-type(10):checked ~ .fsc-track .fsc-slice:nth-child(10) .fsc-hit {
	cursor: default;
}

/* The focus ring has to be drawn on the slice, because the input it belongs to
   is a 1px box clipped out of sight. Without this, a keyboard user arrowing
   through the group gets no visible indication at all. */
.ggp-fsc .fsc-in:nth-of-type(1):focus-visible ~ .fsc-track .fsc-slice:nth-child(1) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(2):focus-visible ~ .fsc-track .fsc-slice:nth-child(2) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(3):focus-visible ~ .fsc-track .fsc-slice:nth-child(3) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(4):focus-visible ~ .fsc-track .fsc-slice:nth-child(4) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(5):focus-visible ~ .fsc-track .fsc-slice:nth-child(5) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(6):focus-visible ~ .fsc-track .fsc-slice:nth-child(6) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(7):focus-visible ~ .fsc-track .fsc-slice:nth-child(7) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(8):focus-visible ~ .fsc-track .fsc-slice:nth-child(8) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(9):focus-visible ~ .fsc-track .fsc-slice:nth-child(9) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}
.ggp-fsc .fsc-in:nth-of-type(10):focus-visible ~ .fsc-track .fsc-slice:nth-child(10) {
	outline: 3px solid var( --red );
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Phones — the same mechanism, turned ninety degrees
   -------------------------------------------------------------------------

   The reference stacks vertically on mobile: the active item expands and the
   others stay compact above and below. Because the whole thing is flex-grow on
   a flex container, that is one `flex-direction` change and a height swap —
   the checked-state rules above are direction-agnostic and need no mobile
   variants.
   ------------------------------------------------------------------------- */

@media ( max-width: 749px ) {
	.ggp-fsc .fsc-track {
		flex-direction: column;
		height: var( --fsc-h-m, 560px );
	}

	/* Rotating the name is a horizontal-slice idea. Stacked, a collapsed strip
	   is wide and short, so the name reads normally again. */
	.ggp-fsc .fsc-spine {
		writing-mode: horizontal-tb;
		transform: translateX( -50% );
		bottom: auto;
		top: 50%;
		margin-top: -0.6em;
	}

	.ggp-fsc .fsc-desc {
		font-size: 0.85rem;
	}
}