/* ================================================================
   NOIR & OR — LUXURY EDITORIAL DESIGN SYSTEM
   Centered. Serif. Generous whitespace. Gold + ivory on near-black.
   ================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=JetBrains+Mono:wght@400;500&family=Reem+Kufi+Fun:wght@400;500;600&family=Amiri:ital,wght@0,400;1,400;0,700&display=swap");

:root {
  --bg: #0a0807;
  --bg-2: #15110d;
  --fg: #f3e8d4;
  --fg-2: #d6c8af;
  --muted: #7a6b5c;
  --line: rgba(243, 232, 212, 0.16);
  --line-2: rgba(243, 232, 212, 0.32);
  --gold: #d4a574;
  --gold-2: #b08545;
  --rule: 1px solid var(--line);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --f-disp: "Cinzel", serif;
  --f-body: "Cormorant Garamond", serif;
  --f-mono: "JetBrains Mono", monospace;
}

html[dir="rtl"] {
  --f-disp: "Reem Kufi Fun", serif;
  --f-body: "Amiri", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--bg); }

/* gold noise */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.65  0 0 0 0 0.45  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.045; mix-blend-mode: screen;
}

/* ---------- type ---------- */
.disp { font-family: var(--f-disp); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.serif { font-family: var(--f-body); }
.mono  { font-family: var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; }
.eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); }
.eyebrow.gold { color: var(--gold); }
.italic { font-style: italic; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: var(--rule);
}
.nav-util {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 32px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: var(--rule);
}
@media (max-width: 768px) { .nav-util { display: none; } }
.nav-util a, .nav-util button { color: inherit; transition: color .3s; }
.nav-util a:hover, .nav-util button:hover { color: var(--gold); }
.nav-util .sep { opacity: .4; margin: 0 14px; }

.nav-main {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px 32px;
  gap: 30px;
}
.nav-main .left, .nav-main .right { display: flex; align-items: center; }
.nav-main .right { justify-content: flex-end; gap: 22px; }
.nav-main .left { gap: 26px; }
.nav-main .brand {
  font-family: var(--f-disp); letter-spacing: 0.32em; font-size: 18px;
  white-space: nowrap;
}
.nav-main .brand .amp { color: var(--gold); font-style: italic; font-family: var(--f-body); text-transform: none; font-weight: 400; letter-spacing: 0; margin: 0 4px; }
.nav-link {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  position: relative; transition: color .3s;
}
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--gold); }

.nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; position: relative; }
.nav-icon[data-cart-count]::after {
  content: attr(data-count); position: absolute; top: 0; inset-inline-end: 0;
  background: var(--gold); color: var(--bg);
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 9px; padding: 0 4px;
}
@media (max-width: 900px) {
  .nav-main { grid-template-columns: auto 1fr auto; }
  .nav-main .left { display: none; }
  .menu-btn { display: inline-flex !important; }
}
.menu-btn { display: none; }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 80; background: var(--bg); transform: translateY(-100%); transition: transform .6s var(--ease); }
.drawer.open { transform: none; }
.drawer .inner { padding: 80px 32px; }
.drawer a { display: block; font-family: var(--f-disp); font-size: 28px; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 0; border-bottom: var(--rule); }

/* ---------- containers ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.wrap-tight { max-width: 920px; margin: 0 auto; padding: 0 32px; }
.wrap-prose { max-width: 720px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .wrap, .wrap-tight, .wrap-prose { padding: 0 20px; } }

.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
@media (max-width: 768px) { .section { padding: 64px 0; } .section-tight { padding: 48px 0; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 28px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  border: 1px solid var(--fg-2); color: var(--fg);
  background: transparent;
  transition: all .5s var(--ease);
  position: relative; overflow: hidden;
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.gold { border-color: var(--gold); color: var(--gold); }
.btn.gold:hover { background: var(--gold); color: var(--bg); }
.btn-link {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid var(--gold);
  transition: color .3s;
}
.btn-link:hover { color: var(--gold); }
.arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow, .btn-link:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn:hover .arrow, html[dir="rtl"] .btn-link:hover .arrow { transform: translateX(-4px); }

/* ---------- divider ---------- */
.rule { height: 1px; background: var(--line); margin: 64px 0; }
.rule-gold { height: 1px; background: var(--gold); width: 60px; margin: 0 auto; }
.rule-ornament {
  display: flex; align-items: center; gap: 16px; justify-content: center;
  color: var(--gold); font-size: 12px;
}
.rule-ornament::before, .rule-ornament::after { content: ""; flex: 1; max-width: 80px; height: 1px; background: var(--gold); opacity: 0.5; }

