:root {
  color-scheme: light;
  --color-ink: #0b0b0b;
  --color-paper: #ffffff;
  --color-surface: #f5f5f3;
  --color-surface-warm: #f2eee7;
  --color-line: #e4e4e1;
  --color-line-strong: #cfcfca;
  --color-muted: #6c6c68;
  --color-disabled: #a7a7a2;
  --font-sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.075em;
  --tracking-wordmark: 0.11em;
  --text-utility: clamp(0.6875rem, 0.66rem + 0.08vw, 0.75rem);
  --text-caption: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-body: clamp(0.9375rem, 0.88rem + 0.16vw, 1rem);
  --text-section: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --text-display: clamp(2rem, 1.2rem + 4.2vw, 4.75rem);
  --leading-body: 1.5;
  --page-gutter: clamp(1rem, 3vw, 3rem);
  --page-max: 120rem;
  --content-max: 100rem;
  --section-space: clamp(4.5rem, 8vw, 9rem);
  --section-space-small: clamp(3rem, 5vw, 5.5rem);
  --grid-gap: clamp(0.75rem, 1.4vw, 1.5rem);
  --header-height-mobile: 3.75rem;
  --header-height-desktop: 4.75rem;
  --radius-subtle: 0.125rem;
  --radius-pill: 999px;
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-ui: 280ms;
  --duration-reveal: 650ms;
  --z-header: 50;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

::selection {
  color: var(--color-paper);
  background: var(--color-ink);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 200;
  padding: 0.8rem 1rem;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-subtle);
}

.skip-link:focus {
  top: 1rem;
}

.page-shell {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.content-shell {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: var(--header-height-mobile);
  padding-inline: var(--page-gutter);
}

.site-header__left,
.site-header__right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.site-header__left {
  justify-self: start;
}

.site-header__right {
  justify-self: end;
}

.site-header__brand {
  justify-self: center;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

.icon-button {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  border-radius: 50%;
  cursor: pointer;
}

.icon {
  display: inline-grid;
  gap: 0.2rem;
}

.icon span {
  display: block;
  width: 0.95rem;
  height: 1px;
  background: var(--color-ink);
}

.header-link {
  font-size: var(--text-utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.header-link.is-active {
  color: var(--color-ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* --- Collections dropdown ------------------------------------------------ */

.nav-group {
  position: static;
}

.nav-group__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-group__chevron {
  width: 0.35rem;
  height: 0.35rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform var(--duration-ui) var(--ease-standard);
}

.nav-group__trigger[aria-expanded="true"] {
  color: var(--color-ink);
}

.nav-group__trigger[aria-expanded="true"] .nav-group__chevron {
  transform: translateY(0.05rem) rotate(225deg);
}

.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-header);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  opacity: 0;
  transform: translateY(-0.4rem);
  transition: opacity var(--duration-ui) var(--ease-standard),
    transform var(--duration-ui) var(--ease-standard);
}

.nav-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.nav-panel__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.25rem 1.5rem;
  padding: 1.6rem var(--page-gutter) 2rem;
}

.nav-panel__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-ui) var(--ease-standard);
}

.nav-panel__link:hover,
.nav-panel__link:focus-visible {
  border-bottom-color: var(--color-ink);
}

.nav-panel__link--all {
  color: var(--color-muted);
  font-size: var(--text-utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Drawer (all widths) ------------------------------------------------- */

.site-drawer {
  position: fixed;
  inset: var(--header-height-mobile) 0 0 0;
  z-index: calc(var(--z-header) - 1);
  overflow-y: auto;
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  transform: translateX(-100%);
  transition: transform 0.35s var(--ease-standard);
}

.site-drawer[hidden] {
  display: block;
  visibility: hidden;
}

.site-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.site-drawer__inner {
  display: grid;
  gap: 0.1rem;
  padding-block: 2rem 4rem;
  max-width: 34rem;
  margin-inline: 0;
}

.site-drawer__inner a {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 1rem;
}

.site-drawer__inner a:hover {
  color: var(--color-muted);
}

.site-drawer__lead {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  letter-spacing: var(--tracking-tight);
}

.site-drawer__label {
  margin: 2rem 0 0.4rem;
}

.hero {
  position: relative;
  padding-top: 0;
  padding-bottom: clamp(3rem, 5vw, 4rem);
}

.hero__carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: clamp(26rem, 50vw, 42rem);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease-luxury);
  display: grid;
  place-items: center start;
}

.hero__slide.is-active {
  opacity: 1;
  position: relative;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  min-height: clamp(26rem, 50vw, 42rem);
}

.hero__overlay {
  position: absolute;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  max-width: min(44rem, 55%);
  z-index: 1;
  color: var(--color-paper);
  text-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}

.hero__caption {
  margin: 1rem 0;
  opacity: 0.88;
  font-size: var(--text-body);
}

.hero__controls {
  position: absolute;
  left: 3rem;
  bottom: 2rem;
  display: flex;
  gap: 0.75rem;
  z-index: 1;
}

.hero__dot {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.hero__dot.is-active {
  background: rgba(255, 255, 255, 0.95);
}

.hero__copy {
  display: none;
}

.hero-actions {
  margin-top: 1.2rem;
}

.hero__overlay .hero-actions .btn {
  border-color: rgba(255, 255, 255, 0.85);
}

.hero__overlay .btn-primary {
  background: var(--color-paper);
  color: var(--color-ink);
}

.hero__overlay .btn-secondary {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-paper);
}

.hero__overlay .hero-actions .btn:hover {
  transform: translateY(0);
}

.hero__overlay h1,
.hero__overlay p,
.hero__overlay .eyebrow {
  color: var(--color-paper);
}

.hero__overlay h1 {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  margin-bottom: 1rem;
}

.hero__overlay p {
  max-width: 36rem;
}

.hero__overlay .eyebrow {
  margin-bottom: 1rem;
  letter-spacing: 0.14em;
}

.hero__overlay .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.08) 45%, transparent 100%);
  pointer-events: none;
}

