/* =====================================================================
   CHARDESIGN — shared stylesheet
   Editorial fashion house aesthetic. Bone + ink, high-contrast Bodoni.
   Pairs with Tailwind (utility classes) + the inline config in each page.
   ===================================================================== */

:root {
  --bone:      #f5f2ec;
  --paper:     #faf8f4;
  --ink:       #16140f;
  --ink-soft:  #4f4a40;
  --line:      #ddd6c8;
  --clay:      #9c5b3f;
  --clay-deep: #7c4631;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  overflow-x: hidden;
}

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

.font-display { font-family: 'Bodoni Moda', serif; }

/* --- Eyebrow / kicker labels ----------------------------------------- */
.kicker {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
}

/* --- Animated underline links ---------------------------------------- */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Nav links -------------------------------------------------------- */
.nav-link {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* --- Header scroll state --------------------------------------------- */
.site-header {
  transition: background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
}
.site-header.scrolled {
  background: rgba(245,242,236,0.86);
  backdrop-filter: blur(14px);
  border-color: var(--line);
  color: var(--ink);
}

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: 1px solid var(--ink);
  position: relative; overflow: hidden;
  transition: color .5s var(--ease);
  z-index: 0;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--bone); }
.btn:hover::before { transform: translateY(0); }

.btn-light { border-color: var(--bone); color: var(--bone); }
.btn-light::before { background: var(--bone); }
.btn-light:hover { color: var(--ink); }

/* --- Image hover zoom ------------------------------------------------- */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.img-zoom:hover img { transform: scale(1.06); }

/* --- Reveal on scroll ------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- Hero load stagger ------------------------------------------------ */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: riseIn 1.2s var(--ease) forwards; }

@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.line-grow { transform-origin: left; animation: lineGrow 1.4s var(--ease) forwards; }

/* --- Marquee ---------------------------------------------------------- */
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee__track {
  display: flex; flex-shrink: 0;
  gap: 3rem; padding-right: 3rem;
  animation: scrollX 28s linear infinite;
}
@keyframes scrollX { to { transform: translateX(-100%); } }

/* --- Lookbook tiles --------------------------------------------------- */
.tile { position: relative; cursor: pointer; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,20,15,.55), rgba(22,20,15,0) 55%);
  opacity: 0; transition: opacity .55s var(--ease);
  display: flex; align-items: flex-end; padding: 1.5rem;
}
.tile:hover .tile__veil { opacity: 1; }
.tile__veil span { color: var(--bone); transform: translateY(10px); transition: transform .55s var(--ease); }
.tile:hover .tile__veil span { transform: none; }

/* --- Lightbox --------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(18,16,12,0.94);
  display: none; align-items: center; justify-content: center;
  padding: 5vw;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 86vw; max-height: 86vh; object-fit: contain; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.lightbox__close, .lightbox__nav {
  position: absolute; color: var(--bone);
  background: none; border: none; cursor: pointer;
  font-family: 'Jost', sans-serif;
}
.lightbox__close { top: 4vh; right: 5vw; font-size: .8rem; letter-spacing: .2em; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 2.4rem; padding: 1rem; opacity: .7; transition: opacity .3s; }
.lightbox__nav:hover { opacity: 1; }
.lb-prev { left: 2vw; } .lb-next { right: 2vw; }

/* --- Product card ----------------------------------------------------- */
.product .product__add {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.product:hover .product__add { opacity: 1; transform: none; }
.product__media { position: relative; overflow: hidden; background: #ece7dd; }
.product__media .alt {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .7s var(--ease);
}
.product:hover .product__media .alt { opacity: 1; }

/* --- Form fields ------------------------------------------------------ */
.field {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--line);
  padding: .9rem 0; font-family: 'Jost', sans-serif; font-size: .95rem;
  color: var(--ink); transition: border-color .4s var(--ease);
}
.field::placeholder { color: #a39c8c; }
.field:focus { outline: none; border-color: var(--ink); }
textarea.field { resize: vertical; min-height: 120px; }

/* --- Mobile drawer ---------------------------------------------------- */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  transform: translateX(100%);
  transition: transform .6s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }

/* --- Account auth panels --------------------------------------------- */
.auth-panel { display: none; }
.auth-panel.active { display: block; animation: riseIn .7s var(--ease); }
.auth-tab { position: relative; }
.auth-tab.active { color: var(--ink); }
.auth-tab:not(.active) { color: #a39c8c; }

/* --- Grain overlay ---------------------------------------------------- */
.grain::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Utility ---------------------------------------------------------- */
.divider { height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; }
.reveal.is-in .divider { animation: lineGrow 1.2s var(--ease) forwards; }

/* --- Logo image ------------------------------------------------------- */
.logo-img {
  mix-blend-mode: multiply;
  filter: none;
  transition: filter .4s var(--ease);
}
/* On home page before scroll the header sits over dark hero — invert logo */
.site-header:not(.scrolled) .logo-img {
  mix-blend-mode: normal;
  filter: invert(1) brightness(1.8);
}

/* --- Horizontal scroll filter bar ------------------------------------ */
.filter-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  padding-bottom: 4px;
}
.filter-bar::-webkit-scrollbar { display: none; }

/* =====================================================================
   MOBILE FIXES
   ===================================================================== */

/* Prevent iOS zoom on inputs (must be >= 16px) */
input, select, textarea { font-size: 1rem; }

/* Touch targets */
.btn { min-height: 48px; }
button, a { min-height: 44px; }
nav a { min-height: auto; } /* nav links are inline, exempt */

/* Marquee slower on mobile */
@media (max-width: 640px) {
  .marquee__track { animation-duration: 18s; }
  .btn { padding: 0.9rem 1.6rem; font-size: 0.7rem; }
}

/* Product card: keep 2-col usable on mobile */
@media (max-width: 400px) {
  .product h3 { font-size: 0.8rem; }
  .product .font-display { font-size: 1rem; }
}

/* Lookbook tiles: ensure bottom label readable on mobile */
@media (max-width: 640px) {
  .tile__veil { opacity: 1; }
  .tile__veil span { transform: none; }
}

/* Footer grid mobile */
@media (max-width: 767px) {
  .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* Account page: hide image panel on mobile already handled by lg:hidden,
   but ensure form padding comfortable */
@media (max-width: 1023px) {
  .auth-form-col { padding: 3rem 1.5rem 5rem; }
}