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

/* ---------- Hero (under the site's sticky header) ---------- */
.nh-hero { padding: clamp(22px, 3.4vw, 48px) var(--gut) 56px; 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? -- Find your size and Find your pair, one tap from the top of the page. */
.nh-assist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nh-assist-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 3.5vw, 44px);
  border-radius: 24px; background: var(--surface-secondary, #F3E6CC); border: 1px solid var(--hair, #E6D5B5); color: var(--ink, #1C1D3D);
  transition: transform 0.4s var(--ease-out), border-color 0.3s ease; }
.nh-assist-card:hover { transform: translateY(-4px); border-color: var(--indigo, #383C8C); }
.nh-assist-card:focus-visible { outline: 2px solid var(--indigo, #383C8C); outline-offset: 4px; }
.nh-assist-title { font: 800 clamp(26px, 3.2vw, 44px) / 1.02 'Outfit', sans-serif; letter-spacing: -0.04em; color: var(--indigo, #383C8C); }
.nh-assist-text { max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--ink2, #5E5870); }
.nh-assist-card .nh-cta { margin-top: auto; }
@media (max-width: 720px) { .nh-assist-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nh-assist-card { transition: none; } .nh-assist-card:hover { transform: none; } }
[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); } }

/* ---------- Manifesto ---------- */
/* No bottom padding: the next section brings its own top padding, which used to stack on this. */
.nh-manifesto { padding: clamp(56px, 8vw, 110px) var(--gut) 0; }
.nh-manifesto-text {
  margin: 0 auto;
  max-width: 1200px;
  font: 700 clamp(30px, 4.6vw, 70px) / 1.08 'Outfit', sans-serif;
  letter-spacing: -0.035em;
  color: var(--indigo, #383C8C);
}
.nh-word { opacity: 0.14; transition: opacity 0.35s ease, color 0.35s ease; }
.nh-word.is-lit { opacity: 1; }
.nh-word.is-accent.is-lit { color: var(--burgundy, #761B2C); }

/* ---------- 02. Brand index ---------- */
.nh-index { list-style: none; margin: 0; padding: 0; }
.nh-index li { border-bottom: 1px solid rgba(56, 60, 140, 0.28); }
.nh-index a {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr auto 40px;
  align-items: center;
  gap: 24px;
  padding: clamp(14px, 1.8vw, 24px) 0;
  overflow: hidden;
  isolation: isolate;
}
.nh-index a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--indigo, #383C8C);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-io);
  z-index: -1;
}
.nh-index-n { font: 600 14px/1 'Outfit', sans-serif; color: var(--burgundy); padding-left: 4px; transition: color 0.4s ease; }
.nh-index-name { font: 800 clamp(34px, 5.6vw, 84px) / 1 'Outfit', sans-serif; letter-spacing: -0.045em; color: var(--indigo); transition: transform 0.55s var(--ease-out), color 0.4s ease; }
.nh-index-count { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); transition: color 0.4s ease; }
.nh-index-go { font-size: 24px; color: var(--indigo); transform: translateX(-10px); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.3s ease, color 0.4s ease; }
@media (hover: hover) {
  .nh-index a:hover::before { transform: scaleY(1); }
  .nh-index a:hover .nh-index-name { transform: translateX(22px); color: var(--cream-soft, #F8EEDB); }
  .nh-index a:hover .nh-index-n, .nh-index a:hover .nh-index-count { color: var(--cream, #F2E0BE); }
  .nh-index a:hover .nh-index-go { opacity: 1; transform: none; color: var(--cream, #F2E0BE); }
}
.nh-index a.is-soon .nh-index-name { opacity: 0.4; }
.js .nh-index li { opacity: 0; transform: translateY(30px); }
.nh-index li.is-in { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
@media (max-width: 720px) {
  .nh-index a { grid-template-columns: 36px 1fr 28px; }
  .nh-index-count { grid-column: 2; grid-row: 2; }
  .nh-index-go { opacity: 1; transform: none; grid-row: 1 / span 2; grid-column: 3; }
}

/* The brand preview: a small card beside the pointer (not under it, so the
   name being read stays clear). Position is per frame (transform, no
   transition); only its appearance animates (opacity, scale). */
.nh-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 148px;
  aspect-ratio: 4 / 3;
  margin: -56px 0 0 28px;
  background: #FBF4E6;
  border: 1px solid rgba(56, 60, 140, 0.12);
  border-radius: 10px;
  box-shadow: 0 14px 30px -16px rgba(20, 21, 45, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  scale: 0.7;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--rot, 0deg));
  transition: opacity 0.25s ease, scale 0.35s var(--ease-out);
}
.nh-preview.is-on { opacity: 1; scale: 1; }
.nh-preview img { width: 72%; height: auto; mix-blend-mode: multiply; filter: brightness(1.025); }

/* ---------- 03. People ---------- */
.nh-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nh-panel { position: relative; display: block; }
/* A soft night at the foot of each photo, so the name reads over white sneakers. */
.nh-panel-media { position: relative; }
.nh-panel-media::after {
  content: '';
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(180deg, rgba(20, 21, 45, 0), rgba(20, 21, 45, 0.55));
  pointer-events: none;
}
.nh-panel-media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  transition: clip-path 1.2s var(--ease-io);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .nh-panel-media { clip-path: inset(100% 0 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; transition: transform 1.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.js .nh-panel-media img { transform: scale(1.25); }
.nh-panel.is-in .nh-panel-media img { transform: scale(1.04); }
@media (hover: hover) { .nh-panel:hover .nh-panel-media img { transform: scale(1.1); transition-delay: 0s; } }
.nh-panel-name {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font: 800 clamp(34px, 4.4vw, 64px) / 1 'Outfit', sans-serif;
  letter-spacing: -0.045em;
  color: var(--cream-soft, #F8EEDB);
  text-shadow: 0 6px 30px rgba(20, 21, 45, 0.45);
}
@media (max-width: 720px) {
  .nh-people-grid { grid-template-columns: 1fr; }
  .nh-panel-media { aspect-ratio: 4 / 3; }
}

/* ---------- Marquee ---------- */
.home-reviews-sec:not([hidden]) + .nh-marquee { margin-top: 0; }
.nh-marquee { margin-top: clamp(90px, 12vw, 150px); background: var(--burgundy, #761B2C); color: var(--cream, #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; }
.nh-logo-nike { height: 32px; }
.nh-logo-adidas { height: 34px; }
.nh-logo-puma { height: 31px; }
.nh-logo-asics { height: 26px; }
.nh-logo-skechers { height: 20px; }
.nh-logo-reebok { height: 24px; }
.nh-logo-crocs { height: 22px; }
/* 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; }
  .nh-logo-nike { height: 26px; } .nh-logo-adidas { height: 27px; } .nh-logo-puma { height: 25px; }
  .nh-logo-asics { height: 21px; } .nh-logo-skechers { height: 16px; } .nh-logo-reebok { height: 19px; } .nh-logo-crocs { height: 18px; }
}

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

/* ---------- 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 classic's two-column cards (css/components.css
   .purpose-card): label and name top-left, the photograph leaning out of the bottom-right
   corner, a 4:3 render on its own tinted ground multiplied into the card. The page's own
   reveal is the entrance (.is-in: the card rises, then its photograph slides in behind it),
   and the script's rolling highlight (.is-open) gives each card in turn the lift and lean
   the classic cards get on hover. */
@media (max-width: 900px) {
  .nh-acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: auto; }
  .nh-acc {
    min-height: 140px;
    padding: 14px 12px;
    border-radius: 14px;
    background: var(--surface-secondary, #F3E6CC);
    border: 1px solid var(--hair, #E6D5B5);
    transition: opacity 0.8s ease, translate 1s var(--ease-out), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
    transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s, 0s, 0s;
  }
  .nh-acc::after, .nh-acc-n, .nh-acc-v { display: none; }
  .nh-acc-h { position: relative; left: auto; right: auto; bottom: auto; max-width: 54%; gap: 0; opacity: 1; transform: none; }
  .nh-acc-h .nh-label { font-size: 10px; letter-spacing: 0.08em; color: var(--ink2, #5E5870); }
  .nh-acc-title { margin-top: 4px; font: 500 17px / 1.2 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; white-space: normal; color: var(--ink, #1C1D3D); }
  .nh-acc img {
    inset: auto;
    right: -5%;
    bottom: 5%;
    width: 58%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    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);
  }
  .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); border-color: rgba(56, 60, 140, 0.3); box-shadow: 0 16px 30px -18px rgba(56, 60, 140, 0.45); }
  .nh-acc.is-open img { transform: scale(1.1) translateX(-6px) rotate(-2deg); }
  .nh-acc:active { transform: scale(0.97); }
  html[data-theme="dark"] .nh-acc img { mix-blend-mode: normal; border-radius: 10px; }
  html[data-theme="dark"] .nh-acc.is-open { border-color: rgba(242, 224, 190, 0.3); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6); }
  /* The phone card is already a plate with the product leaning out of its corner. */
  .nh-acc.is-product { background: var(--surface-secondary, #F3E6CC); }
  .nh-acc.is-product img { padding: 0; filter: none; scale: 1; }
  .nh-acc.is-product .nh-acc-h { color: var(--ink, #1C1D3D); }
  .nh-acc-pick { display: none; }
}
@media (max-width: 480px) {
  .nh-acc-row { gap: 8px; }
  .nh-acc { min-height: 120px; padding: 12px 10px; }
  .nh-acc-title { font-size: 13px; }
  .nh-acc img { width: 55%; max-height: 76px; }
}

/* ---------- 06. Beyond the shoe: apparel, captions under the photos ---------- */
/* 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; }
.nh-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.nh-app { display: flex; flex-direction: column; gap: 14px; }
.nh-app:nth-child(3n + 2) { margin-top: clamp(40px, 6vw, 96px); }
.nh-app-media {
  display: block;
  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) * 90ms);
}
.js .nh-app-media { clip-path: inset(100% 0 0 0); }
.nh-app.is-in .nh-app-media { clip-path: inset(0 0 0 0); }
.nh-app-media img { width: 100%; height: 100%; object-fit: cover; scale: 1.04; transition: scale 1s var(--ease-out); }
@media (hover: hover) { .nh-app:hover .nh-app-media img { scale: 1.1; } }
.nh-app-cap { display: flex; flex-direction: column; gap: 6px; }
.nh-app-n { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy, #761B2C); }
.nh-app-title { font: 800 clamp(22px, 2.2vw, 34px) / 1 'Outfit', sans-serif; letter-spacing: -0.035em; color: var(--indigo, #383C8C); }
.nh-app-title i { display: inline-block; font-style: normal; font-weight: 400; transition: transform 0.45s var(--ease-out); }
@media (hover: hover) { .nh-app:hover .nh-app-title i { transform: translateX(8px); } }
@media (max-width: 720px) {
  .nh-app-grid { grid-template-columns: 1fr 1fr; }
  .nh-app:nth-child(3n + 2) { margin-top: 0; }
  .nh-app:nth-child(2n) { margin-top: 36px; }
}

/* ---------- 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-manifesto-text, .nh-app-title, .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, .nh-app-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-section-head { border-bottom-color: rgba(242, 224, 190, 0.3); }
html[data-theme="dark"] .nh-index li { border-bottom-color: rgba(242, 224, 190, 0.16); }
html[data-theme="dark"] .nh-index a::before { background: #2B2E73; }
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: invert(1); }

/* ---------- Standing still ---------- */
@media (prefers-reduced-motion: reduce) {
  .nh-line > span, .nh-mask > span, .nh-rule, .nh-hero-meta, .nh-hero-year, .nh-hero-grid > .nh-label,
  .nh-index li, .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, .nh-app-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; }
}