.page-hero {
  position: relative;
  height: clamp(320px, 45vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-lg);
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--hero-about-1) 0%, var(--hero-about-2) 50%, var(--hero-about-3) 100%);
}
.page-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--text-rgb), 0.2) 0%, rgba(var(--text-rgb), 0.5) 100%);
}

.page-hero__overlay--diagonal {
  background: linear-gradient(to top right, rgba(var(--text-rgb), 0.15) 0%, rgba(var(--text-rgb), 0.40) 50%, rgba(var(--text-rgb), 0.78) 100%);
}
.page-hero__content {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.page-hero__label {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-inv);
  display: block;
  margin-bottom: 0.5em;
}
.page-hero__title {
  font-family: var(--font-sans-ja);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--text-inv);
}
.page-hero__title-en {
  font-family: var(--font-serif-en);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--text-inv);
  display: block;
  margin-top: 0.4em;
}

.philosophy { padding: var(--section-py) var(--gutter); }
.philosophy__inner { max-width: var(--max-width-narrow); margin: 0 auto; }
.philosophy__lead {
  margin-bottom: var(--space-lg);
 
}
.philosophy__lead em { font-style: normal; color: var(--accent); }
.philosophy__body {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--text-mid);
  line-height: var(--lh-loose);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.values { padding: var(--section-py) var(--gutter); background: var(--bg-warm); }
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: var(--space-lg);
}
.value-card {
  padding: var(--space-md) var(--space-md) var(--space-lg);
  border-top: 2px solid var(--warm);
  background: var(--bg);
}

.value-card--bg {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}
.value-card--bg .value-card__overlay {
  position: absolute;
  inset: 0;
  
  
  background: linear-gradient(to top right,
    color-mix(in srgb, var(--accent) 92%, transparent) 0%,
    color-mix(in srgb, var(--accent) 88%, transparent) 35%,
    color-mix(in srgb, var(--accent) 55%, transparent) 55%,
    color-mix(in srgb, var(--accent) 20%, transparent) 80%,
    color-mix(in srgb, var(--accent) 10%, transparent) 100%);
  z-index: 1;
  transition: opacity var(--duration-base) var(--ease);
}
.value-card--bg .value-card__inner {
  position: relative;
  z-index: 2;
  padding: var(--space-md);
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.value-card--bg .value-card__num {
  grid-row: 1;
  color: var(--text-inv);
  opacity: 0.85;
}
.value-card--bg .value-card__title {
  grid-row: 2;
  align-self: end;
  color: var(--text-inv);
  margin-bottom: var(--space-sm);
}
.value-card--bg .value-card__text {
  grid-row: 3;
  color: var(--text-inv);
  opacity: 0.92;
}

.value-card--01 {
  background-image: url('../img/value-01-sewing.webp');
}
.value-card--02 {
  background-image: url('../img/value-02-thread.webp');
}
.value-card--03 {
  background-image: url('../img/value-03-detail.webp');
}

.value-card--bg {
  background-size: 100% 100%;
  transition: background-size var(--duration-base) var(--ease);
}
.value-card--bg:hover {
  background-size: 108% 108%;
}
.value-card--bg:hover .value-card__overlay {
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .value-card--bg,
  .value-card--bg .value-card__overlay { transition: none; }
  .value-card--bg:hover { background-size: 100% 100%; }
}
.value-card__num {
  font-family: var(--font-serif-en);
  font-size: var(--fs-h1);
  font-style: italic;
  color: var(--border);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-sm);
}
.value-card__title {
  font-family: var(--font-sans-ja);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--text);
  margin-bottom: var(--space-sm);
}
.value-card__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--text-mid);
  line-height: var(--lh-loose);
}

.craft-detail { padding: var(--section-py) 0; }
.craft-item { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.craft-item:nth-child(even) { direction: rtl; }
.craft-item:nth-child(even) > * { direction: ltr; }

.craft-item__img {
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  color: var(--text-light);
  height: 100%;
  min-height: 480px;
  overflow: hidden;
}

.craft-item:nth-child(1) .craft-item__img img { object-position: center bottom; }
.craft-item:nth-child(2) .craft-item__img img { object-position: center center; transform: scale(1.35); transform-origin: center; }
.craft-item:nth-child(3) .craft-item__img img { object-position: center top; }
.craft-item__body {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl);
}
.craft-item__num {
  font-family: var(--font-serif-en);
  font-size: var(--fs-xs);
  font-style: italic;
  letter-spacing: var(--ls-widest);
  color: var(--accent-mid);
  display: block;
  margin-bottom: var(--space-sm);
}
.craft-item__title {
  margin-bottom: var(--space-sm);
 
}
.craft-item__text {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--text-mid);
  line-height: var(--lh-loose);
}

.sub-nav { padding: var(--section-py) var(--gutter); background: var(--bg-warm); }
.sub-nav__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}
.sub-nav__card {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
  transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.sub-nav__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.sub-nav__card-img {
  width: 120px;
  flex-shrink: 0;
  overflow: hidden;
}
.sub-nav__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sub-nav__card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  flex: 1;
}
.sub-nav__card-label {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent-mid);
}
.sub-nav__card-title {
  font-family: var(--font-sans-ja);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--text);
  line-height: var(--lh-heading);
}
.sub-nav__card-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--text-mid);
  line-height: var(--lh-heading);
}
.sub-nav__card-arrow {
  font-family: var(--font-sans-en);
  font-size: var(--fs-xs);
  color: var(--text-light);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-xs);
  transition: color var(--duration-fast) var(--ease);
}
.sub-nav__card:hover .sub-nav__card-arrow { color: var(--accent); }
.sub-nav__card-arrow::after { content: '→'; }

.about-cta__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--text-inv);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-lg);
}

.craft-item__more[hidden] { display: none; }
.craft-item__more { margin-top: var(--space-sm); }
.craft-item__toggle {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-sans-ja);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent);
  cursor: pointer;
  letter-spacing: var(--ls-wide);
  transition: color 0.2s;
}
.craft-item__toggle::after { content: ' →'; }
.craft-item__toggle:hover { color: var(--gold-brown); }
.craft-item__toggle[aria-expanded="true"]::after { content: ''; }
.craft-item__toggle[aria-expanded="true"] { color: var(--text-mid); }

@media (max-width: 1024px) { .craft-item__body { padding: var(--space-lg) var(--space-md); } }

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

@media (max-width: 768px) {
  .craft-item, .craft-item:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}

@media (max-width: 768px)  { .craft-item__body { padding: var(--space-lg) var(--gutter); } }

@media (max-width: 768px) { .sub-nav__grid { grid-template-columns: 1fr; } }