/**
 * Cards, lists, buttons, notice bar, header/footer.
 * Consume var(--color-*), .text-* utilities, and .site-grid — no primitives here.
 * Build step: 9
 */

/* -------------------------------------------------------------------------
   Global nav (Figma nav-global / nav-text-standard)
   ------------------------------------------------------------------------- */

.c-global-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-global-nav__item {
	flex: 0 0 auto;
	min-height: 24px;
	overflow: visible;
}

.c-nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 120px;
	min-height: 24px;
	color: var(--color-ink);
	text-decoration: none;
	text-align: center;
}

.c-nav-link--wide {
	min-width: 160px;
}

.c-nav-link__label {
	word-break: break-word;
}

.c-nav-link:hover:not(.is-disabled) .c-nav-link__label {
	text-decoration: underline;
}

.c-nav-link.is-disabled {
	color: var(--color-ink-40);
	cursor: not-allowed;
}

.c-nav-link__hint {
	position: fixed;
	z-index: 110;
	left: 0;
	top: 0;
	width: max-content;
	max-width: min(240px, calc(100vw - var(--space-24)));
	padding: var(--space-8) var(--space-12);
	border: 1px solid var(--color-ink-20);
	background-color: var(--color-bg);
	color: var(--color-ink-80);
	font-family: var(--font-body-en);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

html:lang(ja) .c-nav-link__hint {
	font-family: var(--font-body-jp);
}

.c-nav-link.is-disabled.is-hint-visible .c-nav-link__hint {
	opacity: 1;
	visibility: visible;
}

.c-nav-link:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.c-nav-link__hint {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Breadcrumb (Figma nav-breadcrumb)
   ------------------------------------------------------------------------- */

.c-breadcrumb {
	color: var(--color-ink-80);
}

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-breadcrumb__item {
	display: flex;
	align-items: center;
	min-height: 16px;
}

.c-breadcrumb__item:not(:last-child)::after {
	content: " > ";
	white-space: pre;
}

.c-breadcrumb__link {
	color: inherit;
	text-decoration: none;
}

.c-breadcrumb__label {
	word-break: break-word;
}

.c-breadcrumb__link:hover .c-breadcrumb__label {
	text-decoration: underline;
}

.c-breadcrumb__link:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Back link (Figma nav-back)
   ------------------------------------------------------------------------- */

.c-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-24);
	min-height: 24px;
	color: var(--color-ink);
	text-decoration: none;
}

.c-back-link__icon {
	display: flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.c-back-link__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.c-back-link__label {
	word-break: break-word;
	white-space: nowrap;
}

.c-back-link:hover .c-back-link__label {
	text-decoration: underline;
}

.c-back-link:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Plain link (Figma nav-plain-link)
   ------------------------------------------------------------------------- */

.c-plain-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-height: 24px;
	color: var(--color-amber);
	text-decoration: none;
}

.c-plain-link__icon {
	display: flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.c-plain-link__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.c-plain-link:hover:not(.is-disabled) .c-plain-link__label {
	text-decoration: underline;
}

.c-plain-link.is-disabled {
	color: var(--color-ink-40);
	cursor: not-allowed;
}

.c-plain-link:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Social icon link (Figma Get in Touch icon row)
   ------------------------------------------------------------------------- */

.c-social-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--color-ink);
	text-decoration: none;
}

.c-social-icon-link__icon {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.c-social-icon-link__icon svg,
.c-social-icon-link__icon img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.c-social-icon-link--wide .c-social-icon-link__icon svg {
	width: 40px;
	height: auto;
	max-height: 20px;
}

.c-social-icon-link:hover:not(.is-disabled) {
	color: var(--color-ink-80);
}

.c-social-icon-link.is-disabled {
	color: var(--color-ink-40);
	cursor: not-allowed;
}

.c-social-icon-link:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Language switch (Figma Site_Header_MVP Language)
   ------------------------------------------------------------------------- */

.c-language-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	color: var(--color-ink);
}

.c-language-switch__option {
	color: inherit;
	text-decoration: none;
}

.c-language-switch__option.is-active {
	color: var(--color-amber);
}

