/* ===================================================================
   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: the menu mark (mobile only) ----
   Three unequal bars, not the stock equal stack: the short middle one runs out
   to full width on press and retracts as the outer two cross into an ✕. Each
   bar animates on its own delay so the fold reads as a movement, not a swap. */
.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 panel to close it */
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.hamburger:active { background: rgba(241, 236, 226, 0.06); }
.hamburger-box { position: relative; display: block; width: 24px; height: 13px; }
.hb-bar {
  position: absolute; left: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition: width .34s cubic-bezier(.22, 1, .36, 1),
              transform .42s cubic-bezier(.62, -0.2, .3, 1.4),
              opacity .2s ease, top .3s ease;
}
.hb-bar-1 { top: 0;    width: 24px; }
.hb-bar-2 { top: 5.75px; width: 15px; transition-delay: .04s; }
.hb-bar-3 { top: 11.5px; width: 24px; }
/* the short bar completes itself under the finger */
.hamburger:hover .hb-bar-2, .hamburger:focus-visible .hb-bar-2 { width: 24px; }
/* open: the outer pair meets in the middle and crosses, the short one goes */
body.menu-open .hb-bar-1 { top: 5.75px; transform: rotate(45deg); }
body.menu-open .hb-bar-2 { width: 0; opacity: 0; transition-delay: 0s; }
body.menu-open .hb-bar-3 { top: 5.75px; transform: rotate(-45deg); }
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;
}
/* the dashboard-managed wordmark image (api/site.php) replaces the two spans
   above. Its height lives here rather than inline so the mobile breakpoints
   can scale it; the header and footer carry different sizes. */
.brand-img { display: block; width: auto; height: 26px; }
.sf-brand .brand-img { height: 30px; }

.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);
}

/* ===================== MOBILE NAVIGATION PANEL =====================
   Drops down over the page from under the header instead of sliding in from
   the side: the header row itself never moves, so the wordmark and the icons
   stay exactly where the thumb left them and only the content below changes.
   Rows are numbered and rule-separated; each one flies in on its own delay. */
.menu-scrim {
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(6, 7, 10, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .38s ease, backdrop-filter .38s ease;
}
body.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
body.menu-open .header { z-index: 62; } /* keep the menu mark above the panel */

.menu-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 61;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* clears the header row; the panel's own top edge hides behind it */
  padding: 78px 20px 26px;
  background: rgba(13, 14, 19, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.62);
  transform: translateY(-101%);
  transition: transform .52s cubic-bezier(.22, 1, .36, 1);
}
body.menu-open .menu-drawer { transform: translateY(0); }

.menu-inner { display: flex; flex-direction: column; }
.menu-kicker {
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 2px 12px;
}

.menu-link {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 17px 2px;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  /* staggered entrance once the panel is down */
  opacity: 0; transform: translateY(16px);
  transition: color .2s ease, opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}
.menu-num {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  transition: color .2s ease;
}
.menu-word {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  line-height: 1.1;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.menu-arrow { color: var(--muted); opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease; }
.menu-link:hover, .menu-link:active, .menu-link.active { color: var(--accent); }
.menu-link:hover .menu-num, .menu-link.active .menu-num { color: var(--accent); }
.menu-link:hover .menu-word, .menu-link.active .menu-word { transform: translateX(5px); }
.menu-link:hover .menu-arrow, .menu-link.active .menu-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }

body.menu-open .menu-link { opacity: 1; transform: translateY(0); }
body.menu-open .menu-link:nth-of-type(1) { transition-delay: .13s; }
body.menu-open .menu-link:nth-of-type(2) { transition-delay: .19s; }
body.menu-open .menu-link:nth-of-type(3) { transition-delay: .25s; }

/* utilities the header drops on mobile — three pills across one row */
.menu-utils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .42s ease .3s, transform .42s cubic-bezier(.22, 1, .36, 1) .3s;
}
body.menu-open .menu-utils { opacity: 1; transform: translateY(0); }
.menu-util {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 6px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: rgba(241, 236, 226, 0.02);
  color: var(--ink-2);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.menu-util:hover, .menu-util:active { color: var(--accent); border-color: var(--rule-strong); background: rgba(241, 236, 226, 0.05); transform: translateY(-2px); }

.menu-note {
  margin: 18px 2px 0;
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0;
  transition: opacity .4s ease .38s;
}
body.menu-open .menu-note { opacity: 1; }

.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 lives inside .utilities on desktop and is moved beside the
   hamburger at ≤720 by include.js — its expansion depends on that flex
   context, so do not reparent it in the markup. */
.search { position: relative; display: flex; align-items: center; z-index: 99; }
.search-form { display: flex; align-items: center; position: relative; z-index: 99; }
/* .header opens its own stacking context, so the 99 above is local to it —
   raise the header itself while the bar is open, otherwise the results panel
   would still sit under the nav panel and the page's own layers. */
.header.search-open { z-index: 99; }

.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;
  z-index: 99;
  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; }
