/* Bag of Grace — Variant B: "ivory atelier"
   Locked light theme, toned to Claudia's logo: warm ivory canvas, warm
   near-black type, gold accent sampled from the mark itself.

   The palette was deep rose until the real logo arrived. The logo is
   gold, champagne and pearl, and the logo is the fixed point, so the
   site moved to it rather than the other way round.

   Two golds, because one cannot do both jobs. --accent is the bright
   champagne gold from the mark, used for fills and decoration, always
   with dark text on it. --accent-deep is a bronze that clears 4.5:1 on
   the canvas, for small text like eyebrows and links, where the bright
   gold would fail contrast.

   Display: Cormorant Garamond. Body: Archivo. Sharp corners throughout. */
:root {
  --canvas: #faf7f2;
  --canvas-deep: #efe5d8;
  --surface: #fffdf9;
  --hairline: rgba(74, 56, 34, 0.18);
  --ink: #2a2119;
  --muted: #6e6055;
  --accent: #c9a25a;        /* champagne gold, fills only */
  --accent-hover: #b88e44;
  --accent-deep: #7a5a22;   /* bronze, 5.9:1 on canvas, safe for small text */
  --ink-on-accent: #2a2119; /* dark on gold, 6.6:1 */
  --header-h: 68px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

h1, h2, h3, .footer-wordmark, .mc-price, blockquote {
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink);
}

h1 {
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 500;
  line-height: 1.05;
}
h1 em { font-style: italic; line-height: 1.1; }

h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.1;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.center { text-align: center; }

.section-head { margin-bottom: 40px; }
.section-head p { margin-top: 10px; max-width: 52ch; }

/* ---------- Buttons (sharp, one accent) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--accent); color: var(--ink-on-accent); }
.btn-solid:hover { background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--hairline); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }

/* ---------- Header ---------- */
#topSentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* fixed transparent header overlays the full-screen hero; it picks up its
   background once the page top scrolls away */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  background: rgba(247, 245, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
}

.header-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.header-left { display: flex; align-items: center; gap: 18px; }