.c-language-switch__option.is-disabled {
	color: var(--color-ink-40);
	cursor: not-allowed;
}

.c-language-switch__option:not(.is-active):not(.is-disabled):hover {
	text-decoration: underline;
}

.c-language-switch__option:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.c-language-switch__sep {
	padding-inline: var(--space-8);
	color: inherit;
}

/* -------------------------------------------------------------------------
   Theme switch (Figma Site_Header_MVP Mode)
   ------------------------------------------------------------------------- */

.c-theme-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 24px;
	color: var(--color-ink);
}

.c-theme-switch__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.c-theme-switch__option.is-active {
	color: var(--color-amber);
}

.c-theme-switch__option:not(.is-active):hover {
	color: var(--color-ink-80);
}

.c-theme-switch__option:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.c-theme-switch__icon {
	display: flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.c-theme-switch__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.c-theme-switch__sep {
	line-height: 1;
}

/* -------------------------------------------------------------------------
   CTA button (Figma 2039:867)
   ------------------------------------------------------------------------- */

.c-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: var(--space-12) var(--space-24);
	border: 1px solid var(--color-bg);
	border-radius: var(--space-4);
	background-color: var(--color-amber);
	color: var(--color-bg);
	text-align: center;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.c-cta-button:hover:not(.is-disabled) {
	background-color: color-mix(in srgb, var(--color-amber) 88%, var(--color-ink));
}

.c-cta-button__label {
	word-break: break-word;
}

.c-cta-button.is-disabled {
	background-color: var(--color-ink-20);
	border-color: var(--color-ink-20);
	color: var(--color-ink-40);
}

.c-cta-button:focus-visible {
	outline: 2px solid var(--color-bg);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Standard button (Figma 2039:871)
   ------------------------------------------------------------------------- */

.c-standard-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	width: fit-content;
	max-width: 100%;
	min-height: 46px;
	padding-block: var(--space-12);
	padding-inline: var(--space-12);
	border: 1px solid var(--color-ink);
	border-radius: var(--space-4);
	background-color: var(--color-bg);
	color: var(--color-ink);
	text-align: center;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.c-standard-button__icon {
	display: flex;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.c-standard-button__icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.c-standard-button--locked .c-standard-button__icon,
.c-standard-button--locked .c-standard-button__icon svg {
	width: 24px;
	height: 24px;
}

.c-standard-button__label {
	word-break: break-word;
}

.c-standard-button:not(.c-standard-button--locked):hover:not(.is-disabled) {
	background-color: var(--color-amber-20);
	border-color: color-mix(in srgb, var(--color-amber) 30%, var(--color-ink));
}

.c-standard-button--locked:hover:not(.is-disabled) {
	background-color: var(--color-ink-20);
	border-color: color-mix(in srgb, var(--color-ink) 88%, var(--color-bg));
}

.c-standard-button.is-disabled {
	border-color: var(--color-ink-20);
	background-color: var(--color-bg);
	color: var(--color-ink-40);
	cursor: not-allowed;
}

.c-standard-button:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Update list (Figma list-update-simple / list-update-short)
   ------------------------------------------------------------------------- */

.c-update-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-update-list__item {
	border-bottom: 1px solid var(--color-ink-20);
}

.c-update-list__item:not(:first-child) {
	margin-top: var(--space-14);
}

.c-update-list__link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-60);
	width: 100%;
	min-height: 33px;
	padding-bottom: var(--space-8);
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-update-list--compact .c-update-list__link {
	gap: var(--space-40);
	min-height: 36px;
	padding-bottom: var(--space-16);
}

.c-update-list__date {
	flex-shrink: 0;
	width: var(--date-column-width);
	white-space: nowrap;
	color: var(--color-amber);
}

.c-update-list__title {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
}

.c-update-list__icon {
	display: flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-left: auto;
}

.c-update-list__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.c-update-list__link:hover .c-update-list__title,
.c-update-list__link:hover .c-update-list__icon {
	color: var(--color-amber);
}

.c-update-list__link:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

/* Updated layout (Figma list-update-simple-updated) */
.c-update-list--updated .c-update-list__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-8);
	width: 100%;
	max-width: 52.5rem; /* 840px — Figma divider width */
	min-height: 60px;
	padding-block: var(--space-16);
}

