/*
Theme Name: TAGUI Theme
Author: TAGUI
Description: platina-GYM 専用テーマ。Twenty Twenty-Five 1.5 をベースに制作。
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.0.35
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tagui-theme
*/

/*
 * Front-end stylesheet. Prefer theme.json for design tokens and block styles;
 * use this file only for what theme.json cannot express.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/*
 * Focus styles: the outline is shown for keyboard focus only (:focus-visible), not when
 * an element is tapped or clicked; the mobile tap highlight is turned off too.
 */
html {
	-webkit-tap-highlight-color: transparent;
}

:where(.wp-site-blocks *:focus-visible) {
	outline-width: 2px;
	outline-style: solid;
}

:where(.wp-site-blocks *:focus:not(:focus-visible)) {
	outline: none;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
/*
 * Headings: Japanese wraps between phrases rather than mid-word or before a lone particle
 * (lang="ja"; Chrome / Edge), and lines are balanced. Body text (paragraphs, captions…)
 * simply fills each line, on every screen size.
 */
h1, h2, h3, h4, h5, h6 {
	text-wrap: pretty;
	word-break: auto-phrase;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/*
 * Header (parts/header.html)
 * Floats over the main visual of every page.
 */
.tagui-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0);
	right: 0;
	left: 0;
	z-index: 100;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--custom--overlay--header);
}

/*
 * Glass bar, after liquid-glass-react (MIT): a layer behind the content blurs and
 * brightens the page (the design's "saturation" and "plus-lighter" fills), and the SVG
 * filter #tagui-glass (tagui_theme_glass_filter()) bends it near the edges like a lens,
 * splitting the colours slightly. Safari and Firefox show the blur without the bending.
 * A thin rim catches light at the top-left and bottom-right corners.
 */
.tagui-header__bar {
	--tagui-glass-rim: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
	--tagui-glass-rim-faint: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
	position: relative;
	border-radius: var(--wp--custom--radius--l);
}

.tagui-header__bar > * {
	position: relative;
	z-index: 1;
}

/* The logo image is inline by default, which adds a descender gap below it and makes the bar taller. */
.tagui-header .wp-block-site-logo img {
	display: block;
}

/*
 * The menu + SNS row fills the bar's height (its contents stay centred), so its top edge
 * is a fixed distance from the top of the screen; the submenu panel is positioned
 * against it.
 */
.tagui-header__bar > .wp-block-group {
	align-self: stretch;
}

.tagui-header__bar::before,
.tagui-header__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.tagui-header__bar::before {
	background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
	-webkit-backdrop-filter: blur(6px) saturate(140%) brightness(1.08);
	backdrop-filter: blur(6px) saturate(140%) brightness(1.08);
	filter: url(#tagui-glass);
	/* The SVG filter paints its whole bounding box, square corners included; clip it back to the rounded shape (clip-path applies after filter). */
	clip-path: inset(0 round var(--wp--custom--radius--l));
}

.tagui-header__bar::after {
	z-index: 2;
	padding: 1px;
	background: linear-gradient(135deg, var(--tagui-glass-rim) 0%, var(--tagui-glass-rim-faint) 30%, var(--tagui-glass-rim-faint) 70%, var(--tagui-glass-rim) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.tagui-header__nav {
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/*
 * Submenus (desktop, 782px and up): hovering ABOUT US / SERVICE drops a purple panel down from the top
 * of the screen, behind the header bar, with the child links listed below the bar, each
 * led by a short white rule. The panel grows with the number of links.
 * The panel is pinned to the right edge of the screen at a fixed width; since the menu is
 * right-aligned, the list lines up under ABOUT US at any screen width.
 * The panel is positioned against the bar's inner row (.tagui-header__bar > *, the nearest
 * positioned box once the menu's own positioning is switched off) and sits at z-index -1
 * inside it: above the bar's glass, below the menu text and the SNS icons. While open it
 * also covers the way down from the parent, so it stays open on the way to its links.
 * Sizes come from theme.json custom.header.
 */
@media (min-width: 782px) {
	/* SNS icons and legal links in the menu are for the hamburger menu only. */
	.tagui-header__nav .wp-block-navigation-item:has(> .tagui-nav-sns),
	.tagui-header__nav .tagui-nav-legal {
		display: none;
	}

	/* Includes the responsive wrappers core puts around the menu (the dialog is position: relative). */
	.tagui-header__nav.wp-block-navigation,
	.tagui-header__nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
	.tagui-header__nav .wp-block-navigation__responsive-close,
	.tagui-header__nav .wp-block-navigation__responsive-dialog,
	.tagui-header__nav .wp-block-navigation__responsive-container-content,
	.tagui-header__nav .wp-block-navigation__container,
	.tagui-header__nav .wp-block-navigation__container > .wp-block-navigation-item {
		position: static;
	}

	.tagui-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		top: calc(-2 * var(--wp--preset--spacing--40));
		right: calc(-1 * (var(--wp--preset--spacing--50) + var(--wp--preset--spacing--40)));
		left: auto;
		z-index: -1;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
		box-sizing: border-box;
		width: var(--wp--custom--header--drop-width);
		min-width: 0;
		height: auto;
		padding: var(--wp--custom--header--drop-items-top) 0 var(--wp--custom--header--drop-items-bottom) var(--wp--custom--header--drop-inset);
		overflow: hidden;
		border: 0;
		border-radius: 0 0 0 var(--wp--custom--header--drop-radius);
		background: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--white);
		opacity: 1;
		visibility: hidden;
		clip-path: inset(0 0 100% 0);
		transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.5s;
	}

	.tagui-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
		width: var(--wp--custom--header--drop-width);
		min-width: 0;
		height: auto;
		overflow: hidden;
		visibility: visible;
		clip-path: inset(0);
		transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
	}

	/* Child links: no box padding (the list gap spaces them), a 30px rule before the label, fading in once the panel is down. */
	.tagui-header__nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		align-items: center;
		gap: var(--wp--preset--spacing--40);
		padding: 0;
	}

	.tagui-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: "";
		flex: none;
		width: 30px;
		height: 1px;
		background: currentColor;
	}

	.tagui-header__nav .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		opacity: 0;
		transition: opacity 0.2s;
	}

	.tagui-header__nav .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		opacity: 1;
		transition: opacity 0.3s 0.25s;
	}
}

@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
	.tagui-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container,
	.tagui-header__nav .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		transition: none;
	}
}

/*
 * Menu label roll: the label is drawn as two text shadows, one in place and one a line
 * below, inside a clipped box. On hover both shift up a line: the visible copy fades
 * out upward while the copy from below fades in (same motion as the CTA arrow).
 * The glyphs themselves are transparent, so the label needs no extra markup.
 */
/* Same line height as the label, so the label isn't pushed to the top of a taller line. */
.tagui-header__nav .wp-block-navigation-item__content {
	line-height: var(--wp--custom--line-height--tight);
}

.tagui-header__nav .wp-block-navigation-item__label {
	--tagui-roll: 1.3em;
	--tagui-roll-color: var(--wp--preset--color--white);
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	line-height: var(--wp--custom--line-height--tight);
	color: transparent;
	text-shadow:
		0 0 0 var(--tagui-roll-color),
		0 var(--tagui-roll) 0 transparent;
	transition: text-shadow 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/*
 * Triggered by the whole menu item, so hovering the ▼ (a sibling of the link) rolls the
 * label too. Desktop only: in the hamburger menu, core focuses the first link on opening,
 * which would set the roll off by itself.
 */
@media (min-width: 782px) {
	.tagui-header__nav .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		text-shadow:
			0 calc(-1 * var(--tagui-roll)) 0 transparent,
			0 0 0 var(--tagui-roll-color);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tagui-header__nav .wp-block-navigation-item__label {
		transition: none;
	}
}

/* Solid ▼ instead of the default chevron, as in the design. */
.tagui-header__nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

/*
 * Core pads the submenu toggles (ABOUT US / SERVICE) on both sides, which pushes their
 * labels off the menu rhythm and away from the submenu text; the ▼ sits 4px after the
 * label, as in the design.
 */
.tagui-header__nav .wp-block-navigation-item .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
	padding-right: 0;
	padding-left: 0;
}

.tagui-header__nav .wp-block-navigation__submenu-icon {
	width: auto;
	margin-left: 4px;
}

.tagui-header__nav .wp-block-navigation__submenu-icon::before {
	content: "";
	display: block;
	width: 7px;
	height: 6px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	/* Nudged up to sit on the capitals on the live site. */
	transform: translateY(-2px);
}

.tagui-social a,
.tagui-header .wp-block-site-logo a,
.tagui-footer .wp-block-site-logo a,
.tagui-footer .wp-block-navigation-item__content {
	transition: opacity 0.2s;
}

.tagui-social a:hover,
.tagui-header .wp-block-site-logo a:hover,
.tagui-footer .wp-block-site-logo a:hover,
.tagui-footer .wp-block-navigation-item__content:hover {
	opacity: 0.7;
}

/*
 * SNS icons: 34px circles. Glyph boxes are sized so the visible marks match the design
 * (Instagram 18px, X 17px tall, LINE 22px): 24px boxes, X a little smaller.
 */
.wp-block-social-links.tagui-social:not(.is-style-logos-only) .wp-social-link {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.wp-block-social-links.tagui-social .wp-block-social-link-anchor {
	padding: 5px;
}

.wp-block-social-links.tagui-social .wp-social-link svg {
	width: 24px;
	height: 24px;
}

.wp-block-social-links.tagui-social .wp-social-link-x .wp-block-social-link-anchor {
	padding: 6px;
}

.wp-block-social-links.tagui-social .wp-social-link-x svg {
	width: 22px;
	height: 22px;
}

/*
 * Footer (parts/footer.html)
 */
.tagui-footer {
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
}

.tagui-footer .wp-block-social-links.tagui-social:not(.is-style-logos-only) .wp-social-link {
	background: var(--wp--preset--color--gray-700);
}

.tagui-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--gray-850);
}

.tagui-legal-nav {
	font-weight: 500;
}

/*
 * Footer on small screens: a smaller logo, more room under the SNS icons and between the
 * link groups, and the bottom row stacked and centred — legal links (one per line, no
 * dividers) above the copyright.
 */
@media (max-width: 781px) {
	.tagui-footer .wp-block-site-logo img {
		width: 140px;
		height: auto;
	}

	.tagui-footer .wp-block-columns {
		row-gap: var(--wp--preset--spacing--80);
	}

	.tagui-footer .tagui-social {
		margin-bottom: var(--wp--preset--spacing--40);
	}

	/* The row's padding is an inline block style, hence !important. */
	.tagui-footer .tagui-footer__bottom > .wp-block-group {
		flex-direction: column-reverse;
		align-items: center;
		gap: var(--wp--preset--spacing--50);
		padding-block: var(--wp--preset--spacing--70) !important;
	}

	.tagui-footer .tagui-legal-nav,
	.tagui-footer .tagui-legal-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}

	.tagui-footer .tagui-legal-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
		display: none;
	}
}