/* the panel lifts into place, then the rows arrive behind it */
.search.open .search-results { animation: sr-panel .32s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes sr-panel { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.search-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 8px;
  border-radius: 8px;
  transition: background .15s ease, transform .15s ease;
  animation: sr-row .34s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sr-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.search-result:nth-child(1) { animation-delay: .04s; }
.search-result:nth-child(2) { animation-delay: .08s; }
.search-result:nth-child(3) { animation-delay: .12s; }
.search-result:nth-child(4) { animation-delay: .16s; }
.search-result:nth-child(n+5) { animation-delay: .2s; }
.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);
}
.sf-legal a { transition: color .2s ease; }
.sf-legal a:hover { color: var(--ink); }

/* SAL / SOL consumer-dispute badges (brand column) */
.sf-badges { display: flex; gap: 10px; margin-top: 24px; }
.sf-badge { display: block; border-radius: 50%; transition: transform .2s ease, opacity .2s ease; opacity: 0.9; }
.sf-badge:hover { transform: translateY(-1px); opacity: 1; }
.sf-badge svg { display: block; width: 69px; height: 69px; }

/* ===================== 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; }

  /* left cluster: hamburger · search (include.js reparents the node here).
     The auto margin then pushes the remaining icons to the right edge. */
  .utilities { margin-left: auto; }
  /* the heart moves into the drawer on mobile (see .menu-link-wish) */
  #wishlist-btn { display: none; }

  /* wordmark another 25% down from the desktop mobile size, which buys the
     search icon its room on the left */
  .brand { gap: 4px; }
  .header .brand-mark { font-size: 9.5px; letter-spacing: 0.2em; text-indent: 0.2em; }
  .brand-mark::after { font-size: 4.5px; margin-left: 1px; }
  .brand-sub { font-size: 9.5px; }
  .header .brand-img { height: 19.5px; }   /* 26px − 25% */
  .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 glass pill laid over 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: 14px; right: 14px;
    top: 50%;
    transform: translateY(-50%);
    height: 46px;
    align-items: center;
    gap: 4px;
    padding: 0 6px 0 16px;
    background: rgba(18, 19, 25, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    z-index: 99;
    animation: hs-pill .38s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes hs-pill {
    from { opacity: 0; transform: translateY(-50%) scale(.94); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
  }
  .header.search-open .search-input {
    flex: 1;
    width: auto;
    padding: 0;
    border-bottom: 0;
    font-size: 16px;              /* keeps iOS from zooming on focus */
    letter-spacing: 0.02em;
  }
  .header.search-open .search-toggle { flex: none; width: 34px; height: 34px; }
  /* full-bleed results under the pill, matched to its radius */
  .header.search-open .search-results {
    left: 14px; right: 14px;
    width: auto;
    top: calc(50% + 32px);
    border-radius: 18px;
    padding: 8px;
  }
  .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; }
  .brand { gap: 3px; }
  .header .brand-mark { font-size: 7.9px; letter-spacing: 0.12em; text-indent: 0.12em; }
  .brand-mark::after { font-size: 4px; }
  .brand-sub { font-size: 7.9px; }
  .header.search-open .search-form { left: 10px; right: 10px; height: 42px; padding-left: 14px; }
  .header.search-open .search-results { left: 10px; right: 10px; top: calc(50% + 30px); }
}

/* ===================== REDUCED MOTION (chrome) =====================
   The nav panel and the search still change state — they just stop travelling.
   Everything keeps its open/closed appearance, so nothing becomes unreachable. */
@media (prefers-reduced-motion: reduce) {
  .menu-drawer { transition: transform .01ms linear; }
  .menu-link, .menu-utils, .menu-note { transition-duration: .01ms; transition-delay: 0s; }
  .menu-word, .menu-arrow, .hb-bar { transition-duration: .01ms; }
  .search.open .search-results,
  .search-result,
  .header.search-open .search-form { animation: none; }
  .search-result { opacity: 1; transform: none; }
}