.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at left center, rgba(0, 0, 0, 0.22), transparent 35%);
  pointer-events: none;
}

.hero__media img,
.feature-section__media img,
.product-card__media img,
.story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero__media {
  min-height: clamp(26rem, 50vw, 42rem);
  width: 100%;
}

.hero__media img {
  aspect-ratio: 16 / 9;
  min-height: 100%;
}

.hero__copy {
  max-width: 42rem;
  padding: 1.4rem 0;
}

.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--color-muted);
  font-size: var(--text-utility);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2 {
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-solid);
}

h1 {
  font-size: var(--text-display);
  margin-bottom: 1rem;
}

h2 {
  font-size: var(--text-section);
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0.55rem;
}

p {
  font-size: var(--text-body);
  color: var(--color-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.45rem;
}

.btn {
  display: inline-flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  border-radius: var(--radius-subtle);
  border: 1px solid var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-ui) var(--ease-standard), color var(--duration-ui) var(--ease-standard);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
}

.section-heading {
  margin-bottom: 1.4rem;
}

.category-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.category-card {
  display: grid;
  gap: 0.7rem;
}

.category-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-reveal) var(--ease-luxury);
}

.category-card:hover .category-card__media img {
  transform: scale(1.03);
}

.category-card h3 {
  margin: 0;
  font-size: 1rem;
}

.feature-stack {
  display: grid;
  gap: 1.5rem;
}

.feature-section {
  display: grid;
  gap: 1.2rem;
  align-items: center;
  padding: 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}

.feature-section--reverse {
  grid-template-columns: 1.05fr 0.95fr;
}

.feature-section__media {
  min-height: 20rem;
}

.media-feature-1 {
  background: linear-gradient(135deg, #f8f2ea 0%, #e7d8bf 100%);
}

.media-feature-2 {
  background: linear-gradient(135deg, #efe7d9 0%, #d7c0a0 100%);
}

.media-story-1,
.media-story-2,
.media-story-3 {
  background: linear-gradient(135deg, rgba(232, 221, 205, 0.85) 0%, rgba(214, 197, 172, 0.85) 100%);
}

.feature-section__body {
  display: grid;
  gap: 0.8rem;
  max-width: 32rem;
}

.luxury-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  width: fit-content;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.luxury-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--duration-ui) var(--ease-luxury);
}

