.sth-hero { margin: 0 0 8px; color: var(--fg, var(--ink)); }
.sth-hero-logo-row { display: flex; align-items: center; padding: 12px 16px 8px; }
.sth-hero-wordmark {
  margin: 0;
  font-family: var(--display, Georgia, serif);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.sth-hero-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}
.sth-hero-menu a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.sth-hero-card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  background: var(--surface);
  color: var(--fg, var(--ink));
}
.sth-hero-card h1 {
  margin: 0;
  font-family: var(--display, Georgia, serif);
  font-size: clamp(1.85rem, 4.4vw, 3.15rem);
  line-height: 0.95;
  letter-spacing: -.04em;
}
.sth-hero-sub { margin: 0; line-height: 1.5; max-width: 36rem; color: currentColor; opacity: .82; }
.sth-hero-sku {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  margin: 6px 0 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 10px;
}
.sth-hero-sku img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.sth-hero-sku strong { display: block; font-size: .95rem; line-height: 1.2; }
.sth-hero-sku em { display: block; margin-top: 4px; font-style: normal; font-family: var(--display); font-weight: 600; }
.sth-hero-card .btn { align-self: flex-start; min-height: 44px; margin-top: 6px; }
.sth-hero-frame { position: relative; overflow: hidden; min-height: 0; }
.sth-hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.sth-hero-veil { display: none; pointer-events: none; }
.sth-hero-product {
  background: var(--surface);
  color: var(--fg, var(--ink));
  padding: 0 0 12px;
}
.sth-hero-product img { width: 100%; height: 180px; object-fit: cover; }
.sth-hero-product > div { padding: 12px 14px 0; }
.sth-hero-product .card-actions { padding: 8px 14px 0; display: flex; gap: 8px; }

.sth-hero-lifestyle .sth-hero-stage {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas: "photo title" "photo sku";
  min-height: 62vh;
}
.sth-hero-lifestyle .sth-hero-frame { grid-area: photo; min-height: 62vh; }
.sth-hero-lifestyle .sth-hero-photo { height: 62vh; }
.sth-hero-lifestyle .sth-hero-card { grid-area: title; margin: 16px 16px 0; }
.sth-hero-lifestyle .sth-hero-product { grid-area: sku; margin: 12px 16px 16px; }

.sth-hero-editorial .sth-hero-stage { position: relative; }
.sth-hero-editorial .sth-hero-frame { min-height: 72vh; }
.sth-hero-editorial .sth-hero-photo { height: 72vh; object-position: center top; }
.sth-hero-editorial .sth-hero-veil {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0006 0%, transparent 28%, #000c 100%);
}
.sth-hero-editorial .sth-hero-card {
  position: absolute;
  left: 24px;
  bottom: 28px;
  z-index: 2;
  max-width: min(440px, 88vw);
  background: color-mix(in srgb, #111 88%, transparent);
  color: #f6f1ea;
}
.sth-hero-editorial .sth-hero-card h1,
.sth-hero-editorial .sth-hero-sub,
.sth-hero-editorial .sth-hero-sku strong { color: #f6f1ea; }
.sth-hero-editorial .kicker { color: var(--accent); }
.sth-hero-editorial .sth-hero-product {
  position: absolute;
  right: 24px;
  bottom: 28px;
  z-index: 2;
  width: min(320px, 38vw);
}

.sth-hero-conversion .sth-hero-stage { position: relative; }
.sth-hero-conversion .sth-hero-frame { min-height: 56vh; }
.sth-hero-conversion .sth-hero-photo { height: 56vh; }
.sth-hero-conversion .sth-hero-veil {
  display: block;
  position: absolute;
  inset: 0;
  background: #0007;
}
.sth-hero-conversion .sth-hero-card {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(92vw, 460px);
  text-align: center;
  align-items: center;
  background: color-mix(in srgb, #111 86%, transparent);
  color: #f6f1ea;
}
.sth-hero-conversion .sth-hero-card h1,
.sth-hero-conversion .sth-hero-sub,
.sth-hero-conversion .sth-hero-sku strong { color: #f6f1ea; }
.sth-hero-conversion .kicker { color: var(--accent); }
.sth-hero-conversion .sth-hero-sku { width: 100%; text-align: left; }
.sth-hero-conversion .sth-hero-product {
  position: relative;
  z-index: 3;
  width: min(360px, 92vw);
  margin: -52px auto 16px;
}

.sth-hero-tactile .sth-hero-stage {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  grid-template-areas: "title photo" "sku photo";
  min-height: 58vh;
}
.sth-hero-tactile .sth-hero-frame { grid-area: photo; min-height: 58vh; }
.sth-hero-tactile .sth-hero-photo { height: 58vh; object-position: center right; }
.sth-hero-tactile .sth-hero-card { grid-area: title; margin: 16px 16px 0; }
.sth-hero-tactile .sth-hero-product { grid-area: sku; margin: 12px 16px 16px; }

.sth-hero-origin .sth-hero-stage {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  margin: 0 16px 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  min-height: 52vh;
}
.sth-hero-origin .sth-hero-frame { min-height: 52vh; }
.sth-hero-origin .sth-hero-photo { height: 52vh; object-position: center left; }
.sth-hero-origin .sth-hero-card { margin: 20px; align-self: center; }
.sth-hero-origin .sth-hero-product { grid-column: 1 / -1; margin: 0 16px 16px; max-width: 400px; }

@media (max-width: 980px) {
  .sth-hero-logo-row { padding: 10px 12px 6px; }
  .sth-hero-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 10px;
  }
  .sth-hero-menu a { min-height: 44px; white-space: nowrap; }
  .sth-hero-lifestyle .sth-hero-stage,
  .sth-hero-tactile .sth-hero-stage,
  .sth-hero-origin .sth-hero-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .sth-hero-lifestyle .sth-hero-photo,
  .sth-hero-editorial .sth-hero-photo,
  .sth-hero-conversion .sth-hero-photo,
  .sth-hero-tactile .sth-hero-photo,
  .sth-hero-origin .sth-hero-photo {
    height: 42vh;
    max-height: 280px;
    min-height: 180px;
  }
  .sth-hero-editorial .sth-hero-veil,
  .sth-hero-conversion .sth-hero-veil { display: none; }
  .sth-hero-editorial .sth-hero-card,
  .sth-hero-conversion .sth-hero-card,
  .sth-hero-lifestyle .sth-hero-card,
  .sth-hero-tactile .sth-hero-card,
  .sth-hero-origin .sth-hero-card {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    margin: 12px;
    max-width: none;
    width: auto;
    text-align: left;
    align-items: flex-start;
    background: var(--surface);
    color: var(--fg, var(--ink));
  }
  .sth-hero-editorial .sth-hero-card h1,
  .sth-hero-editorial .sth-hero-sub,
  .sth-hero-editorial .sth-hero-sku strong,
  .sth-hero-conversion .sth-hero-card h1,
  .sth-hero-conversion .sth-hero-sub,
  .sth-hero-conversion .sth-hero-sku strong { color: inherit; }
  .sth-hero-editorial .sth-hero-product,
  .sth-hero-conversion .sth-hero-product,
  .sth-hero-lifestyle .sth-hero-product,
  .sth-hero-tactile .sth-hero-product,
  .sth-hero-origin .sth-hero-product {
    position: relative;
    left: auto; right: auto; bottom: auto;
    width: auto;
    max-width: none;
    margin: 0 12px 16px;
  }
  .sth-hero-card h1 { font-size: clamp(1.55rem, 8vw, 2.2rem); }
}