/* Legal links get an underline on hover instead of the fade used by the other footer links. */
.tagui-footer .tagui-legal-nav .wp-block-navigation-item__content:hover {
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.tagui-legal-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	width: 1px;
	height: 1em;
	margin-right: var(--wp--preset--spacing--50);
	background: currentColor;
}

/*
 * Sections and template parts sit flush; spacing comes from each section's own padding.
 */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

/*
 * Full-bleed pieces (the information slider) are sized with 100vw, which includes the
 * vertical scrollbar on desktop browsers and so runs a few pixels past the page. Clip
 * horizontal overflow at the page level; "clip" makes no scroll container, so scrolling
 * and the fixed header (positioned against the viewport) are unaffected.
 */
.wp-site-blocks {
	overflow-x: clip;
}

/*
 * Main visual (parts/mv.html, mv-detail.html, mv-top.html)
 * Text is inset less than the page gutter, as in the design (40px on PC).
 */
.tagui-mv {
	--tagui-mv-inset: min(var(--wp--preset--spacing--70), var(--wp--preset--spacing--gutter));
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--wp--custom--mv--page);
	margin-block: 0;
	padding: 0 var(--tagui-mv-inset) var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
}

.tagui-mv::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--wp--custom--mv--fade);
	background: var(--wp--custom--overlay--mv);
	pointer-events: none;
}

.tagui-mv .tagui-mv__image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.tagui-mv .tagui-mv__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tagui-mv__body {
	position: relative;
	z-index: 1;
}

.tagui-mv .tagui-mv__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight);
}

.tagui-mv .tagui-mv__label,
.tagui-mv .tagui-mv__meta {
	margin-block-start: var(--wp--preset--spacing--40);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-mv .tagui-mv__label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.tagui-mv__label::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.tagui-mv__label:empty,
.tagui-mv__meta:empty {
	display: none;
}

/*
 * Lower-page MV title: characters rise in one after another (assets/js/reveal.js splits
 * the title into .tagui-char spans). Hidden until split, only while scripts run.
 */
.tagui-js .tagui-mv:not(.tagui-mv--top) .tagui-mv__title:not(.is-split) {
	opacity: 0;
}

.tagui-mv__title .tagui-char {
	display: inline-block;
	white-space: pre;
	animation: tagui-char-in 0.7s cubic-bezier(0.25, 1, 0.5, 1) both;
	animation-delay: calc(0.15s + var(--tagui-char) * 0.04s);
}

@keyframes tagui-char-in {
	from {
		opacity: 0;
		transform: translateY(0.4em);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tagui-js .tagui-mv:not(.tagui-mv--top) .tagui-mv__title:not(.is-split) {
		opacity: 1;
	}

	.tagui-mv__title .tagui-char {
		animation: none;
	}
}

/* Detail pages: post title in Japanese, then date or category. */
.tagui-mv--detail {
	min-height: var(--wp--custom--mv--detail);
}

.tagui-mv .tagui-mv__post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--5-x-large);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	line-height: var(--wp--custom--line-height--tight);
}

.single-post .tagui-mv__meta {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: normal;
}

/* Top page */
.tagui-mv--top {
	align-items: center;
	min-height: var(--wp--custom--mv--top);
	padding-bottom: 0;
}

.tagui-mv--top .tagui-mv__title {
	font-size: var(--wp--preset--font-size--display-l);
}

/* "A GYM.": a white outline over a frosted fill that lets the photo show through, brightened. */
/*
 * Top MV parallax: the MV's template part sticks to the top of the screen while the rest
 * of the page (main, footer) scrolls up over it on a white background.
 * The template part is the sticky element because the MV alone has no room to stick in
 * its wrapper; everything after it is raised above it.
 */
.wp-site-blocks > .wp-block-template-part:has(> .tagui-mv--top) {
	position: sticky;
	top: 0;
	z-index: 0;
}

.wp-site-blocks > .wp-block-template-part:has(> .tagui-mv--top) ~ * {
	position: relative;
	z-index: 1;
}

.wp-site-blocks > .wp-block-template-part:has(> .tagui-mv--top) + main {
	background: var(--wp--preset--color--white);
}

/*
 * …and the MV itself drifts up at about 30% of the scroll speed while it is being covered
 * (scroll-driven; browsers without it keep the MV still).
 */
@supports (animation-timeline: scroll()) {
	.tagui-mv--top {
		animation: tagui-mv-drift linear both;
		animation-timeline: scroll(root);
		animation-range: 0 100vh;
	}
}

@keyframes tagui-mv-drift {
	to {
		transform: translateY(-30vh);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tagui-mv--top {
		animation: none;
	}
}

/*
 * Top MV slider, split transition: the second image (parts/mv-top.html, binding key
 * "image2") is revealed in three columns from left to right, each a little after the
 * previous one: the left and right columns wipe top to bottom, the middle one bottom to
 * top. Later the columns wipe away in the same directions back to the first image
 * (12s loop, about 4s per image fully shown).
 * The clip is one polygon for all three columns: the top edges left to right, then the
 * bottom edges back, so each column's top and bottom can move on their own schedule.
 * Keyframes are generated values (columns start 0.24s apart, each wipe takes 0.6s).
 */
.tagui-mv--top .tagui-mv__image--next {
	clip-path: polygon(0 0, 33.33% 0, 33.33% 100%, 66.67% 100%, 66.67% 0, 100% 0, 100% 0, 66.67% 0, 66.67% 100%, 33.33% 100%, 33.33% 0, 0 0);
	animation: tagui-mv-split 12s linear infinite;
}

@keyframes tagui-mv-split {
	0% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 100%, 66.67% 100%, 66.67% 0, 100% 0, 100% 0, 66.67% 0, 66.67% 100%, 33.33% 100%, 33.33% 0, 0 0);
	}

	38% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 100%, 66.67% 100%, 66.67% 0, 100% 0, 100% 0, 66.67% 0, 66.67% 100%, 33.33% 100%, 33.33% 0, 0 0);
	}

	40% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 100%, 66.67% 100%, 66.67% 0, 100% 0, 100% 0, 66.67% 0, 66.67% 100%, 33.33% 100%, 33.33% 40%, 0 40%);
	}

	42% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 60%, 66.67% 60%, 66.67% 0, 100% 0, 100% 0, 66.67% 0, 66.67% 100%, 33.33% 100%, 33.33% 80%, 0 80%);
	}

	43% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 40%, 66.67% 40%, 66.67% 0, 100% 0, 100% 20%, 66.67% 20%, 66.67% 100%, 33.33% 100%, 33.33% 100%, 0 100%);
	}

	45% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 0, 66.67% 0, 66.67% 0, 100% 0, 100% 60%, 66.67% 60%, 66.67% 100%, 33.33% 100%, 33.33% 100%, 0 100%);
	}

	47% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 0, 66.67% 0, 66.67% 0, 100% 0, 100% 100%, 66.67% 100%, 66.67% 100%, 33.33% 100%, 33.33% 100%, 0 100%);
	}

	86% {
		clip-path: polygon(0 0, 33.33% 0, 33.33% 0, 66.67% 0, 66.67% 0, 100% 0, 100% 100%, 66.67% 100%, 66.67% 100%, 33.33% 100%, 33.33% 100%, 0 100%);
	}

	88% {
		clip-path: polygon(0 40%, 33.33% 40%, 33.33% 0, 66.67% 0, 66.67% 0, 100% 0, 100% 100%, 66.67% 100%, 66.67% 100%, 33.33% 100%, 33.33% 100%, 0 100%);
	}

	90% {
		clip-path: polygon(0 80%, 33.33% 80%, 33.33% 0, 66.67% 0, 66.67% 0, 100% 0, 100% 100%, 66.67% 100%, 66.67% 60%, 33.33% 60%, 33.33% 100%, 0 100%);
	}

	91% {
		clip-path: polygon(0 100%, 33.33% 100%, 33.33% 0, 66.67% 0, 66.67% 20%, 100% 20%, 100% 100%, 66.67% 100%, 66.67% 40%, 33.33% 40%, 33.33% 100%, 0 100%);
	}

	93% {
		clip-path: polygon(0 100%, 33.33% 100%, 33.33% 0, 66.67% 0, 66.67% 60%, 100% 60%, 100% 100%, 66.67% 100%, 66.67% 0, 33.33% 0, 33.33% 100%, 0 100%);
	}

	95% {
		clip-path: polygon(0 100%, 33.33% 100%, 33.33% 0, 66.67% 0, 66.67% 100%, 100% 100%, 100% 100%, 66.67% 100%, 66.67% 0, 33.33% 0, 33.33% 100%, 0 100%);
	}

	100% {
		clip-path: polygon(0 100%, 33.33% 100%, 33.33% 0, 66.67% 0, 66.67% 100%, 100% 100%, 100% 100%, 66.67% 100%, 66.67% 0, 33.33% 0, 33.33% 100%, 0 100%);
	}
}

/*
 * Small screens: the same transition turned sideways, in three rows from the top: the top
 * and bottom rows wipe left to right, the middle one right to left.
 */
@media (max-width: 781px) {
	.tagui-mv--top .tagui-mv__image--next {
		clip-path: polygon(0 0, 0 0, 0 33.33%, 100% 33.33%, 100% 66.67%, 0 66.67%, 0 100%, 0 100%, 0 66.67%, 100% 66.67%, 100% 33.33%, 0 33.33%);
		animation-name: tagui-mv-split-rows;
	}
}

