/* ============================================================================
   MUSEUM — accessible premium, black on white. The artwork is the only
   colour; the shell is a gallery: hairlines, serif captions, air.
   Bet: perceived value. The page must make $22 read like $70 (Pillar I).
   ========================================================================== */
:root {
  --bg: #FDFCFA;
  --ink: #141414;
  --muted: #6E6A63;
  --line: #E6E2DA;
  --card-bg: #FFFFFF;
  --accent: #141414;
  --accent-ink: #FDFCFA;
  --ok: #17693A;
  --radius: 0px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* Black announcement ribbon, white text (monochrome-skill homepage anatomy). */
.ribbon { background: var(--ink); color: var(--bg); letter-spacing: .12em;
  text-transform: uppercase; font-size: .68rem; }

/* Chrome as a gallery lintel: generous, quiet, centred nav. */
.site-head { border-bottom-width: 2px; border-bottom-color: var(--ink); }
.head-inner { min-height: 4.2rem; }
.brand-word { font-weight: 400; letter-spacing: .34em; font-size: .95rem; }
.brand-mark { border-radius: 0; width: .8rem; height: .8rem; }
.head-nav { justify-content: center; gap: 1.6rem; }
.head-nav a { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; }
.head-search, .device-chip, .bag-chip { border-radius: 0; background: none;
  border-color: transparent; border-bottom: 1px solid var(--ink);
  padding-inline: .3rem; }
.bag-chip-count { border-radius: 0; }

/* Hero as an exhibition poster — the NBA collection banner leads; its
   baked-in lettering sits left, so we weight the crop right. */
.hero-bg img { object-position: 50% 40%; }
.hero-inner { padding-top: 4.5rem; }
.hero-kicker { letter-spacing: .34em; font-size: .72rem; }
.hero-title { font-weight: 300; letter-spacing: -.01em; }
.hero-title em { font-style: italic; }
.hero-sub { font-size: 1rem; }
.finder-box { border-width: 1px; border-color: var(--ink); background: var(--bg); }
.section-h { font-weight: 400; font-size: 1.9rem; }
.section-h::after { content: ''; display: block; width: 3.2rem; height: 1px;
  background: var(--ink); margin-top: .7rem; }

/* Wings are numbered like gallery rooms. */
.gates-grid { counter-reset: wing; gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.gate { border: 0; counter-increment: wing; background: var(--bg); }
.gate-art { filter: saturate(.92); }
.gate-info { padding: 1.2rem 1.2rem 1.5rem; }
.gate-name::before { content: counter(wing, upper-roman) ' · ';
  font-size: .7em; letter-spacing: .16em; color: var(--muted); }
.gate-name { font-weight: 400; }
.gate-cta { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
  border-bottom: 1px solid var(--ink); padding-bottom: .15rem; }

/* Cards read as plates with printed captions. */
.card-art { border: 1px solid var(--line); background: #fff;
  box-shadow: 0 1px 0 var(--line); }
.card-info { text-align: center; padding-top: .9rem; }
.card-name { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.card-brand { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem;
  margin-top: .25rem; }
.card-cats { font-size: .74rem; }
.card-badge { border-radius: 0; background: var(--bg); color: var(--ink);
  border: 1px solid var(--ink); font-weight: 500; }
.card-badge.m-official { border-color: var(--line); }
.card-fit { font-size: .74rem; }

.brand-card { border-radius: 0; }
.brand-card-name { font-weight: 400; }
.brand-card-cta { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem;
  border-bottom: 1px solid var(--ink); align-self: flex-start; padding-bottom: .15rem; }

.btn { border-radius: 0; text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; padding: .85rem 1.8rem; }

/* Set story like a catalogue spread. */
.setstory { border-top: 1px solid var(--line); }
.setstory-copy h2 { font-weight: 300; font-size: 2.3rem; }
.setstory-media img { box-shadow: 0 24px 48px rgba(20, 20, 20, .12); }

.genre-hero { border-radius: 0; }
.genre-hero-copy h1 { font-weight: 300; }

.brand-hero { border-radius: 0; }
.brand-hero-name { font-weight: 300; }
.brand-hero .btn-primary { background: var(--b-ink); color: var(--b-bg);
  border-color: var(--b-ink); }

.hub-name, .pdp-name { font-weight: 400; }
.hub-step-label span { border-radius: 0; }
.type-tile, .confirm-card, .set-card { border-radius: 0; }
.device-opt { border-radius: 0; }
.confirm-price { font-weight: 300; font-size: 1.9rem; }

.proof strong { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.atmos img { border-radius: 0; filter: saturate(.9); }
.site-foot { background: var(--ink); color: var(--bg); border-top: 0; }
.site-foot .foot-legal, .site-foot .foot-variations { color: #B9B4AC; }
.site-foot .foot-variations a { color: var(--bg); }
.finder-results { border-radius: 0; box-shadow: 0 24px 60px rgba(20, 20, 20, .16); }
.world-chip { border-radius: 0; text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; }
.range-chip { border-radius: 0; }
.device-dialog, .confirm-card { border-radius: 0; }