/* ---- Brand tokens ---- */
:root {
  --cream:   #f3efe6;
  --cream-2: #e6dcc7;
  --ink:     #23261f;
  --forest:  #29382a;
  --moss:    #5c6e4e;
  --gold:    #b07c3f;
  --muted:   #6c6a5e;
  --line:    rgba(35, 38, 31, 0.12);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  width: 100%;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Hero section wrapper ---- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0b0d0a; /* shows behind the scene during the zoom edges */
}

/* ---- Stage: the camera. The entrance zoom scales this whole element. ---- */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Initial state of the entrance zoom; JS (RAF) drives it to scale(1) / opacity 1.
     No CSS @keyframes for the zoom — JS keeps frame-level control. */
  transform: scale(1.8);
  opacity: 0;
  transform-origin: center center;
}

/* ---- Depth layers ---- */
.layer {
  position: absolute;
  /* Oversize + negative offset so parallax translation never reveals an empty edge. */
  top: -2%;
  left: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.layer--base   { z-index: 1; }
.layer--portal { z-index: 2; }
.layer--mid    { z-index: 3; }
.layer--fore   { z-index: 4; }

/* ---- Hero copy ---- */
.hero-copy {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-copy h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

.hero-copy p {
  margin-top: 0.9rem;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.4rem;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.hero-directions svg { width: 18px; height: 18px; }
.hero-directions:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* Once the zoom finishes, JS adds .is-ready to reveal the copy. */
.hero-copy.is-ready { opacity: 1; }

/* ---- Custom cursor ---- */
.cursor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;                 /* JS shows it on fine-pointer devices */
}
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);  /* JS overrides with live position */
}
.cursor__dot {
  width: 7px;
  height: 7px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
.cursor__ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  transition: width 0.25s ease, height 0.25s ease,
              background-color 0.25s ease, border-color 0.25s ease;
}
/* Grow the ring when hovering an interactive element. */
.cursor--hover .cursor__ring {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.9);
}
/* Only hide the native cursor once JS confirms it can replace it. */
body.has-custom-cursor,
body.has-custom-cursor * { cursor: none; }
body.has-custom-cursor .cursor { display: block; }
/* Blend the whole cursor against the page so the white stays visible over both the
   dark hero and the light sections. The blend must live on the container (which is the
   stacking context) — not the children, or it only blends against the empty container. */
.cursor { mix-blend-mode: difference; isolation: auto; }

/* ---- Keyboard focus (visible even though the pointer is hidden) ---- */
a:focus-visible, button:focus-visible, .tile:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--visit a:focus-visible, .nav:not(.nav--scrolled) a:focus-visible,
.footer a:focus-visible, .hero a:focus-visible {
  outline-color: #e6cb96;
}

/* ---- Reduced motion: show the final composed scene, no animation ---- */
@media (prefers-reduced-motion: reduce) {
  .stage { transform: none; opacity: 1; }
  .hero-copy { transition: none; }
}

/* ============================================================
   Site chrome: nav, sections, footer
   ============================================================ */

/* ---- Nav ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 56px);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.nav__brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: color 0.35s ease;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
}
.nav__links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: color 0.35s ease, opacity 0.2s ease;
}
.nav__links a:hover { opacity: 0.7; }
.nav__cta {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 8px 20px;
}
/* Solid state once scrolled past the hero. */
.nav--scrolled {
  background: var(--cream);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 12px;
  padding-bottom: 12px;
}
.nav--scrolled .nav__brand,
.nav--scrolled .nav__links a { color: var(--ink); }
.nav--scrolled .nav__cta { border-color: var(--ink); }
.nav__toggle { display: none; }

/* ---- Scroll cue ---- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 20, 12, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---- Generic sections ---- */
[id] { scroll-margin-top: 76px; }   /* keep anchored sections clear of the fixed nav */
.section { padding: clamp(64px, 11vw, 130px) clamp(20px, 5vw, 56px); }
.wrap { max-width: 1080px; margin: 0 auto; }
.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.08;
  color: var(--forest);
  margin-bottom: 24px;
}
.section p { max-width: 60ch; color: var(--ink); margin-bottom: 14px; }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink); }