.hamburger {
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span { height: 1.5px; width: 100%; background: var(--ink); transition: transform 0.25s ease, opacity 0.25s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.main-nav { display: flex; gap: 28px; }
.main-nav a {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
  transition: color 0.2s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--accent-deep); }

.header-icons { display: flex; align-items: center; gap: 6px; }
.header-icons button {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
}
.header-icons button:hover { color: var(--accent-deep); }

/* On the homepage the header floats over the hero video until it scrolls,
   so lift the brand, icons and hamburger to white. The nav links only sit
   in the top bar on desktop (mobile tucks them in a drawer), so light those
   in the desktop block below. Once .scrolled adds the solid backdrop these
   rules stop matching and the header returns to ink. */
.home .site-header:not(.scrolled) .wordmark,
.home .site-header:not(.scrolled) .header-icons button { color: #fff; }
.home .site-header:not(.scrolled) .hamburger span { background: #fff; }
@media (min-width: 861px) {
  .home .site-header:not(.scrolled) .main-nav a { color: rgba(255, 255, 255, 0.9); }
  .home .site-header:not(.scrolled) .main-nav a:hover,
  .home .site-header:not(.scrolled) .main-nav a.active { color: #fff; }
}
.cart-count {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: var(--ink-on-accent);
  font-family: 'Archivo', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding: 0 3px;
}

/* ---------- Hero (full-screen, copy overlaid on the video) ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #1a110a;
}
.hero-visual img,
.hero-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Overlay: a flat tint over the whole video for legibility, deepened toward
   the foot where the copy sits. Kept lighter at the very top so the fixed
   header still reads on the artwork. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* top band so the header/nav reads on the footage */
    linear-gradient(to bottom, rgba(20, 13, 6, 0.62) 0%, rgba(20, 13, 6, 0.18) 12%, transparent 26%),
    /* foot band for the headline + sub */
    linear-gradient(to top, rgba(20, 13, 6, 0.85) 0%, rgba(20, 13, 6, 0.45) 32%, rgba(20, 13, 6, 0.15) 60%, transparent 82%),
    /* gentle overall tint */
    rgba(20, 13, 6, 0.16);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 42rem;
  padding: 0 min(7vw, 96px) clamp(52px, 10vh, 120px);
  color: var(--canvas);
}
.hero-copy h1 { color: #fff; text-shadow: 0 1px 26px rgba(0, 0, 0, 0.28); }
.hero-copy h1 em { color: var(--accent); }
.hero-sub { margin: 22px 0 34px; max-width: 46ch; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.88); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* The ghost button lives on the video now, not the cream page. */
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.hero .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---------- Collection ---------- */
.collection { padding: 96px 0; }

.carousel {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }

.product-track { grid-auto-columns: calc((100% - 3 * 20px) / 4); }

.product-card { border: 1px solid var(--hairline); background: var(--surface); }
.product-media { display: block; overflow: hidden; }
.product-media img { transition: transform 0.5s ease; }
.product-media:hover img { transform: scale(1.04); }
.product-card h3 {
  font-size: 22px;
  font-weight: 500;
  padding: 16px 18px 2px;
}
.price { padding: 0 18px 18px; font-size: 14px; color: var(--ink); }
.price del { color: var(--muted); opacity: 0.75; margin-right: 6px; }
.save {
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.track-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  gap: 20px;
}

.dots { display: flex; gap: 9px; }
.dots button {
  width: 22px;
  height: 2px;
  border: none;
  background: var(--hairline);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease;
}
.dots button.active { background: var(--accent-deep); }

/* ---------- Masterclass ---------- */
.masterclass {
  background: var(--canvas-deep);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 96px 0;
}
.mc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: min(6vw, 80px);
  align-items: center;
}
.mc-intro p { margin: 16px 0 30px; max-width: 40ch; line-height: 1.65; }

.mc-list { list-style: none; }
.mc-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
}
.mc-list li + li { border-top: 1px solid var(--hairline); }
.mc-list img { width: 64px; background: var(--surface); border: 1px solid var(--hairline); }
.mc-info { flex: 1; min-width: 0; }
.mc-info h3 { font-size: 21px; font-weight: 500; }
.mc-info p { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.mc-price { font-size: 26px; font-weight: 500; }
.mc-link {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.mc-link:hover { color: var(--accent-hover); }

/* ---------- Reviews (one editorial quote per slide) ---------- */
.reviews { padding: 96px 0 72px; }
.reviews h2 { margin-bottom: 44px; }

.reviews-wrap {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.review-track { grid-auto-columns: 100%; }

.review-slide {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: min(5vw, 64px);
  align-items: center;
}
.review-slide img { border: 1px solid var(--hairline); }
.stars { color: var(--accent); font-size: 15px; display: inline-flex; gap: 5px; }
.review-slide blockquote {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.3;
  margin: 18px 0 20px;
}
.review-slide cite { font-style: normal; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }

.carousel-arrow {
  position: absolute;
  bottom: -8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  display: grid;
  place-items: center;
}
.carousel-arrow:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.carousel-arrow.prev { right: 84px; }
.carousel-arrow.next { right: 28px; }

.reviews .dots { justify-content: flex-start; max-width: 1240px; margin: 26px auto 0; padding: 0 28px; }

/* ---------- Instagram (mosaic) ---------- */
.instagram { padding: 24px 0 96px; }

.ig-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  margin-bottom: 36px;
}
.ig-big { grid-column: span 2; grid-row: span 2; }
.ig-mosaic a { overflow: hidden; border: 1px solid var(--hairline); position: relative; }
.ig-mosaic img,
.ig-mosaic video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease, opacity 0.3s ease; }
.ig-mosaic a:hover img,
.ig-mosaic a:hover video { transform: scale(1.04); opacity: 0.9; }

/* ---------- Footer ---------- */
.site-footer { background: var(--canvas-deep); border-top: 1px solid var(--hairline); }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 44px;
  padding-bottom: 40px;
}
.footer-wordmark { font-size: 26px; font-weight: 600; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--accent-deep); }

.footer-bar {
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 28px;
  max-width: 1240px;
  margin: 0 auto;
}
.footer-social { display: flex; gap: 18px; }
.footer-social a { color: var(--muted); font-size: 18px; transition: color 0.2s ease; }
.footer-social a:hover { color: var(--accent-deep); }
.footer-copy { font-size: 12px; letter-spacing: 0.08em; }

/* ---------- Mobile nav ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 20, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 60;
}
body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
body.nav-open .site-header { z-index: 70; }

/* ---------- Reveal on scroll ----------
   hidden state only applies when JS is running (html.js) so a script
   failure can never blank the page */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  html.js .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .product-track { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .hamburger { display: flex; }
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 84vw);
    background: var(--canvas);
    flex-direction: column;
    gap: 0;
    padding: 92px 30px 30px;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 70;
    border-right: 1px solid var(--hairline);
  }
  body.nav-open .main-nav { transform: translateX(0); }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
  .site-header .hamburger { z-index: 80; position: relative; }
}