@keyframes tagui-mv-split-rows {
	0% {
		clip-path: polygon(0 0, 0 0, 0 33.33%, 100% 33.33%, 100% 66.67%, 0 66.67%, 0 100%, 0 100%, 0 66.67%, 100% 66.67%, 100% 33.33%, 0 33.33%);
	}

	38% {
		clip-path: polygon(0 0, 0 0, 0 33.33%, 100% 33.33%, 100% 66.67%, 0 66.67%, 0 100%, 0 100%, 0 66.67%, 100% 66.67%, 100% 33.33%, 0 33.33%);
	}

	40% {
		clip-path: polygon(0 0, 40% 0, 40% 33.33%, 100% 33.33%, 100% 66.67%, 0 66.67%, 0 100%, 0 100%, 0 66.67%, 100% 66.67%, 100% 33.33%, 0 33.33%);
	}

	42% {
		clip-path: polygon(0 0, 80% 0, 80% 33.33%, 100% 33.33%, 100% 66.67%, 0 66.67%, 0 100%, 0 100%, 0 66.67%, 60% 66.67%, 60% 33.33%, 0 33.33%);
	}

	43% {
		clip-path: polygon(0 0, 100% 0, 100% 33.33%, 100% 33.33%, 100% 66.67%, 20% 66.67%, 20% 100%, 0 100%, 0 66.67%, 40% 66.67%, 40% 33.33%, 0 33.33%);
	}

	45% {
		clip-path: polygon(0 0, 100% 0, 100% 33.33%, 100% 33.33%, 100% 66.67%, 60% 66.67%, 60% 100%, 0 100%, 0 66.67%, 0 66.67%, 0 33.33%, 0 33.33%);
	}

	47% {
		clip-path: polygon(0 0, 100% 0, 100% 33.33%, 100% 33.33%, 100% 66.67%, 100% 66.67%, 100% 100%, 0 100%, 0 66.67%, 0 66.67%, 0 33.33%, 0 33.33%);
	}

	86% {
		clip-path: polygon(0 0, 100% 0, 100% 33.33%, 100% 33.33%, 100% 66.67%, 100% 66.67%, 100% 100%, 0 100%, 0 66.67%, 0 66.67%, 0 33.33%, 0 33.33%);
	}

	88% {
		clip-path: polygon(40% 0, 100% 0, 100% 33.33%, 100% 33.33%, 100% 66.67%, 100% 66.67%, 100% 100%, 0 100%, 0 66.67%, 0 66.67%, 0 33.33%, 40% 33.33%);
	}

	90% {
		clip-path: polygon(80% 0, 100% 0, 100% 33.33%, 60% 33.33%, 60% 66.67%, 100% 66.67%, 100% 100%, 0 100%, 0 66.67%, 0 66.67%, 0 33.33%, 80% 33.33%);
	}

	91% {
		clip-path: polygon(100% 0, 100% 0, 100% 33.33%, 40% 33.33%, 40% 66.67%, 100% 66.67%, 100% 100%, 20% 100%, 20% 66.67%, 0 66.67%, 0 33.33%, 100% 33.33%);
	}

	93% {
		clip-path: polygon(100% 0, 100% 0, 100% 33.33%, 0 33.33%, 0 66.67%, 100% 66.67%, 100% 100%, 60% 100%, 60% 66.67%, 0 66.67%, 0 33.33%, 100% 33.33%);
	}

	95% {
		clip-path: polygon(100% 0, 100% 0, 100% 33.33%, 0 33.33%, 0 66.67%, 100% 66.67%, 100% 100%, 100% 100%, 100% 66.67%, 0 66.67%, 0 33.33%, 100% 33.33%);
	}

	100% {
		clip-path: polygon(100% 0, 100% 0, 100% 33.33%, 0 33.33%, 0 66.67%, 100% 66.67%, 100% 100%, 100% 100%, 100% 66.67%, 0 66.67%, 0 33.33%, 100% 33.33%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tagui-mv--top .tagui-mv__image--next {
		display: none;
	}
}

.tagui-mv__outline {
	color: color-mix(in srgb, var(--wp--preset--color--white) 15%, transparent);
	-webkit-text-stroke: 1px var(--wp--preset--color--white);
}

.tagui-mv .tagui-mv__lead {
	margin-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

/*
 * "SCROLL DOWN" badge inside the MV at the bottom right (the content scrolling up over the
 * MV would cover anything hanging below it); inverts against whatever is behind it.
 * The ring of text turns slowly while the arrow flows downward; it grows a little on
 * hover and scrolls down to the content (#main) on click.
 */
.tagui-mv .tagui-mv__scroll {
	position: absolute;
	right: var(--tagui-mv-inset);
	bottom: var(--wp--preset--spacing--50);
	z-index: 2;
	width: 142px;
	height: 141px;
	margin: 0;
	mix-blend-mode: difference;
	transition: transform 0.3s ease;
}

.tagui-mv .tagui-mv__scroll:hover,
.tagui-mv .tagui-mv__scroll:focus-within {
	transform: scale(1.1);
}

/* The link covers the whole badge; its label is read out by screen readers. */
.tagui-mv__scroll a {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
}

.tagui-mv__scroll::before,
.tagui-mv__scroll::after {
	content: "";
	position: absolute;
	inset: 0;
	background: center / contain no-repeat;
	pointer-events: none;
}

.tagui-mv__scroll::before {
	background-image: url(assets/images/scroll-text.svg);
	animation: tagui-scroll-rotate 20s linear infinite;
}

.tagui-mv__scroll::after {
	background-image: url(assets/images/scroll-arrow.svg);
	animation: tagui-scroll-arrow 3s ease-in-out infinite;
}

@keyframes tagui-scroll-rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes tagui-scroll-arrow {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	100% {
		transform: translateY(10px);
		opacity: 0;
	}
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.tagui-mv__scroll::before,
	.tagui-mv__scroll::after {
		animation: none;
	}
}

/*
 * Breadcrumbs under the MV.
 */
.wp-block-breadcrumbs.tagui-breadcrumbs {
	margin-block: 0;
	padding: var(--wp--preset--spacing--30) min(var(--wp--preset--spacing--70), var(--wp--preset--spacing--gutter));
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--small);
}

.tagui-breadcrumbs a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: text-decoration-color 0.2s;
}

/* Parent links get an underline on hover, like the footer's legal links. */
.tagui-breadcrumbs a:is(:hover, :focus-visible) {
	text-decoration-color: currentColor;
}

.tagui-breadcrumbs li:not(:last-child)::after {
	margin: 0 1em;
	opacity: 1;
}

/*
 * Shared components
 */

/* Section heading: "● 日本語ラベル" over an English title whose last word sits on a gray box. */
.tagui-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-eyebrow::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--gray-600);
}

.tagui-section-heading > .tagui-section-title {
	margin-block-start: var(--wp--preset--spacing--20);
}

.tagui-section-title {
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight);
}

.tagui-section-title mark {
	padding-inline: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--gray-600);
	color: var(--wp--preset--color--white);
}

/* Two columns: label column on the left, body on the right (stacked on small screens). */
.tagui-split {
	display: grid;
	grid-template-columns: var(--wp--custom--layout--label-column) minmax(0, 1fr);
	column-gap: var(--wp--custom--layout--column-gap);
	row-gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.tagui-split > * {
	margin-block: 0;
}

@media (max-width: 781px) {
	.tagui-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Black label box. */
.tagui-tag {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--layout--tag-width);
	min-height: var(--wp--custom--layout--tag-height);
	padding: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading);
	text-align: center;
}

/* Small screens: a smaller label box that fits its text. */
@media (max-width: 781px) {
	.tagui-tag {
		width: fit-content;
		min-height: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
		font-size: var(--wp--preset--font-size--x-small);
	}
}

/*
 * Text link followed by a circled line (60 x 40; the line runs from the left edge to the
 * circle's centre). On hover the line slides through the circle and turns into a longer
 * arrow while the circle shrinks into a dot: "・→".
 */
.tagui-split__body > .tagui-more {
	margin-block-start: var(--wp--preset--spacing--60);
}

.tagui-more a {
	--tagui-more-ease: cubic-bezier(0.65, 0, 0.35, 1);
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-right: calc(60px + var(--wp--preset--spacing--50));
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/* Circle (39px, centre 20px from the right edge) → dot. */
.tagui-more a::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0.5px;
	bottom: 0;
	width: 39px;
	height: 39px;
	margin-block: auto;
	box-sizing: border-box;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	transition:
		transform 0.35s var(--tagui-more-ease) 0.1s,
		background-color 0.2s 0.15s;
}

/* Line → arrow: the arrowhead is a second mask layer pinned to the right end. */
.tagui-more a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	width: 40px;
	height: 9px;
	margin-block: auto;
	background: currentColor;
	-webkit-mask:
		url(assets/images/icon-arrow-head.svg) right center / 0 0 no-repeat,
		linear-gradient(#000 0 0) left center / calc(100% - 1px) 1px no-repeat;
	mask:
		url(assets/images/icon-arrow-head.svg) right center / 0 0 no-repeat,
		linear-gradient(#000 0 0) left center / calc(100% - 1px) 1px no-repeat;
	transition:
		right 0.4s var(--tagui-more-ease),
		width 0.4s var(--tagui-more-ease),
		-webkit-mask-size 0.2s 0.2s,
		mask-size 0.2s 0.2s;
}

.tagui-more a:is(:hover, :focus-visible)::before {
	transform: scale(0.1);
	background-color: currentColor;
}

.tagui-more a:is(:hover, :focus-visible)::after {
	right: -20px;
	width: 32px;
	-webkit-mask-size: 7px 9px, calc(100% - 1px) 1px;
	mask-size: 7px 9px, calc(100% - 1px) 1px;
}

@media (prefers-reduced-motion: reduce) {
	.tagui-more a::before,
	.tagui-more a::after {
		transition: none;
	}
}

/*
 * Top: STRONG features (patterns/top-strong.php)
 */
/*
 * The large photo starts exactly where the body text below starts (and, when reversed,
 * ends where the text starts from the right), so the small photo's width is derived
 * from the content width, label column and column gap rather than a fixed ratio.
 * Small screens get their own layout (see the end of this section).
 */
.tagui-feature__media {
	--tagui-text-start: calc((100% - min(var(--wp--style--global--content-size), 100% - 2 * var(--wp--preset--spacing--gutter))) / 2 + var(--wp--custom--layout--label-column) + var(--wp--custom--layout--column-gap));
	display: grid;
	grid-template-columns: calc(var(--tagui-text-start) - var(--wp--preset--spacing--10)) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--10);
	align-items: start;
}

.tagui-feature.is-reversed .tagui-feature__media {
	grid-template-columns: minmax(0, 1fr) calc(var(--tagui-text-start) - var(--wp--preset--spacing--10));
}


.tagui-feature__media > * {
	grid-row: 1;
	margin: 0;
}

.tagui-feature__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.tagui-feature__small {
	grid-column: 1;
}

.tagui-feature__small img {
	aspect-ratio: 468 / 400;
}

.tagui-feature__large {
	grid-column: 2;
}

.tagui-feature__large img {
	aspect-ratio: 808 / 600;
}

.tagui-feature.is-reversed .tagui-feature__small {
	grid-column: 2;
}

.tagui-feature.is-reversed .tagui-feature__large {
	grid-column: 1;
}

/*
 * Outlined vertical number: the small photo's caption, right below the photo. It stays
 * in the flow, so on narrow screens (where the large photo is barely taller than the
 * small one) it pushes the text down instead of overlapping it.
 */
.tagui-feature .tagui-feature__small figcaption {
	/* The negative left margin cancels the font's descent, which faces left in vertical text, so the strokes line up with the photo's left edge. */
	margin: 0 0 0 -0.11em;
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--preset--color--gray-300);
	font-family: var(--wp--preset--font-family--display);
	font-size: min(200px, 15.63vw);
	line-height: 1;
	writing-mode: vertical-rl;
	pointer-events: none;
	user-select: none;
}

/*
 * Feature photos: once their row scrolls into view (assets/js/reveal.js adds
 * .is-revealed) each rises in while coming into focus from a blur; the small photo first,
 * the large one 0.35s later. Timed rather than scroll-scrubbed, so fast scrolling doesn't
 * flicker. Uses translate (not transform) so it combines with the small screens' offset.
 * Hidden only while scripts run (html.tagui-js).
 */
.tagui-js .tagui-feature__media:not(.is-revealed) img {
	opacity: 0;
}

.tagui-feature__media.is-revealed :is(.tagui-feature__small, .tagui-feature__large) img {
	animation: tagui-photo-afterimage 1s ease-out both;
}

.tagui-feature__media.is-revealed .tagui-feature__large img {
	animation-delay: 0.35s;
}