.section--find { background: var(--cream-2); border-top: 1px solid rgba(35, 38, 31, 0.08); }
.section--find h2 { margin-bottom: 10px; }
.find__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--gold);
  margin-bottom: 34px !important;
}

/* ---- About: two-column with pull-quote ---- */
.about__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about__text p:last-child { margin-bottom: 0; }
.about__aside {
  border-left: 2px solid var(--gold);
  padding: 8px 0 8px 28px;
}
.about__quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  color: var(--forest);
  margin-bottom: 14px !important;
}
.about__meta {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 !important;
}

/* ---- Tiles ---- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.tile {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(35, 38, 31, 0.1); }
.tile h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--forest);
  margin-bottom: 8px;
}
.tile p { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* ---- Visit ---- */
.section--visit { background: var(--forest); }
.section--visit .eyebrow { color: #d8b878; }
.section--visit h2 { color: #fff; }
.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.visit__info { color: rgba(255, 255, 255, 0.86); }
.visit__label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  font-weight: 500;
  color: #d8b878;
  margin: 28px 0 10px;
}
.visit__address { font-style: normal; font-size: 1.15rem; color: #fff; margin-bottom: 18px; }
.hours { list-style: none; max-width: 320px; }
.hours li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.section--visit .hours-note { max-width: 340px; color: #fff; font-size: 1.05rem; }
.hours-note a { color: #d8b878; text-decoration: none; border-bottom: 1px solid rgba(216, 184, 120, 0.5); }
.hours-note a:hover { opacity: 0.8; }
.contact { list-style: none; }
.contact li { padding: 5px 0; }
.contact a, .footer a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: opacity 0.2s ease;
}
.contact a:hover, .footer a:hover { opacity: 0.7; }
.btn {
  display: inline-block;
  background: #d8b878;
  color: var(--forest);
  font-weight: 500;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); background: #e6cb96; }
.section--visit .contact-note { color: rgba(255, 255, 255, 0.85); max-width: 320px; margin-bottom: 16px; }
.btn--ig { margin-top: 4px; }
.footer__muted { color: rgba(255, 255, 255, 0.55); }
.visit__map {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  min-height: 360px;
  height: 100%;
  background: #20301f;   /* blends with the section while map tiles load */
}
.visit__map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

/* ---- The Rack (interactive garment layers) ---- */
.section--rack {
  background: var(--cream);
  border-top: 1px solid rgba(35, 38, 31, 0.08);
  padding-bottom: clamp(30px, 5vw, 70px);
  overflow: hidden;
}
.rack {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  aspect-ratio: 1916 / 821;
}
/* Rail the hangers hook over (the garment PNGs don't include it). */
.rack__rail {
  position: absolute;
  top: 21%;              /* measured: hooks sit at ~20–21.5% */
  left: 3%;
  right: 3%;
  height: 4px;
  border-radius: 4px;
  background: #2a2d26;
  z-index: 0;
}
.rack__item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  pointer-events: none;   /* let the stage receive the mouse */
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- Footer ---- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  padding: 56px clamp(20px, 5vw, 56px) 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer__brand { font-family: var(--serif); font-size: 1.5rem; color: #fff; }
.footer__tag { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }
.footer__legal { text-align: center; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); margin-top: 24px; }

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: none; border: 0;
  }
  .nav__toggle span {
    display: block; height: 2px; width: 24px;
    background: #fff; border-radius: 2px;
    transition: background-color 0.35s ease, transform 0.3s ease, opacity 0.3s ease;
  }
  .nav--scrolled .nav__toggle span { background: var(--ink); }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--cream);
    padding: 12px clamp(20px, 5vw, 56px) 22px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav__links a { color: var(--ink); padding: 8px 0; }
  .nav.is-open .nav__links { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav.is-open .nav__toggle span { background: var(--ink); }
  .nav__cta { border-color: var(--ink) !important; align-self: flex-start; margin-top: 6px; }

  /* Lift the wordmark so it sits comfortably in the portal. */
  .hero-copy { top: 33%; width: min(90vw, 460px); }

  .about__grid { grid-template-columns: 1fr; }
  .about__aside { border-left: 0; border-top: 2px solid var(--gold); padding: 22px 0 0; }
  .visit__grid { grid-template-columns: 1fr; }
  .footer__grid { gap: 22px; }
}