/**
 * Responsive overrides — Figma WebDesign--26.
 * Breakpoints (reference only; values are hardcoded below — custom properties do not work in @media):
 *   1024px (--bp-xl) tablet landscape / small laptop
 *   768px  (--bp-lg) tablet portrait
 *   640px  (--bp-md) large phones
 *   480px  (--bp-sm) small phones
 * Build step: 5
 *
 * max-width descending; desktop defaults live in layout.css.
 * No Figma mobile grid yet — structural placeholders until a mobile artboard exists.
 */

/* -------------------------------------------------------------------------
  1728px+ — ultra-wide screens; widen frame + rebalance hero
  ------------------------------------------------------------------------- */

@media (min-width: 1728px) {
	:root {
		--grid-max-width: 1560px;
		--site-margin-inline: 72px;
		--grid-gutter: 28px;
	}

	.section--hero-home {
		background-position: center !important;
	}

	.section--hero-home::before {
		width: clamp(520px, 36vw, 760px);
	}
}

/* -------------------------------------------------------------------------
   1024px — keep 12 columns; tighten gutter and side margins
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	:root {
		--site-margin-inline: 48px;
		--grid-gutter: 20px;
	}

	.section--hero-home {
		min-height: max(60vh, 640px);
		padding-top: 96px;
	}
}

/* -------------------------------------------------------------------------
   768px — reduce margins; stack grid to single column
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	:root {
		--site-margin-inline: 40px;
	}

	.site-grid {
		grid-template-columns: 1fr;
	}

	/* Column offset utilities target the 12-col grid; reset when stacked. */
	.site-grid > [class*="col-start-"][class*="col-span-"] {
		grid-column: 1 / -1;
	}

	.section--hero-home {
		min-height: max(60vh, 560px);
		padding-top: 72px;
		padding-bottom: var(--space-60);
		background-position: center;
	}

	.section--hero-home::before {
		width: clamp(280px, 68vw, 560px);
	}

	.section--hero-home .text-display-1,
	html:lang(ja) .section--hero-home .text-display-1 {
		font-size: clamp(40px, 6vw, 64px);
		line-height: 1.08;
	}

	.section--hero-home .section-hero-home__content {
		gap: var(--space-32);
		max-width: 560px;
	}

	.section-latest-updates__inner {
		flex-direction: column;
	}

	.section-latest-updates__label {
		width: auto;
	}

	.section-latest-updates__list {
		flex: 1 1 auto;
		width: 100%;
	}

	.c-update-list--updated .c-update-list__item,
	.c-update-list--updated .c-update-list__link {
		max-width: none;
	}

	.c-update-list--updated .c-update-list__item {
		align-items: flex-start;
		min-height: 0;
	}

	.c-update-list--updated .c-update-list__link {
		align-items: flex-start;
		gap: var(--space-16);
	}

	.c-update-list--updated .c-update-list__date-group {
		flex-shrink: 0;
		width: auto;
		gap: var(--space-12);
	}

	.c-update-list--updated .c-update-list__date-accent {
		height: 1.125rem;
		align-self: flex-start;
	}

	.c-update-list--updated .c-update-list__title {
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
   Update detail list — stack fields on narrow viewports (About publications, etc.)
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.c-update-detail-list__link {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-16);
	}

	.c-update-detail-list__main {
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		gap: var(--space-12) var(--space-16);
		width: 100%;
	}

	.c-update-detail-list__date {
		width: auto;
	}

	.c-update-detail-list__type {
		min-width: 0;
		width: auto;
		max-width: none;
	}

	html:lang(ja) .c-update-detail-list__type {
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.c-update-detail-list__title {
		flex: 1 1 100%;
		width: 100%;
	}

	.c-update-detail-list__aside {
		width: 100%;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--space-16);
	}

	.c-update-detail-list__media {
		flex: 1;
		min-width: 0;
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   640px — large phones
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
	:root {
		--site-margin-inline: 32px;
	}

	.section--hero-home {
		min-height: max(60vh, 520px);
		padding-top: 64px;
		padding-bottom: var(--space-48);
	}

	.section--hero-home::before {
		width: 100%;
		background-image: linear-gradient(180deg, var(--color-bg) 42%, transparent 100%);
		opacity: 0.4;
	}

	.section--hero-home .section-hero-home__content {
		max-width: none;
	}

	.site-header {
		position: relative;
		z-index: 100;
	}

	.site-header__menu-toggle {
		display: flex;
		min-width: 44px;
		min-height: 44px;
	}

	.site-header__menu-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 101;
		border: none;
		margin: 0;
		padding: 0;
		background-color: var(--color-ink-60);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}

	.site-header.is-menu-open .site-header__menu-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.site-header__aside {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 102;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--space-32);
		width: min(100%, 320px);
		height: 100dvh;
		margin: 0;
		padding: var(--space-80) var(--site-margin-inline) var(--space-24);
		overflow-y: auto;
		background-color: var(--color-bg);
		border-left: 1px solid var(--color-ink-20);
		box-shadow: -4px 0 24px var(--color-ink-20);
		transform: translateX(100%);
		transition: transform 0.25s ease;
	}

	.site-header.is-menu-open .site-header__aside {
		transform: translateX(0);
	}

	.site-header__aside .c-global-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-24);
	}

	.site-header__aside .c-nav-link {
		justify-content: flex-start;
		min-width: 0;
		width: 100%;
	}

	.site-header__nav {
		justify-content: flex-start;
	}

	.site-header__controls {
		flex-wrap: wrap;
		margin-top: auto;
	}

	body.is-header-menu-open {
		overflow: hidden;
	}
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	.site-header__menu-toggle-bar,
	.site-header__menu-backdrop,
	.site-header__aside {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   480px — small phones; reduce section vertical padding
   ------------------------------------------------------------------------- */

@media (max-width: 480px) {
	:root {
		--site-margin-inline: 24px;
	}

	.section-padding-y {
		padding-block: var(--space-32);
	}

	.section--hero-home::before {
		opacity: 0.2;
	}

	.section--hero-home .text-display-1,
	html:lang(ja) .section--hero-home .text-display-1 {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: var(--tracking-display-supertight);
	}

	.section--hero-home .text-sub-header,
	html:lang(ja) .section--hero-home .text-sub-header,
	html:lang(ja) .section--about-hero .text-sub-header,
	html:lang(ja) .section--work-hero .text-sub-header {
		font-size: 22px;
	}

	html:lang(ja) .section--about-hero .text-sub-header,
	html:lang(ja) .section--work-hero .text-sub-header {
		line-height: 1.58;
	}

	html:lang(ja) :is(
		.section--hero-home,
		.section--about-hero,
		.section--work-hero,
		.section--portfolio-hero
	) .text-display-1 {
		line-height: 1.35;
	}
}

/* -------------------------------------------------------------------------
   Home focus — stack columns on tablet / phone
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.section-focus__grid,
	.section-work-focus__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.section--focus,
	.section--work-focus {
		padding-block: var(--space-48);
	}

	.section-focus__inner,
	.section-work-focus__inner {
		gap: var(--space-48);
	}

	.section-focus__header,
	.section-work-focus__header {
		gap: var(--space-32);
	}

	.section-focus__grid,
	.section-work-focus__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
   Section display headers — greeting, focus, publications (tablet scale)
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: clamp(32px, 5vw, 48px);
		line-height: 1.15;
	}

	html:lang(ja) .section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: clamp(28px, 4.5vw, 36px);
		line-height: 1.3;
	}

	.section-focus__display.text-display-1,
	.section-work-focus__title.text-display-1,
	html:lang(ja) .section-focus__display.text-display-1,
	html:lang(ja) .section-work-focus__title.text-display-1 {
		font-size: clamp(36px, 5.5vw, 64px);
		line-height: 1.15;
	}

	html:lang(ja) .section-focus__display.text-display-1,
	html:lang(ja) .section-work-focus__title.text-display-1 {
		line-height: 1.3;
	}

	.section-about-talks__title.text-display-1,
	html:lang(ja) .section-about-talks__title.text-display-1 {
		font-size: clamp(36px, 5.5vw, 64px);
		line-height: 1.15;
	}

	html:lang(ja) .section-about-talks__title.text-display-1 {
		font-size: clamp(36px, 5.5vw, 52px);
		line-height: 1.3;
	}
}

@media (max-width: 480px) {
	.section-focus__display.text-display-1,
	.section-work-focus__title.text-display-1,
	html:lang(ja) .section-focus__display.text-display-1,
	html:lang(ja) .section-work-focus__title.text-display-1 {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: var(--tracking-display-supertight);
	}

	html:lang(ja) .section-focus__display.text-display-1,
	html:lang(ja) .section-work-focus__title.text-display-1 {
		line-height: 1.35;
	}

	.section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: 36px;
		line-height: 1.15;
	}

	html:lang(ja) .section--greeting .entry-content :where(.text-display-1, .text-display-2) {
		font-size: 28px;
		line-height: 1.35;
	}

	.section-about-talks__title.text-display-1,
	html:lang(ja) .section-about-talks__title.text-display-1 {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: var(--tracking-display-supertight);
	}

	html:lang(ja) .section-about-talks__title.text-display-1 {
		line-height: 1.35;
	}
}

/* -------------------------------------------------------------------------
   Work — type of projects
   Desktop: note + pack line positioned per Figma Package frame.
   ≤1200px: stacked layout — hide pack line, note in normal flow.
   ------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.section-work-types__body {
		flex-direction: column;
		gap: var(--space-60);
	}

	.section-work-types__package {
		flex: none;
		align-self: auto;
		max-width: none;
		width: 100%;
		min-height: 0;
		padding-inline-end: 0;
	}

	.section-work-types__line {
		display: none;
	}

	.section-work-types__note {
		position: static;
		max-width: 20rem;
	}

	.section-work-types__columns {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.section-work-types__divider {
		width: 100%;
		height: var(--vertical-divider-width);
		min-height: 0;
	}

	.section-work-types__column {
		flex: none;
		max-width: none;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.section--work-types {
		padding-block: var(--space-48);
	}

	.section-work-types__inner {
		gap: var(--space-48);
	}

	.section-work-types__note {
		max-width: 100%;
	}

	.section-work-types__note.text-h2 {
		font-size: 24px;
	}
}

/* -------------------------------------------------------------------------
   Work — skills
   ≤1200px: wrap category columns; ≤640px: stack.
   ------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.section-work-skills__columns {
		flex-wrap: wrap;
		gap: var(--space-32) var(--space-20);
	}

	.section-work-skills__column {
		flex: 1 1 calc(50% - var(--space-20));
		max-width: none;
	}
}

@media (max-width: 640px) {
	.section--work-skills {
		padding-block: var(--space-48);
	}

	.section-work-skills__inner {
		gap: var(--space-48);
	}

	.section-work-skills__columns {
		flex-direction: column;
		gap: var(--space-32);
	}

	.section-work-skills__column {
		flex: none;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   Home articles — tighten gutters, then stack columns
   Gutter scale: 55px / 110px at 1440px → ~39px / ~78px at 1024px
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.section-articles__columns {
		display: flex;
		flex-direction: column;
		gap: var(--articles-column-gap);
	}

	.section-articles__columns > :nth-child(n) {
		grid-column: auto;
	}

	.section-articles__rule {
		display: none;
	}

	.section-articles__card,
	.section-articles__blog-intro,
	.section-articles__blog-list {
		max-width: none;
	}
}

@media (max-width: 768px) {
	.section-articles__columns {
		gap: clamp(40px, calc(110 / var(--articles-artboard-width) * 100vw), 110px);
	}
}

@media (max-width: 640px) {
	.section--articles {
		padding-block: var(--space-48);
	}

	.section-articles__inner {
		gap: var(--space-48);
	}

	.section-articles__columns {
		gap: var(--space-48);
	}

	.section-articles__column-head {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------------------------------
   Home get in touch — stack columns on narrow viewports
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.section-get-in-touch__inner {
		grid-template-columns: 1fr;
		gap: var(--space-48);
	}

	.section-get-in-touch__intro,
	.section-get-in-touch__body {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.section--get-in-touch {
		padding-block: var(--space-48);
	}

	.section-get-in-touch__body {
		gap: var(--space-48);
	}
}

/* -------------------------------------------------------------------------
   About — stack hero and profile columns on narrow viewports
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.section-about-hero__inner {
		flex-direction: column;
	}

	.section-about-hero__content,
	.section-about-hero__portrait {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}

	.section-about-profile__grid {
		grid-template-columns: 1fr;
	}

	.section-about-profile__body-col {
		max-width: none;
	}

	.section-about-profile__timeline-band {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: var(--space-24);
		column-gap: 0;
	}

	.section-about-profile__timeline-caption {
		max-width: none;
		justify-self: start;
	}
}

@media (max-width: 768px) {
	.section--about-hero .text-display-1,
	.section--work-hero .text-display-1,
	html:lang(ja) .section--about-hero .text-display-1,
	html:lang(ja) .section--work-hero .text-display-1 {
		font-size: clamp(40px, 6vw, calc(64px - 2px));
		line-height: 1.08;
	}

	.section--portfolio-hero .text-display-1,
	html:lang(ja) .section--portfolio-hero .text-display-1 {
		font-size: clamp(36px, 5.5vw, 48px);
		line-height: 1.08;
	}

	html:lang(ja) :is(
		.section--hero-home,
		.section--about-hero,
		.section--work-hero,
		.section--portfolio-hero
	) .text-display-1 {
		line-height: 1.3;
	}

	.section-about-hero__headings {
		gap: var(--space-32);
	}
}

@media (max-width: 640px) {
	.section--about-hero,
	.section--about-profile,
	.section--about-talks {
		padding-block: var(--space-48);
	}
}

/* -------------------------------------------------------------------------
   Work — stack hero columns on narrow viewports
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.section-work-hero__inner {
		flex-direction: column;
	}

	.section-work-hero__content,
	.section-work-hero__index,
	.section-work-hero__meta {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}

	.section-work-hero__index,
	.section-work-hero__meta {
		justify-content: flex-start;
		align-self: auto;
	}

	.section-work-intro__content .wp-block-columns > .wp-block-column:first-child,
	.section-work-intro__content .wp-block-columns > .wp-block-column:last-child,
	.section-work-strength-collabo__column,
	.section-work-past-projects__content .wp-block-columns > .wp-block-column:first-child,
	.section-work-past-projects__content .wp-block-columns > .wp-block-column:last-child {
		max-width: none;
	}

	.section-work-past-projects__content .wp-block-columns > .wp-block-column:last-child :where(p, .wp-block-paragraph) {
		max-width: none;
	}
}

@media (max-width: 768px) {
	.section-portfolio-band__preview {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.section--work-hero,
	.section--work-intro,
	.section--work-strength-collabo,
	.section--work-values,
	.section--work-past-projects {
		padding-block: var(--space-48);
	}

	.section--portfolio-hero,
	.section-portfolio-band,
	.section--portfolio-clients {
		padding-block: var(--space-48);
	}

	.section--about-hero,
	.section--work-hero {
		padding-top: calc(var(--space-48) - var(--space-24));
	}

	.section--project-content {
		padding-block: var(--space-48);
	}

	.section-project-content__inner {
		grid-template-columns: 1fr;
	}

	.portfolio-notice__inner {
		min-height: auto;
		padding-block: var(--space-24);
	}

	.site-header--portfolio .site-header__inner {
		min-height: auto;
		padding-block: var(--space-24);
	}

	.section-work-strength-collabo__columns {
		flex-direction: column;
	}

	.section-work-strength-collabo__item {
		grid-template-columns: 1fr;
	}

	.section-work-values__items {
		display: flex;
		flex-direction: column;
		gap: var(--space-40);
	}

	.section-work-values__items .c-list-value-item {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
	}

	.section-work-values__items .c-list-value-item__accent {
		align-self: auto;
		width: 100%;
		min-height: var(--vertical-divider-width);
		height: var(--vertical-divider-width);
	}
}

/* -------------------------------------------------------------------------
   Blog archive — full width when grid stacks (see 768px .site-grid rule)
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.section--blog-archive-hero .site-container,
	.section--blog-single-hero .site-container {
		display: block;
	}

	.section-blog-archive-hero__inner,
	.section-blog-single-hero__back {
		grid-column: 1 / -1;
	}

	.section-blog-archive__band {
		grid-column: 1 / -1;
	}

	.section-blog-archive__inner-grid {
		grid-template-columns: 1fr;
		row-gap: var(--space-48);
	}

	.section-blog-archive__inner-grid > .section-blog-archive__main,
	.section-blog-archive__inner-grid > .blog-archive-sidebar {
		grid-column: 1 / -1;
	}

	.section-blog-archive__sidebar {
		border-top: 2px solid var(--color-ink-20);
		padding-top: var(--space-48);
	}

	.section-blog-single__band {
		grid-column: 1 / -1;
	}

	.c-post-nav__item--next {
		align-items: flex-start;
		text-align: left;
	}
}

@media (max-width: 640px) {
	.section--blog-archive-hero {
		padding-top: calc(var(--space-48) - var(--space-24));
		padding-bottom: var(--space-24);
	}

	.section--blog-archive {
		padding-top: var(--space-24);
		padding-bottom: var(--space-48);
	}

	.c-blog-archive-card__media {
		margin-top: var(--space-24);
	}

	.c-blog-archive-card__excerpt {
		margin-top: var(--space-24);
	}

	.section--blog-single {
		padding-bottom: var(--space-48);
	}

	.section-blog-single__nav {
		margin-top: var(--space-48);
	}
}

/* -------------------------------------------------------------------------
   Footer — stack message and link columns on narrow viewports
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.site-footer__content {
		flex-direction: column;
		gap: var(--space-48);
	}

	.site-footer__message {
		flex: 1 1 auto;
		max-width: none;
	}

	.site-footer__columns {
		flex-direction: column;
		gap: var(--space-32);
	}
}