@keyframes tagui-photo-afterimage {
	from {
		opacity: 0;
		filter: blur(16px);
		translate: 0 var(--wp--preset--spacing--40);
	}

	to {
		opacity: 1;
		filter: blur(0);
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tagui-js .tagui-feature__media:not(.is-revealed) img {
		opacity: 1;
	}

	.tagui-feature__media.is-revealed :is(.tagui-feature__small, .tagui-feature__large) img {
		animation: none;
	}
}

/*
 * Small screens, after feature 02: the large photo and the number beside it span the
 * screen, the number sitting at the photo's bottom right, and the small photo overlaps the
 * top right corner, rising a little above it.
 * The small photo's figure is display: contents so its image and its caption (the number)
 * can be placed separately in the grid.
 */
@media (max-width: 781px) {
	.tagui-feature .tagui-feature__media,
	.tagui-feature.is-reversed .tagui-feature__media {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--30);
		padding-top: var(--wp--preset--spacing--80);
	}

	.tagui-feature .tagui-feature__large,
	.tagui-feature.is-reversed .tagui-feature__large {
		grid-row: 1;
		grid-column: 1;
	}

	.tagui-feature .tagui-feature__small,
	.tagui-feature.is-reversed .tagui-feature__small {
		display: contents;
	}

	.tagui-feature .tagui-feature__small img {
		z-index: 1;
		grid-row: 1;
		grid-column: 1 / -1;
		justify-self: end;
		align-self: start;
		width: 44%;
		margin-right: var(--wp--preset--spacing--gutter);
		transform: translateY(calc(-1 * var(--wp--preset--spacing--80)));
	}

	.tagui-feature .tagui-feature__small figcaption {
		grid-row: 1;
		grid-column: 2;
		align-self: end;
		margin: 0 var(--wp--preset--spacing--gutter) 0 -0.11em;
	}
}

/* A trailing button row in .tagui-split sits at the far right (section headers). */
.tagui-split:has(> .wp-block-buttons) {
	grid-template-columns: var(--wp--custom--layout--label-column) minmax(0, 1fr) auto;
}

.tagui-split > .wp-block-buttons {
	grid-column: -2;
	align-self: center;
}

@media (max-width: 781px) {
	.tagui-split:has(> .wp-block-buttons) {
		grid-template-columns: minmax(0, 1fr);
	}

	.tagui-split > .wp-block-buttons {
		grid-column: auto;
	}
}

/*
 * Small pill button ("View More"), after "great-catfish-18" by BHARGAVPATEL1244 on
 * Uiverse.io (MIT): a skewed cover sits over a green base; on hover the cover slides
 * out to the right, revealing the green, and the text turns black (green takes black
 * text, see the colour guide). The cover is black on light backgrounds; in dark
 * sections it matches the section and the pill gets a white outline.
 * Colours are set here rather than with block colour classes, whose !important
 * background would hide the green base.
 */
.tagui-pill {
	--tagui-pill-cover: var(--wp--preset--color--black);
	/* Same as the cover: a transparent border would let the green base show around the edge. */
	--tagui-pill-border: var(--tagui-pill-cover);
}

.tagui-dark .tagui-pill {
	--tagui-pill-cover: var(--wp--preset--color--gray-800);
	--tagui-pill-border: var(--wp--preset--color--white);
}

.tagui-pill .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-width: 140px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	border: 1px solid var(--tagui-pill-border);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--tight);
	white-space: nowrap;
	transition: color 0.4s, border-color 0.4s;
}

.tagui-pill .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10%;
	z-index: -1;
	width: 120%;
	height: 100%;
	background: var(--tagui-pill-cover);
	transform: skew(30deg);
	transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.tagui-pill .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}

.tagui-pill .wp-block-button__link:is(:hover, :focus-visible)::before {
	transform: translate3d(100%, 0, 0) skew(30deg);
}

@media (prefers-reduced-motion: reduce) {
	.tagui-pill .wp-block-button__link::before {
		transition: none;
	}
}

/* Dark sections: green dot and green title box (with black text, see the colour guide). */
.tagui-dark .tagui-eyebrow::before {
	background: var(--wp--preset--color--primary);
}

.tagui-dark .tagui-section-title mark {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--black);
}

/*
 * CTA card (inc/components.php: tagui_theme_cta_markup())
 */
.tagui-cta {
	position: relative;
	display: flex;
	align-items: center;
	aspect-ratio: 1040 / 360;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--black);
	box-shadow: 0 4px 50px color-mix(in srgb, var(--wp--preset--color--black) 30%, transparent);
	color: var(--wp--preset--color--white);
	outline: 1px solid transparent;
	transition: box-shadow 0.3s, outline-color 0.3s;
}

/*
 * CTA cards fade up once they scroll into view, on every page (assets/js/reveal.js adds
 * .is-revealed; timed, so fast scrolling doesn't flicker). Hidden only while scripts run.
 */
.tagui-js .tagui-cta:not(.is-revealed) {
	opacity: 0;
}