/* ---------- product card ---------- */
.card { display: block; position: relative; }
.card .frame { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--bg-2); }
.card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease), filter .6s; filter: brightness(0.96); }
.card:hover .frame img { transform: scale(1.05); filter: brightness(1.05); }
.card .frame::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid transparent;
  transition: border-color .5s var(--ease);
  pointer-events: none;
}
.card:hover .frame::after { border-color: var(--gold); }
.card .num { position: absolute; top: 16px; inset-inline-start: 16px; color: var(--gold); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; }
.card .info { padding-top: 18px; text-align: center; }
.card .name { font-family: var(--f-body); font-style: italic; font-size: 20px; line-height: 1.3; }
.card .price { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; margin-top: 6px; color: var(--gold); }
.card .badge { position: absolute; top: 16px; inset-inline-end: 16px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 5px 10px; }

/* product grid */
.pgrid { display: grid; gap: 56px 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 72px 36px; } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
.pgrid.cols-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .pgrid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- form fields ---------- */
.field-label { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 14px 0; font-family: var(--f-body); font-size: 17px; color: var(--fg); outline: none; transition: border-color .3s; }
.field:focus { border-bottom-color: var(--gold); }
.field-box { width: 100%; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg); font-family: var(--f-body); font-size: 16px; outline: none; transition: border-color .3s; }
.field-box:focus { border-color: var(--gold); }

/* ---------- footer ---------- */
.foot { padding: 96px 32px 32px; border-top: 1px solid var(--line); position: relative; z-index: 2; }
.foot .brand-big {
  font-family: var(--f-disp); letter-spacing: 0.14em; text-transform: uppercase;
  font-size: clamp(56px, 12vw, 180px);
  text-align: center; line-height: 1; margin-bottom: 64px;
  border-bottom: 1px solid var(--line); padding-bottom: 48px;
}
.foot .brand-big .amp { color: var(--gold); font-style: italic; font-family: var(--f-body); text-transform: none; font-weight: 400; letter-spacing: 0; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1320px; margin: 0 auto; }
@media (max-width: 768px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
.foot-cols h4 { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { font-style: italic; padding: 4px 0; transition: color .3s; }
.foot-cols li:hover { color: var(--gold); }
.foot-bottom {
  max-width: 1320px; margin: 64px auto 0;
  border-top: 1px solid var(--line); padding-top: 28px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .40s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .47s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .54s; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: grid; place-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 80%), linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
}
.hero-inner {
  position: relative; z-index: 2;
  text-align: center; padding: 64px 24px;
  max-width: 980px; margin: 0 auto;
}
.hero h1 {
  font-family: var(--f-disp);
  font-size: clamp(48px, 8vw, 112px);
  letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1; font-weight: 500;
  margin: 36px 0;
}
.hero h1 .amp { font-family: var(--f-body); font-style: italic; font-weight: 400; text-transform: none; color: var(--gold); letter-spacing: 0; }

/* scroll hint */
.scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: var(--fg);
}
.scroll-hint .line {
  width: 1px; height: 48px; background: var(--gold);
  animation: drip 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drip {
  0%, 100% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  90% { transform: scaleY(0); transform-origin: bottom; }
}

/* tweaks panel */
.tw-panel {
  position: fixed; top: 80px; inset-inline-end: 24px; z-index: 90;
  width: 280px; background: var(--bg-2); border: 1px solid var(--line);
  padding: 24px;
  transform: translateX(120%); opacity: 0;
  transition: transform .5s var(--ease), opacity .3s;
}
.tw-panel.open { transform: none; opacity: 1; }

/* link with gold underline animation */
.ul-link { position: relative; display: inline-block; }
.ul-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.ul-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* pill chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  transition: all .3s;
  background: transparent; color: var(--fg);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.is-active { background: var(--gold); color: var(--bg); border-color: var(--gold); }

[data-cart-count].is-zero::after { display: none; }