.c-update-list--updated .c-update-list__item:not(:first-child) {
	margin-top: 0;
}

.c-update-list--updated .c-update-list__link {
	align-items: center;
	gap: var(--space-40);
	width: 100%;
	max-width: 52.875rem; /* 846px — Figma row width */
	min-height: 33px;
	padding-bottom: 0;
}

.c-update-list__date-group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-24);
	width: 6.3125rem; /* 101px — Figma date group */
}

.c-update-list__date-accent {
	flex-shrink: 0;
	width: 2px;
	height: 34px;
	background-color: var(--color-green-dark);
}

.c-update-list--updated .c-update-list__date {
	width: auto;
}

/* -------------------------------------------------------------------------
   Update detail list (Figma list-update-details)
   ------------------------------------------------------------------------- */

.c-update-detail-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-update-detail-list__item {
	border-bottom: 1px solid var(--color-ink-20);
}

.c-update-detail-list__item:not(:first-child) {
	margin-top: var(--space-14);
}

.c-update-detail-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-40);
	width: 100%;
	min-height: 32px;
	padding-bottom: var(--space-16);
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-update-detail-list__main {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--space-40);
	min-width: 0;
}

.c-update-detail-list__date {
	flex-shrink: 0;
	width: var(--date-column-width);
	white-space: nowrap;
	color: var(--color-amber);
}

.c-update-detail-list__type {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	align-self: center;
	justify-content: center;
	min-width: 120px; /* Figma type-tag frame width */
	min-height: var(--space-32);
	padding: 0 var(--space-14);
	border-radius: 20px; /* Figma type-tag pill radius */
	background-color: var(--tag-default-bg);
	color: var(--tag-default-fg);
	text-align: center;
}

.c-update-detail-list__type--talk {
	background-color: var(--tag-talk-bg);
	color: var(--tag-talk-fg);
}

.c-update-detail-list__type--article {
	background-color: var(--tag-article-bg);
	color: var(--tag-article-fg);
}

.c-update-detail-list__type--interview {
	background-color: var(--tag-interview-bg);
	color: var(--tag-interview-fg);
}

.c-update-detail-list__type--panel {
	background-color: var(--tag-panel-bg);
	color: var(--tag-panel-fg);
}

.c-update-detail-list__type--workshop {
	background-color: var(--tag-workshop-bg);
	color: var(--tag-workshop-fg);
}

html:lang(ja) .c-update-detail-list__type {
	width: var(--tag-width-ja);
	min-width: var(--tag-width-ja);
	max-width: var(--tag-width-ja);
}

.c-update-detail-list__title {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
}

.c-update-detail-list__aside {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-16);
}

.c-update-detail-list__media {
	flex-shrink: 0;
	max-width: 12rem; /* Figma spec — no matching --space-* token */
	overflow-wrap: break-word;
}