.tagui-cta.is-revealed {
	animation: tagui-cta-in 0.9s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes tagui-cta-in {
	from {
		opacity: 0;
		transform: translateY(var(--wp--preset--spacing--70));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tagui-js .tagui-cta:not(.is-revealed) {
		opacity: 1;
	}

	.tagui-cta.is-revealed {
		animation: none;
	}
}

/* On hover the shadow fades and a thin frame appears along the card's edge. */
.tagui-cta:is(:hover, :focus-within) {
	box-shadow: 0 4px 50px transparent;
	outline-color: var(--wp--preset--color--black);
}

.tagui-dark .tagui-cta:is(:hover, :focus-within) {
	outline-color: var(--wp--preset--color--white);
}

.tagui-cta > * {
	margin: 0;
}

.tagui-cta .tagui-cta__image {
	position: absolute;
	inset: 0;
}

.tagui-cta .tagui-cta__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.tagui-cta .tagui-cta__lead {
	position: relative;
	margin-inline-start: calc(var(--wp--custom--layout--label-column) + var(--wp--custom--layout--column-gap));
	font-size: var(--wp--preset--font-size--4-x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
	text-shadow: 0 3px 8px color-mix(in srgb, var(--wp--preset--color--black) 25%, transparent);
}

.tagui-cta .tagui-cta__link {
	position: absolute;
	right: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--50);
}

.tagui-cta__link a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/*
 * ↗ after the text. Two copies of the arrow are stacked as mask layers: on hover the
 * visible one flies out to the top right while the second slides in from the bottom
 * left. Anything outside the 47px box is clipped by the mask itself.
 */
.tagui-cta__link a::before {
	content: "";
	order: 1;
	width: 47px;
	height: 47px;
	background: currentColor;
	-webkit-mask:
		url(assets/images/icon-arrow-up-right.svg) 0 0 / 100% 100% no-repeat,
		url(assets/images/icon-arrow-up-right.svg) -47px 47px / 100% 100% no-repeat;
	mask:
		url(assets/images/icon-arrow-up-right.svg) 0 0 / 100% 100% no-repeat,
		url(assets/images/icon-arrow-up-right.svg) -47px 47px / 100% 100% no-repeat;
	transition:
		-webkit-mask-position 0.45s cubic-bezier(0.65, 0, 0.35, 1),
		mask-position 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.tagui-cta:is(:hover, :focus-within) .tagui-cta__link a::before {
	-webkit-mask-position: 47px -47px, 0 0;
	mask-position: 47px -47px, 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.tagui-cta__link a::before {
		transition: none;
	}
}

/* The link covers the whole card: oversized and clipped by the card's overflow. */
.tagui-cta__link a::after {
	content: "";
	position: absolute;
	inset: -100vmax;
}

/*
 * Small screens: the full-width lettering would sit under the lead, so the card stacks:
 * the image (lettering and photo) at its own ratio on top, then the lead and the link on
 * the black below.
 */
@media (max-width: 781px) {
	.tagui-cta {
		display: block;
		aspect-ratio: auto;
	}

	.tagui-cta .tagui-cta__image {
		position: static;
	}

	.tagui-cta .tagui-cta__image img {
		height: auto;
		aspect-ratio: 1040 / 360;
	}

	.tagui-cta .tagui-cta__lead {
		margin: 0;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
		font-size: var(--wp--preset--font-size--x-large);
	}

	.tagui-cta .tagui-cta__link {
		position: static;
		display: flex;
		justify-content: flex-end;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	}
}


/*
 * Full-width photo (1280:455 in the design), seen through a window: the image is 30% taller
 * than the frame and drifts from 15% above to 15% below while the frame crosses the screen,
 * so it moves slower than the page, as if set further back (scroll-driven; browsers
 * without it show the photo still).
 */
.wp-block-image.tagui-wide-photo {
	position: relative;
	/* clip, not hidden: a hidden overflow makes the frame a scroll container, and view() would track the image inside it instead of the page. */
	overflow: clip;
	aspect-ratio: 1280 / 455;
}

/* Beats core's ".wp-block-image.alignfull img { height: auto }". */
.wp-block-image.tagui-wide-photo img {
	position: absolute;
	top: -15%;
	left: 0;
	display: block;
	width: 100%;
	height: 130%;
	object-fit: cover;
}

/* Top page: the asset is the full photo; this frames the strip used in the design. */
.wp-block-image.tagui-wide-photo--trainers img {
	object-position: 50% 6%;
}

/* Small screens: a taller frame (3:2) showing more of the photo. */
@media (max-width: 781px) {
	.wp-block-image.tagui-wide-photo {
		aspect-ratio: 3 / 2;
	}
}

@supports (animation-timeline: view()) {
	.wp-block-image.tagui-wide-photo img {
		animation: tagui-photo-parallax linear both;
		animation-timeline: view();
	}
}

/* ±15% of the frame = ±11.54% of the 130%-tall image. */
@keyframes tagui-photo-parallax {
	from {
		transform: translateY(-11.54%);
	}

	to {
		transform: translateY(11.54%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.tagui-wide-photo img {
		animation: none;
	}
}

/*
 * Top: information slider — two cards fit the content width, the next one peeks
 * in from the right edge of the screen. The track spans the whole screen width, with
 * padding that puts the first card at the content edge; scrolled cards run off to the
 * left edge of the screen, and snapping stops them at the content edge.
 */
.tagui-news .wp-block-post-template {
	--tagui-news-gap: var(--wp--preset--spacing--60);
	display: flex;
	gap: var(--tagui-news-gap);
	/* Core caps post templates at max-width: 100%, which would trim the run-off. */
	/* Distance from the screen edge to the content edge. Not "50vw - 50%": a percentage in scroll-padding resolves against the track itself. */
	--tagui-news-bleed: calc((100vw - min(var(--wp--style--global--content-size), 100vw - 2 * var(--wp--preset--spacing--gutter))) / 2);
	max-width: none;
	margin: 0 calc(-1 * var(--tagui-news-bleed));
	padding: 0 var(--tagui-news-bleed) var(--wp--preset--spacing--40);
	overflow-x: auto;
	list-style: none;
	scroll-padding-inline: var(--tagui-news-bleed);
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.tagui-news .wp-block-post-template > li {
	flex: 0 0 calc((min(100vw - 2 * var(--wp--preset--spacing--gutter), var(--wp--style--global--content-size)) - var(--tagui-news-gap)) / 2);
	margin: 0;
	scroll-snap-align: start;
}

.tagui-news .wp-block-post-featured-image,
.tagui-post-grid .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.tagui-news .wp-block-post-featured-image img,
.tagui-post-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hovering anywhere on a card zooms its image within the frame. */
:is(.tagui-news, .tagui-post-grid) .wp-block-post-template > li:is(:hover, :focus-within) .wp-block-post-featured-image img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	:is(.tagui-news, .tagui-post-grid) .wp-block-post-featured-image img {
		transition: none;
	}
}

.tagui-news .tagui-news__date,
.tagui-post-grid .tagui-post-grid__date {
	margin-block-start: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
}

.tagui-news .tagui-news__title,
.tagui-post-grid .tagui-post-grid__title {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-news .tagui-news__title a,
.tagui-post-grid .tagui-post-grid__title a {
	color: inherit;
	text-decoration: none;
}

/*
 * Small screens: the current card snaps to the centre of the screen, with a sliver of its
 * neighbours showing on both sides (85vw cards, 7.5vw side padding so the first and last
 * cards can centre too).
 */
@media (max-width: 781px) {
	.tagui-news .wp-block-post-template {
		--tagui-news-gap: var(--wp--preset--spacing--40);
		padding-inline: 7.5vw;
		scroll-padding-inline: 0;
	}

	.tagui-news .wp-block-post-template > li {
		flex-basis: 85vw;
		scroll-snap-align: center;
	}
}

/*
 * Responsive (header and top MV). Layout switches to the small-screen version at 781px
 * and below, the header included: core collapses the navigation into the hamburger menu
 * only below 600px, so between 600px and 781px its inline menu is hidden and its menu
 * button shown here.
 */
@media (min-width: 600px) and (max-width: 781px) {
	.tagui-header__nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.tagui-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}
@media (max-width: 781px) {
	/*
	 * Top MV catch copy spans the screen inside the MV's side insets: "MORE THAN" in
	 * Fjalla One is 4.3 × the font size wide (4.31 leaves a hair of room).
	 */
	.tagui-mv--top .tagui-mv__title {
		font-size: calc((100vw - 2 * var(--tagui-mv-inset)) / 4.31);
	}

	/* SCROLL DOWN badge: 142px → 100px. */
	.tagui-mv .tagui-mv__scroll {
		width: 100px;
		height: 100px;
	}
}

@media (max-width: 781px) {
	.tagui-header {
		padding: var(--wp--preset--spacing--20);
	}

	/* Only the logo and the menu button fit; the SNS icons stay in the footer. */
	.tagui-header .tagui-social {
		display: none;
	}

	/* A slimmer bar: smaller logo and padding (the bar's padding is an inline block style, hence !important). */
	.tagui-header .tagui-header__bar {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	}

	.tagui-header .wp-block-site-logo img {
		width: 88px;
		height: auto;
	}

	/*
	 * Hamburger menu, after amprem.jp: a "MENU" button with two lines, opening (fading in)
	 * a full-screen frosted-glass overlay with the logo kept on top and a "CLOSE ×" button
	 * in the menu button's place. Top-level links are large and divided by thin rules,
	 * submenus listed small under their parents, then the SNS icons and the legal links
	 * (both only in this menu).
	 */
	.tagui-header__nav .wp-block-navigation__responsive-container-open,
	.tagui-header__nav .wp-block-navigation__responsive-container-close {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		/* Core sets the buttons' font to inherit with a tripled class selector, hence !important. */
		font-family: var(--wp--preset--font-family--en) !important;
		font-size: var(--wp--preset--font-size--small) !important;
		font-weight: 300 !important;
		letter-spacing: var(--wp--custom--letter-spacing--wide);
	}

	.tagui-header__nav .wp-block-navigation__responsive-container-open::before {
		content: "MENU";
	}

	.tagui-header__nav .wp-block-navigation__responsive-container-close::before {
		content: "CLOSE";
	}

	/* Thin, long marks instead of core's icons: two lines for MENU, a flat × for CLOSE. */
	.tagui-header__nav .wp-block-navigation__responsive-container-open svg,
	.tagui-header__nav .wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	.tagui-header__nav .wp-block-navigation__responsive-container-open::after,
	.tagui-header__nav .wp-block-navigation__responsive-container-close::after {
		content: "";
		width: 32px;
		height: 9px;
	}

	.tagui-header__nav .wp-block-navigation__responsive-container-open::after {
		background:
			linear-gradient(currentColor 0 0) top / 100% 1px no-repeat,
			linear-gradient(currentColor 0 0) bottom / 100% 1px no-repeat;
	}

	.tagui-header__nav .wp-block-navigation__responsive-container-close::after {
		height: 12px;
		background:
			linear-gradient(to top right, transparent calc(50% - 0.6px), currentColor, transparent calc(50% + 0.6px)),
			linear-gradient(to bottom right, transparent calc(50% - 0.6px), currentColor, transparent calc(50% + 0.6px));
	}

	/* Logo stays above the open menu. */
	.tagui-header__bar > .wp-block-site-logo {
		z-index: 2;
	}

	.tagui-header__nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		--navigation-layout-align: flex-start;
		/* Top: the header's height (2 × its padding, 2 × the bar's, the 33px logo) plus 16px. */
		--tagui-menu-top: calc(2 * var(--wp--preset--spacing--20) + 2 * var(--wp--preset--spacing--30) + 33px + var(--wp--preset--spacing--40));
		padding: var(--tagui-menu-top) var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--90);
		background: none;
		/*
		 * No animation on the menu box itself: core's fade-in keeps a transform (fill-mode
		 * forwards), which would make it the containing block of the fixed close button, and
		 * an opacity animation would cut the frosted layer's backdrop off from the page
		 * (Chrome treats it as the backdrop root). The glass layer and the contents fade in
		 * separately instead.
		 */
		animation: none;
	}

	.tagui-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		animation: tagui-menu-fade-in 0.42s ease-out both;
	}

	/*
	 * The frosted glass sits on a layer behind the menu rather than on the menu itself: a
	 * backdrop-filter on the (scrolling) menu would make it the containing block of the
	 * fixed close button, which would then scroll away with the links.
	 */
	.tagui-header__nav .wp-block-navigation__responsive-container.is-menu-open::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--wp--preset--color--black) 60%, transparent);
		-webkit-backdrop-filter: blur(20px) saturate(140%);
		backdrop-filter: blur(20px) saturate(140%);
		pointer-events: none;
		animation: tagui-menu-fade-in 0.42s ease-out both;
	}

	/* The close button stays put while the links scroll, where the menu button is: header + bar padding, centred on the 33px logo ((33 - 17) / 2 = 8px). */
	.tagui-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
		position: static;
	}

	.tagui-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
		--tagui-menu-button-top: calc(var(--wp--preset--spacing--20) + var(--wp--preset--spacing--30) + 8px);
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tagui-menu-button-top));
		right: calc(var(--wp--preset--spacing--20) + var(--wp--preset--spacing--40));
	}

	/* Core leaves room for its close button above the links; ours sits in the header instead. */
	.tagui-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		padding-top: 0;
	}

	/* The list carries core's items-justified-right itself, which right-aligns its rows. */
	.tagui-header__nav .is-menu-open .wp-block-navigation__responsive-container-content,
	.tagui-header__nav .is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		gap: 0;
	}

	/* Everything left-aligned; core aligns overlay items like the (right-justified) menu bar. */
	.tagui-header__nav .is-menu-open .wp-block-navigation__container .wp-block-navigation-item,
	.tagui-header__nav .is-menu-open .wp-block-navigation__submenu-container {
		align-items: flex-start !important;
		text-align: left;
	}

	.tagui-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.tagui-nav-legal):not(:has(> .tagui-nav-sns)) {
		flex-direction: column;
		align-self: stretch;
		align-items: flex-start;
		padding-block: var(--wp--preset--spacing--50);
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
		font-size: var(--wp--preset--font-size--x-large);
		font-weight: 400;
	}

	.tagui-header__nav .is-menu-open .wp-block-navigation__submenu-container {
		gap: var(--wp--preset--spacing--40) !important;
		padding: var(--wp--preset--spacing--40) 0 0 !important;
		color: var(--wp--preset--color--gray-300);
		font-family: var(--wp--preset--font-family--jp);
		font-size: var(--wp--preset--font-size--x-small);
		letter-spacing: var(--wp--custom--letter-spacing--wide);
	}

	.tagui-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0 !important;
	}

	.tagui-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		--tagui-roll-color: var(--wp--preset--color--gray-300);
	}

	/* SNS (logos only, white) and the legal links, below the list. */
	.tagui-header__nav .is-menu-open .wp-block-navigation-item:has(> .tagui-nav-sns) {
		margin-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--60);
	}

	.tagui-header__nav .tagui-nav-sns.wp-block-social-links {
		gap: var(--wp--preset--spacing--60);
		font-size: 28px;
	}

	.tagui-header__nav .tagui-nav-sns.wp-block-social-links .wp-social-link {
		background: none;
		color: var(--wp--preset--color--white);
	}

	.tagui-header__nav .is-menu-open .tagui-nav-legal {
		padding-block: var(--wp--preset--spacing--20);
		font-family: var(--wp--preset--font-family--jp);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 400;
	}

	/* The ▼ only makes sense with hover menus. */
	.tagui-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	/*
	 * Links, SNS icons and legal links fade in one by one in random order once the glass is
	 * down; assets/js/menu.js gives each a random --tagui-item-delay every time the menu opens.
	 */
	.tagui-header__nav .is-menu-open .wp-block-navigation-item__content,
	.tagui-header__nav .is-menu-open .tagui-nav-sns {
		animation: tagui-menu-item-in 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
		animation-delay: calc(0.2s + var(--tagui-item-delay, 0s));
	}
}

/*
 * At 600px and below the WordPress admin bar (logged-in users only) scrolls away with the
 * page instead of staying fixed, which left the fixed header hanging below an empty gap.
 * There the header starts below the admin bar and slides up to the top as the bar scrolls
 * out (scroll-driven animation); browsers without it keep the header at the very top,
 * under the admin bar at first.
 */
@keyframes tagui-admin-bar-offset {
	from {
		top: var(--wp-admin--admin-bar--height, 0);
	}

	to {
		top: 0;
	}
}

/* The menu's close button follows the header the same way, so it stays on the menu button. */
@keyframes tagui-admin-bar-offset-close {
	from {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tagui-menu-button-top));
	}

	to {
		top: var(--tagui-menu-button-top);
	}
}

/* …and so does the top of the menu's links (core pushes them down by the admin bar instead). */
@keyframes tagui-admin-bar-offset-menu {
	from {
		padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tagui-menu-top));
	}

	to {
		padding-top: var(--tagui-menu-top);
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .tagui-header,
	.admin-bar .tagui-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 0;
	}

	.has-modal-open .admin-bar .tagui-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	.admin-bar .tagui-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: var(--tagui-menu-button-top);
	}

	@supports (animation-timeline: scroll()) {
		.admin-bar .tagui-header {
			animation: tagui-admin-bar-offset linear both;
			animation-timeline: scroll(root);
			animation-range: 0 var(--wp-admin--admin-bar--height, 46px);
		}

		.admin-bar .tagui-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
			animation: tagui-admin-bar-offset-close linear both;
			animation-timeline: scroll(root);
			animation-range: 0 var(--wp-admin--admin-bar--height, 46px);
		}

		.admin-bar .tagui-header__nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
			animation: tagui-admin-bar-offset-menu linear both;
			animation-timeline: scroll(root);
			animation-range: 0 var(--wp-admin--admin-bar--height, 46px);
		}
	}
}

