/* J'Noir Maison — site styles */

:root {
  --ground: #E8E0D4;
  --ink: #1A1613;
  --ink-soft: #4A3F36;
  --muted: #6A5E54;
  --line: #C8BFB3;
  --gold: #A8853C;
  --hover: #4A3020;
  --footer-text: #A39A8F;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --caps: 'Cinzel', Georgia, serif;

  --pad-x: 48px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); }
a:hover { color: var(--hover); }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -48px;
  background: var(--ink); color: var(--ground);
  padding: 10px 16px; z-index: 100;
  font-family: var(--caps); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { top: 16px; color: var(--ground); }

/* ---------- shared type ---------- */

.eyebrow {
  display: block;
  margin: 0 0 28px;
  font-family: var(--caps);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--ink);
}

.display {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.body {
  margin: 0 0 20px;
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}
.body:last-child { margin-bottom: 0; }
.body--lg { font-size: 1.15rem; }

.rule { width: 48px; height: 1px; background: var(--gold); margin: 0 auto; }
.rule--short { width: 40px; margin-bottom: 20px; }

/* ---------- buttons ---------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 15px 36px;
  font-family: var(--caps);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.btn--solid { background: var(--ink); color: var(--ground); border: 1px solid var(--ink); }
.btn--solid:hover { background: var(--hover); border-color: var(--hover); color: var(--ground); }
.btn--outline { border: 1px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--ground); }
.btn--email { letter-spacing: 0.25em; text-transform: none; font-size: 0.8rem; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 var(--pad-x);
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.nav__link {
  font-family: var(--caps);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 12px 0;
}
.nav__link:last-child { justify-self: end; }
.nav__logo img { height: 48px; width: auto; mix-blend-mode: multiply; }

/* ---------- hero ---------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  min-height: 600px;
  border-bottom: 1px solid var(--line);
}
.hero__text {
  flex: 1 1 420px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 88px 64px 88px 80px;
}
.hero__title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.hero__lede {
  margin: 0 0 52px;
  max-width: 380px;
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}
.hero__image {
  flex: 1 1 420px; min-width: 0;
  overflow: hidden;
  animation: fadeFromLeft 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.hero__image img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; }

@keyframes fadeFromLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- sections ---------- */

.section { padding: 88px var(--pad-x); border-bottom: 1px solid var(--line); }
.container { max-width: 1100px; margin: 0 auto; }
.section__head { text-align: center; margin-bottom: 60px; }
.section__head .eyebrow { margin-bottom: 16px; }

/* ---------- collection ---------- */

.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.product__image { overflow: hidden; background: var(--ink); margin-bottom: 20px; }
.product__image img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}
.product:hover .product__image img { transform: scale(1.03); }
.product__meta { border-top: 1px solid var(--line); padding-top: 18px; text-align: center; }
.product__name {
  margin: 0 0 4px;
  font-family: var(--caps);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.product__type {
  margin: 0;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------- craftsmanship ---------- */

.split { display: flex; flex-wrap: wrap; min-height: 480px; border-bottom: 1px solid var(--line); }
.split__image { flex: 1 1 380px; min-width: 0; overflow: hidden; }
.split__image img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.split__text {
  flex: 1 1 380px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px 80px 72px 64px;
}
.split__text .eyebrow { margin-bottom: 24px; }

/* ---------- materials ---------- */

.materials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; text-align: center; }
.material__name {
  margin: 0 0 8px;
  font-family: var(--caps);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.material__desc { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------- quote ---------- */

.quote { background: var(--ink); padding: 96px var(--pad-x); text-align: center; }
.quote blockquote { margin: 0; }
.quote__text {
  margin: 0 0 20px;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--ground);
}
.quote__cite {
  font-family: var(--caps);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- wholesale ---------- */

.wholesale { display: flex; flex-wrap: wrap; gap: 80px; }
.wholesale__main { flex: 2 1 360px; min-width: 0; }
.wholesale__title {
  margin: 0 0 28px;
  font-family: var(--caps);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.12em;
}
.wholesale__main .body:last-of-type { margin-bottom: 44px; }

.facts { flex: 1 1 200px; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.fact { padding: 24px 0; border-top: 1px solid var(--line); }
.fact:last-child { border-bottom: 1px solid var(--line); }
.fact dt {
  margin: 0 0 6px;
  font-family: var(--caps);
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.fact dd { margin: 0; font-size: 1.1rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.fact dd a { color: inherit; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  padding: 44px var(--pad-x);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 20px;
}
.site-footer__brand {
  font-family: var(--caps);
  font-size: 0.85rem;
  letter-spacing: 0.42em;
  color: var(--ground);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.site-footer__links a,
.site-footer__copy {
  font-family: var(--caps);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--footer-text);
  text-decoration: none;
}
.site-footer__links a { padding: 12px 0; }
.site-footer__links a:hover { color: var(--ground); }
.site-footer__links a:first-child { text-transform: none; letter-spacing: 0.15em; }
.site-footer__copy { letter-spacing: 0.15em; text-transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .hero__text { padding: 72px 48px; }
  .split__text { padding: 64px 48px; }
  .wholesale { gap: 56px; }
}

@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .nav { height: 64px; }
  .nav__link { font-size: 0.6rem; letter-spacing: 0.18em; }
  .nav__logo img { height: 40px; }
  .hero { min-height: 0; }
  .hero__text { padding: 56px var(--pad-x); }
  .hero__lede { margin-bottom: 36px; }
  .hero__image img { min-height: 320px; }
  .btn { padding: 14px 24px; letter-spacing: 0.22em; }
  .section { padding: 64px var(--pad-x); }
  .section__head { margin-bottom: 40px; }
  .products { grid-template-columns: 1fr; gap: 44px; }
  .split__text { padding: 56px var(--pad-x); }
  .materials { grid-template-columns: 1fr; gap: 40px; }
  .quote { padding: 72px var(--pad-x); }
  .btn--email { letter-spacing: 0.1em; padding: 14px 20px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__image { animation: none; }
  .product__image img { transition: none; }
}