/* ===================================================================
   BRANS° atelier — shared site chrome
   Design tokens, base reset, sticky header, site footer, toast.
   Linked by every page (product, shop, landing) BEFORE the page's
   own stylesheet so the chrome stays identical across the site.
   =================================================================== */

:root {
  --bg: #0b0c10;
  --bg-2: #14151a;
  --ink: #f1ece2;            /* warm cream foreground */
  --ink-2: #d9d4c8;
  --muted: #7a7a82;
  --rule: rgba(241, 236, 226, 0.18);
  --rule-strong: rgba(241, 236, 226, 0.55);
  --accent: #c9a960;         /* warm gold */
  --stage-bg: #1c1f2a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ===================== STICKY HEADER ===================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* nav left · utilities right */
  padding: 24px 56px;
  transition: background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(11, 12, 16, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
  padding: 16px 56px;
}

/* ---- left: inline primary nav (desktop); the hamburger replaces it ≤720 ---- */
.nav { flex: none; display: flex; align-items: center; gap: 40px; }
.nav a {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241, 236, 226, 0.62);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 16px; height: 1px;
  background: var(--accent);
}

/* ---- left: hamburger (mobile only; morphs to ✕ when the drawer is open) ---- */
.hamburger {
  display: none;                      /* shown only at ≤720 (see media query) */
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  margin-left: -10px;                 /* optical align to the padding edge */
  color: var(--ink);
  position: relative; z-index: 62;    /* stays above the drawer to close it */
}
.hamburger-box { position: relative; display: block; width: 26px; height: 14px; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  position: absolute; left: 0;
  width: 26px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, top .34s ease;
}
.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { content: ""; top: -7px; }
.hamburger-inner::after  { content: ""; top: 7px; }
body.menu-open .hamburger-inner { transform: translateY(-50%) rotate(45deg); }
body.menu-open .hamburger-inner::before { top: 0; opacity: 0; }
body.menu-open .hamburger-inner::after  { top: 0; transform: rotate(-90deg); }
body.menu-open { overflow: hidden; }

/* ---- center: BRANS® atelier wordmark ----
   Absolutely centered to the viewport so the nav and utility clusters on
   either side never push it off-center. */