@keyframes tagui-menu-item-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tagui-header__nav .wp-block-navigation__responsive-container.is-menu-open::before,
	.tagui-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.tagui-header__nav .is-menu-open .wp-block-navigation-item__content,
	.tagui-header__nav .is-menu-open .tagui-nav-sns {
		animation: none;
	}
}

/* Closing: assets/js/menu.js adds .tagui-menu-closing and lets core close the menu once this has played. */
.tagui-header__nav .wp-block-navigation__responsive-container.is-menu-open.tagui-menu-closing::before,
.tagui-header__nav .wp-block-navigation__responsive-container.is-menu-open.tagui-menu-closing .wp-block-navigation__responsive-dialog {
	animation: tagui-menu-fade-out 0.42s ease-in both;
}

@keyframes tagui-menu-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes tagui-menu-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


/*
 * Loader (inc/loader.php, assets/js/loader.js), after billboard-live.com: on black, thin
 * lines sweep across, the logo rises in from its baseline while the counter runs to 100;
 * then a purple curtain closes from the middle (.is-closing) and splits open onto the page
 * (.is-opening).
 */
html.tagui-loading {
	overflow: hidden;
}

.tagui-loader-skip .tagui-loader {
	display: none;
}

.tagui-loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--black);
	transition: background-color 0s 0.5s;
}

.tagui-loader__lines {
	position: absolute;
	inset: 0;
	transition: opacity 0.3s;
}

.tagui-loader__lines span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--secondary);
	transform: translateX(-101%);
	animation: tagui-loader-line 1.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.tagui-loader__lines span:nth-child(1) { top: 36%; animation-delay: 0s; }
.tagui-loader__lines span:nth-child(2) { top: 42%; animation-delay: 0.15s; background: var(--wp--preset--color--gray-600); }
.tagui-loader__lines span:nth-child(3) { top: 47%; animation-delay: 0.05s; }
.tagui-loader__lines span:nth-child(4) { top: 53%; animation-delay: 0.25s; background: var(--wp--preset--color--gray-600); }
.tagui-loader__lines span:nth-child(5) { top: 58%; animation-delay: 0.1s; }
.tagui-loader__lines span:nth-child(6) { top: 64%; animation-delay: 0.3s; }

@keyframes tagui-loader-line {
	to {
		transform: translateX(101%);
	}
}

.tagui-loader__logo {
	position: relative;
	width: min(240px, 50vw);
	height: auto;
	clip-path: inset(100% 0 0 0);
	animation: tagui-loader-logo 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.9s both;
	transition: opacity 0.3s;
}

@keyframes tagui-loader-logo {
	to {
		clip-path: inset(0);
	}
}

.tagui-loader__count {
	position: absolute;
	bottom: var(--wp--preset--spacing--70);
	left: 50%;
	margin: 0;
	color: var(--wp--preset--color--gray-400);
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
	transition: opacity 0.3s;
}

/* Curtain halves, closing towards the middle, then parting. */
.tagui-loader__curtain {
	position: absolute;
	right: 0;
	left: 0;
	height: 50%;
	background: var(--wp--preset--color--secondary);
	transform: scaleY(0);
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.tagui-loader__curtain--top {
	top: 0;
	transform-origin: center bottom;
}

.tagui-loader__curtain--bottom {
	bottom: 0;
	transform-origin: center top;
}

.tagui-loader.is-closing .tagui-loader__logo,
.tagui-loader.is-closing .tagui-loader__count,
.tagui-loader.is-closing .tagui-loader__lines {
	opacity: 0;
}

.tagui-loader.is-closing .tagui-loader__curtain {
	transform: scaleY(1);
}

.tagui-loader.is-opening {
	background-color: transparent;
	transition-delay: 0s;
}

.tagui-loader.is-opening .tagui-loader__curtain {
	transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.tagui-loader.is-opening .tagui-loader__curtain--top {
	transform: translateY(-100%);
}

.tagui-loader.is-opening .tagui-loader__curtain--bottom {
	transform: translateY(100%);
}

/*
 * Top MV copy after the loader: a black "afterimage" of each line rises in first, then the
 * real copy fades in over it while the afterimage fades away — "MORE THAN", then
 * "A GYM.", then the lead. The afterimage is a text-shadow, so no extra markup.
 * Hidden while html.tagui-loading is set; played once assets/js/loader.js swaps it for
 * html.tagui-loaded as the curtain parts. Without the loader the copy is simply there.
 */
html.tagui-loading .tagui-mv--top :is(.tagui-mv__title, .tagui-mv__lead) {
	color: transparent;
}

html.tagui-loading .tagui-mv--top .tagui-mv__outline {
	color: transparent;
	-webkit-text-stroke-color: transparent;
}

html.tagui-loaded .tagui-mv--top .tagui-mv__title {
	animation: tagui-copy-in 0.9s ease-out 0.05s both;
}

html.tagui-loaded .tagui-mv--top .tagui-mv__outline {
	animation: tagui-copy-in-outline 0.9s ease-out 0.2s both;
}

html.tagui-loaded .tagui-mv--top .tagui-mv__lead {
	animation: tagui-copy-in 0.9s ease-out 0.35s both;
}

@keyframes tagui-copy-in {
	0% {
		color: transparent;
		text-shadow: 0 var(--wp--preset--spacing--40) 0 transparent;
	}

	35% {
		color: transparent;
		text-shadow: 0 0 0 var(--wp--preset--color--black);
	}

	100% {
		color: var(--wp--preset--color--white);
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes tagui-copy-in-outline {
	0% {
		color: transparent;
		-webkit-text-stroke-color: transparent;
		text-shadow: 0 var(--wp--preset--spacing--40) 0 transparent;
	}

	35% {
		color: transparent;
		-webkit-text-stroke-color: transparent;
		text-shadow: 0 0 0 var(--wp--preset--color--black);
	}

	100% {
		color: color-mix(in srgb, var(--wp--preset--color--white) 15%, transparent);
		-webkit-text-stroke-color: var(--wp--preset--color--white);
		text-shadow: 0 0 0 transparent;
	}
}

/*
 * Page transitions: moving between pages of the site crossfades the old page into the new
 * one (cross-document view transitions, CSS only). No blur: it was tiring to look at.
 * The header is not given its own view-transition-name: that would make it a backdrop
 * root and cut its glass off from the page behind (the bar turned black). Browsers without view transitions fade the
 * new page in instead (the front page's loader does its own entrance).
 */
@view-transition {
	navigation: auto;
}

/*
 * The canvas behind the page (seen for a moment between pages, or while a page fades in)
 * is dark like the MV and the footer instead of the default white, which flashed. The page
 * itself keeps its white background on body.
 */
html {
	background-color: var(--wp--preset--color--gray-900);
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.5s;
}

@supports not (view-transition-name: none) {
	html:not(.tagui-loading) body {
		animation: tagui-page-in 0.5s ease-out;
	}
}

@keyframes tagui-page-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	html:not(.tagui-loading) body {
		animation: none;
	}
}

/*
 * Lower pages: shared pieces (first used on WHAT'S Y-4GYM, patterns/page-about.php)
 */

/* Pages built from full-width sections: the sections butt up against each other. */
.tagui-sections > * {
	margin-block: 0;
}

/* A photo with a CTA card overlapping its bottom edge. */
.tagui-photo-cta > .tagui-cta {
	z-index: 1;
	margin-block-start: calc(-1 * var(--wp--preset--spacing--80));
}

.tagui-photo-cta > .tagui-line-title {
	margin-block-start: var(--wp--preset--spacing--80);
}

.tagui-photo-cta > .tagui-more {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Big green English title between two thin rules running to the screen edges. */
.tagui-line-title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--6-x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
	white-space: nowrap;
}

/* Line breaks for small screens only (<br class="tagui-br-sp">). */
@media (min-width: 782px) {
	br.tagui-br-sp {
		display: none;
	}
}

.tagui-line-title {
	text-align: center;
}

.tagui-line-title::before,
.tagui-line-title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--wp--preset--color--border);
}

.tagui-more--center {
	text-align: center;
}

/* Stacked link cards (title, text, "詳しく見る ↗"), in the body column of .tagui-split. */
.tagui-link-cards {
	container-type: inline-size;
}

.tagui-link-cards,
.tagui-link-cards .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The gap spaces the cards; drop the flow layout's own top margins so they don't add up. */
.tagui-link-cards > *,
.tagui-link-cards .wp-block-post-template > li {
	margin: 0;
}

.tagui-link-card {
	--tagui-card-corner: var(--wp--preset--spacing--50);
	--tagui-card-arrow: 47px;
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 200px;
	/* Title and text centred vertically; the link sits in the corner (see below). */
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	transition: background-color 0.3s;
}

.tagui-link-card > * {
	margin-block: 0;
}

.tagui-link-card:has(a):is(:hover, :focus-within) {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
}

.tagui-link-card__title {
	font-size: var(--wp--preset--font-size--3-x-large);
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-link-card .tagui-link-card__text {
	margin-block-start: var(--wp--preset--spacing--30);
	line-height: var(--wp--custom--line-height--heading);
}

/* Keep the text clear of the corner link ("詳しく見る" + arrow is about 150px wide, plus a 20px margin). */
.tagui-link-card:has(.tagui-link-card__link) .tagui-link-card__text {
	padding-inline-end: calc(170px + var(--tagui-card-corner) - var(--wp--preset--spacing--80));
}

/*
 * Link, pinned to the card's bottom right corner as in the design: a paragraph link in
 * static cards, a read-more link (a.tagui-link-card__link) in query cards.
 */
.tagui-link-card .tagui-link-card__link {
	position: absolute;
	right: var(--tagui-card-corner);
	bottom: var(--tagui-card-corner);
	margin: 0;
}

.tagui-link-card__link a,
a.tagui-link-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/* ↗ after the text, swapping on hover like the CTA arrow. */
.tagui-link-card__link a::before,
a.tagui-link-card__link::before {
	content: "";
	order: 1;
	width: var(--tagui-card-arrow);
	height: var(--tagui-card-arrow);
	background: currentColor;
	-webkit-mask:
		url(assets/images/icon-arrow-up-right.svg) 0 0 / 100% 100% no-repeat,
		url(assets/images/icon-arrow-up-right.svg) calc(-1 * var(--tagui-card-arrow)) var(--tagui-card-arrow) / 100% 100% no-repeat;
	mask:
		url(assets/images/icon-arrow-up-right.svg) 0 0 / 100% 100% no-repeat,
		url(assets/images/icon-arrow-up-right.svg) calc(-1 * var(--tagui-card-arrow)) var(--tagui-card-arrow) / 100% 100% no-repeat;
	transition:
		-webkit-mask-position 0.45s cubic-bezier(0.65, 0, 0.35, 1),
		mask-position 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.tagui-link-card:is(:hover, :focus-within) .tagui-link-card__link a::before,
.tagui-link-card:is(:hover, :focus-within) a.tagui-link-card__link::before {
	-webkit-mask-position: var(--tagui-card-arrow) calc(-1 * var(--tagui-card-arrow)), 0 0;
	mask-position: var(--tagui-card-arrow) calc(-1 * var(--tagui-card-arrow)), 0 0;
}

/* The link covers the whole card (clipped by the card's overflow). */
.tagui-link-card__link a::after,
a.tagui-link-card__link::after {
	content: "";
	position: absolute;
	inset: -100vmax;
}

/* "Join as a new member": white title between slash marks, centred text, then a CTA. */
.tagui-join > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.tagui-join > .tagui-cta {
	margin-block-start: var(--wp--preset--spacing--70);
}

.tagui-join__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--6-x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
}

.tagui-join__title::before,
.tagui-join__title::after {
	content: "";
	flex: none;
	width: 0.67em;
	height: 0.83em;
	background: currentColor;
	-webkit-mask: url(assets/images/icon-join-left.svg) center / contain no-repeat;
	mask: url(assets/images/icon-join-left.svg) center / contain no-repeat;
}

.tagui-join__title::after {
	-webkit-mask-image: url(assets/images/icon-join-right.svg);
	mask-image: url(assets/images/icon-join-right.svg);
}

@media (max-width: 781px) {
	.tagui-line-title,
	.tagui-join__title {
		font-size: var(--wp--preset--font-size--3-x-large);
	}

	.tagui-join__title {
		white-space: normal;
	}

	.tagui-link-cards,
	.tagui-link-cards .wp-block-post-template {
		gap: var(--wp--preset--spacing--40);
	}

	/* Small screens: tighter padding and a smaller corner link. */
	.tagui-link-card {
		--tagui-card-corner: var(--wp--preset--spacing--40);
		--tagui-card-arrow: 32px;
		min-height: 0;
		padding: var(--wp--preset--spacing--50);
	}

	.tagui-link-card__link a,
	a.tagui-link-card__link {
		gap: var(--wp--preset--spacing--30);
		font-size: var(--wp--preset--font-size--small);
	}

	.tagui-link-card__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	/* Line breaks laid out for desktop (card text, .tagui-br-pc); here the text wraps on its own. */
	.tagui-link-card__text br,
	.tagui-br-pc br {
		display: none;
	}
}

/*
 * Narrow cards (under 600px wide, from mid-width screens down): the text is top-aligned
 * and runs full width, and the corner link sits below it. Wide cards centre the text and
 * keep it clear of the link instead. Measured on the card list, not the screen.
 */
@container (max-width: 599px) {
	/* Only cards with a link make room for it; others (Options) stay vertically centred. */
	.tagui-link-card:has(.tagui-link-card__link) {
		justify-content: flex-start;
		padding-bottom: calc(var(--tagui-card-arrow) + 2 * var(--tagui-card-corner));
	}

	.tagui-link-card:has(.tagui-link-card__link) .tagui-link-card__text {
		padding-inline-end: 0;
	}
}

/*
 * Notice box (SIGN UP GUIDE): purple gradient with an inset white frame, a megaphone
 * icon and centred bold text.
 */
.tagui-notice {
	position: relative;
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	background: var(--wp--preset--gradient--secondary);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-align: center;
}

.tagui-notice::before {
	content: "";
	position: absolute;
	inset: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--white);
	pointer-events: none;
}

.tagui-notice > :first-child::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto var(--wp--preset--spacing--40);
	background: currentColor;
	-webkit-mask: url(assets/images/icon-announcement.svg) center / contain no-repeat;
	mask: url(assets/images/icon-announcement.svg) center / contain no-repeat;
}