.c-update-detail-list__icon {
	display: flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.c-update-detail-list__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.c-update-detail-list__link:hover .c-update-detail-list__title,
.c-update-detail-list__link:hover .c-update-detail-list__media,
.c-update-detail-list__link:hover .c-update-detail-list__icon {
	color: var(--color-amber);
}

.c-update-detail-list__link:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

.c-update-detail-list__link.is-disabled {
	color: var(--color-ink-40);
	cursor: not-allowed;
}

.c-update-detail-list__link.is-disabled .c-update-detail-list__date {
	color: var(--color-ink-40);
}

.c-update-detail-list__link.is-disabled .c-update-detail-list__type {
	background-color: var(--color-ink-40);
	color: var(--tag-default-fg);
}

.c-update-detail-list__link.is-disabled .c-update-detail-list__type--article {
	color: var(--color-ink-40);
}

/* -------------------------------------------------------------------------
   List snippet (Figma list-snippets)
   ------------------------------------------------------------------------- */

.c-list-snippet {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-list-snippet__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.c-list-snippet__label {
	color: var(--color-amber);
}

.c-list-snippet__header,
.c-list-snippet__body {
	margin: 0;
	overflow-wrap: break-word;
}

.c-list-snippet[href]:hover .c-list-snippet__header {
	color: var(--color-amber);
}

.c-list-snippet:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   List snippet extended (Figma list-snippets-extended)
   ------------------------------------------------------------------------- */

.c-list-snippet-extended {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-list-snippet-extended__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.c-list-snippet-extended__label {
	color: var(--color-amber);
}

.c-list-snippet-extended__section {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.c-list-snippet-extended__section-label {
	color: var(--color-ink);
}

.c-list-snippet-extended__header,
.c-list-snippet-extended__body,
.c-list-snippet-extended__section-body,
.c-list-snippet-extended__section-list {
	margin: 0;
	overflow-wrap: break-word;
}

.c-list-snippet-extended__section-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding-inline-start: 1.25em;
	list-style: disc;
}

.c-list-snippet-extended__section-list-item {
	margin: 0;
}

.c-list-snippet-extended[href]:hover .c-list-snippet-extended__header {
	color: var(--color-amber);
}

.c-list-snippet-extended:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   List snippet card (Figma list-snippets-card)
   ------------------------------------------------------------------------- */

.c-list-snippet-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 100%;
	padding: var(--space-24) var(--space-32);
	border-radius: var(--space-8);
	background-color: color-mix(in srgb, var(--color-green-dark) 10%, transparent);
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-list-snippet-card__header,
.c-list-snippet-card__body,
.c-list-snippet-card__label {
	margin: 0;
	overflow-wrap: break-word;
}

.c-list-snippet-card__header,
.c-list-snippet-card__label {
	color: var(--color-green-dark);
}

.c-list-snippet-card[href]:hover .c-list-snippet-card__header {
	color: var(--color-amber);
}

.c-list-snippet-card:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Work component accordion (compact title + duration → full detail)
   ------------------------------------------------------------------------- */

.c-work-component-accordion {
	width: 100%;
	padding: var(--space-24) var(--space-32);
	border-radius: var(--space-8);
	background-color: color-mix(in srgb, var(--color-green-dark) 10%, transparent);
	color: var(--color-ink);
}

.c-work-component-accordion__summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	list-style: none;
	cursor: pointer;
}

.c-work-component-accordion__summary::-webkit-details-marker {
	display: none;
}

.c-work-component-accordion__summary-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
}

.c-work-component-accordion__marker {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-top: 0.45em;
	border-top: 0.35em solid transparent;
	border-bottom: 0.35em solid transparent;
	border-left: 0.5em solid var(--color-green-dark);
	transition: transform 0.2s ease;
}

.c-work-component-accordion[open] .c-work-component-accordion__marker {
	transform: rotate(90deg);
}

.c-work-component-accordion__summary-title,
.c-work-component-accordion__summary-body,
.c-work-component-accordion__summary-meta,
.c-work-component-accordion__summary-duration,
.c-work-component-accordion__body,
.c-work-component-accordion__challenge-text,
.c-work-component-accordion__panel-meta,
.c-work-component-accordion__panel-duration {
	margin: 0;
	overflow-wrap: break-word;
}

.c-work-component-accordion__summary-title,
.c-work-component-accordion__summary-meta,
.c-work-component-accordion__summary-duration,
.c-work-component-accordion__challenge-label,
.c-work-component-accordion__panel-meta,
.c-work-component-accordion__panel-duration {
	color: var(--color-green-dark);
}

.c-work-component-accordion__summary-body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.c-work-component-accordion__summary:hover .c-work-component-accordion__summary-title,
.c-work-component-accordion__summary:focus-visible .c-work-component-accordion__summary-title {
	color: var(--color-amber);
}

.c-work-component-accordion__summary:hover .c-work-component-accordion__marker,
.c-work-component-accordion__summary:focus-visible .c-work-component-accordion__marker {
	border-left-color: var(--color-amber);
}

.c-work-component-accordion__summary:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
	border-radius: var(--space-4);
}

.c-work-component-accordion[open] .c-work-component-accordion__summary-body,
.c-work-component-accordion[open] .c-work-component-accordion__summary-meta,
.c-work-component-accordion[open] .c-work-component-accordion__summary-duration {
	display: none;
}

.c-work-component-accordion__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-top: var(--space-12);
}