.luxury-link:hover::after,
.luxury-link:focus-visible::after {
  transform: scaleX(0.55);
  transform-origin: left;
}

.product-showcase {
  display: grid;
  gap: 1.4rem;
}

.product-showcase__intro {
  max-width: 34rem;
}

.product-detail {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 1rem;
  align-items: start;
}

.product-detail__featured,
.product-detail__thumb {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}

.product-detail__featured img,
.product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-detail__featured img {
  aspect-ratio: 4 / 5;
}

.product-detail__gallery {
  display: grid;
  gap: 1rem;
}

.product-detail__thumb img {
  aspect-ratio: 4 / 5;
}

.product-detail__copy {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.7rem;
  max-width: 38rem;
  padding-top: 0.2rem;
}

.product-grid {
  display: grid;
  gap: 1.75rem;
}

.product-grid__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.product-card {
  display: grid;
  gap: 1rem;
}

.product-card__media {
  min-height: 24rem;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card__info {
  display: grid;
  gap: 0.55rem;
}

.product-card__info h3 {
  margin: 0;
  font-size: 1.1rem;
}

.product-card__info p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.product-card__info span {
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
}

.product-page {
  display: grid;
  gap: 2rem;
}

.product-page__hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items: start;
}

.product-page__gallery {
  display: grid;
  gap: 1rem;
}

.product-page__image,
.product-page__thumbs img {
  width: 100%;
  display: block;
}

