:root {
  --surface: #fdf9f6;
  --surface-low: #f7f3f0;
  --surface-container: #f1edea;
  --surface-high: #ebe7e4;
  --ink: #1c1b1a;
  --muted: #4c463d;
  --outline: #7d766b;
  --outline-soft: #cec5b9;
  --primary: #6a5c41;
  --primary-light: #d7c4a3;
  --secondary: #904c31;
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --section: clamp(76px, 10vw, 140px);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Hanken Grotesk", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

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

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

button,
input,
textarea {
  font: inherit;
}

select {
  font: inherit;
}

.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, var(--max));
  min-height: 84px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-soft) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.home-header {
  width: 100%;
  max-width: none;
  color: #070604;
  background: color-mix(in srgb, var(--surface) 34%, transparent);
}

.home-actions {
  display: flex;
  justify-self: end;
  gap: 18px;
  color: #070604;
}

.home-actions a {
  width: 18px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}

.home-actions a::first-letter {
  font-size: 0;
}

.home-actions a[aria-label="Search"]::after,
.home-actions a[aria-label="Shopping bag"]::after,
.home-actions a[aria-label="Account"]::after {
  display: block;
  font-size: 15px;
  line-height: 1;
}

.home-actions a[aria-label="Search"]::after {
  content: "⌕";
}

.home-actions a[aria-label="Shopping bag"]::after {
  content: "▢";
}

.home-actions a[aria-label="Account"]::after {
  content: "♙";
}

.brand {
  grid-column: 2;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: 0.16em;
  line-height: 1;
}

.primary-nav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

.primary-nav a,
.bag-link,
.eyebrow,
.button,
.contact-form label,
.values-list dt,
.journal article span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 16px;
  text-transform: uppercase;
}

.primary-nav a,
.bag-link {
  color: var(--muted);
  transition: color 180ms ease, opacity 180ms ease;
}

.primary-nav a:hover,
.bag-link:hover {
  color: var(--primary);
  opacity: 0.72;
}

.bag-link {
  justify-self: end;
}

.menu-toggle {
  display: none;
}

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

.home-hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: end center;
  overflow: hidden;
  background: var(--surface-container);
  padding: 120px 20px 122px;
  text-align: center;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--surface) 22%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, #000 18%, transparent), transparent 28%);
  pointer-events: none;
}

.home-hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 560px;
  color: #050403;
}

.home-hero-copy h1 {
  display: none;
}

.home-hero-copy p:first-child {
  margin: 0 0 28px;
  font-size: 16px;
}

.home-hero-copy p:nth-child(3) {
  margin: 0 0 34px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.45;
}

.home-hero-copy .button {
  min-width: 260px;
  border-color: color-mix(in srgb, #fff 72%, var(--ink));
  color: #080705;
  background: color-mix(in srgb, var(--surface) 10%, transparent);
}

.watch-film {
  display: none;
}

.home-editorial {
  display: grid;
  grid-template-columns: 32% 68%;
  gap: 0;
  min-height: 820px;
  align-items: center;
  background: #fff;
  overflow: hidden;
}

.home-editorial-copy {
  padding-left: max(0px, calc((100vw - var(--max)) / 2));
  padding-right: 44px;
}

.home-editorial-copy h2 {
  margin: 0 0 44px;
  color: #070604;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
}

.home-editorial-copy p {
  margin: 0 0 24px;
  color: #070604;
  font-size: 16px;
}

.home-editorial-copy a {
  display: inline-block;
  margin-top: 18px;
  border-bottom: 1px solid var(--ink);
  color: #070604;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-collage {
  position: relative;
  height: 760px;
}

.home-collage img {
  position: absolute;
  background: var(--surface-container);
}

.home-collage img:nth-child(1) {
  left: 4%;
  top: 8%;
  width: 31%;
  height: 58%;
}

.home-collage img:nth-child(2) {
  left: 25%;
  top: 18%;
  z-index: 2;
  width: 38%;
  height: 62%;
}

.home-collage img:nth-child(3) {
  right: -8%;
  top: 29%;
  width: 31%;
  height: 45%;
}

.home-social {
  padding: 54px 0 0;
  background: #fff;
  text-align: center;
}

.home-social-heading {
  margin-bottom: 54px;
}

.home-social-heading p {
  margin: 0 0 22px;
  color: #070604;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-social-heading h2 {
  margin: 0;
  color: #070604;
  font-family: "Hanken Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.social-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.social-strip a {
  aspect-ratio: 1;
  overflow: hidden;
}

.social-strip img {
  transition: transform 700ms ease;
}

.social-strip a:hover img {
  transform: scale(1.04);
}

.home-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: none;
  width: 100%;
  background: #fff;
  padding-top: 10px;
}