.c-work-component-accordion__panel-meta {
	display: none;
}

.c-work-component-accordion[open] .c-work-component-accordion__panel-meta,
.c-work-component-accordion[open] .c-work-component-accordion__panel-duration {
	display: block;
}

.c-work-component-accordion__challenge {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* -------------------------------------------------------------------------
   List value item (Figma list-value-items, node 2231:7009)
   ------------------------------------------------------------------------- */

.c-list-value-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-24);
	width: 100%;
	margin-block: var(--space-20);
	color: var(--color-ink);
}

.c-list-value-item__accent {
	flex-shrink: 0;
	align-self: stretch;
	width: var(--vertical-divider-width);
	background-color: var(--color-green-dark);
}

.c-list-value-item__title,
.c-list-value-item__body {
	margin: 0;
	overflow-wrap: break-word;
}

.c-list-value-item__title {
	flex-shrink: 0;
}

.c-list-value-item__body {
	flex: 1;
	min-width: 0;
}

/* -------------------------------------------------------------------------
   List article (Figma list-article, node 2061:741)
   ------------------------------------------------------------------------- */

.c-list-article {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	width: 100%;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-list-article__media {
	aspect-ratio: 363 / 256;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-ink-20);
}

.c-list-article__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-list-article__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 100%;
}

.c-list-article__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	width: 100%;
}

.c-list-article__category,
.c-list-article__date {
	color: var(--color-amber);
}

.c-list-article__date {
	flex-shrink: 0;
	white-space: nowrap;
}

.c-list-article__title,
.c-list-article__body {
	margin: 0;
	overflow-wrap: break-word;
}

.c-list-article__body {
	color: var(--color-ink-60);
}

.c-list-article[href]:hover .c-list-article__title {
	color: var(--color-amber);
}

/* -------------------------------------------------------------------------
   Blog archive card (Figma WebDesign-archive post)
   ------------------------------------------------------------------------- */

.c-blog-archive-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
}

.c-blog-archive-card__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-12);
	width: 100%;
}

.c-blog-archive-card__categories {
	margin: 0;
	color: var(--color-amber);
}

.c-blog-archive-card__title {
	margin: 0;
}

.c-blog-archive-card__title-link {
	color: inherit;
	text-decoration: none;
}

.c-blog-archive-card__title-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.c-blog-archive-card__date {
	margin: 0;
	color: var(--color-ink-80);
	font-weight: 300;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

.c-blog-archive-card__media {
	width: 100%;
	margin: var(--space-32) 0 0;
}

.c-blog-archive-card__media-link {
	display: block;
}

.c-blog-archive-card__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.c-blog-archive-card__excerpt {
	width: 100%;
	margin-top: var(--space-32);
	text-align: left;
	color: var(--color-ink-80);
}

.c-blog-archive-card__excerpt p {
	margin: 0;
}

.c-blog-archive-card:focus-within .c-blog-archive-card__title-link {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------
   Post navigation (tsuredzure prev/next)
   ------------------------------------------------------------------------- */

.c-post-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.c-post-nav__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	min-width: 0;
}

.c-post-nav__item--next {
	align-items: flex-end;
	text-align: right;
}

.c-post-nav__direction {
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	color: var(--color-amber);
	text-decoration: none;
}

.c-post-nav__direction-icon {
	display: flex;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.c-post-nav__direction-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.c-post-nav__direction-label {
	margin: 0;
	color: inherit;
}

.c-post-nav__direction:hover .c-post-nav__direction-label,
.c-post-nav__direction:focus-visible .c-post-nav__direction-label {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.c-post-nav__title-link {
	margin: 0;
	color: var(--color-ink);
	text-decoration: none;
	overflow-wrap: break-word;
}

.c-post-nav__title-link:hover,
.c-post-nav__title-link:focus-visible {
	color: var(--color-amber);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.c-post-nav__direction:focus-visible,
.c-post-nav__title-link:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

.c-list-article:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   List case study (Figma list-casestudy, node 2231:7423)
   ------------------------------------------------------------------------- */

.c-list-case-study {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	width: 100%;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

.c-list-case-study__media {
	aspect-ratio: 534 / 373;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-ink-20);
}

.c-list-case-study__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-list-case-study__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 100%;
}

.c-list-case-study__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	width: 100%;
}

.c-list-case-study__category,
.c-list-case-study__date {
	color: var(--color-amber);
}

.c-list-case-study__date {
	flex-shrink: 0;
	white-space: nowrap;
}

.c-list-case-study__title,
.c-list-case-study__body {
	margin: 0;
	overflow-wrap: break-word;
}

.c-list-case-study__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var(--color-ink-60);
}

.c-list-case-study[href]:hover .c-list-case-study__title {
	color: var(--color-amber);
}

.c-list-case-study:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Footer link column + footer link (Figma Footer 2019:179)
   ------------------------------------------------------------------------- */

.c-footer-link-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	flex: 0 1 202px;
	min-width: 0;
}