@media (max-width: 860px) {
  /* Full-screen hero holds on mobile; just tighten the copy inset. */
  .hero-copy { padding: 0 24px clamp(44px, 8vh, 80px); }
  .mc-grid { grid-template-columns: 1fr; gap: 40px; }
  .review-slide { grid-template-columns: 1fr; gap: 26px; }
  .review-slide img { max-width: 320px; }
  .carousel-arrow { position: static; }
  .reviews-wrap { display: flex; flex-direction: column; }
  .reviews-wrap .prev { order: 2; align-self: flex-start; margin-top: 20px; }
  .reviews-wrap .next { order: 3; align-self: flex-start; margin-top: -45px; margin-left: 54px; }
}

/* Short phones (SE-sized and older Androids). The headline and buttons
   alone fill a 640px screen, leaving the bag as a sliver at the bottom.
   Tighten the copy and the image so the whole hero still lands.
   Hero only. Nothing else belongs in here. */
@media (max-width: 860px) and (max-height: 730px) {
  .hero-copy { padding: 0 24px clamp(32px, 6vh, 56px); }
  .hero-sub { margin: 16px 0 24px; }
}

@media (max-width: 720px) {
  .product-track { grid-auto-columns: calc((100% - 20px) / 2); }
  .track-foot { flex-direction: column; align-items: flex-start; }
  .ig-mosaic { grid-template-columns: repeat(2, 1fr); }
  .footer-bar { flex-direction: column; }
}

@media (max-width: 460px) {
  .product-track { grid-auto-columns: 86%; }
  .mc-list li { flex-wrap: wrap; }
}

/* ================================================================
   OUR STORY — the founder's introduction.

   Sits on --canvas-deep rather than the page canvas so the logo's own
   warm background (#E8D6C8) reads as part of a designed panel instead
   of a beige square floating on off-white. The mark keeps its full
   lockup, wordmark and tagline included, because that is how the brand
   was drawn and cropping it loses the strapline.
   ================================================================ */
.story {
  padding: 96px 0;
  background: var(--canvas-deep);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.story-mark img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hairline);
}
.story-copy .eyebrow {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 14px;
}
.story-copy h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 22px;
}
.story-copy h2 em { font-style: italic; }
.story-copy p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 16px;
}
.story-sign {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  line-height: 1.7;
}
.story-sign strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.story-sign span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 4px;
}

@media (max-width: 860px) {
  .story { padding: 68px 0; }
  .story-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .story-mark { max-width: 380px; margin: 0 auto; }
}

/* ---------- Real client media (added when Claudia's photos/video landed) ---------- */
/* Real product photos vary in shape — pin a square and crop so the cards stay even. */
.product-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Review portraits: consistent 3:4 so the carousel doesn't jump. */
.review-slide img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* Masterclass thumbs: square crop at their fixed 64px width. */
.mc-list img { height: 64px; object-fit: cover; }

/* Basket wiring: add-to-basket button on cards + header cart badge */
.product-card { display: flex; flex-direction: column; }
.product-card .price { margin-top: auto; }
.buy-now { margin: 0 18px 8px; width: calc(100% - 36px); justify-content: center; }
.add-to-basket { margin: 0 18px 18px; width: calc(100% - 36px); justify-content: center; }
.add-to-basket.added { background: var(--accent-deep); color: #fff; }
.cart-count:not(.has-items) { display: none; }