.home-footer nav {
  display: grid;
  justify-items: end;
  gap: 22px;
}

.home-footer small {
  grid-column: 1 / -1;
  margin-top: 110px;
  color: #070604;
  font-size: 12px;
}

.page-main {
  padding-top: 96px;
}

.page-hero,
.policy-page {
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(48px, 8vw, 96px);
  text-align: center;
}

.page-hero h1,
.policy-page h1,
.sustainability h1 {
  max-width: 900px;
  margin: 0 auto 18px;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(44px, 7vw, 78px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.page-hero p:not(.eyebrow),
.policy-page p {
  max-width: 680px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  min-height: 100vh;
  padding-top: 124px;
  padding-bottom: 64px;
  align-items: end;
}

.hero-media {
  position: relative;
  grid-column: 6 / -1;
  grid-row: 1;
  height: min(76vh, 820px);
  border-left: 1px solid var(--primary);
  background: var(--surface-container);
  overflow: hidden;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 10%, transparent), transparent 48%),
    linear-gradient(0deg, color-mix(in srgb, #000 22%, transparent), transparent 45%);
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease;
}

.hero-video.is-active {
  opacity: 1;
}

.hero-video-indicator {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hero-video-indicator span {
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, #fff 52%, transparent);
}

.hero-video-indicator span.is-active {
  background: #fff;
}

.hero-copy {
  grid-column: 1 / 7;
  grid-row: 1;
  z-index: 1;
  max-width: 680px;
  padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(28px, 5vw, 56px) 0;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 78%, transparent 100%);
}

.hero-copy h1,
.intro h2,
.editorial-collage h2,
.section-heading h2,
.lookbook h2,
.lookbook-grid h2,
.story h2,
.sustainability h2,
.contact h2 {
  margin: 0;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.hero-copy h1 {
  max-width: 760px;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.98;
}

.hero-copy p:not(.eyebrow) {
  max-width: 500px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--secondary);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button.primary {
  background: var(--primary);
  color: #fff;
}

.button.primary:hover {
  background: #52452c;
}

.button.secondary {
  color: var(--primary);
}

.button.secondary:hover {
  background: var(--surface-container);
}

.hero-note {
  position: absolute;
  right: var(--gutter);
  bottom: 64px;
  z-index: 2;
  display: grid;
  width: min(310px, 30vw);
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 18px 0 0;
  border-top: 1px solid var(--outline-soft);
  color: var(--muted);
}

.hero-note span {
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 28px;
}

.hero-note p {
  margin: 0;
}

.intro {
  padding-top: var(--section);
  padding-bottom: var(--section);
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  border-top: 1px solid var(--outline-soft);
  padding-top: 44px;
}

.intro h2 {
  grid-column: 1 / 7;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.12;
}

.intro p:not(.eyebrow) {
  grid-column: 8 / -1;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
}

.collections,
.editorial-collage,
.product-detail,
.complete-look,
.lookbook,
.lookbook-grid,
.story,
.artisans,
.sustainability,
.journal,
.contact,
.faq,
.style-guide {
  padding-top: var(--section);
  padding-bottom: var(--section);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--outline-soft);
  padding-bottom: 22px;
}

.section-heading h2,
.lookbook h2,
.lookbook-grid h2,
.story h2,
.sustainability h2,
.contact h2 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.12;
}

.editorial-collage {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  background: linear-gradient(var(--surface-low), var(--surface-low)) center / calc(100% - (var(--gutter) * 2)) 78% no-repeat;
}

.editorial-collage h2 {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
}

.collage-copy p:not(.eyebrow) {
  max-width: 390px;
  color: var(--muted);
  margin-bottom: 28px;
}

.collage-stack {
  position: relative;
  min-height: clamp(520px, 62vw, 760px);
}

.collage-stack img {
  position: absolute;
  background: var(--surface-container);
}

.collage-stack img:nth-child(1) {
  left: 0;
  top: 7%;
  width: 39%;
  height: 62%;
}

.collage-stack img:nth-child(2) {
  left: 28%;
  top: 0;
  z-index: 1;
  width: 43%;
  height: 82%;
  border: 12px solid var(--surface);
}

.collage-stack img:nth-child(3) {
  right: 0;
  bottom: 5%;
  width: 34%;
  height: 48%;
}

.shop-controls {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: -18px 0 42px;
  border-bottom: 1px solid var(--outline-soft);
  padding-bottom: 22px;
}

.shop-controls div {
  display: flex;
  gap: 18px;
  overflow-x: auto;
}

.shop-controls button,
.shop-controls label,
.shop-controls select {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.shop-controls button {
  border-bottom: 1px solid transparent;
  cursor: pointer;
  padding: 0 0 5px;
}

.shop-controls button.is-active,
.shop-controls button:hover,
.shop-controls select {
  border-color: var(--primary);
  color: var(--primary);
}

.shop-controls label {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}

.shop-controls select {
  border-bottom: 1px solid var(--outline-soft);
  border-radius: 0;
  padding: 4px 22px 4px 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.product-card:nth-child(2) {
  margin-top: 72px;
}

.wide-product {
  margin-top: -22px;
}

.product-image {
  display: block;
  aspect-ratio: 3 / 4.35;
  overflow: hidden;
  background: var(--surface-container);
}

.product-image img,
.lookbook-rail img,
.story-image img {
  transition: transform 700ms ease;
}

.product-image:hover img,
.lookbook-rail img:hover,
.story-image:hover img {
  transform: scale(1.025);
}

.product-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 16px;
  color: var(--muted);
}

.product-meta h3,
.product-meta p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.product-meta p {
  color: var(--primary);
  font-weight: 500;
}

.product-detail {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  border-top: 1px solid var(--outline-soft);
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.product-gallery img {
  aspect-ratio: 3 / 4;
  background: var(--surface-container);
}

.product-gallery-main {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5.1;
}

.product-panel {
  position: sticky;
  top: 112px;
  border-top: 1px solid var(--outline-soft);
  padding-top: 24px;
}

.product-kicker,
.option-header,
.product-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-kicker,
.option-header span,
.option-header button,
.option-label,
.stock-note,
.product-accordions summary {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 16px;
  text-transform: uppercase;
}

.product-kicker {
  color: var(--muted);
}

.product-kicker a,
.option-header button {
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 0 0 2px;
}

.product-panel h2 {
  margin: 30px 0 12px;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.product-price {
  margin: 0 0 24px;
  color: var(--primary);
  font-size: 20px;
}

.product-description {
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.product-option {
  border-top: 1px solid color-mix(in srgb, var(--outline-soft) 70%, transparent);
  padding: 24px 0;
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.size-grid input {
  position: absolute;
  opacity: 0;
}

.size-grid span {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1px solid var(--outline-soft);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.size-grid input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.stock-note {
  margin: 10px 0 0;
  color: var(--secondary);
}

.color-row {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}

.color-chip {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 3px;
}

.color-chip::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--chip);
}

.color-chip.is-active,
.color-chip:hover {
  border-color: var(--primary);
}

.product-actions {
  align-items: stretch;
  margin-bottom: 30px;
}

.product-actions .button {
  flex: 1;
}

.product-accordions {
  border-top: 1px solid var(--outline-soft);
}

.product-accordions details {
  border-bottom: 1px solid var(--outline-soft);
  padding: 0;
}

.product-accordions summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  list-style: none;
  padding: 20px 0;
  color: var(--primary);
  cursor: pointer;
}

.product-accordions summary::-webkit-details-marker {
  display: none;
}

.product-accordions ul,
.product-accordions p {
  margin: 0;
  padding: 0 0 22px;
  color: var(--muted);
}

.product-accordions ul {
  padding-left: 18px;
}

.complete-look {
  background: var(--surface-low);
}

.mini-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mini-product img {
  aspect-ratio: 3 / 4;
  margin-bottom: 15px;
  background: var(--surface-container);
}

.mini-product h3,
.mini-product p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.mini-product p {
  margin-top: 4px;
  color: var(--primary);
  font-weight: 500;
}

.lookbook {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 24px;
  background: linear-gradient(var(--surface-container), var(--surface-container)) center / calc(100% - (var(--gutter) * 2)) 100% no-repeat;
}

.lookbook-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 72px 24px;
}

.lookbook-cards article:nth-child(even) {
  margin-top: 86px;
}

.lookbook-cards img {
  aspect-ratio: 3 / 4;
  margin-bottom: 20px;
  background: var(--surface-container);
}

.lookbook-cards h3 {
  margin: 0 0 6px;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
}

.lookbook-cards p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lookbook-copy {
  align-self: center;
  padding-block: 48px;
}

.lookbook-copy p:not(.eyebrow) {
  max-width: 390px;
  color: var(--muted);
}

.lookbook-rail {
  display: grid;
  grid-template-columns: 1fr 0.82fr 1fr;
  gap: 18px;
  align-items: center;
  overflow: hidden;
}

.lookbook-rail img {
  height: clamp(360px, 54vw, 720px);
  border-left: 1px solid var(--outline-soft);
}

.lookbook-rail img:nth-child(2) {
  height: clamp(300px, 44vw, 600px);
}

.story {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
}

.story-image {
  grid-column: 1 / 6;
  height: clamp(500px, 62vw, 760px);
  overflow: hidden;
  background: var(--surface-container);
}

.story-copy {
  grid-column: 7 / -1;
}

.story-copy p:not(.eyebrow) {
  max-width: 560px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.values-list {
  display: grid;
  gap: 0;
  margin: 42px 0 0;
  border-top: 1px solid var(--outline-soft);
}

.values-list div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--outline-soft);
}

.values-list dt {
  color: var(--primary);
}

.values-list dd {
  margin: 0;
  color: var(--muted);
}

.centered-heading {
  display: block;
  text-align: center;
}

.artisan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.artisan-grid article {
  position: relative;
  min-height: clamp(380px, 42vw, 560px);
  overflow: hidden;
  background: var(--surface-container);
}

.artisan-grid article:nth-child(2) {
  margin-top: 56px;
}

.artisan-grid article:nth-child(3) {
  margin-top: -32px;
}

.artisan-grid div {
  position: absolute;
  inset: auto 0 0;
  padding: 34px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--surface) 95%, transparent));
}

