/* ============================================================
   945 CLUB — THE HOME VIEW (index.html #homeView.nh)
   The redesign that ran at /newhome until 01/10/2026. The house palette
   (css/main.css): P 17-1 C cream, P 102-8 C indigo, P 50-16 C burgundy.
   Indigo acts, burgundy marks, cream is the paper; the night is
   indigo-black. Motion is driven by js/home.js: it sets classes (.is-in,
   .is-ready) and a few custom properties (--p, --x), and everything here
   reads them. With prefers-reduced-motion the page is the same page,
   standing still. The header, phone menu and footer: css/chrome.css.

   No smooth scrolling on html: the shop's scroll lock puts the page back
   with window.scrollTo after every window closes, and smooth would animate
   that jump for everyone.
   ============================================================ */
.nh {
  --night: #14152D;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --gut: clamp(16px, 2.2vw, 32px);
  background: var(--cream-soft, #F8EEDB);
  color: var(--ink, #1C1D3D);
  font-family: 'Inter', system-ui, sans-serif;
  /* clip, not hidden: hidden would make this div a scroll container and the
     reel's sticky frame would stop sticking. */
  overflow-x: clip;
}
.nh em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; color: var(--burgundy, #761B2C); }
.nh a { color: inherit; text-decoration: none; }
.nh ::selection { background: var(--indigo, #383C8C); color: var(--cream, #F2E0BE); }

/* ---------- Shared type ---------- */
.nh-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy, #761B2C);
  margin: 0;
}
.nh-label-light { color: rgba(248, 238, 219, 0.8); }
.nh-bracketed::before { content: '[ '; }
.nh-bracketed::after { content: ' ]'; }

/* Masked lines: each line is a window, its text rises into it. */
.nh-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.nh-line > span { display: inline-block; transition: transform 1s var(--ease-out); }
/* Hidden-until-animated only once the script is running (html.js): if it never
   runs, nothing waits for it. */
.js .nh-line > span { transform: translateY(105%); }
[data-reveal].is-in .nh-line > span { transform: none; }
[data-reveal].is-in .nh-line:nth-child(2) > span { transition-delay: 0.08s; }
[data-reveal].is-in .nh-line:nth-child(3) > span { transition-delay: 0.16s; }

/* Hover roll (.nh-roll): css/chrome.css, shared with the header. */

/* ---------- Opening ---------- */
.no-intro .nh-loader { display: none; }
.nh-loader {
  position: fixed;
  inset: 0;
  z-index: 1200; /* over the sticky header (900) */
  background: var(--night);
  color: var(--cream, #F2E0BE);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 0);
  /* If the script never runs, the opening still gets out of the way. */
  animation: nhLoaderFailsafe 0.6s 5s forwards;
}
.js .nh-loader { animation: none; }
@keyframes nhLoaderFailsafe { to { opacity: 0; visibility: hidden; } }
.nh-loader.is-gone { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-io); }

.nh-loader-pile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.nh-loader-pile img {
  position: absolute;
  width: clamp(150px, 14vw, 250px);
  height: auto; /* the width/height attributes would otherwise fix the height */
  aspect-ratio: 1 / 1; /* the shop's photographs are square */
  object-fit: cover;
  border: 6px solid var(--cream-soft, #F8EEDB);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--r, 0deg)) scale(0);
}
.nh-loader-pile img.is-in { transform: rotate(var(--r, 0deg)) scale(1); transition: transform 0.7s var(--ease-out); }

/* The mark bottom-left, the count bottom-right: the pile keeps the middle. */
.nh-loader-mark {
  position: absolute;
  z-index: 2;
  left: var(--gut);
  right: var(--gut);
  bottom: clamp(20px, 5vh, 48px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.nh-loader-mark img { width: clamp(180px, 20vw, 300px); height: auto; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.8s var(--ease-out); }
.nh-loader.is-marked .nh-loader-mark img { opacity: 1; transform: none; }
.nh-loader-count {
  display: block;
  overflow: hidden;
  font: 900 clamp(64px, 11vw, 190px) / 0.8 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  color: var(--cream, #F2E0BE);
}

/* ---------- Cursor: over the home view only (js/home.js marks .is-away) ---------- */
.nh-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 880; /* under the header */
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  background: var(--cream, #F2E0BE);
  mix-blend-mode: difference;
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), background 0.3s ease, opacity 0.2s ease;
}
.has-cursor .nh-cursor { display: flex; }
.nh-cursor.is-away { opacity: 0; }
.nh-cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.nh-cursor.is-label {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  mix-blend-mode: normal;
  background: rgba(118, 27, 44, 0.9);
  box-shadow: 0 6px 18px -8px rgba(20, 21, 45, 0.5);
}
.nh-cursor-label {
  font: 700 9px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-soft, #F8EEDB);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.nh-cursor.is-label .nh-cursor-label { opacity: 1; }
.has-cursor #homeView, .has-cursor #homeView a, .has-cursor #homeView button, .has-cursor #homeView [data-cursor] { cursor: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Hero (under the top promotional banner) ---------- */
.nh-hero { padding: 8px var(--gut) 12px; display: flex; flex-direction: column; }
.nh-wordmark {
  display: flex;
  justify-content: space-between;
  /* Full width on a tall window (20.4vw type in a box 4.675em wide). On a wide one the
     height caps both, so it is the same wordmark, smaller and centred: the letters take
     about 15% of the screen and the title band (letters + rule) about 18%, as the owner
     asked on 07/10/2026 (it was 21% and 24%). 84.2vh = 4.675 x 18vh; change both together. */
  width: min(100%, 84.2vh);
  margin: 0 auto;
  font: 900 min(20.4vw, 18vh) / 0.8 'Outfit', sans-serif;
  letter-spacing: -0.055em;
  color: var(--indigo, #383C8C);
}
/* Each letter sits in a clipping box for the slide-up reveal. The wordmark's tight
   letter-spacing makes every box up to ~0.05em narrower than the letter drawn in it, so
   the box sliced the right side off each glyph (the B at the edge most visibly). The side
   padding gives the shape room; the equal negative margin keeps every letter exactly
   where it was. */
.nh-mask { display: inline-block; overflow: hidden; padding: 0 0.06em 0.04em; margin: 0 -0.06em; }
.nh-mask > span { display: inline-block; }
.js .nh-mask > span { transform: translateY(102%); }
.is-ready .nh-mask > span { transform: none; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.nh-wordmark-club > span { color: var(--indigo-deep, #2B2E73); }

.nh-rule { height: 5px; background: var(--burgundy, #761B2C); margin: 18px 0 22px; transform-origin: left; }
.js .nh-rule { transform: scaleX(0); }
.is-ready .nh-rule { transform: none; transition: transform 1.3s var(--ease-io) 0.35s; }

.nh-hero-grid { display: grid; grid-template-columns: 1fr 2fr 1.4fr auto; gap: 24px; align-items: start; }
.nh-hero-statement { margin: 0; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.4; font-weight: 500; color: var(--ink); }
.nh-hero-meta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.nh-rating { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); }
.js .nh-hero-meta, .js .nh-hero-year, .js .nh-hero-grid > .nh-label { opacity: 0; transform: translateY(12px); }
.is-ready .nh-hero-meta, .is-ready .nh-hero-year, .is-ready .nh-hero-grid > .nh-label { opacity: 1; transform: none; transition: opacity 0.8s ease 0.6s, transform 1s var(--ease-out) 0.6s; }
@media (max-width: 900px) {
  .nh-hero-grid { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .nh-hero-statement { grid-column: 1 / -1; order: -2; }
  .nh-hero-meta { grid-column: 1 / -1; order: -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .nh-hero-year { justify-self: end; }
}

/* The call to action: indigo, magnetic, its gradient ring cream to burgundy. */
.nh-cta {
  position: relative;
  display: inline-flex;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--indigo, #383C8C);
  color: var(--cream-soft, #F8EEDB) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease;
  will-change: transform;
}
.nh-cta::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, var(--cream, #F2E0BE), var(--burgundy, #761B2C));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.nh-cta:hover { background: var(--indigo-deep, #2B2E73); }
/* The quiet way into Find your pair, under the collection button. */
.nh-help { font: 600 14px 'Inter', sans-serif; color: var(--indigo); text-decoration: underline; text-underline-offset: 4px; }
.nh-help:hover { color: var(--burgundy); }

/* ============ NEED A HAND BAR ============ */
.nh-section.nh-assist,
.nh-assist {
  padding: clamp(28px, 4vw, 48px) var(--gut) 0 !important;
  position: relative;
  z-index: 2;
}
.nh-assist-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px 12px 22px;
  background: var(--surface-secondary, #F3E6CC);
  border: 1px solid var(--hair, #E6D5B5);
  border-radius: 999px;
  box-shadow: 0 4px 18px -6px rgba(28, 29, 61, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.nh-assist-bar:hover {
  border-color: rgba(56, 60, 140, 0.28);
  box-shadow: 0 6px 22px -6px rgba(28, 29, 61, 0.09);
}
.nh-assist-bar-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.nh-assist-bar-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nh-assist-bar-icon {
  width: 22px;
  height: 22px;
  color: var(--indigo, #383C8C);
  flex-shrink: 0;
  display: block;
}
.nh-assist-bar-title {
  margin: 0;
  font: 800 clamp(20px, 1.8vw, 24px) / 1 'Outfit', sans-serif;
  letter-spacing: -0.035em;
  color: var(--indigo, #383C8C);
  display: inline-flex;
  align-items: baseline;
  gap: 0.24em;
  white-space: nowrap;
}
.nh-assist-bar-title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--burgundy, #761B2C);
}
.nh-assist-bar-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(56, 60, 140, 0.22);
  flex-shrink: 0;
}
.nh-assist-bar-sub {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.4;
  color: var(--ink2, #5E5870);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nh-assist-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nh-assist-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(56, 60, 140, 0.32);
  background: transparent;
  color: var(--indigo, #383C8C);
  font: 600 13px / 1 'Inter', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s var(--ease-out);
}
.nh-assist-bar-btn .nh-assist-arrow {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  transition: transform 0.25s var(--ease-out);
}
.nh-assist-bar-btn:hover {
  background: rgba(56, 60, 140, 0.08);
  border-color: var(--indigo, #383C8C);
  color: var(--indigo-deep, #2B2E73);
  transform: translateY(-1px);
}
.nh-assist-bar-btn:hover .nh-assist-arrow {
  transform: translateX(3px);
}
.nh-assist-bar-btn:focus-visible {
  outline: 2px solid var(--indigo, #383C8C);
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .nh-assist-bar-sub {
    white-space: normal;
  }
}
@media (max-width: 900px) {
  .nh-assist-bar {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 22px;
    padding: 16px 20px;
    gap: 14px;
  }
  .nh-assist-bar-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  .nh-assist-bar-divider {
    display: none;
  }
  .nh-assist-bar-sub {
    white-space: normal;
  }
  .nh-assist-bar-actions {
    width: 100%;
    display: flex;
    gap: 10px;
  }
  .nh-assist-bar-btn {
    flex: 1;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .nh-assist-bar-actions {
    flex-direction: column;
  }
  .nh-assist-bar-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nh-assist-bar, .nh-assist-bar-btn, .nh-assist-bar-btn .nh-assist-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* Dark mode for nh-assist-bar */
html[data-theme="dark"] .nh-assist-bar {
  background: rgba(242, 224, 190, 0.05);
  border-color: rgba(242, 224, 190, 0.12);
  box-shadow: none;
}
html[data-theme="dark"] .nh-assist-bar:hover {
  border-color: rgba(242, 224, 190, 0.24);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .nh-assist-bar-icon {
  color: var(--cream, #F2E0BE);
}
html[data-theme="dark"] .nh-assist-bar-title {
  color: var(--cream, #F2E0BE);
}
html[data-theme="dark"] .nh-assist-bar-title em {
  color: #E3A6B1;
}
html[data-theme="dark"] .nh-assist-bar-divider {
  background: rgba(242, 224, 190, 0.16);
}
html[data-theme="dark"] .nh-assist-bar-sub {
  color: rgba(242, 224, 190, 0.65);
}
html[data-theme="dark"] .nh-assist-bar-btn {
  border-color: rgba(242, 224, 190, 0.28);
  color: var(--cream, #F2E0BE);
}
html[data-theme="dark"] .nh-assist-bar-btn:hover {
  background: rgba(242, 224, 190, 0.1);
  border-color: var(--cream, #F2E0BE);
  color: var(--cream-soft, #F8EEDB);
}
[data-magnetic] { display: inline-flex; transition: transform 0.5s var(--ease-out); }

/* ---------- Reel ---------- */
.nh-reel { height: 190vh; position: relative; }
.nh-reel-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  --p: 0;
  clip-path: inset(calc((1 - var(--p)) * 14vh) calc((1 - var(--p)) * 16vw) round calc((1 - var(--p)) * 28px));
  background: var(--night);
}
/* The two films of the carousel (js/app.js initHeroVideo): one plays, the
   next loads beneath it, and they cross-fade (it sets their opacity). */
.nh-reel-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.18 - var(--p) * 0.18));
  transition: opacity 0.6s ease;
}
/* A night at the foot of the frame, so the words read over any film. */
.nh-reel-frame::after {
  content: '';
  position: absolute;
  inset: 35% 0 0 0;
  background: linear-gradient(180deg, rgba(20, 21, 45, 0), rgba(20, 21, 45, 0.7));
  pointer-events: none;
}
/* Kept inside the visible window: the frame is inset by (1 - p) x 16vw / 14vh
   while it opens, so the copy moves in by the same amount. */
.nh-reel-copy {
  position: absolute;
  z-index: 1;
  left: calc(var(--gut) + (1 - var(--p)) * 16vw);
  bottom: calc(6vh + (1 - var(--p)) * 14vh);
  right: calc(var(--gut) + (1 - var(--p)) * 16vw);
  color: var(--cream-soft, #F8EEDB);
}
/* The film's own line, "(Nike running innovation)": it fades as the film changes. */
.nh-reel-eyebrow { transition: opacity 0.28s ease, transform 0.28s ease; }
.nh-reel-eyebrow::before { content: '( '; }
.nh-reel-eyebrow::after { content: ' )'; }
.nh-reel-title { margin: 10px 0 0; font: 800 clamp(40px, 7vw, 108px) / 0.95 'Outfit', sans-serif; letter-spacing: -0.04em; }
.nh-reel-title em { color: var(--cream, #F2E0BE); }
.nh-reel-ui { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); margin-top: clamp(18px, 2.6vw, 30px); }
/* One segment per film; the one playing is lit. */
.nh-reel-dots { flex: 1; display: flex; gap: 6px; min-width: 0; }
#heroDotsNav .hero-dot {
  flex: 1;
  width: auto;
  height: 3px;
  min-width: 0;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
/* A taller tap target than the 3 px line it draws. */
#heroDotsNav .hero-dot::before { content: ''; position: absolute; inset: -12px 0; }
#heroDotsNav .hero-dot.active { width: auto; border-radius: 3px; }
.nh-reel-ctrls { display: flex; gap: 8px; flex-shrink: 0; }
.nh-reel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(248, 238, 219, 0.45);
  background: rgba(20, 21, 45, 0.25);
  color: var(--cream-soft, #F8EEDB);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.nh-reel-btn:hover { background: rgba(248, 238, 219, 0.16); border-color: var(--cream-soft, #F8EEDB); }
.nh-reel-btn:active { transform: scale(0.94); }
.nh-reel-btn:focus-visible, #heroDotsNav .hero-dot:focus-visible { outline: 2px solid var(--cream, #F2E0BE); outline-offset: 3px; }
@media (max-width: 720px) {
  .nh-reel-ui { flex-wrap: wrap; }
  .nh-reel-dots { flex-basis: 100%; }
  .nh-reel-ctrls { margin-left: auto; }
  .nh-reel-btn { width: 44px; height: 44px; }
}

/* ---------- Sections ---------- */
.nh-section { padding: clamp(80px, 12vw, 150px) var(--gut) 0; }
.nh-section-head {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: end;
  gap: 8px 24px;
  margin-bottom: 36px;
  border-bottom: 1.5px solid var(--indigo, #383C8C);
  padding-bottom: 18px;
}
.nh-num { margin: 0; font: 600 14px/1 'Outfit', sans-serif; color: var(--burgundy, #761B2C); }
.nh-title { margin: 0; font: 800 clamp(38px, 6vw, 92px) / 0.95 'Outfit', sans-serif; letter-spacing: -0.045em; color: var(--indigo, #383C8C); }
.nh-section-note { grid-column: 2; margin: 0; font-size: 14px; color: var(--ink2, #5E5870); }
.nh-link-roll { grid-column: 3; grid-row: 1; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); }
@media (max-width: 720px) {
  .nh-section-head { grid-template-columns: 1fr auto; }
  .nh-num { grid-column: 1 / -1; }
  .nh-section-note { grid-column: 1; }
  .nh-link-roll { grid-column: 2; grid-row: 2; }
}

/* ---------- 01. Rail ---------- */
.nh-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px var(--gut) 30px;
  margin: 0 calc(-1 * var(--gut));
  --stretch: 1;
  user-select: none;
  outline: none;
}
.nh-rail::-webkit-scrollbar { display: none; }
.nh-rail.is-dragging { scroll-behavior: auto; }
.nh-card {
  flex: 0 0 clamp(220px, 23vw, 330px);
  display: flex;
  flex-direction: column;
  transform: scaleX(var(--stretch)) ;
  transform-origin: center;
  transition: transform 0.4s var(--ease-out);
}
.nh-card-media {
  position: relative;
  aspect-ratio: 1 / 1; /* the photos are square: filled edge to edge, their
                          backdrop multiplies onto the page colour (--plate) */
  background: #FFF6E3;
  border-radius: 4px;
  overflow: hidden;
}
.nh-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.9s var(--ease-out);
  -webkit-user-drag: none;
}
@media (hover: hover) { .nh-card:hover .nh-card-media img { transform: scale(1.06); } }
.nh-card-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--burgundy); }
.nh-card-name { margin: 14px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.nh-card-price { margin: 0; font: 600 15px/1.3 'Outfit', sans-serif; color: var(--indigo); }
.nh-card-price s { font-weight: 400; color: var(--ink2); margin-left: 6px; font-size: 13px; }
.nh-card-sizes { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.06em; color: var(--ink2); }
.nh-card-sizes span { margin-right: 6px; }
.nh-card.is-in { animation: nhCardIn 0.9s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes nhCardIn { from { opacity: 0; transform: translateY(40px); } }


/* ---------- 02. The Brands showcase ---------- */
.nh-brands {
  padding-top: clamp(60px, 8vw, 110px);
}
.nh-brands-head {
  margin-bottom: clamp(28px, 4vw, 44px);
}
.nh-brands-eyebrow {
  margin: 0;
  font: 700 13px / 1 'Outfit', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--burgundy, #761B2C);
}
.nh-brands-num {
  font-weight: 700;
  color: var(--burgundy, #761B2C);
  margin-right: 6px;
}

.nh-brands-bar-wrap {
  width: 100%;
}
.nh-brands-track {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.nh-brand-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  padding: 0 clamp(4px, 0.45vw, 8px);
}

/* Seven equal tiles on a cream plate. The logo height grows with the screen (--logo-h) and each
   mark keeps its optical share of it (.nh-logo-*, shared with the ribbon), so a wide mark is
   never shrunk to a sliver and a 2000 px screen does not leave them floating. Indigo on hover. */
.nh-brand-card {
  --logo-h: clamp(22px, 1.8vw, 36px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(112px, 8.6vw, 160px);
  padding: 0 clamp(8px, 1vw, 18px) 14px;
  border: 1px solid rgba(56, 60, 140, 0.14);
  border-radius: 12px;
  background: linear-gradient(145deg, #fff9ed, var(--plate, #FFF6E3));
  text-decoration: none;
  user-select: none;
  transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.nh-brand-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.38) 50%, transparent 75%);
  transform: translateX(-150%);
  pointer-events: none;
}
.nh-brand-card::after {
  content: '↗';
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--burgundy, #761B2C);
  font-size: 15px;
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out), color 0.3s ease;
}
.nh-brand-name {
  position: absolute;
  bottom: 16px;
  font: 700 9px/1 'Outfit', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo, #383C8C);
  opacity: 0.6;
  transition: color 0.45s ease, opacity 0.45s ease;
}
.nh-brand-img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) saturate(100%) invert(23%) sepia(48%) saturate(2360%) hue-rotate(222deg) brightness(87%) contrast(92%);
  transition: filter 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.nh-brand-card:not(.is-soon):is(:hover, :focus-visible) {
  background-image: none;
  background-color: var(--indigo, #383C8C);
  border-color: var(--indigo, #383C8C);
  box-shadow: 0 16px 30px -14px rgba(56, 60, 140, 0.55);
  transform: translateY(-4px);
}
.nh-brand-card:not(.is-soon):is(:hover, :focus-visible) .nh-brand-img {
  filter: brightness(0) invert(1);
  transform: scale(1.06);
}
.nh-brand-card:not(.is-soon):is(:hover, :focus-visible) .nh-brand-name { color: #fff; opacity: 0.8; }
.nh-brand-card:not(.is-soon):is(:hover, :focus-visible)::after { color: #fff; opacity: 1; transform: translate(3px, -3px); }
.nh-brand-card:focus-visible { outline: 3px solid var(--burgundy, #761B2C); outline-offset: 3px; }
/* Nothing in stock: shown, not offered (js/home.js paintBrands). */
.nh-brand-card.is-soon {
  opacity: 0.5;
  cursor: default;
  border-style: dashed;
}
.nh-brand-card.is-soon::after { content: none; }

/* Desktop View All Brands item */
.nh-brand-slot-all {
  flex: 0 0 auto;
  border-right: none;
  padding: 0 8px 0 24px;
}

.nh-brands-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 11px / 1 'Outfit', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy, #761B2C);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 4px;
  transition: color 0.2s ease;
}
.nh-brands-arrow {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.24s var(--ease-out);
}
.nh-brands-view-all:hover .nh-brands-arrow {
  transform: translateX(4px);
}

.nh-brands-dots,
.nh-brands-mobile-all {
  display: none;
}

/* Entrance reveal */
.js .nh-brand-slot {
  opacity: 0;
  transform: translateY(22px);
}
.nh-brand-slot.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: no-preference) {
  .nh-brand-slot.is-in .nh-brand-card::before { animation: nhBrandShine 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 350ms); }
  @keyframes nhBrandShine { 0%, 55% { transform: translateX(-150%); } 85%, 100% { transform: translateX(150%); } }
}

/* Mobile & Tablet Layout */
@media (max-width: 900px) {
  .nh-brands-bar-wrap {
    overflow: hidden;
  }
  .nh-brands-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut));
    padding: 6px var(--gut) 8px;
  }
  .nh-brands-track::-webkit-scrollbar {
    display: none;
  }
  .nh-brand-slot {
    flex: 0 0 calc((100% - 2px) / 3);
    min-width: 95px;
    scroll-snap-align: start;
    padding: 0 3px;
  }
  .nh-brand-slot-all {
    display: none;
  }
  .nh-brand-card {
    --logo-h: 21px;
    height: 108px;
    padding: 0 8px 12px;
    border-radius: 10px;
  }
  .nh-brand-card::after { top: 8px; right: 10px; font-size: 13px; }
  .nh-brand-name { bottom: 12px; font-size: 8px; }
  .nh-brands-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 8px 0 12px;
  }
  .nh-brands-dot {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }
  .nh-brands-dot::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    margin: auto;
    border-radius: 50%;
    background: rgba(56, 60, 140, 0.22);
    transition: background-color 0.22s ease, transform 0.22s ease;
  }
  .nh-brands-dot.is-active::after {
    background: var(--indigo, #383C8C);
    transform: scale(1.2);
  }
  .nh-brands-dot:focus-visible { outline: 2px solid var(--burgundy, #761B2C); outline-offset: -4px; }
  .nh-brands-mobile-all {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }
  .nh-brands-mobile-all .nh-brands-view-all {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

/* ---------- 04. For everyone: three small "Shop X" cards ----------
   A portrait on the left (heads kept in frame), "Shop" over the name in the site's Outfit
   indigo, an arrow that fills on hover. Tokens throughout, so the dark theme flips it. */
.nh-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.nh-panel {
  display: grid;
  grid-template-columns: 40% 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  height: clamp(150px, 13.5vw, 210px);
  padding-right: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-secondary, #F3E6CC);
  border: 1px solid var(--hair, #E6D5B5);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s ease;
}
.nh-panel-media {
  display: block;
  height: 100%;
  overflow: hidden;
  transition: clip-path 1.2s var(--ease-io);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .nh-panel-media { clip-path: inset(0 100% 0 0); }
.nh-panel.is-in .nh-panel-media { clip-path: inset(0 0 0 0); }
.nh-panel-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform 1.2s var(--ease-out), opacity 0.3s ease; }
/* Cycling the shop's products (js/home.js paintPeople): the packshot multiplied into the cream
   plate, as 01. Select's cards; the plate stays cream in the dark theme, as theirs does. */
.nh-panel.is-product .nh-panel-media { background: #FFF6E3; }
.nh-panel.is-product .nh-panel-media img { box-sizing: border-box; padding: 10%; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
.nh-panel-media img.is-swapping { opacity: 0; }
.nh-panel-pick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(10.5px, 0.75vw, 13px); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink2, #5E5870); }
.js .nh-panel-media img { transform: scale(1.2); }
.nh-panel.is-in .nh-panel-media img { transform: none; }
.nh-panel-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nh-panel-kicker { font-size: clamp(11px, 0.75vw, 13px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--burgundy, #761B2C); }
.nh-panel-name { font: 800 clamp(28px, 2.9vw, 48px) / 1 'Outfit', sans-serif; letter-spacing: -0.04em; color: var(--indigo, #383C8C); }
.nh-panel-go {
  display: grid;
  place-items: center;
  width: clamp(40px, 2.6vw, 50px);
  height: clamp(40px, 2.6vw, 50px);
  border-radius: 50%;
  border: 1px solid var(--indigo, #383C8C);
  color: var(--indigo, #383C8C);
  font-size: 16px;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
@media (hover: hover) {
  .nh-panel:hover { transform: translateY(-4px); border-color: var(--indigo, #383C8C); box-shadow: 0 18px 34px -20px rgba(56, 60, 140, 0.5); }
  .nh-panel:hover .nh-panel-media img { transform: scale(1.08); }
  .nh-panel:hover .nh-panel-go { background: var(--indigo, #383C8C); color: var(--surface-secondary, #F3E6CC); transform: translateX(4px); }
}
.nh-panel:focus-visible { outline: 3px solid var(--burgundy, #761B2C); outline-offset: 3px; }
@media (max-width: 720px) {
  .nh-people-grid { grid-template-columns: 1fr; gap: 10px; }
  .nh-panel { height: 116px; grid-template-columns: 32% 1fr auto; }
  .nh-panel-name { font-size: 26px; }
  .nh-panel-go { width: 34px; height: 34px; font-size: 14px; }
}

/* ---------- Marquee ---------- */
.home-reviews-sec:not([hidden]) + .nh-marquee { margin-top: 0; }
/* Fixed hex: the dark theme turns --burgundy pink and the cream words vanished on it. */
.nh-marquee { margin-top: clamp(90px, 12vw, 150px); background: #761B2C; color: #F2E0BE; overflow: hidden; padding: 18px 0; }
.nh-marquee-track { display: flex; width: max-content; gap: 28px; align-items: center; animation: nhMarquee 26s linear infinite; font: 700 clamp(20px, 2.6vw, 36px) / 1 'Outfit', sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.nh-marquee-track i { font-style: normal; font-size: 0.6em; opacity: 0.7; }
@keyframes nhMarquee { to { transform: translateX(-50%); } }

/* ---------- Brand ribbon ---------- */
.nh-ribbon {
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid rgba(56, 60, 140, 0.16);
  border-bottom: 1px solid rgba(56, 60, 140, 0.16);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nh-ribbon-track { display: flex; width: max-content; animation: nhRibbon 30s linear infinite; }
.nh-ribbon-group { display: flex; align-items: center; }
.nh-ribbon img { display: block; width: auto; margin: 0 clamp(26px, 3.6vw, 54px); mix-blend-mode: multiply; filter: brightness(0); }
.nh-logo-nike { height: calc(var(--logo-h, 25px) * 1.28); }
.nh-logo-adidas { height: calc(var(--logo-h, 25px) * 1.36); }
.nh-logo-puma { height: calc(var(--logo-h, 25px) * 1.24); }
.nh-logo-asics { height: var(--logo-h, 25px); }
.nh-logo-skechers { height: calc(var(--logo-h, 25px) * 0.52); }
.nh-logo-reebok { height: calc(var(--logo-h, 25px) * 0.96); }
.nh-logo-crocs { height: calc(var(--logo-h, 25px) * 0.88); }
/* The track slides by exactly one logo group, then loops. Two groups only cover
   a screen up to one group wide: past that the track's right end slid into view
   as a blank stretch, which snapped back to full at every loop -- the ribbon
   "disappearing". Six groups cover any screen up to five groups (~5000px) wide.
   Keep the 6 here and the number of .nh-ribbon-group copies in index.html equal. */
@keyframes nhRibbon { to { transform: translateX(calc(-100% / 6)); } }
@media (hover: hover) { .nh-ribbon:hover .nh-ribbon-track { animation-play-state: paused; } }
@media (max-width: 720px) {
  .nh-ribbon { padding: 16px 0; --logo-h: 20px; }
}

/* ---------- 02. New drops & top picks ---------- */
.nh-drops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.nh-drop { position: relative; display: block; }
.nh-drop:nth-child(2) { margin-top: clamp(30px, 5vw, 84px); }
.nh-drop-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--night);
  transition: clip-path 1.2s var(--ease-io);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .nh-drop-media { clip-path: inset(100% 0 0 0); }
.nh-drop.is-in .nh-drop-media { clip-path: inset(0 0 0 0); }
/* Parallax on `translate` (set per scroll frame, never transitioned), the
   hover zoom on `scale` (transitioned): two properties, so neither drags. */
.nh-drop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  translate: 0 var(--py, 0px);
  scale: var(--z, 1.14);
  transition: scale 1s var(--ease-out);
}
@media (hover: hover) { .nh-drop:hover .nh-drop-media img { --z: 1.2; } }
.nh-drop-media::after { content: ''; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, rgba(20, 21, 45, 0), rgba(20, 21, 45, 0.62)); }
.nh-drop-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 8px; color: var(--cream-soft, #F8EEDB); }
.nh-drop-title { font: 800 clamp(26px, 2.8vw, 44px) / 1 'Outfit', sans-serif; letter-spacing: -0.04em; }
/* The words let clicks through to the plate's link; only the two buttons take their own. */
.nh-drop-cap { pointer-events: none; }
.nh-drop-cap .nh-bc-ctas { margin-top: 4px; pointer-events: auto; }
/* Shop all is the card's one button, filled burgundy (the banner's Shop now look). */
.nh-drop .nh-bc-ctas .nh-bc-all { border-color: transparent; background: linear-gradient(180deg, #7E1F31, #4A0F1B); color: #F8EEDB; box-shadow: 0 10px 24px -10px rgba(74, 15, 27, 0.7); }
.nh-drop .nh-bc-ctas .nh-bc-all:hover { background: #4A0F1B; color: #F8EEDB; }
/* A real product (js/home.js paintDrops): the same box, cream, with the product's own square
   photograph as a tile above the words, which turn dark. The photo fills its tile edge to edge
   (its studio backdrop would show as a second, smaller square if it were inset). Fixed colours:
   the card stays cream in the dark theme. */
.nh-drop.is-product .nh-drop-media { background: #FFF6E3; }
.nh-drop.is-product .nh-drop-media::after { display: none; }
.nh-drop.is-product .nh-drop-media img {
  position: absolute;
  top: 5%;
  left: 50%;
  width: auto;
  height: 54%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  transform: translateX(-50%);
  scale: 1;
  box-shadow: 0 24px 40px -26px rgba(28, 29, 61, 0.45);
}
.nh-drop.is-product .nh-drop-cap { color: #1C1D3D; }
.nh-drop.is-product .nh-drop-cap .nh-label { color: #761B2C; }
.nh-drop-pick:empty { display: none; }
.nh-drop-pick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 clamp(10px, 0.9vw, 13px) / 1.3 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #5E5870; }
@media (max-width: 720px) {
  .nh-drops { grid-template-columns: 1fr; }
  .nh-drop:nth-child(2) { margin-top: 0; }
  .nh-drop-media { aspect-ratio: 4 / 3; }
  /* Landscape on a phone: the product on the right, the words and buttons on the left. */
  .nh-drop.is-product .nh-drop-media img { top: 18%; left: auto; right: 4%; height: 64%; transform: none; }
  .nh-drop.is-product .nh-drop-cap { right: 52%; }
}

/* ---------- 05. Built for every movement: the panel you point at opens ---------- */
.nh-acc-row { display: flex; gap: 10px; height: clamp(420px, 44vw, 600px); }
.nh-acc {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--night);
  color: var(--cream-soft, #F8EEDB);
  transition: flex-grow 0.8s var(--ease-io), opacity 0.8s ease, translate 1s var(--ease-out);
  transition-delay: 0s, calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms);
}
.js .nh-acc { opacity: 0; translate: 0 40px; }
.nh-acc.is-in { opacity: 1; translate: 0 0; }
.nh-acc.is-open { flex-grow: 5.5; }
/* Set on the labels themselves: `.nh a { color: inherit }` outranks the panel. */
.nh-acc-v, .nh-acc-h { color: var(--cream-soft, #F8EEDB); }
.nh-acc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.08;
  filter: saturate(0.25) brightness(0.5);
  transition: scale 1.2s var(--ease-out), filter 0.8s ease;
}
.nh-acc.is-open img { scale: 1; filter: none; }
.nh-acc::after { content: ''; position: absolute; inset: 40% 0 0 0; background: linear-gradient(180deg, rgba(20, 21, 45, 0), rgba(20, 21, 45, 0.66)); pointer-events: none; }
.nh-acc-n { position: absolute; top: 16px; left: 16px; z-index: 1; font: 600 12px/1 'Outfit', sans-serif; letter-spacing: 0.08em; color: rgba(242, 224, 190, 0.85); }
.nh-acc-v {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font: 800 clamp(18px, 1.5vw, 24px) / 1 'Outfit', sans-serif;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}
.nh-acc.is-open .nh-acc-v { opacity: 0; }
.nh-acc-h {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.6s var(--ease-out);
}
.nh-acc.is-open .nh-acc-h { opacity: 1; transform: none; transition-delay: 0.3s; }
.nh-acc-title { font: 800 clamp(34px, 3.8vw, 60px) / 0.95 'Outfit', sans-serif; letter-spacing: -0.045em; white-space: nowrap; }
.nh-acc:focus-visible { outline: 3px solid var(--burgundy); outline-offset: 3px; }
/* A panel showing one of the shop's own products (js/home.js paintProductPanels): the
   packshot sits whole on a cream plate (multiplied, so its white ground becomes the plate)
   with room left below it for the words, which turn dark to read on cream. Closed, it is
   faded like the photographs; open, in full colour. */
.nh-acc.is-product { background: var(--plate, #FFF6E3); }
.nh-acc.is-product img {
  box-sizing: border-box;
  padding: 9% 7% 30%;
  object-fit: contain;
  mix-blend-mode: multiply;
  scale: 0.94;
  filter: saturate(0.2) opacity(0.75);
}
.nh-acc.is-product.is-open img { scale: 1; filter: none; }
.nh-acc.is-product::after { display: none; }
.nh-acc.is-product .nh-acc-v,
.nh-acc.is-product .nh-acc-h { color: var(--night, #14152D); }
.nh-acc.is-product .nh-acc-n { color: rgba(20, 21, 45, 0.6); }
.nh-acc.is-product .nh-label-light { color: rgba(20, 21, 45, 0.72); }
.nh-acc-pick {
  font: 600 12.5px/1.35 'Outfit', sans-serif;
  letter-spacing: 0.01em;
  opacity: 0.78;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* On a phone the panels become the shop's own card (01. Select's .nh-card), two to a row:
   a cream plate with the product multiplied into it, the number as the burgundy tag, the
   name in Outfit under it, the product's own name below that. The plate stays cream in the
   dark theme, as .nh-card-media does, so its words are fixed hex: the theme's tokens turn light. The page's reveal is the entrance (.is-in: the card
   rises, then its photograph slides in), and the script's rolling highlight (.is-open)
   lifts each card in turn. */
@media (max-width: 900px) {
  .nh-acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: auto; }
  .nh-acc {
    display: flex;
    flex-direction: column;
    padding: 0 0 12px;
    border-radius: 4px;
    background: #FFF6E3;
    transition: opacity 0.8s ease, translate 1s var(--ease-out), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s, 0s;
  }
  .nh-acc::after, .nh-acc-v { display: none; }
  .nh-acc .nh-acc-n, .nh-acc.is-product .nh-acc-n { top: 10px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #761B2C; }
  .nh-acc-h { position: relative; left: auto; right: auto; bottom: auto; padding: 0 12px; gap: 3px; opacity: 1; transform: none; }
  .nh-acc .nh-acc-h .nh-label { font-size: 9.5px; letter-spacing: 0.1em; color: #761B2C; }
  .nh-acc-title { font: 800 18px / 1.05 'Outfit', sans-serif; letter-spacing: -0.03em; white-space: normal; color: #383C8C; }
  .nh-acc-pick { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #1C1D3D; }
  .nh-acc img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    object-fit: cover;
    scale: 1;
    filter: none;
    mix-blend-mode: multiply;
    transition: transform 0.4s var(--ease), translate 0.9s var(--ease-out) calc(var(--i, 0) * 60ms + 0.15s), opacity 0.6s ease calc(var(--i, 0) * 60ms + 0.15s);
  }
  .nh-acc.is-product img { padding: 10%; filter: none; scale: 1; }
  .js .nh-acc img { translate: 28px 0; opacity: 0; }
  .js .nh-acc.is-in img { translate: 0 0; opacity: 1; }
  .nh-acc.is-open { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(56, 60, 140, 0.45); }
  .nh-acc.is-open img { transform: scale(1.1) rotate(-2deg); }
  .nh-acc:active { transform: scale(0.97); }
  html[data-theme="dark"] .nh-acc.is-open { box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6); }
}
@media (max-width: 480px) {
  .nh-acc-row { gap: 8px; }
  .nh-acc-title { font-size: 15px; }
}

/* ---------- 06. Apparel & streetwear: the movement cards, apparel picks (#nhAppAccordion) ---------- */
/* The id is the classic section's (the footer and the mega menu link to it),
   and so are its rules: components.css / responsive.css pad #apparel with no
   sides, theme.css paints it in dark. Its own section's padding, here. */
#homeView #apparel.nh-section { padding: clamp(80px, 12vw, 150px) var(--gut) 0; background: transparent; }
html[data-theme="dark"] #homeView #apparel.nh-section { background: transparent !important; }

/* ---------- Dark (the toggle in the header): the same page at night ---------- */
html[data-theme="dark"] .nh { background: var(--night); color: #F2E0BE; }
html[data-theme="dark"] .nh em { color: #E3A6B1; }
/* theme.css paints every dark heading white, !important. */
html[data-theme="dark"] .nh :is(.nh-wordmark, .nh-title, .nh-reel-title) { color: #F2E0BE !important; }
html[data-theme="dark"] :is(.nh-index-name, .nh-card-price, .nh-rating, .nh-link-roll, .nh-index-go) { color: #F2E0BE; }
html[data-theme="dark"] .nh-wordmark-club > span { color: #E2CFA8; }
html[data-theme="dark"] :is(.nh-hero-statement, .nh-card-name) { color: rgba(242, 224, 190, 0.9); }
html[data-theme="dark"] :is(.nh-section-note, .nh-card-sizes, .nh-index-count, .nh-card-price s) { color: rgba(242, 224, 190, 0.6); }
html[data-theme="dark"] :is(.nh-label:not(.nh-label-light), .nh-num, .nh-index-n) { color: #E3A6B1; }
/* The tag sits on the card's photo plate, which stays cream in the dark theme, so it keeps the light-theme burgundy. */
html[data-theme="dark"] .nh-card-tag { color: #761B2C; }
html[data-theme="dark"] .nh-rule { background: #E3A6B1; }
html[data-theme="dark"] .nh-brands-eyebrow,
html[data-theme="dark"] .nh-brands-num { color: #E3A6B1; }
html[data-theme="dark"] .nh-brand-card { background: rgba(242, 224, 190, 0.05); border-color: rgba(242, 224, 190, 0.14); }
html[data-theme="dark"] .nh-brand-name, html[data-theme="dark"] .nh-brand-card::after { color: #F2E0BE; }
html[data-theme="dark"] .nh-brand-card::before { opacity: 0.18; }
html[data-theme="dark"] .nh-brand-img {
  filter: brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(800%) hue-rotate(335deg) brightness(98%) contrast(96%);
}
html[data-theme="dark"] .nh-brand-card:not(.is-soon):is(:hover, :focus-visible) { background-color: #383C8C; border-color: #383C8C; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .nh-brand-card:not(.is-soon):is(:hover, :focus-visible) .nh-brand-img { filter: brightness(0) invert(1); }
html[data-theme="dark"] .nh-brands-view-all { color: #E3A6B1; }
html[data-theme="dark"] .nh-brands-dot::after { background: rgba(242, 224, 190, 0.22); }
html[data-theme="dark"] .nh-brands-dot.is-active::after { background: #F2E0BE; }
html[data-theme="dark"] .nh-cta { background: #F2E0BE; color: var(--night) !important; }
html[data-theme="dark"] .nh-cta:hover { background: #FFF6E3; }
html[data-theme="dark"] .nh-ribbon { border-color: rgba(242, 224, 190, 0.14); }
html[data-theme="dark"] .nh-ribbon img { mix-blend-mode: screen; filter: brightness(0) invert(1); }

/* ---------- Standing still ---------- */
@media (prefers-reduced-motion: reduce) {
  .nh-brand-card, .nh-brand-img, .nh-brand-name, .nh-brand-card::after { transition: none; transform: none !important; }
  .nh-line > span, .nh-mask > span, .nh-rule, .nh-hero-meta, .nh-hero-year, .nh-hero-grid > .nh-label,
  .nh-brand-slot, .nh-panel-media, .nh-panel-media img { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .nh-reel-frame { clip-path: none; }
  .nh-reel-vid { transform: none; }
  .nh-word { opacity: 1; }
  .nh-marquee-track, .nh-ribbon-track { animation: none; }
  .nh-drop-media { clip-path: none !important; transition: none !important; }
  .nh-acc { opacity: 1 !important; translate: none !important; }
  .nh-acc img { translate: none !important; opacity: 1 !important; }
  .nh-acc.is-open, .nh-acc.is-open img { transform: none !important; }
  .nh-drop-media img { translate: none; }
  .nh-card.is-in { animation: none; }
}