.brand {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.brand-mark {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16.5px;                  /* logo 25% smaller (was 22px) */
  letter-spacing: 0.32em;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.brand-mark::after {
  content: "®";
  font-size: 6.75px;                  /* logo 25% smaller (was 9px) */
  vertical-align: super;
  margin-left: 2px;
  letter-spacing: 0;
  opacity: 0.6;
}
.brand-sub {
  font-family: "Caveat", cursive;
  font-size: 16.5px;                  /* logo 25% smaller (was 22px) */
  color: var(--accent);
  transform: translateY(2px) rotate(-3deg);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ---- slide-in menu drawer + scrim (opened by the mobile hamburger) ---- */
.menu-scrim {
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(6, 7, 10, 0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
body.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
body.menu-open .header { z-index: 62; } /* keep the hamburger above the drawer */

.menu-drawer {
  position: fixed;
  top: 0; left: 0;
  z-index: 61;
  width: min(360px, 82vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 128px 44px 44px;
  background: var(--bg-2);
  border-right: 1px solid var(--rule);
  box-shadow: 30px 0 60px rgba(0, 0, 0, 0.5);
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4, 0, .1, 1);
}
body.menu-open .menu-drawer { transform: translateX(0); }

.menu-link {
  width: max-content;
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  line-height: 1.35;
  color: var(--ink-2);
  /* staggered entrance once the drawer opens */
  opacity: 0; transform: translateX(-14px);
  transition: color .2s ease, opacity .4s ease, transform .4s ease;
}
.menu-link:hover, .menu-link.active { color: var(--accent); }
body.menu-open .menu-link { opacity: 1; transform: translateX(0); }
body.menu-open .menu-link:nth-child(1) { transition-delay: .10s; }
body.menu-open .menu-link:nth-child(2) { transition-delay: .16s; }
body.menu-open .menu-link:nth-child(3) { transition-delay: .22s; }

.utilities { display: flex; justify-content: flex-end; gap: 24px; align-items: center; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; position: relative; color: var(--ink); transition: transform .2s ease; }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn.active { color: var(--accent); }
.icon-btn.active .i-heart { fill: var(--accent); }
.cart-badge {
  position: absolute;
  right: 0; bottom: 4px;
  width: 16px; height: 16px;
  background: var(--accent);
  color: #0b0c10;
  border-radius: 999px;
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}

/* ===================== HEADER SEARCH (expanding bar) =====================
   The magnifier toggles an inline input that grows leftward; the same button
   flips to a ✕ to close. Results drop into an absolute panel under the bar. */
.search { position: relative; display: flex; align-items: center; }
.search-form { display: flex; align-items: center; }

.search-input {
  width: 0;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  outline: none;
  transition: width .34s cubic-bezier(.22, 1, .36, 1), opacity .22s ease,
              padding .34s ease, border-color .34s ease;
}
.search.open .search-input {
  width: clamp(160px, 20vw, 240px);
  padding: 7px 6px;
  opacity: 1;
  pointer-events: auto;
  border-bottom-color: var(--rule-strong);
}
.search-input::placeholder { color: var(--muted); }
/* strip the native clear/decoration on webkit search inputs */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* magnifier ⇄ ✕ swap on the toggle button */
.search-toggle .i-close { display: none; }
.search.open .search-toggle .i-search { display: none; }
.search.open .search-toggle .i-close { display: block; }
.search.open .search-toggle { color: var(--accent); }

/* results dropdown, anchored under the bar */
.search-results {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: min(340px, 80vw);
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(11, 12, 16, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.search-results:empty { display: none; }
.search:not(.open) .search-results { display: none; }
.search-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 8px;
  border-radius: 8px;
  transition: background .15s ease;
}
.search-result:hover,
.search-result:focus-visible { background: rgba(241, 236, 226, 0.06); outline: none; }
.search-result img {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-2);
  flex: none;
}
.search-result-body { min-width: 0; flex: 1; }
.search-result-name {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-meta {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.search-result-price {
  font-size: 13px;
  color: var(--accent);
  flex: none;
  letter-spacing: 0.02em;
}
.search-empty {
  padding: 20px 8px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===================== SITE FOOTER =====================
   Four columns over a fine-print bar: brand + what-you-get, shop,
   atelier, newsletter. The column track is deliberately uneven — the
   brand block carries prose, the link columns only need their longest
   label, the newsletter needs room for a field. */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--bg);
  padding: 76px 56px 0;
}
.sf-top {
  display: grid;
  grid-template-columns: minmax(280px, 1.9fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) minmax(240px, 1.4fr);
  gap: 44px 48px;
  padding-bottom: 60px;
}

/* ---- brand column ---- */
.sf-brand { display: inline-flex; align-items: baseline; gap: 7px; }
.sf-brand .brand-mark { font-size: 19px; }
.sf-brand .brand-sub { font-size: 19px; }
.sf-blurb {
  margin: 22px 0 0;
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(241, 236, 226, 0.62);
}
/* the three facts the shop is actually judged on, laid out as the spec
   strip the homepage's studio section uses — label over value, monospace
   voice — so they read as specification rather than marketing */
.sf-facts {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 18px 34px;
}
.sf-fact dt {
  margin-bottom: 7px;
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}
.sf-fact dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---- link columns ---- */
.sf-col-title {
  margin: 0 0 20px;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}
.sf-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sf-links a {
  font-size: 13.5px;
  color: rgba(241, 236, 226, 0.62);
  /* a hairline that draws itself in on hover, rather than a jumpy underline */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color .15s ease, background-size .25s ease;
  padding-bottom: 2px;
}
.sf-links a:hover { color: var(--ink); background-size: 100% 1px; }

/* ---- newsletter ---- */
.sf-news-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(241, 236, 226, 0.62);
}
.sf-news-form {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--rule);
  transition: border-color .2s ease;
  max-width: 320px;
}
.sf-news-form:focus-within { border-bottom-color: var(--accent); }
.sf-news-input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  padding: 10px 0;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.sf-news-input::placeholder { color: var(--muted); }
.sf-news-submit {
  display: grid; place-items: center;
  width: 38px;
  color: var(--muted);
  transition: color .15s ease, transform .15s ease;
}
.sf-news-submit:hover { color: var(--accent); transform: translateX(2px); }
.sf-news-status {
  margin: 12px 0 0; min-height: 14px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.sf-news-status.ok { color: var(--accent); }
.sf-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- fine print ---- */
.sf-fine {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 28px;
  border-top: 1px solid var(--rule);
  padding: 24px 0 28px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}

/* ===================== TOAST ===================== */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 100;
  padding: 14px 24px;
  background: var(--accent);
  color: #0b0c10;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================== RESPONSIVE (chrome) ===================== */
@media (max-width: 1100px) {
  .header { padding-left: 32px; padding-right: 32px; }
  .site-footer { padding-left: 32px; padding-right: 32px; }
  /* four columns stop fitting well before the phone breakpoint: the brand
     block and the newsletter each take a full row, the link columns pair up */
  .sf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .sf-col-brand, .sf-col-news { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .header { padding: 16px 20px; }
  /* mobile: swap the inline nav for the hamburger, and tighten the wordmark +
     icons so the hamburger · logo · icons row fits. */
  .nav { display: none; }
  .hamburger { display: grid; }
  .utilities { gap: 6px; }
  .icon-btn { width: 30px; height: 30px; }
  .header .brand-mark { font-size: 12.75px; letter-spacing: 0.2em; text-indent: 0.2em; }
  .brand-sub { font-size: 12.75px; }
  .site-footer { padding: 56px 20px 0; }
  .sf-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .sf-blurb { max-width: none; }
  .sf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-news-form { max-width: none; }
  .sf-fine { flex-direction: column; gap: 8px; padding: 20px 0 26px; }

  /* Inline expansion has no room next to four icons on a phone, so when open
     the search becomes a full-width bar that overlays the header row. The
     search box goes static so the absolute form spans the header (its
     containing block) rather than the tiny relative .search box. */
  .header.search-open .search { position: static; }
  .header.search-open .search-form {
    position: absolute;
    left: 20px; right: 20px;
    top: 0; bottom: 0;
    align-items: center;
    background: var(--bg);
    z-index: 2;
  }
  .header.search-open .search-input {
    flex: 1;
    width: auto;
    font-size: 16px;              /* keeps iOS from zooming on focus */
  }
  .header.search-open .search-toggle { flex: none; }
  .search-results { width: min(88vw, 360px); }
}

/* phones: the centered wordmark is closest to the icons here — trim the row
   further (smaller wordmark, icons, padding) so nothing overlaps down to ~360px. */
@media (max-width: 460px) {
  .header { padding: 14px 14px; }
  .utilities { gap: 3px; }
  .icon-btn { width: 26px; height: 26px; }
  .header .brand-mark { font-size: 10.5px; letter-spacing: 0.12em; text-indent: 0.12em; }
  .brand-sub { font-size: 10.5px; }
  .header.search-open .search-form { left: 14px; right: 14px; }
}