.c-footer-link-column__title {
	margin: 0;
	color: var(--color-green-light);
}

.c-footer-link-column__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-footer-link-column__item {
	margin: 0;
}

.c-footer-link {
	display: inline-block;
	color: var(--color-green-light);
	text-decoration: none;
	word-break: break-word;
}

.c-footer-link:hover:not(.is-disabled) {
	text-decoration: underline;
}

.c-footer-link.is-disabled {
	color: var(--color-green-light-40);
	cursor: not-allowed;
}

.c-footer-link:focus-visible {
	outline: 2px solid var(--color-bg);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Brushline divider (hand-drawn SVG stroke + plain fallback)
   ------------------------------------------------------------------------- */

.c-brushline-divider {
	--brushline-color: var(--color-ink-20);
	display: block;
	margin: 0;
	padding: 0;
}

.c-brushline-divider--full {
	width: 100%;
}

.c-brushline-divider--short {
	width: 100px;
}

.c-brushline-divider--ink-30 {
	--brushline-color: color-mix(in srgb, var(--color-ink) 45%, transparent);
}

.c-brushline-divider--on-dark {
	--brushline-color: color-mix(in srgb, var(--color-bg) 45%, transparent);
}

.c-brushline-divider--green-light-20 {
	--brushline-color: var(--color-green-light-20);
}

.c-brushline-divider__stroke {
	opacity: 0.8;
}

.c-brushline-divider__stroke-ghost {
	opacity: 0.65;
}

.c-brushline-divider__fancy,
.c-brushline-divider__simple {
	display: block;
	width: 100%;
	height: 18px;
}

.c-brushline-divider__simple {
	display: none;
}

[data-theme="dark"] .c-brushline-divider__fancy {
	display: none;
}

[data-theme="dark"] .c-brushline-divider__simple {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.c-brushline-divider__fancy {
		display: none;
	}

	.c-brushline-divider__simple {
		display: block;
	}
}

/* -------------------------------------------------------------------------
   Text highlight (hand-drawn SVG patterns, stretch to text width)
   ------------------------------------------------------------------------- */

.c-text-highlight {
	--highlight-bg: url("../images/patterns/hl_ptn2_yellow.svg");
	position: relative;
	z-index: 0;
	vertical-align: baseline;
	background-image: var(--highlight-bg);
	background-repeat: no-repeat;
}

/* ptn1/ptn2: inline-block gives background-size: 100% a definite width */
.c-text-highlight--ptn1,
.c-text-highlight--ptn2 {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

/* ptn3: per-line oval when text wraps */
.c-text-highlight--ptn3 {
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.c-text-highlight--ptn1 {
	--highlight-bg: url("../images/patterns/hl_ptn1_yellow.svg");
	background-position: left calc(100% + 1px);
	background-size: 100% 0.45em;
	padding-inline: 0.06em;
	padding-bottom: calc(0.1em + 1px);
}

.c-text-highlight--ptn2 {
	--highlight-bg: url("../images/patterns/hl_ptn2_yellow.svg");
	background-position: center;
	background-size: 100% 100%;
	padding: 0.1em 0.14em 0.12em;
}

.c-text-highlight--ptn3 {
	--highlight-bg: url("../images/patterns/hl_ptn3_yellow.svg");
	background-position: center;
	background-size: 100% 100%;
	padding: 0.14em 0.2em;
}