.tagui-notice > * {
	margin-block: 0;
}

/*
 * Steps (SIGN UP GUIDE): rows ruled across the top, the rule darker over the label
 * column; label on the left, text on the right. Narrower than the content width.
 */
.tagui-steps {
	--tagui-step-label: 268px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
	max-width: 826px;
	margin-inline: auto;
}

.tagui-steps > *,
.tagui-step > *,
.tagui-step__body > * {
	margin-block: 0;
}

.tagui-step {
	position: relative;
	display: grid;
	grid-template-columns: var(--tagui-step-label) minmax(0, 1fr);
	padding-top: var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--preset--color--border-cool);
}

.tagui-step::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: var(--tagui-step-label);
	height: 1px;
	background: var(--wp--preset--color--black);
}

.tagui-step__label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-step__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	line-height: var(--wp--custom--line-height--heading);
}

@media (max-width: 781px) {
	.tagui-notice {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50);
	}

	.tagui-steps {
		--tagui-step-label: 30%;
		gap: var(--wp--preset--spacing--80);
	}

	.tagui-step {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--40);
		padding-top: var(--wp--preset--spacing--50);
	}
}

/*
 * PERSONAL TRAINING (patterns/page-personal-training.php)
 */

/* A full-width rule across the top of a section. */
.tagui-rule-top {
	border-top: 2px solid var(--wp--preset--color--border);
}

/* Consecutive .tagui-tight paragraphs read as one block (no gap between them). */
.tagui-split__body > .tagui-tight + .tagui-tight {
	margin-block-start: 0;
}

/* Section titles with a purple box (on light grey sections). */
.tagui-mark-secondary .tagui-section-title mark {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.tagui-mark-secondary .tagui-eyebrow::before {
	background: var(--wp--preset--color--secondary);
}

/* Callout under a CTA: a short vertical line, then bold centred copy with a purple highlight. */
.tagui-callout {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
}

.wp-block-group > .tagui-callout {
	margin-block-start: 0;
}

.tagui-callout::before {
	content: "";
	display: block;
	width: 1px;
	height: 50px;
	margin: 0 auto var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--black);
}

.tagui-callout mark {
	background: none;
	color: var(--wp--preset--color--secondary);
}

/* Merit cards: MERIT and an outlined number on the left, title and text on the right. */
.tagui-merits {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
}

.tagui-merits > * {
	margin: 0;
}

.tagui-merit {
	display: grid;
	grid-template-columns: var(--wp--custom--layout--label-column) minmax(0, 1fr);
	column-gap: var(--wp--custom--layout--column-gap);
	align-items: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80) var(--wp--preset--spacing--70) 0;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--gradient--secondary);
	color: var(--wp--preset--color--white);
}

.tagui-merit > *,
.tagui-merit__body > * {
	margin-block: 0;
}

.tagui-merit__no {
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--6-x-large);
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

/* The number, outlined like the top page's numbers. */
.tagui-merit__num {
	display: block;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 140px;
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.tagui-merit__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--body);
	/* A sentence rather than a heading: fill each line instead of balancing / phrase wrapping. */
	text-wrap: wrap;
	word-break: normal;
}

.tagui-merit__body > p {
	margin-block-start: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--gray-300);
}

/* Step cards: three black cards in a centred row. */
.tagui-step-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--60);
}

.tagui-step-cards > * {
	margin: 0;
}

.tagui-step-card {
	box-sizing: border-box;
	width: 236px;
	min-height: 312px;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.tagui-step-card > * {
	margin-block: 0;
}

.tagui-step-card__no {
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
	text-align: center;
}

.tagui-step-card__title {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
	line-height: var(--wp--custom--line-height--tight);
	text-align: center;
}

.tagui-step-card .tagui-step-card__text {
	margin-block-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--gray-300);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

/* Sub heading led by a short rule ("— ２回目以降の流れ"). */
.tagui-subhead {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-subhead::before {
	content: "";
	flex: none;
	width: 15px;
	height: 1px;
	background: currentColor;
}

@media (max-width: 781px) {
	.tagui-callout {
		font-size: var(--wp--preset--font-size--large);
	}

	.tagui-merit {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	}

	.tagui-merit__no {
		font-size: var(--wp--preset--font-size--3-x-large);
	}

	.tagui-merit__num {
		font-size: 96px;
	}

	.tagui-step-card {
		width: 100%;
		min-height: 0;
	}
}

/*
 * PLAN (patterns/page-plan.php)
 */

/* Gap between the text and the link card in a split body. */
.tagui-split__body > .tagui-link-cards {
	margin-block-start: var(--wp--preset--spacing--90);
}

/* Link cards on light backgrounds: a light grey hover tint. */
.tagui-split__body .tagui-link-card:has(a):is(:hover, :focus-within) {
	background-color: var(--wp--preset--color--surface);
}

/* Ticket price cards: four black cards; the saving in red on a light box. */
.tagui-price-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
}

.tagui-price-cards > * {
	margin: 0;
}

.tagui-price-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--en);
	text-align: center;
}

.tagui-price-card > * {
	margin-block: 0;
}

.tagui-price-card__title {
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
}

.tagui-price-card__price {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
}

.tagui-price-card__price small {
	margin-inline-start: 0.2em;
	font-size: var(--wp--preset--font-size--small);
}

.tagui-price-card .tagui-price-card__unit {
	margin-block-start: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--gray-300);
	font-size: var(--wp--preset--font-size--small);
}

.tagui-price-card .tagui-price-card__save {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: 83px;
	margin-block-start: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--m);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--sale);
	font-style: italic;
	font-weight: 700;
}

@media (max-width: 781px) {
	.tagui-price-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}

	.tagui-price-card {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.tagui-price-card .tagui-price-card__save {
		min-height: 56px;
	}
}

/*
 * ACCESS (patterns/page-access.php)
 */

/* Full-width map (1280:400 in the design), greyscale as in the design. */
.tagui-map {
	aspect-ratio: 1280 / 400;
	min-height: 320px;
	margin-block-end: 0;
}

.tagui-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1);
}

/* A thin rule between paragraphs inside a step. */
.tagui-step__body > .tagui-step__sep {
	width: 100%;
	margin-block: var(--wp--preset--spacing--40);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border-cool);
	opacity: 1;
}

/*
 * DOCUMENT PAGES AND POST BODIES
 * .tagui-doc: terms, privacy policy, company profile (patterns/doc-*.php), whose text is
 * the page's own content (page.html). .tagui-entry: the body of an INFORMATION / CAMPAIGN
 * post (single*.html). Both are edited in the editor, so the rules key on block types.
 */

/* Numbered markers of the nested lists: 1. → (1) → （イ）. */
@counter-style tagui-paren-decimal {
	system: extends decimal;
	prefix: "(";
	suffix: ") ";
}

@counter-style tagui-paren-iroha {
	system: extends katakana-iroha;
	prefix: "（";
	suffix: "）";
}

.tagui-doc,
.tagui-entry-wrap {
	max-width: 826px;
	margin-inline: auto;
}

:is(.tagui-doc, .tagui-entry) > *,
:is(.tagui-doc, .tagui-entry) li > * {
	margin-block: 0;
}

:is(.tagui-doc, .tagui-entry) > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Document title (doc pages only; posts have theirs in the MV or above the body). */
.tagui-doc > h2 {
	font-size: var(--wp--preset--font-size--3-x-large);
}

.tagui-doc > h2 + * {
	margin-block-start: var(--wp--preset--spacing--70);
}