.product-page__image {
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

.product-page__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.product-page__thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.product-page__thumbs img {
  min-height: 12rem;
  object-fit: cover;
  display: block;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}

.product-page__details {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.product-price {
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  margin-top: 0.5rem;
}

.product-description {
  max-width: 42rem;
}

.product-features {
  display: grid;
  gap: 0.6rem;
  padding-left: 1rem;
  margin: 0;
  list-style: none;
}

.product-features li::before {
  content: "•";
  margin-right: 0.6rem;
  color: var(--color-ink);
}

.product-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.media-product-1 {
  background: linear-gradient(135deg, #f3e9db 0%, #dfcaa8 100%);
}

.media-product-2 {
  background: linear-gradient(135deg, #efe7df 0%, #d4c3a7 100%);
}

.media-product-3 {
  background: linear-gradient(135deg, #f6f1ea 0%, #e0d2bc 100%);
}

.media-product-4 {
  background: linear-gradient(135deg, #efe8dc 0%, #d6c3a3 100%);
}

.product-card__info {
  display: grid;
  gap: 0.25rem;
}

.product-card__info h3 {
  margin-bottom: 0;
}

.product-card__info p {
  font-size: 0.95rem;
}

.product-card__info span {
  font-size: 0.94rem;
  font-weight: var(--font-weight-medium);
}

.story-section {
  display: grid;
  gap: 1.4rem;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.story-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem 0;
}

.story-card__media {
  aspect-ratio: 4 / 5;
  background: var(--color-surface-warm);
}

.media-story-1 {
  background: linear-gradient(135deg, #eee5d9 0%, #d8c2a4 100%);
}

.media-story-2 {
  background: linear-gradient(135deg, #f4f0e9 0%, #ddd0b6 100%);
}

.media-story-3 {
  background: linear-gradient(135deg, #efe4d5 0%, #d8c3a2 100%);
}

.cta-section {
  text-align: center;
  padding: 2.2rem 1.25rem;
  border: 1px solid var(--color-line);
  background: linear-gradient(135deg, #f6efe8 0%, #ffffff 100%);
}

.site-footer {
  padding: 0 0 2.5rem;
  color: var(--color-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.footer-grid h3 {
  margin-bottom: 0.6rem;
}

.footer-grid a {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Breadcrumb ---------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.5rem;
  font-size: var(--text-caption);
  color: var(--color-muted);
}

.breadcrumb a:hover {
  color: var(--color-ink);
}

.breadcrumb span[aria-hidden] {
  color: var(--color-disabled);
}

/* --- Collection tags ----------------------------------------------------- */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.tag-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--duration-ui) var(--ease-standard),
    border-color var(--duration-ui) var(--ease-standard);
}

.tag-link:hover,
.tag-link:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

/* --- Collection page ----------------------------------------------------- */

.collection-hero {
  position: relative;
  display: grid;
  isolation: isolate;
}

.collection-hero img {
  width: 100%;
  height: clamp(20rem, 42vw, 34rem);
  object-fit: cover;
  object-position: center;
}

.collection-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 45%, transparent 70%);
  pointer-events: none;
}

.collection-hero__overlay {
  position: absolute;
  inset-block: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  max-width: min(var(--content-max), 100%);
  color: var(--color-paper);
  text-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}

.collection-hero__overlay .eyebrow,
.collection-hero__overlay h1,
.collection-hero__overlay p {
  color: var(--color-paper);
  max-width: 38rem;
}

.collection-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.collection-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
  border-bottom: 1px solid var(--color-line);
}

.collection-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.collection-card:nth-child(even) .collection-card__media {
  order: 2;
}

.collection-card__media {
  overflow: hidden;
  background: var(--color-surface);
}

.collection-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--duration-reveal) var(--ease-luxury);
}

.collection-card:hover .collection-card__media img {
  transform: scale(1.03);
}

.collection-card__body {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

/* --- Product campaign image ---------------------------------------------- */

.product-mood {
  padding-block: 0 var(--section-space-small);
}

.product-mood img {
  width: 100%;
  max-height: 36rem;
  object-fit: cover;
}

/* --- Story / editorial layout -------------------------------------------- */

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.story-layout--reverse .story-layout__media {
  order: 2;
}

.story-layout__media {
  background: var(--color-surface);
  overflow: hidden;
}

.story-layout__media img {
  width: 100%;
  object-fit: cover;
}

.story-layout__body {
  display: grid;
  gap: 1rem;
  max-width: 42rem;
}

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.125rem, 0);
  transition: opacity var(--duration-reveal) var(--ease-luxury), transform var(--duration-reveal) var(--ease-luxury);
}

/* Without JS nothing would ever be revealed — keep the content visible. */
html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal][data-visible="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

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

@media (min-width: 768px) {
  .site-header__inner {
    min-height: var(--header-height-desktop);
  }

  .site-drawer {
    inset-block-start: var(--header-height-desktop);
  }
}

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

  .product-detail {
    grid-template-columns: 1fr;
  }

  .product-detail__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collection-card,
  .story-layout {
    grid-template-columns: 1fr;
  }

  .collection-card:nth-child(even) .collection-card__media,
  .story-layout--reverse .story-layout__media {
    order: 0;
  }
}

@media (max-width: 767px) {
  /* Section rhythm designed for a wide screen reads as dead space on a phone.
     Note this value lands TWICE at every section boundary — one section's
     padding-bottom meets the next one's padding-top — so the visible gap is
     double what is written here. The desktop 4.5rem put 144px of nothing
     between every band; 0.7rem lands a 22px break, which is what the phone
     layout was asked for. Photography carries the separation here — the bands
     are full-bleed image grids, so they read as distinct without much air. */
  :root {
    --section-space: 0.7rem;
    --section-space-small: 0.55rem;
  }

  .section-heading {
    margin-bottom: 0.35rem;
  }

  /* Headings carry their own bottom margin, which collapses through the
     heading block and lands on top of the gap set above — enough on its own to
     undo most of the squeeze. */
  .section-heading > :last-child {
    margin-bottom: 0;
  }

  /* The hero's own bottom padding stacks on top of the first section's, so it
     is the single widest gap on the page if left at the desktop value. */
  .hero {
    padding-bottom: 0.7rem;
  }

  /* These sections are grids whose first row is the heading, so their row gap
     lands under the heading on top of its own margin — the two together, not
     the margin alone, are what separates a heading from its images. */
  .product-showcase,
  .story-section {
    gap: 0.5rem;
  }

  .product-grid {
    gap: 0.6rem;
  }

  /* The CTA is a bordered card, so this is interior padding rather than space
     between bands — but it still reads as the widest gap on the page, because
     it stacks on the section padding above it. */
  .cta-section {
    padding: 1.4rem 1.25rem;
  }

  /* --- hero -------------------------------------------------------------
     These rules previously targeted .hero__inner and .hero__media, which no
     longer exist in the markup, so the hero had no mobile styling at all.
     Anchor the copy to the bottom instead of centring it, which is what made
     it collide with the carousel dots. */
  /* The carousel and the image had different min-heights (480px vs 416px),
     leaving a white band under the photo that the dots fell into. Let the
     image alone define the height so they cannot drift apart again. */
  .hero__carousel {
    min-height: 0;
  }

  .hero__slide img {
    min-height: clamp(26rem, 112vw, 32rem);
    /* The hero photos are 16:9 with the model standing right of centre against
       an empty wall. A portrait phone box shows only half that width, so the
       default centre crop framed the wall and cut the model off at the edge.
       Shifting the focal point right keeps her whole; --focus lets a single
       image opt out inline if a future shot is composed the other way. */
    object-position: var(--focus, 90%) center;
  }

  .collection-hero img {
    object-position: var(--focus, 85%) center;
  }

  .hero__overlay {
    left: var(--page-gutter);
    right: var(--page-gutter);
    top: auto;
    bottom: 3.25rem;
    transform: none;
    max-width: none;
  }

  .hero__overlay p {
    max-width: none;
  }

  .hero__overlay .hero-actions {
    gap: 0.6rem;
  }

  .hero__overlay .hero-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .hero__controls {
    left: var(--page-gutter);
    bottom: 1.1rem;
  }

  .site-header__inner {
    min-height: var(--header-height-mobile);
  }

  .site-nav,
  .site-header__right .header-link {
    display: none;
  }

  /* --- grids ------------------------------------------------------------
     .product-grid__list had no mobile rule at all, so it stayed at four
     columns — roughly 85px per card on a 390px screen. Two columns is the
     standard mobile shop layout and keeps the images legible. */
  .product-grid__list,
  .category-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* The product page stayed two-up on phones because every responsive rule for
     it targeted .product-detail*, while the markup uses .product-page* — so the
     name, price, and CTA were crammed into a ~150px column. */
  .product-page__hero {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .product-page__actions .btn {
    flex: 1 1 100%;
    text-align: center;
  }

  /* Fixed min-heights built for wide cards make narrow ones absurdly tall.
     Aspect ratios scale with the column instead. */
  .product-card__media {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .product-card__info h3 {
    font-size: 0.95rem;
  }

  .product-card__info p {
    font-size: 0.82rem;
  }

  .category-card__media {
    aspect-ratio: 3 / 4;
  }

  .feature-section,
  .feature-section--reverse {
    grid-template-columns: 1fr;
  }

  .feature-section__media {
    min-height: 14rem;
  }

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

/* ---------------------------------------------------------- language switch */

.header-link--lang {
  margin-left: 0.35rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--color-line-strong);
  color: var(--color-muted);
}

.header-link--lang:hover {
  color: var(--color-ink);
}

/* The header hides its links on mobile, but the language switch has to stay —
   it is the only way a visitor changes language, and the drawer does not
   carry it. */
@media (max-width: 767px) {
  .site-header__right .header-link--lang {
    display: inline-block;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    font-size: 0.78rem;
  }
}

/* -------------------------------------------------------------- product reel */

.product-reel__video {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-line);
  object-fit: cover;
}

@media (max-width: 767px) {
  .product-reel__video {
    width: 100%;
  }
}

/* --------------------------------------------------------------- legal pages */

.legal__meta {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal__body {
  max-width: 44rem;
  margin-top: 2.5rem;
  line-height: 1.75;
}

.legal__lede {
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.15rem;
  line-height: 1.65;
}

.legal__body h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  font-weight: 500;
}

.legal__body p,
.legal__body ul {
  margin-bottom: 1.1rem;
  color: #3a3a37;
}

.legal__body ul {
  padding-left: 1.1rem;
  list-style: disc;
}

.legal__body li {
  margin-bottom: 0.5rem;
}

.legal__body a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Unresolved business details — deliberately loud so they cannot ship unnoticed. */
.legal-todo {
  padding: 0 0.3em;
  background: #fff2b8;
  box-shadow: inset 0 -1px 0 #d9b800;
  font-style: italic;
}

@media (max-width: 640px) {
  .legal__lede {
    font-size: 1.05rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}