.artisan-grid h3 {
  margin: 0 0 8px;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
}

.artisan-grid p {
  margin: 0;
  color: var(--muted);
}

.sustainability {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(32px, 8vw, 110px);
  align-items: center;
  border-top: 1px solid var(--outline-soft);
}

.sustainability-image {
  height: clamp(460px, 56vw, 680px);
  background: var(--surface-container);
}

.sustainability p:not(.eyebrow) {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.journal {
  background: var(--primary);
  color: #fff;
}

.journal .eyebrow {
  color: var(--primary-light);
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: color-mix(in srgb, #fff 35%, transparent);
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
}

.journal article {
  min-height: 270px;
  padding: clamp(24px, 4vw, 42px);
  background: var(--primary);
}

.journal article span {
  color: var(--primary-light);
}

.journal h3 {
  margin: 54px 0 16px;
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.18;
}

.journal p {
  margin: 0;
  color: color-mix(in srgb, #fff 78%, var(--primary-light));
}

.contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 7vw, 96px);
  border-bottom: 1px solid var(--outline-soft);
}

.atelier-card {
  margin-top: 42px;
  border-top: 1px solid var(--outline-soft);
  padding-top: 24px;
  color: var(--muted);
}

.atelier-card h3 {
  margin: 0 0 18px;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
}

.atelier-card p {
  margin: 0 0 16px;
}

.faq-list {
  max-width: 920px;
  margin-left: auto;
  border-top: 1px solid var(--outline-soft);
}

.faq-list details {
  border-bottom: 1px solid var(--outline-soft);
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 0;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  list-style: none;
  text-transform: uppercase;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list p {
  margin: 0;
  padding-bottom: 24px;
  color: var(--muted);
}

.style-guide {
  background: var(--surface-container);
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.style-grid article {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  padding: 18px;
}

.style-grid span {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 16px;
  border: 1px solid var(--outline-soft);
  background: var(--swatch);
}

.style-grid h3,
.style-grid p {
  margin: 0;
}

.style-grid h3 {
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.style-grid p {
  margin-top: 6px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
}

.contact-form {
  display: grid;
  gap: 28px;
}

.contact-form label {
  display: grid;
  gap: 10px;
  color: var(--primary);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  outline: 0;
  padding: 8px 0 13px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--secondary);
}

.contact-form .button {
  justify-self: start;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 34px var(--gutter) 48px;
  color: var(--muted);
}

.site-footer p {
  margin: 0;
  color: var(--primary);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 24px;
  letter-spacing: 0.16em;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 48px 1fr 48px;
    min-height: 76px;
  }

  .brand {
    justify-self: center;
  }

  .home-header {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  .home-actions {
    gap: 12px;
  }

  .home-actions a[aria-label="Search"] {
    display: none;
  }

  .home-hero {
    min-height: 88vh;
    place-items: center;
    padding: 96px 28px 56px;
  }

  .home-hero::after {
    background: linear-gradient(0deg, color-mix(in srgb, #000 34%, transparent), transparent 55%),
      linear-gradient(180deg, color-mix(in srgb, #000 22%, transparent), transparent 30%);
  }

  .home-hero-copy {
    align-self: center;
    color: #fff;
  }

  .home-hero-copy p:first-child {
    display: none;
  }

  .home-hero-copy h1 {
    display: block;
    margin: 0 0 26px;
    font-family: "Libre Caslon Text", Georgia, serif;
    font-size: clamp(48px, 14vw, 76px);
    font-weight: 400;
    line-height: 0.98;
  }

  .home-hero-copy p:nth-child(3) {
    display: none;
  }

  .home-hero-copy .button {
    min-width: 0;
    width: auto;
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
  }

  .watch-film {
    position: absolute;
    bottom: 56px;
    left: 50%;
    z-index: 2;
    display: block;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  .watch-film::before {
    content: "▷";
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0 auto 9px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
  }

  .home-editorial {
    display: block;
    min-height: 0;
    background: var(--surface);
    padding: 78px 22px;
    text-align: center;
  }

  .home-editorial-copy {
    padding: 0;
  }

  .home-editorial-copy h2 {
    margin-bottom: 28px;
    font-size: clamp(30px, 8vw, 42px);
  }

  .home-editorial-copy p {
    max-width: 330px;
    margin: 0 auto 14px;
    color: var(--muted);
    font-size: 14px;
  }

  .home-editorial-copy a {
    margin-top: 28px;
    color: var(--primary);
  }

  .home-collage {
    display: none;
  }

  .home-social {
    padding: 72px 22px;
    background: var(--surface-low);
  }

  .home-social-heading h2 {
    font-family: "Libre Caslon Text", Georgia, serif;
    font-size: 34px;
    letter-spacing: -0.02em;
  }

  .social-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .home-footer {
    display: grid;
    justify-items: center;
    text-align: center;
    background: var(--surface-container);
    padding: 74px 22px 42px;
  }

  .home-footer p {
    margin-bottom: 42px;
    font-size: 34px;
  }

  .home-footer nav {
    justify-items: center;
    gap: 20px;
  }

  .home-footer small {
    margin-top: 54px;
  }

  .menu-toggle {
    position: relative;
    z-index: 12;
    display: grid;
    gap: 6px;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    padding: 13px 8px;
  }

  .menu-toggle span {
    display: block;
    height: 1px;
    background: var(--primary);
  }

  .primary-nav {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    min-height: 100vh;
    padding: 96px var(--gutter);
    background: var(--surface);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .primary-nav a {
    font-family: "Libre Caslon Text", Georgia, serif;
    font-size: clamp(36px, 11vw, 58px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-transform: none;
  }

  body.menu-open .primary-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .bag-link {
    font-size: 0;
  }

  .bag-link::after {
    content: "Bag";
    font-size: 12px;
  }

  .hero,
  .intro-grid,
  .editorial-collage,
  .product-detail,
  .lookbook,
  .lookbook-cards,
  .story,
  .artisan-grid,
  .sustainability,
  .contact,
  .journal-grid,
  .mini-product-grid,
  .style-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 100px;
  }

  .hero-media,
  .hero-copy,
  .story-image,
  .story-copy,
  .intro h2,
  .intro p:not(.eyebrow) {
    grid-column: auto;
  }

  .hero-media {
    height: min(118vw, 680px);
    border-left: 0;
  }

  .hero-copy {
    padding: 28px 0 0;
    background: transparent;
  }

  .hero-note {
    position: static;
    width: auto;
    margin-top: 28px;
  }

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

  .product-card:nth-child(2) {
    margin-top: 0;
  }

  .wide-product {
    margin-top: 0;
  }

  .shop-controls {
    display: grid;
  }

  .editorial-collage {
    background: var(--surface-low);
  }

  .collage-stack {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .collage-stack img,
  .collage-stack img:nth-child(1),
  .collage-stack img:nth-child(2),
  .collage-stack img:nth-child(3) {
    position: static;
    width: 100%;
    height: min(118vw, 620px);
    border: 0;
  }

  .product-panel {
    position: static;
  }

  .product-gallery {
    display: flex;
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
  }

  .product-gallery img,
  .product-gallery-main {
    flex: 0 0 82vw;
    height: min(112vw, 620px);
    aspect-ratio: auto;
    scroll-snap-align: start;
  }

  .product-actions {
    display: grid;
  }

  .lookbook {
    background: var(--surface-container);
  }

  .lookbook-cards {
    gap: 42px;
  }

  .lookbook-cards article:nth-child(even),
  .artisan-grid article:nth-child(2),
  .artisan-grid article:nth-child(3) {
    margin-top: 0;
  }

  .artisan-grid article {
    min-height: min(118vw, 620px);
  }

  .lookbook-rail {
    display: flex;
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    padding: 0 var(--gutter) 20px;
    scroll-snap-type: x mandatory;
  }

  .lookbook-rail img,
  .lookbook-rail img:nth-child(2) {
    flex: 0 0 76vw;
    height: 108vw;
    max-height: 620px;
    scroll-snap-align: start;
  }

  .story-image {
    height: min(118vw, 650px);
  }

  .values-list div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .contact-form .button {
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .button-row,
  .button {
    width: 100%;
  }

  .section-heading {
    display: block;
  }

  .section-heading .eyebrow {
    margin-bottom: 14px;
  }

  .product-meta,
  .site-footer {
    display: grid;
  }
}