/* Each article / section opens with a gap; its heading sits closer to its own text. */
.tagui-doc > * + h3,
.tagui-entry > * + h2 {
	margin-block-start: var(--wp--preset--spacing--90);
}

.tagui-doc > h3,
.tagui-entry > h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.tagui-entry > h3 {
	margin-block-start: var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--large);
}

:is(.tagui-doc > h3, .tagui-entry > :is(h2, h3)) + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

:is(.tagui-doc, .tagui-entry) :is(ol, ul) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding-inline-start: 1.6em;
}

:is(.tagui-doc, .tagui-entry) li > :is(ol, ul) {
	margin-block-start: var(--wp--preset--spacing--20);
	gap: 0;
	padding-inline-start: 2.6em;
}

.tagui-doc ol {
	list-style-type: decimal;
}

.tagui-doc ol ol {
	list-style-type: tagui-paren-decimal;
}

.tagui-doc ol ol ol {
	list-style-type: tagui-paren-iroha;
	padding-inline-start: 3em;
}

.tagui-doc > ol > li::marker {
	font-weight: 700;
}

.tagui-entry ol {
	list-style-type: decimal;
}

:is(.tagui-doc, .tagui-entry) ul {
	list-style-type: "・";
	padding-inline-start: 1em;
}

/* RECRUIT: lead, banner, then the ruled rows, each block set apart as in the design. */
.tagui-entry > * + :is(figure, .tagui-steps) {
	margin-block-start: var(--wp--preset--spacing--90);
}

.tagui-step__body :is(ul, ol) {
	gap: 0;
}

/* LINE QR code under "how to apply". */
.tagui-entry .tagui-qr img {
	width: 140px;
	border: 1px solid var(--wp--preset--color--border);
}

.tagui-entry :is(figure, img) {
	max-width: 100%;
	height: auto;
}

/* Company profile rows follow the heading. */
.tagui-doc > h2 + .tagui-steps {
	margin-block-start: var(--wp--preset--spacing--90);
}

/* SP: nested markers sit inside the text so the lines keep the full width. */
@media (max-width: 781px) {
	:is(.tagui-doc, .tagui-entry) li > :is(ol, ul),
	.tagui-doc ol ol ol {
		padding-inline-start: 0;
		list-style-position: inside;
	}
}

/*
 * POST DETAIL (templates/single.html, single-campaign.html)
 */

/* Campaign name and catch copy above the body, in one block of large type. */
.tagui-entry-head {
	margin-block-end: var(--wp--preset--spacing--90);
}

/* RECRUIT: the lead follows the job title closely. */
.tagui-entry-head--tight {
	margin-block-end: var(--wp--preset--spacing--60);
}

.tagui-entry-head > *,
.tagui-entry-head .wp-block-post-excerpt__excerpt {
	margin-block: 0;
	text-wrap: pretty;
	word-break: auto-phrase;
	font-size: var(--wp--preset--font-size--3-x-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
}

/* "back to list" with a grid of dots before it. */
.tagui-back {
	margin-block-start: var(--wp--preset--spacing--110);
}

.tagui-back .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: var(--wp--preset--font-family--en);
	font-weight: 400;
}

.tagui-back .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url(assets/images/icon-grid.svg) center / contain no-repeat;
	mask: url(assets/images/icon-grid.svg) center / contain no-repeat;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.tagui-back .wp-block-button__link:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tagui-back .wp-block-button__link:is(:hover, :focus-visible)::before {
	transform: rotate(90deg);
}

/*
 * POST LISTS (patterns/post-grid.php, templates/archive-campaign.html)
 * Cards in three columns (two on tablets, one on phones); the card itself is styled with
 * the TOP news cards (.tagui-news).
 */
.tagui-post-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--80) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tagui-post-grid .wp-block-post-template > li {
	margin: 0;
}

.tagui-post-grid .tagui-post-grid__text {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gray-500);
	font-size: var(--wp--preset--font-size--small);
}

.tagui-post-grid .tagui-post-grid__text p {
	margin: 0;
}

@media (max-width: 1023px) {
	.tagui-post-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.tagui-post-grid .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--70);
	}
}

/*
 * CAMPAIGN / RECRUIT lists: heading, then black link cards (title, "詳しく見る ↗") with a
 * shadow; RECRUIT cards also carry the green Y4 mark on the left.
 */
.tagui-list-title {
	margin-block: 0 var(--wp--preset--spacing--90);
	font-size: var(--wp--preset--font-size--3-x-large);
}

:is(.tagui-campaign-list, .tagui-recruit-list) .tagui-link-card {
	border: 0;
	box-shadow: 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--80) color-mix(in srgb, var(--wp--preset--color--black) 30%, transparent);
	outline: 1px solid transparent;
	transition: box-shadow 0.3s, outline-color 0.3s;
}

/* On hover the shadow fades and a thin frame appears along the card's edge (as the CTA cards). */
:is(.tagui-campaign-list, .tagui-recruit-list) .tagui-link-card:is(:hover, :focus-within) {
	box-shadow: 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--80) transparent;
	outline-color: var(--wp--preset--color--black);
}

.tagui-recruit-list .tagui-link-card::before {
	content: "";
	position: absolute;
	top: -35%;
	left: -6.3%;
	width: 45%;
	aspect-ratio: 617 / 566;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
	-webkit-mask: url(assets/images/mark-y4.png) center / contain no-repeat;
	mask: url(assets/images/mark-y4.png) center / contain no-repeat;
	pointer-events: none;
}

.tagui-recruit-list .tagui-link-card > :not(.tagui-link-card__link) {
	position: relative;
}

/* Pagination: square buttons, the current page filled. */
.tagui-pagination.wp-block-query-pagination {
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--90);
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--small);
}

.tagui-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

.tagui-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-width: calc(var(--wp--preset--spacing--60) + 2px);
	height: calc(var(--wp--preset--spacing--60) + 2px);
	margin: 0;
	padding-inline: var(--wp--preset--spacing--10);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: var(--wp--custom--radius--s);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.tagui-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	border-color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--x-small);
}

.tagui-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.tagui-pagination .page-numbers.current,
.tagui-pagination a:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--gray-800);
	background: var(--wp--preset--color--gray-800);
	color: var(--wp--preset--color--white);
}

/*
 * TRAINER (patterns/page-trainer.php)
 * One row per trainer: photo, role and name in the label column, the profile beside it.
 */
.tagui-trainers .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--90);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tagui-trainers .wp-block-post-template > li {
	margin: 0;
}

.tagui-trainer {
	display: grid;
	grid-template-columns: var(--wp--custom--layout--label-column) minmax(0, 1fr);
	column-gap: var(--wp--custom--layout--column-gap);
	align-items: start;
}

.tagui-trainer > *,
.tagui-trainer__profile > *,
.tagui-trainer__name > * {
	margin-block: 0;
}

.tagui-trainer .wp-block-post-featured-image {
	aspect-ratio: 331 / 380;
	margin: 0;
	overflow: hidden;
}

.tagui-trainer .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photo yet: a grey frame with a picture icon (inc/components.php). */
.tagui-photo-empty {
	position: relative;
	background: var(--wp--preset--color--gray-200);
}

.tagui-photo-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 60px;
	height: 60px;
	background: var(--wp--preset--color--white);
	-webkit-mask: url(assets/images/icon-picture.svg) center / contain no-repeat;
	mask: url(assets/images/icon-picture.svg) center / contain no-repeat;
}

.tagui-trainer .tagui-trainer__role {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gray-500);
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	font-weight: 300;
}

.tagui-trainer__role:empty,
.tagui-trainer__name-en:empty {
	display: none;
}

/* Name in Japanese, then " / Kenji Ouga", aligned to the right edge of the photo. */
.tagui-trainer__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	column-gap: 0.3em;
}

.tagui-trainer__name .wp-block-post-title {
	font-size: var(--wp--preset--font-size--2-x-large);
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-trainer .tagui-trainer__name-en {
	font-family: var(--wp--preset--font-family--en);
	font-weight: 300;
}

.tagui-trainer__name-en::before {
	content: "/ ";
}

/* Profile: bold headings, each followed closely by its text. */
.tagui-trainer__body > * {
	margin-block: 0;
}

.tagui-trainer__body > * + h3 {
	margin-block-start: var(--wp--preset--spacing--30);
}

.tagui-trainer__body h3 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body);
}

.tagui-trainer__body :is(ul, ol) {
	padding-inline-start: 1em;
}

.tagui-trainer__body ul {
	list-style-type: "・";
}

/* Small screens: the profile goes under the photo; the photo keeps a moderate size. */
@media (max-width: 781px) {
	.tagui-trainers .wp-block-post-template {
		gap: var(--wp--preset--spacing--100);
	}

	.tagui-trainer {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--60);
	}

	.tagui-trainer__profile {
		width: min(100%, var(--wp--custom--layout--label-column));
		margin-inline: auto;
	}
}

/*
 * TRAINING EQUIPMENT (patterns/equipment-sections.php)
 * One section per body part: a ruled heading, then the machines in two columns.
 */
.tagui-equipment-sections > .tagui-equipment-section {
	margin-block: 0;
}

.tagui-equipment-sections > .tagui-equipment-section + .tagui-equipment-section {
	margin-block-start: var(--wp--preset--spacing--90);
}

.tagui-equipment-section > * {
	margin-block: 0;
}

/* "• LEGS ———": a dot, the part name, then a rule to the right edge. */
.tagui-rule-heading {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--4-x-large);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-rule-heading::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
}

.tagui-rule-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--secondary);
}

.tagui-equipment-section > .tagui-equipment {
	margin-block-start: var(--wp--preset--spacing--60);
}

.tagui-equipment .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tagui-equipment .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.tagui-equipment .wp-block-post-template > li > *,
.tagui-equipment__specs > *,
.tagui-equipment__spec > * {
	margin: 0;
}

/* Photo frame: the machine centred, the maker's logo in the bottom left corner. */
.tagui-equipment__media {
	position: relative;
	aspect-ratio: 503 / 280;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--white);
}

/* A square the height of the frame, centred. */
.tagui-equipment__media .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	width: auto;
	height: 100%;
	aspect-ratio: 1;
	margin: 0 auto;
}

.tagui-equipment__media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* No photo yet: just the picture icon, light grey, in the white frame. */
.tagui-equipment__media .tagui-photo-empty {
	background: none;
}

.tagui-equipment__media .tagui-photo-empty::after {
	background: var(--wp--preset--color--gray-200);
}

.tagui-equipment__media .tagui-equipment__maker {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 38%;
	margin: 0;
}

.tagui-equipment__maker img {
	display: block;
	width: 100%;
	height: auto;
}

.tagui-equipment__text p {
	margin: 0;
}

/* Type and machine name: a grey label, then the value in bold. */
.tagui-equipment__specs {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin-block-start: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--40));
}

.tagui-equipment__spec {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--30);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
}

.tagui-equipment__spec .wp-block-post-terms__prefix {
	color: var(--wp--preset--color--gray-500);
}

.tagui-equipment__spec .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--heading);
}

@media (max-width: 781px) {
	.tagui-equipment .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--80);
	}
}