/* GENERATED by scripts/build-jwn-assets.sh. Edit the files in jwn/ instead. */

/* ==== 00-base.css ==== */
/* ==========================================================================
   Disney Jollywood Nights 2026 — base layer
   Scoped entirely to .jwn. Mood is a 1930s Hollywood premiere on a cold
   December night: midnight blue-green sky, brass and champagne gold Art Deco
   hardware, oxblood velvet, marquee bulbs, and a thin cold-ice highlight for
   the snow. Builds on v1.css tokens, then overrides the mood locally.

   Every section file (10-hero.css, 20-nights.css, ...) is concatenated into
   /css/jwn.css by scripts/build-jwn-assets.sh. Section files own their own
   namespace (.jwn-hero-*, .jwn-nights-*) and must not restyle anything here.
   ========================================================================== */

.jwn {
  /* ---------------------------------------------------------- surfaces --- */
  --jwn-night:     oklch(15.5% 0.042 258);   /* the sky over the theater */
  --jwn-night-2:   oklch(11.5% 0.036 256);   /* deepest, behind everything */
  --jwn-panel:     oklch(21% 0.044 258);     /* raised card */
  --jwn-panel-2:   oklch(25.5% 0.046 258);   /* tile, hover base */
  --jwn-panel-3:   oklch(30% 0.048 258);     /* hover */
  --jwn-velvet:    oklch(27% 0.095 22);      /* oxblood curtain */
  --jwn-velvet-2:  oklch(20% 0.075 22);

  /* -------------------------------------------------------------- ink --- */
  --jwn-ink:       oklch(95% 0.018 88);      /* warm bulb white */
  --jwn-ink-2:     oklch(84% 0.022 86);
  --jwn-ink-3:     oklch(71% 0.026 84);
  --jwn-ink-4:     oklch(61% 0.026 84);

  /* ------------------------------------------------------------ metal --- */
  --jwn-gold:      oklch(86% 0.128 88);      /* champagne, the primary accent */
  --jwn-gold-2:    oklch(78% 0.126 84);
  --jwn-brass:     oklch(66% 0.098 80);      /* deco hardware, hairlines */
  --jwn-brass-dim: oklch(50% 0.062 78);
  --jwn-gold-ink:  oklch(21% 0.045 70);      /* text on a gold fill */
  --jwn-gold-wash: oklch(86% 0.128 88 / 0.12);
  --jwn-gold-wash2:oklch(86% 0.128 88 / 0.22);

  /* ---------------------------------------------------------- seasonal --- */
  --jwn-pine:      oklch(74% 0.115 158);     /* holiday green, sparingly */
  --jwn-pine-dim:  oklch(58% 0.090 160);
  --jwn-ice:       oklch(89% 0.055 226);     /* snow and cold light */
  --jwn-ice-dim:   oklch(72% 0.055 230);
  --jwn-rouge:     oklch(70% 0.185 22);      /* the one hot accent */

  /* ------------------------------------------------------------ lines --- */
  --jwn-line:      oklch(34% 0.036 258);
  --jwn-line-2:    oklch(44% 0.040 258);
  --jwn-hair:      oklch(66% 0.098 80 / 0.34);   /* brass hairline */
  --jwn-hair-soft: oklch(66% 0.098 80 / 0.18);

  /* ----------------------------------------------------------- shadow --- */
  --jwn-sh-sm: 0 1px 2px oklch(8% 0.02 258 / 0.5);
  --jwn-sh:    0 16px 40px oklch(6% 0.025 258 / 0.55), 0 2px 6px oklch(6% 0.02 258 / 0.45);
  --jwn-sh-lg: 0 34px 80px oklch(5% 0.025 258 / 0.62);
  --jwn-halo:  0 0 0 1px oklch(86% 0.128 88 / 0.32), 0 18px 52px oklch(72% 0.12 84 / 0.16);
  --jwn-glow:  0 0 34px oklch(86% 0.128 88 / 0.28);

  /* --------------------------------------------------------- typefaces --- */
  --jwn-marquee: "Limelight", "Bricolage Grotesque", serif;   /* hero only */
  --jwn-display: "Playfair Display", Georgia, serif;          /* section heads */
  --jwn-ui: var(--ui);

  /* ----------------------------------------------------------- rhythm --- */
  --jwn-sec-y: clamp(56px, 8vw, 108px);
  --jwn-gap:   clamp(14px, 2vw, 22px);
  --jwn-r-sm:  8px;
  --jwn-r:     14px;
  --jwn-r-lg:  20px;

  position: relative;
  isolation: isolate;
  color: var(--jwn-ink);
  background:
    radial-gradient(120% 62% at 50% 0%, oklch(24% 0.062 262 / 0.85), transparent 62%),
    radial-gradient(80% 46% at 88% 22%, oklch(30% 0.075 22 / 0.22), transparent 64%),
    linear-gradient(180deg, var(--jwn-night) 0%, var(--jwn-night-2) 62%, var(--jwn-night) 100%);
  overflow-clip-margin: content-box;
}

/* A very fine vertical brass pinstripe, the way Deco paneling reads.
   Sits under content, above the gradient, and stays out of the way. */
.jwn::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    oklch(66% 0.098 80 / 0.045) 0 1px,
    transparent 1px 84px);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.jwn > * { position: relative; z-index: 1; }
.jwn .wrap { max-width: 1140px; }

/* ============================================================== type === */

.jwn-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: clamp(10.5px, 1.1vw, 11.5px);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--jwn-gold);
  margin: 0 0 14px;
}
/* the little brass rule that trails a section eyebrow */
.jwn-eyebrow::after {
  content: ""; width: clamp(28px, 5vw, 56px); height: 1px;
  background: linear-gradient(90deg, var(--jwn-brass), transparent);
}
.jwn-eyebrow.is-centered { justify-content: center; }
.jwn-eyebrow.is-centered::before {
  content: ""; width: clamp(28px, 5vw, 56px); height: 1px;
  background: linear-gradient(270deg, var(--jwn-brass), transparent);
}

.jwn-h2 {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.05; letter-spacing: -0.015em;
  color: var(--jwn-ink);
  margin: 0;
  text-wrap: balance;
}
.jwn-h2 em { font-style: italic; color: var(--jwn-gold); }

.jwn-h3 {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--jwn-ink); margin: 0;
}

.jwn-h4 {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-ink-3); margin: 0;
}

.jwn-lede {
  color: var(--jwn-ink-2);
  font-size: clamp(16px, 1.6vw, 17.5px);
  line-height: 1.62;
  max-width: 66ch;
  margin: 16px 0 0;
  text-wrap: pretty;
}

.jwn-p {
  color: var(--jwn-ink-2);
  font-size: 16.5px; line-height: 1.68;
  max-width: 68ch;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.jwn-p:last-child { margin-bottom: 0; }
.jwn-p strong { color: var(--jwn-ink); font-weight: 700; }
.jwn-p a, .jwn-link {
  color: var(--jwn-gold);
  text-decoration: underline;
  text-decoration-color: oklch(86% 0.128 88 / 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .18s ease, color .18s ease;
}
.jwn-p a:hover, .jwn-link:hover { color: var(--jwn-ink); text-decoration-color: currentColor; }

.jwn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jwn-tnum { font-variant-numeric: tabular-nums; }

/* =========================================================== sections === */

.jwn-sec { padding: var(--jwn-sec-y) 0; position: relative; }
.jwn-sec + .jwn-sec { padding-top: 0; }
.jwn-sec.is-banded {
  background:
    linear-gradient(180deg, transparent, oklch(19% 0.05 260 / 0.55) 12%, oklch(19% 0.05 260 / 0.55) 88%, transparent);
  padding-top: var(--jwn-sec-y);
  margin-top: var(--jwn-sec-y);
}
.jwn-sec.is-banded + .jwn-sec { padding-top: var(--jwn-sec-y); }

.jwn-sec-head { margin-bottom: clamp(26px, 3.6vw, 44px); }
.jwn-sec-head.is-centered { text-align: center; }
.jwn-sec-head.is-centered .jwn-lede { margin-inline: auto; }

/* A split head: title left, a stat or control cluster right. */
.jwn-sec-head.is-split {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px 32px;
}
.jwn-sec-head.is-split > :first-child { flex: 1 1 min(520px, 100%); }

/* ============================================================== deco === */

/* Horizontal deco rule: brass hairline with a stepped diamond at the centre. */
.jwn-rule {
  display: flex; align-items: center; gap: 12px;
  margin: clamp(30px, 5vw, 56px) 0;
  color: var(--jwn-brass);
}
.jwn-rule::before, .jwn-rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--jwn-hair), transparent);
}
.jwn-rule-mark {
  width: 9px; height: 9px; flex: none;
  background: var(--jwn-brass);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--jwn-night), 0 0 0 4px var(--jwn-hair-soft);
}

/* Deco corner brackets, applied to any panel that wants formal framing. */
.jwn-bracket { position: relative; }
.jwn-bracket::before, .jwn-bracket::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 1px solid var(--jwn-hair);
}
.jwn-bracket::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.jwn-bracket::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

/* A string of marquee bulbs. Add .is-lit for the chase animation. */
.jwn-bulbs {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 0; margin: 0; list-style: none;
}
.jwn-bulb {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jwn-gold);
  box-shadow: 0 0 8px oklch(86% 0.128 88 / 0.7);
  opacity: 0.55;
}
.jwn-bulbs.is-lit .jwn-bulb { animation: jwn-chase 1.8s linear infinite; }
.jwn-bulbs.is-lit .jwn-bulb:nth-child(3n+2) { animation-delay: .6s; }
.jwn-bulbs.is-lit .jwn-bulb:nth-child(3n+3) { animation-delay: 1.2s; }
@keyframes jwn-chase {
  0%, 100% { opacity: .35; box-shadow: 0 0 6px oklch(86% 0.128 88 / 0.35); }
  30%      { opacity: 1;   box-shadow: 0 0 12px oklch(86% 0.128 88 / 0.9); }
}

/* ============================================================= panels === */

.jwn-card {
  position: relative;
  background: linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r);
  box-shadow: var(--jwn-sh-sm);
  padding: clamp(18px, 2.2vw, 26px);
}
/* the brass top light every card catches */
.jwn-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--jwn-r) var(--jwn-r) 0 0;
  background: linear-gradient(90deg, transparent, var(--jwn-hair) 22%, var(--jwn-hair) 78%, transparent);
}
.jwn-card.is-raised { box-shadow: var(--jwn-sh); }
.jwn-card.is-gold { border-color: oklch(66% 0.098 80 / 0.5); box-shadow: var(--jwn-halo); }
.jwn-card.is-velvet {
  background: linear-gradient(180deg, var(--jwn-velvet), var(--jwn-velvet-2));
  border-color: oklch(50% 0.10 22 / 0.5);
}

/* Interactive card. Only lifts on devices that can actually hover. */
.jwn-card.is-linked { transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease, box-shadow .22s ease; }
@media (hover: hover) {
  .jwn-card.is-linked:hover { transform: translateY(-3px); border-color: var(--jwn-line-2); box-shadow: var(--jwn-sh); }
}

.jwn-grid { display: grid; gap: var(--jwn-gap); }
.jwn-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.jwn-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.jwn-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ============================================================ controls === */

.jwn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 14.5px;
  letter-spacing: 0.02em;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.jwn-btn:hover { text-decoration: none; }
.jwn-btn:active { transform: translateY(1px); }

.jwn-btn-gold {
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  color: var(--jwn-gold-ink);
  box-shadow: 0 10px 26px oklch(72% 0.12 84 / 0.24);
}
.jwn-btn-gold:hover { box-shadow: 0 14px 34px oklch(72% 0.12 84 / 0.34); color: var(--jwn-gold-ink); }

.jwn-btn-ghost {
  background: oklch(86% 0.128 88 / 0.06);
  border-color: var(--jwn-hair);
  color: var(--jwn-ink);
}
.jwn-btn-ghost:hover { background: var(--jwn-gold-wash); border-color: var(--jwn-brass); color: var(--jwn-ink); }

.jwn-btn-quiet {
  background: transparent; border-color: var(--jwn-line-2); color: var(--jwn-ink-2);
  padding: 10px 18px; font-size: 13.5px;
}
.jwn-btn-quiet:hover { color: var(--jwn-ink); border-color: var(--jwn-brass); }

/* Segmented control, used by the picker, the plans and the food filters. */
.jwn-seg {
  display: inline-flex; padding: 4px; gap: 4px;
  background: oklch(12% 0.03 258 / 0.7);
  border: 1px solid var(--jwn-line);
  border-radius: 999px;
}
.jwn-seg-btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 999px;
  background: transparent; color: var(--jwn-ink-3);
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.jwn-seg-btn:hover { color: var(--jwn-ink); }
.jwn-seg-btn[aria-pressed="true"], .jwn-seg-btn[aria-selected="true"] {
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  color: var(--jwn-gold-ink);
  box-shadow: 0 4px 14px oklch(72% 0.12 84 / 0.28);
}

/* Small status pills. */
.jwn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--jwn-line-2);
  background: oklch(12% 0.03 258 / 0.55);
  color: var(--jwn-ink-3);
  white-space: nowrap;
}
.jwn-pill.is-gold { color: var(--jwn-gold); border-color: oklch(66% 0.098 80 / 0.5); background: var(--jwn-gold-wash); }
.jwn-pill.is-pine { color: var(--jwn-pine); border-color: oklch(58% 0.09 160 / 0.5); background: oklch(58% 0.09 160 / 0.12); }
.jwn-pill.is-ice  { color: var(--jwn-ice);  border-color: oklch(72% 0.055 230 / 0.5); background: oklch(72% 0.055 230 / 0.12); }
.jwn-pill.is-rouge{ color: var(--jwn-rouge);border-color: oklch(70% 0.185 22 / 0.45); background: oklch(70% 0.185 22 / 0.12); }

/* A dotted brass leader, for "label ....... value" rows (menus, specs). */
.jwn-leader { display: flex; align-items: baseline; gap: 8px; }
.jwn-leader-fill {
  flex: 1; height: 1px; align-self: flex-end; margin-bottom: 5px;
  background-image: radial-gradient(circle, var(--jwn-hair) 0.5px, transparent 0.5px);
  background-size: 5px 1px; background-repeat: repeat-x;
}

/* ============================================================== stats === */

.jwn-stat-k {
  display: block;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--jwn-ink-4);
  margin-bottom: 6px;
}
.jwn-stat-v {
  display: block;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1;
  color: var(--jwn-ink); font-variant-numeric: tabular-nums;
}
.jwn-stat-v .jwn-unit { font-size: 0.52em; color: var(--jwn-ink-3); font-weight: 400; margin-left: 3px; }
.jwn-stat-note { display: block; margin-top: 7px; font-size: 12.5px; color: var(--jwn-ink-4); line-height: 1.45; }

/* ============================================================ tables === */

.jwn-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jwn-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.jwn-table th, .jwn-table td { padding: 13px 14px; text-align: left; vertical-align: middle; }
.jwn-table thead th {
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--jwn-ink-4);
  border-bottom: 1px solid var(--jwn-hair);
  white-space: nowrap;
}
.jwn-table tbody tr { border-bottom: 1px solid var(--jwn-line); }
.jwn-table tbody tr:last-child { border-bottom: 0; }
.jwn-table tbody td { color: var(--jwn-ink-2); }

/* =========================================================== reveal === */

/* Progressive enhancement only. Without JS, .jwn-rv never gets .is-in and the
   base state must therefore be fully visible. jwn.js adds .jwn-anim to the
   article, which is what arms the hidden state. */
.jwn-anim .jwn-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.jwn-anim .jwn-rv.is-in { opacity: 1; transform: none; }
.jwn-anim .jwn-rv-d1 { transition-delay: .07s; }
.jwn-anim .jwn-rv-d2 { transition-delay: .14s; }
.jwn-anim .jwn-rv-d3 { transition-delay: .21s; }
.jwn-anim .jwn-rv-d4 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .jwn *, .jwn *::before, .jwn *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .jwn-anim .jwn-rv { opacity: 1; transform: none; }
}

/* ============================================================== focus === */

.jwn :focus-visible {
  outline: 2.5px solid var(--jwn-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ========================================================= section nav === */

.jwn-nav {
  position: sticky; top: 0; z-index: 40;
  background: oklch(12% 0.032 258 / 0.86);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-block: 1px solid var(--jwn-line);
}
.jwn-nav-in {
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
  padding: 9px 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.jwn-nav-in::-webkit-scrollbar { display: none; }
.jwn-nav-link {
  flex: none; scroll-snap-align: start;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: 999px;
  color: var(--jwn-ink-3); text-decoration: none; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.jwn-nav-link:hover { color: var(--jwn-ink); background: oklch(86% 0.128 88 / 0.08); text-decoration: none; }
.jwn-nav-link.is-active { color: var(--jwn-gold-ink); background: var(--jwn-gold); }

/* Anchor targets clear the sticky bar. */
.jwn [id] { scroll-margin-top: 72px; }

/* ========================================================== related === */

/* The shared "More on ..." cluster rail, given room to breathe at the very
   bottom and a brass hairline to separate it from the closing call to action. */
.jwn-related {
  padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--jwn-hair-soft);
  background: linear-gradient(180deg, transparent, oklch(11% 0.03 258 / 0.5));
}

/* ========================================================== footnote === */

.jwn-note {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: var(--jwn-ink-4);
  border-left: 2px solid var(--jwn-hair);
  padding-left: 14px;
  max-width: 74ch;
}
.jwn-note strong { color: var(--jwn-ink-3); }

/* ==== 10-hero.css ==== */
/* ============================================================ hero === */

.jwn-hero {
  /* Vertical rhythm. Three steps, all derived from the system --jwn-gap, and the
     only gaps this section is allowed to spend. 1x inside the lockup, 1.5x between
     related blocks, 2.5x between movements. */
  --jwn-hero-1: var(--jwn-gap);
  --jwn-hero-2: calc(var(--jwn-gap) * 1.5);
  --jwn-hero-3: calc(var(--jwn-gap) * 2.5);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 11vw, 128px) 0 clamp(46px, 7vw, 80px);
  border-bottom: 1px solid var(--jwn-hair);
  background:
    radial-gradient(88% 62% at 50% 4%, oklch(29% 0.07 262 / 0.9), transparent 66%),
    radial-gradient(52% 44% at 14% 82%, oklch(30% 0.085 22 / 0.30), transparent 68%),
    radial-gradient(52% 44% at 86% 78%, oklch(32% 0.06 160 / 0.20), transparent 68%),
    linear-gradient(180deg, oklch(9.5% 0.032 256) 0%, oklch(14.5% 0.042 258) 58%, var(--jwn-night) 100%);
}

.jwn-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; pointer-events: none;
}

/* ------------------------------------------------------- searchlights --- */
/* Three premiere beams raking the sky. Screen-blended so they only ever add
   light, and slow enough to read as atmosphere rather than movement. */
.jwn-hero-lights {
  position: absolute; inset: -20% -10% auto; height: 130%;
  z-index: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.65;
  filter: blur(2px);
}
.jwn-beam {
  position: absolute; bottom: 0;
  width: clamp(120px, 16vw, 260px); height: 118%;
  transform-origin: 50% 100%;
  background: linear-gradient(to top,
    oklch(88% 0.09 90 / 0.30) 0%,
    oklch(88% 0.09 90 / 0.11) 34%,
    transparent 76%);
  clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0);
}
.jwn-beam-a { left: 8%;  animation: jwn-sweep-a 19s ease-in-out infinite; }
.jwn-beam-b { left: 46%; animation: jwn-sweep-b 23s ease-in-out infinite; opacity: .7; }
.jwn-beam-c { right: 6%; animation: jwn-sweep-c 27s ease-in-out infinite; opacity: .8; }

@keyframes jwn-sweep-a { 0%,100% { transform: rotate(-26deg); } 50% { transform: rotate(14deg); } }
@keyframes jwn-sweep-b { 0%,100% { transform: rotate(12deg); }  50% { transform: rotate(-18deg); } }
@keyframes jwn-sweep-c { 0%,100% { transform: rotate(21deg); }  50% { transform: rotate(-9deg); } }

/* ------------------------------------------------------------- rays --- */
/* The Art Deco sunburst. Its center is pinned to the middle of the lockup, not
   to the hero box, and the mask closes down well inside the marquee frame, so
   no streak ever crosses the standfirst or the buttons. --jwn-ray-c is that
   distance from the top of the hero down to the center of the title. */
.jwn-hero-rays {
  --jwn-ray-c: clamp(200px, 27vw, 355px);
  position: absolute; z-index: 1; pointer-events: none;
  top: 0; left: 50%;
  width: min(900px, 148vw); aspect-ratio: 1;
  transform: translate(-50%, calc(var(--jwn-ray-c) - 50%));
  will-change: transform;
  opacity: 0.5;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    oklch(86% 0.128 88 / 0.26) 0deg 2.1deg,
    transparent 2.1deg 9deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, oklch(0% 0 0 / 0.35) 20%, transparent 40%);
  mask-image: radial-gradient(closest-side, #000 4%, oklch(0% 0 0 / 0.35) 20%, transparent 40%);
  animation: jwn-rays 150s linear infinite;
}
@keyframes jwn-rays {
  from { transform: translate(-50%, calc(var(--jwn-ray-c) - 50%)) rotate(0deg); }
  to   { transform: translate(-50%, calc(var(--jwn-ray-c) - 50%)) rotate(360deg); }
}

/* Film grain. Deliberately not a blend layer, so the hero does not have to
   re-composite the whole stack behind it on every animated frame. */
.jwn-hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(oklch(100% 0 0 / 0.6) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}
.jwn-hero-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 88% at 50% 34%, transparent 42%, oklch(7% 0.02 258 / 0.62) 100%);
}

.jwn-hero-in { position: relative; z-index: 3; text-align: center; }

.jwn-hero-eyebrow { margin: 0 0 var(--jwn-hero-3); }

/* --------------------------------------------------------- the marquee --- */
/* One ornament, not four. A brass hairline frame with bulbs on all four edges,
   the way a theatre marquee is actually built. */

.jwn-marquee {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: clamp(26px, 3.6vw, 44px) clamp(28px, 5vw, 72px);
  border: 1px solid var(--jwn-hair);
  border-radius: 3px;
  background:
    linear-gradient(180deg, oklch(86% 0.128 88 / 0.05), transparent 60%),
    oklch(10% 0.028 258 / 0.42);
  box-shadow: 0 30px 90px oklch(6% 0.02 258 / 0.5);
}

.jwn-marquee-bulbs {
  position: absolute;
  gap: 0;
  justify-content: space-between;
}
.jwn-marquee-bulbs.is-top,
.jwn-marquee-bulbs.is-bottom {
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 44px);
}
.jwn-marquee-bulbs.is-top { top: -3.5px; }
.jwn-marquee-bulbs.is-bottom { bottom: -3.5px; }
.jwn-marquee-bulbs.is-left,
.jwn-marquee-bulbs.is-right {
  top: 50%; transform: translateY(-50%);
  flex-direction: column;
  height: calc(100% - 44px);
}
.jwn-marquee-bulbs.is-left { left: -3.5px; }
.jwn-marquee-bulbs.is-right { right: -3.5px; }

/* The chase, rebuilt to animate opacity only. box-shadow cannot be composited,
   and thirty of them running forever is the most expensive thing in the fold. */
.jwn-bulbs.is-lit.jwn-marquee-bulbs .jwn-bulb {
  box-shadow: 0 0 9px oklch(86% 0.128 88 / 0.6);
  animation-name: jwn-hero-bulb;
}
@keyframes jwn-hero-bulb {
  0%, 100% { opacity: .3; }
  30%      { opacity: 1; }
}

.jwn-hero-title { margin: 0; line-height: 1; }

/* "DISNEY" above and the year below are the same piece of hardware: same face,
   same size, same tracking, so the lockup reads as one object. */
.jwn-hero-brand,
.jwn-hero-year-num {
  font-family: var(--jwn-marquee);
  font-weight: 400;
  font-size: clamp(13px, 1.9vw, 21px);
  letter-spacing: 0.52em; text-indent: 0.52em;
  text-transform: uppercase;
}
.jwn-hero-brand {
  display: block;
  color: var(--jwn-gold-2);
  margin-bottom: clamp(8px, 1.2vw, 14px);
}

.jwn-hero-word {
  display: block;
  font-family: var(--jwn-marquee);
  font-weight: 400;
  font-size: clamp(34px, 7.2vw, 86px);
  line-height: 1.02;
  letter-spacing: 0.015em;
  text-wrap: balance;
  /* Two clipped layers: the gilt itself, and a slow sheen travelling across it
     on a 9s loop, the way light moves over gold leaf. */
  background-image:
    linear-gradient(115deg,
      transparent 38%,
      oklch(100% 0.02 92 / 0.35) 46%,
      oklch(100% 0.03 92 / 0.85) 50%,
      oklch(100% 0.02 92 / 0.35) 54%,
      transparent 62%),
    linear-gradient(178deg,
      oklch(99% 0.03 92) 0%,
      oklch(90% 0.115 90) 26%,
      oklch(74% 0.125 82) 54%,
      oklch(94% 0.10 92) 74%,
      oklch(78% 0.12 84) 100%);
  background-repeat: no-repeat;
  background-size: 200% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px oklch(80% 0.12 86 / 0.30)) drop-shadow(0 2px 1px oklch(20% 0.03 60 / 0.6));
  animation: jwn-sheen 9s linear infinite;
}
@keyframes jwn-sheen {
  0%, 12%   { background-position: 150% 0, 0 0; }
  56%, 100% { background-position: -50% 0, 0 0; }
}

.jwn-hero-year {
  display: flex; align-items: center; justify-content: center; gap: var(--jwn-hero-1);
  margin: var(--jwn-hero-1) 0 0;
}
.jwn-hero-year-rule {
  flex: 1 1 0; max-width: clamp(40px, 12vw, 150px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--jwn-brass), transparent);
}
.jwn-hero-year-num {
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- supporting --- */

.jwn-hero-standfirst {
  margin: var(--jwn-hero-2) auto 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.75vw, 19px);
  line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: balance;
}

.jwn-hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: var(--jwn-hero-2);
}

/* ------------------------------------------------------ the fact run --- */
/* Not five boxes. One line of facts on a brass hairline, cut by deco diamonds,
   with the price carrying the weight because it is what people came to check. */

.jwn-hero-glance {
  --jwn-run-gap: clamp(20px, 2vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0 var(--jwn-run-gap);
  width: fit-content;
  max-width: 100%;
  margin: var(--jwn-hero-3) auto 0;
  padding-block: clamp(13px, 1.6vw, 18px);
  border-block: 1px solid var(--jwn-hair);
}

.jwn-hero-glance-item {
  position: relative;
  padding-block: 4px;
  text-align: center;
}
.jwn-hero-glance dd { margin: 0; }
.jwn-hero-glance .jwn-stat-k {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--jwn-ink-3);
  margin-bottom: 7px;
}
.jwn-hero-glance .jwn-stat-v {
  font-size: clamp(19px, 1.9vw, 26px);
  white-space: nowrap;
}
.jwn-hero-glance .jwn-stat-note {
  max-width: 20ch;
  margin: 7px auto 0;
  color: var(--jwn-ink-3);
}
/* "to" is a connector, not a number. Sized with the units so the whole value
   stays on one line and no cell has to grow a second row. */
.jwn-stat-v .jwn-hero-to { margin-inline: 7px; }

/* A wash of gold light rather than a panel, so the emphasis carries without
   putting a box back into the run. */
.jwn-hero-glance-item.is-price {
  padding: 4px clamp(16px, 1.8vw, 24px);
  background: radial-gradient(ellipse at 50% 52%,
    oklch(86% 0.128 88 / 0.26) 0%,
    oklch(86% 0.128 88 / 0.10) 38%,
    transparent 62%);
}
.jwn-hero-glance-item.is-price .jwn-stat-k { color: var(--jwn-gold-2); }
.jwn-hero-glance-item.is-price .jwn-stat-v {
  font-size: clamp(23px, 2.4vw, 32px);
  color: var(--jwn-gold);
}

/* The deco diamond that separates two facts in the same row. The run only takes
   its horizontal form where the line has room to sit clear of the floating tip
   jar in the bottom right of the viewport. */
@media (min-width: 1280px) {
  .jwn-hero-glance-item + .jwn-hero-glance-item::before {
    content: "";
    position: absolute; top: 32px;   /* optical center of the value line */
    left: calc((var(--jwn-run-gap) / -2) - 4px);
    width: 8px; height: 8px;
    background: var(--jwn-brass);
    transform: rotate(45deg);
    opacity: .85;
  }
}

/* Stacked, the run becomes a short column of hairline-separated facts. It is
   held well inside the right edge so the floating tip jar cannot sit on the
   price at any scroll position. */
@media (max-width: 1279px) {
  .jwn-hero-glance {
    display: block;
    width: auto;
    max-width: min(320px, calc(100vw - 150px));
    padding-block: 4px;
  }
  .jwn-hero-glance-item { padding-block: 13px; }
  .jwn-hero-glance-item + .jwn-hero-glance-item { border-top: 1px solid var(--jwn-hair-soft); }
  .jwn-hero-glance-item.is-price { padding-inline: 10px; }
}

.jwn-hero-updated {
  margin: var(--jwn-hero-2) 0 0;
  font-size: 12.5px;
  color: var(--jwn-ink-3);
}

/* ------------------------------------------------------------ scroll --- */

.jwn-hero-scroll {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; margin: var(--jwn-hero-3) auto 0;
  color: var(--jwn-ink-3); text-decoration: none;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color .2s ease;
}
.jwn-hero-scroll:hover { color: var(--jwn-gold); text-decoration: none; }
.jwn-hero-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, var(--jwn-brass));
  animation: jwn-drop 2.6s ease-in-out infinite;
}
@keyframes jwn-drop {
  0%, 100% { transform: scaleY(.45); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ------------------------------------------------------------ mobile --- */

@media (max-width: 860px) {
  .jwn-hero-lights { opacity: .45; }
}
@media (max-width: 560px) {
  .jwn-marquee { padding-inline: 22px; }
  .jwn-marquee-bulbs.is-top,
  .jwn-marquee-bulbs.is-bottom { width: calc(100% - 26px); }
  .jwn-marquee-bulbs.is-top .jwn-bulb:nth-child(n+11),
  .jwn-marquee-bulbs.is-bottom .jwn-bulb:nth-child(n+11) { display: none; }
  .jwn-marquee-bulbs.is-left .jwn-bulb:nth-child(n+4),
  .jwn-marquee-bulbs.is-right .jwn-bulb:nth-child(n+4) { display: none; }
  .jwn-hero-cta .jwn-btn { flex: 1 1 100%; }
  /* one line, no separator left dangling at a line ending */
  .jwn-hero-eyebrow { letter-spacing: 0.2em; }
  .jwn-hero-eyebrow::before, .jwn-hero-eyebrow::after { display: none; }
}

/* Nothing in the hero animates while the hero is not on screen. */
.jwn-hero.is-idle .jwn-beam,
.jwn-hero.is-idle .jwn-hero-rays,
.jwn-hero.is-idle .jwn-hero-word,
.jwn-hero.is-idle .jwn-bulb,
.jwn-hero.is-idle .jwn-hero-scroll-line { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .jwn-beam, .jwn-hero-rays, .jwn-hero-scroll-line, .jwn-bulb { animation: none; }
  .jwn-hero-word { animation: none; background-position: -50% 0, 0 0; }
  .jwn-hero-lights { opacity: .4; }
}

/* ==== 100-plans.css ==== */
/* ========================================================== plans ===
   Suggested itineraries. Three evening timelines behind an ARIA tab set,
   set as one narrow poster column so the container and the measure agree.

   Geometry is one three-column grid per step: [ time | rail | body ].
   The rail is drawn by the step itself so the brass strip and the dot always
   sit on the same axis whatever the time column measures at. Under 560px the
   time column collapses to zero and the clock moves above the body, which
   buys the copy back about ten characters a line.

   Type is three roles and nothing between them:
     caps label   10.5px / 800 / 0.2em    keys, phase names, the anchor tag
     label        12.5px / 700 / 0.01em   venues, windows, the "for" line
     body         14.5px / 1.6            step detail and phase notes
   Playfair carries every numeral and the tagline, so the timeline reads as
   the same hardware as the section head.

   Encoding, never colour alone:
     mix in window  -> ice clock, ice dot, ice wash, and a "Mix in window" label
     the party      -> the plan's own accent, brass rail, a "The party" label
     10:00 PM       -> gold diamond, a starburst tag, and a gold framed body
   Ice means the mix in window on every panel and nothing else, so the ride
   raid takes rouge rather than reusing it as its accent.
   ==================================================================== */

/* Declared on the section, not the timeline, so the lede and the footnote
   line up with the card instead of running the full width of the wrap. */
.jwn-plans-sec {
  --jwn-plans-t: clamp(58px, 7vw, 74px);   /* time column */
  --jwn-plans-r: 22px;                     /* rail column */
  --jwn-plans-dot: 9px;
  --jwn-plans-pad: clamp(16px, 2.4vw, 30px);
  --jwn-plans-w: 760px;                    /* the column the section lives in */
}

/* ------------------------------------------------------------- tabs --- */
/* Ships visible and working. It rides the top of the viewport under the site
   bar the whole way down the timeline, so the switch is never more than a tap
   away and the current route stays named while you read. */

.jwn-plans-tabbar {
  position: sticky;
  top: 61px;                               /* the site bar plus its hairline */
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 12px 0 14px;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.jwn-plans-tabbar[hidden] { display: none; }

/* The scrim that lets the timeline pass under the switch cleanly. */
.jwn-plans-tabbar::before {
  content: "";
  position: absolute; inset: -14px -14px -8px;  /* stays inside the wrap gutter */
  z-index: -1;
  background: linear-gradient(180deg,
    oklch(11.5% 0.036 256 / 0.95) 0 78%,
    oklch(11.5% 0.036 256 / 0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 78%, transparent);
  mask-image: linear-gradient(180deg, #000 0 78%, transparent);
  pointer-events: none;
}

.jwn-plans-tab { min-height: 44px; }

@media (max-width: 620px) {
  /* Full plan names beat truncation on a phone, so the switch scrolls the way
     the section nav above it does rather than stacking three rows deep. */
  .jwn-plans-tabbar .jwn-seg {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .jwn-plans-tabbar .jwn-seg::-webkit-scrollbar { display: none; }
  .jwn-plans-tab { flex: none; scroll-snap-align: center; }

  /* An unselected option has to look like a control, not a caption. */
  .jwn-plans-tab:not([aria-selected="true"]) {
    background: oklch(86% 0.128 88 / 0.05);
    box-shadow: inset 0 0 0 1px var(--jwn-hair-soft);
    color: var(--jwn-ink-2);
  }
}

/* ------------------------------------------------------------ panel --- */

.jwn-plans-panel {
  max-width: var(--jwn-plans-w);
  margin-inline: auto;
  padding: 0 var(--jwn-plans-pad) clamp(26px, 3vw, 38px);
  overflow: hidden;
}
.jwn-plans-panel[hidden] { display: none; }
.jwn-plans-panel + .jwn-plans-panel { margin-top: clamp(24px, 3vw, 40px); }

/* Clears the sticky switch when a tab change scrolls its panel into view. */
.jwn .jwn-plans-panel { scroll-margin-top: 140px; }

/* One accent per plan, carried by the head wash, the plan mark, the party
   phase and every party dot, so the three genuinely read as three nights. */
.jwn-plans-panel.is-shows {
  --pa: var(--jwn-gold);
  --pa-dim: var(--jwn-gold-2);
  --pa-wash: oklch(86% 0.128 88 / 0.15);
}
.jwn-plans-panel.is-rides {
  --pa: var(--jwn-rouge);
  --pa-dim: oklch(62% 0.165 22);
  --pa-wash: oklch(70% 0.185 22 / 0.17);
}
.jwn-plans-panel.is-characters {
  --pa: var(--jwn-pine);
  --pa-dim: var(--jwn-pine-dim);
  --pa-wash: oklch(74% 0.115 158 / 0.14);
}

/* ------------------------------------------------------- panel head --- */
/* A marquee header rather than a text block: bulbs along the top edge, deco
   pinstriping, a velvet wash and the plan's own light coming in at the left. */

.jwn-plans-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
  margin: 0 calc(var(--jwn-plans-pad) * -1) clamp(24px, 3vw, 34px);
  padding: clamp(28px, 3.2vw, 36px) var(--jwn-plans-pad) clamp(20px, 2.4vw, 26px);
  border-bottom: 1px solid var(--jwn-hair);
  border-radius: calc(var(--jwn-r) - 1px) calc(var(--jwn-r) - 1px) 0 0;
  background:
    radial-gradient(120% 150% at 6% -40%, var(--pa-wash), transparent 62%),
    linear-gradient(180deg, oklch(27% 0.095 22 / 0.34), oklch(27% 0.095 22 / 0.07) 60%, transparent),
    repeating-linear-gradient(90deg,
      oklch(66% 0.098 80 / 0.05) 0 1px,
      transparent 1px 26px);
}

.jwn-plans-bulbs {
  position: absolute;
  left: var(--jwn-plans-pad); right: var(--jwn-plans-pad); top: 12px;
  justify-content: space-between;
  gap: 0;
  pointer-events: none;
}
.jwn-plans-bulbs .jwn-bulb {
  width: 4px; height: 4px;
  opacity: 0.4;
  box-shadow: 0 0 6px oklch(86% 0.128 88 / 0.5);
}

.jwn-plans-head-main { min-width: 0; }

/* the plan name, kept as a mark rather than a second headline */
.jwn-plans-name {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pa, var(--jwn-gold));
}
.jwn-plans-mark {
  width: 6px; height: 6px; flex: none;
  background: currentColor;
  transform: rotate(45deg);
}

/* what the plan actually does, which is the line worth setting big */
.jwn-plans-tagline {
  margin: 0;
  font-family: var(--jwn-display); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--jwn-ink);
  max-width: 30ch;
  text-wrap: pretty;
}

.jwn-plans-for {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 11px;
  margin: 14px 0 0;
}
.jwn-plans-for-k {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pa, var(--jwn-gold));
}
.jwn-plans-for-v {
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 12.5px; line-height: 1.35; letter-spacing: 0.01em;
  color: var(--jwn-ink-3);
}

/* --------------------------------------------------- shape in figures --- */
/* Four counts a reader can act on. Front loaded and back loaded routes differ
   here in numbers instead of in a row of near-identical ticks. */

.jwn-plans-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(12px, 1.6vw, 20px);
  margin: 0;
}
.jwn-plans-fact { margin: 0; }
.jwn-plans-facts .jwn-stat-k {
  font-weight: 800; letter-spacing: 0.2em;
  color: var(--jwn-ink-4);
  margin-bottom: 5px;
}
.jwn-plans-facts .jwn-stat-v {
  font-size: clamp(19px, 2.1vw, 23px);
  letter-spacing: -0.01em;
}
.jwn-plans-facts .jwn-unit { font-size: 0.5em; }

/* ------------------------------------------------------------ phase --- */

.jwn-plans-phase { position: relative; }
.jwn-plans-phase > * { position: relative; z-index: 1; }

.jwn-plans-phase.is-mix   { --pk: var(--jwn-ice);  --pk-line: oklch(72% 0.055 230 / 0.42); }
.jwn-plans-phase.is-party { --pk: var(--pa, var(--jwn-gold)); --pk-line: var(--jwn-hair); }

/* The ice band that seals the mix in window off from the party. It starts at
   the phase head, so the label naming the window sits inside the material. */
.jwn-plans-phase.is-mix::before {
  content: "";
  position: absolute; inset: -12px -12px -10px;
  border-radius: var(--jwn-r-sm);
  background: linear-gradient(90deg,
    oklch(72% 0.055 230 / 0.075),
    oklch(72% 0.055 230 / 0.015) 58%,
    transparent);
  pointer-events: none;
}

.jwn-plans-phase + .jwn-plans-phase {
  margin-top: clamp(26px, 3.2vw, 38px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--jwn-line);
}

.jwn-plans-phase-head {
  display: grid;
  grid-template-columns: auto minmax(12px, 1fr) auto;
  align-items: center;
  gap: 0 14px;
  margin-bottom: clamp(18px, 2.2vw, 24px);
}
.jwn-plans-phase-k {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pk);
  white-space: nowrap;
}
/* the house dotted brass leader, tinted to the phase and reaching its number */
.jwn-plans-phase-rule {
  align-self: center;
  margin-bottom: 0;
  background-image: radial-gradient(circle, var(--pk-line) 0.5px, transparent 0.5px);
}
.jwn-plans-phase-w {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 12.5px; line-height: 1.35; letter-spacing: 0.01em;
  color: var(--jwn-ink-3);
  white-space: nowrap;
}
.jwn-plans-phase-note {
  grid-column: 1 / -1;
  margin: 11px 0 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--jwn-ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------- timeline --- */

.jwn-plans-list {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
}

.jwn-plans-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--jwn-plans-t) var(--jwn-plans-r) minmax(0, 1fr);
  padding-bottom: clamp(22px, 2.6vw, 30px);

  --dot: var(--pa-dim, var(--jwn-brass));
  --rail-on: var(--jwn-hair);
  --rail-hi: oklch(90% 0.11 88 / 0.42);
  --dot-top: 8px;
  --time-top: 2px;
  --dot-fill: var(--dot);
  --rail: var(--rail-on);
}
.jwn-plans-step.is-mixin {
  --dot: var(--jwn-ice-dim);
  --rail-on: oklch(72% 0.055 230 / 0.36);
  --rail-hi: oklch(89% 0.055 226 / 0.34);
}
.jwn-plans-step.is-fixed {
  --dot: var(--jwn-gold);
  --dot-top: 15px;
  --time-top: 10px;
  padding-bottom: clamp(26px, 3vw, 34px);
}
.jwn-plans-list > li:last-child { padding-bottom: 0; }

/* rail, drawn as a brass strip with a specular highlight down its centre */
.jwn-plans-step::before {
  content: "";
  position: absolute;
  left: calc(var(--jwn-plans-t) + var(--jwn-plans-r) / 2);
  top: 0; bottom: 0; width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background-color: var(--rail);
  background-image: linear-gradient(90deg,
    oklch(8% 0.02 258 / 0.35),
    var(--rail-hi) 55%,
    oklch(8% 0.02 258 / 0.28));
}
.jwn-plans-list > li:last-child::before {
  bottom: auto;
  height: calc(var(--dot-top) + var(--jwn-plans-dot) / 2);
}

/* dot */
.jwn-plans-step::after {
  content: "";
  position: absolute;
  left: calc(var(--jwn-plans-t) + var(--jwn-plans-r) / 2);
  top: var(--dot-top);
  width: var(--jwn-plans-dot); height: var(--jwn-plans-dot);
  margin-left: calc(var(--jwn-plans-dot) / -2);
  border-radius: 50%;
  border: 1.5px solid var(--dot);
  background-color: var(--dot-fill);
}
.jwn-plans-step.is-fixed::after {
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 12px oklch(86% 0.128 88 / 0.45);
}

/* ----------------------------------------------------------- clock --- */

.jwn-plans-time {
  grid-column: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: var(--time-top) 12px 0 0;
  text-align: right;
}
.jwn-plans-clock {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 23px); line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jwn-ink);
}
.jwn-plans-step.is-mixin .jwn-plans-clock { color: var(--jwn-ice); }
.jwn-plans-step.is-fixed .jwn-plans-clock { color: var(--jwn-gold); }
.jwn-plans-mer {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 10.5px; line-height: 1;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}

/* ------------------------------------------------------------ body --- */

.jwn-plans-body {
  grid-column: 3;
  min-width: 0;
  padding: 0 0 0 clamp(12px, 1.5vw, 16px);
}

/* The one framed moment of the night. The box is sized to its own content and
   the fill is flat, so the frame and the material end in the same place. */
.jwn-plans-step.is-fixed .jwn-plans-body {
  width: fit-content;
  max-width: min(100%, 620px);
  padding: 12px clamp(14px, 1.7vw, 18px) 14px;
  border-radius: var(--jwn-r-sm);
  box-shadow: inset 0 0 0 1px oklch(66% 0.098 80 / 0.34);
  background:
    radial-gradient(140% 200% at 0% 0%, oklch(86% 0.128 88 / 0.10), transparent 72%),
    oklch(86% 0.128 88 / 0.075);
}

.jwn-plans-fixed {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 9px;
}
.jwn-plans-fixed-k,
.jwn-plans-fixed-run {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
}
.jwn-plans-fixed-k { color: var(--jwn-gold); }
.jwn-plans-fixed-run { color: var(--jwn-ink-3); }

.jwn-plans-title {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: clamp(16px, 1.7vw, 17.5px); line-height: 1.34;
  letter-spacing: -0.005em;
  color: var(--jwn-ink);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Sentence case, not tracked caps. The longest venue on the roster is
   "Hollywood Tower Hotel courtyard" and it has to hold one line at 375px. */
.jwn-plans-where {
  display: flex; align-items: center; gap: 6px;
  margin: 7px 0 0;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 12.5px; line-height: 1.35; letter-spacing: 0.01em;
  color: var(--jwn-ink-3);
}
.jwn-plans-step.is-mixin .jwn-plans-where { color: var(--jwn-ice-dim); }

.jwn-plans-detail {
  margin: 10px 0 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--jwn-ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.jwn-plans-ico { flex: none; opacity: 0.85; }

/* -------------------------------------------------------- progress --- */
/* Armed by JS only (.jwn-plans-prog). Without it every dot is already lit,
   so a no-JS or reduced-motion visitor sees a finished timeline. Only the
   rail and the dot change, never the text, so contrast is constant. */

.jwn-plans-prog .jwn-plans-step {
  --dot-fill: oklch(22% 0.044 258);
  --rail: var(--jwn-line);
  --rail-hi: oklch(90% 0.11 88 / 0.06);
  --dot: var(--jwn-brass-dim);
}
.jwn-plans-prog .jwn-plans-step::before,
.jwn-plans-prog .jwn-plans-step::after {
  transition: background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.jwn-plans-prog .jwn-plans-step.is-lit {
  --dot-fill: var(--dot);
  --rail: var(--rail-on);
  --rail-hi: oklch(90% 0.11 88 / 0.42);
  --dot: var(--pa-dim, var(--jwn-brass));
}
.jwn-plans-prog .jwn-plans-step.is-lit.is-mixin  { --dot: var(--jwn-ice-dim); --rail-hi: oklch(89% 0.055 226 / 0.34); }
.jwn-plans-prog .jwn-plans-step.is-lit.is-fixed  { --dot: var(--jwn-gold); }
.jwn-plans-prog .jwn-plans-step:not(.is-lit)::after { box-shadow: none; }

/* ---------------------------------------------------------- motion --- */
/* Only ever runs where the script runs, and only for the panel on screen.
   A tab change replays it, which is what makes the switch feel like one. */

@keyframes jwn-plans-panel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes jwn-plans-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.jwn-plans-prog .jwn-plans-panel { animation: jwn-plans-panel-in .3s ease both; }
.jwn-plans-prog .jwn-plans-step {
  animation: jwn-plans-step-in .5s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}

/* ---------------------------------------------------------- lede and note --- */

.jwn-plans-lede { max-width: 58ch; }
.jwn-plans-note {
  max-width: min(var(--jwn-plans-w), 74ch);
  margin: clamp(28px, 3.4vw, 42px) auto 0;
}

/* ------------------------------------------------------ responsive --- */

@media (max-width: 720px) {
  .jwn-plans-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .jwn-plans-tagline { max-width: 34ch; }
  .jwn-plans-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
}

@media (max-width: 560px) {
  /* The clock moves above the step. Losing the 52px gutter and 6px of rail
     takes the copy from roughly 31 characters a line to about 42. */
  .jwn-plans {
    --jwn-plans-t: 0px;
    --jwn-plans-r: 16px;
    --jwn-plans-pad: 14px;
  }
  .jwn-plans-time {
    grid-column: 3; grid-row: 1;
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 7px;
    padding: 0 0 5px 11px;
    text-align: left;
  }
  .jwn-plans-body { grid-column: 3; grid-row: 2; padding-left: 11px; }
  .jwn-plans-step,
  .jwn-plans-step.is-fixed { --dot-top: 5px; --time-top: 0px; }
  .jwn-plans-step.is-fixed .jwn-plans-body { width: auto; }
  .jwn-plans-clock { font-size: 19px; }
  .jwn-plans-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jwn-plans-phase-head { grid-template-columns: auto minmax(8px, 1fr) auto; gap: 0 10px; }
  .jwn-plans-phase-k { letter-spacing: 0.16em; }
}

@media (prefers-reduced-motion: reduce) {
  .jwn-plans-prog .jwn-plans-panel,
  .jwn-plans-prog .jwn-plans-step { animation: none; }
  .jwn-plans-prog .jwn-plans-step::before,
  .jwn-plans-prog .jwn-plans-step::after { transition: none; }
}

/* ==== 110-merch.css ==== */
/* =========================================================== merch === */
/* A price sheet you can tick items off, framed as the hero panel, with a
   quieter rail carrying the three season scale arc and the year over year
   movement. The decision-changing fact (the exclusives went on general sale)
   leads on velvet above the grid.

   Type discipline for this section: exactly two caps roles and one caption
   size, declared as tokens below. These belong in 00-base.css as a shared
   scale; they are scoped to .jwn-merch because that file is not ours to
   edit. Nothing here restyles a base component outside .jwn-merch. */

.jwn-merch {
  /* the one caps label, the one caption, then three body steps */
  --jwn-m-label: 10.5px;
  --jwn-m-cap:   13.5px;
  --jwn-m-sm:    14.5px;
  --jwn-m-md:    15.5px;
  --jwn-m-lg:    17.5px;

  --jwn-m-teal:  oklch(72% 0.095 196);
  --jwn-m-sw:    26px;   /* the shelf glyph tile */
  --jwn-m-in:    37px;   /* sub-line indent, tile + gap */
}

/* --------------------------------------------------------- type roles --- */

/* The single data label. Every caps run in this section is this or the
   section eyebrow, which base owns. */
.jwn-merch-k {
  display: block;
  margin: 0;
  font-family: var(--jwn-ui);
  font-weight: 800;
  font-size: var(--jwn-m-label);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jwn-ink-3);
}

/* The single caption size. All of these do identical secondary work. */
.jwn-merch-list-sub,
.jwn-merch-note,
.jwn-merch-arc-cap,
.jwn-merch-moves-foot,
.jwn-merch-swap,
.jwn-merch-total-note,
.jwn-merch-lead-note,
.jwn-merch-checked {
  font-size: var(--jwn-m-cap);
  line-height: 1.55;
  color: var(--jwn-ink-3);
}
/* base .jwn-note is 13px/ink-4; ink-4 misses AA on the card gradient */
.jwn-merch .jwn-note { font-size: var(--jwn-m-cap); color: var(--jwn-ink-3); }
.jwn-merch .jwn-note strong { color: var(--jwn-ink-2); }

/* ---------------------------------------------------------- deco frame --- */

/* .jwn-bracket sets ::before, and so does .jwn-card, so the corners go on an
   inert inner span rather than on the card itself. */
.jwn-merch-frame {
  position: absolute;
  inset: 7px;
  pointer-events: none;
}

/* --------------------------------------------------------- status card --- */

.jwn-merch-status {
  position: relative;
  flex: 0 1 320px;
  align-self: flex-end;
  padding: 18px 20px 17px;
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r);
  background: oklch(12% 0.03 258 / 0.45);
}
.jwn-merch-status .jwn-pill { margin: 0 0 14px; }
.jwn-merch-status-v {
  margin: 7px 0 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 24px);
  line-height: 1.15;
  color: var(--jwn-gold);
  text-wrap: balance;
}
.jwn-merch-status-p {
  margin: 11px 0 0;
  font-size: var(--jwn-m-md);
  line-height: 1.5;
  color: var(--jwn-ink-2);
  max-width: 40ch;
}
.jwn-merch-checked { margin: 10px 0 0; }

/* --------------------------------------------------------- lead panel --- */

.jwn-merch-lead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--jwn-r-lg);
  margin-bottom: clamp(18px, 2.6vw, 30px);
}
/* oxblood sits darker than the panel, so labels step up one shade */
.jwn-merch-lead .jwn-merch-k { color: var(--jwn-ink-2); }
.jwn-merch-lead-v {
  margin: 12px 0 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 0.94;
  color: var(--jwn-gold);
}
.jwn-merch-lead-note {
  margin: 13px 0 0;
  max-width: 30ch;
  color: var(--jwn-ink-2);
}
.jwn-merch-lead-h { font-size: clamp(21px, 2.7vw, 28px); }
.jwn-merch-lead-body .jwn-p { margin: 14px 0 0; }

/* --------------------------------------------------------------- shell --- */

.jwn-merch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  align-items: start;
}

.jwn-merch-rail {
  display: grid;
  gap: clamp(16px, 2.2vw, 30px);   /* matches the grid gutter */
  align-content: start;
}
/* the rail is the margin note, so it drops the lift the price sheet keeps */
.jwn-merch-rail > .jwn-card {
  background: var(--jwn-panel);
  box-shadow: none;
}

/* ----------------------------------------------------------- price list --- */

.jwn-merch-list {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--jwn-r-lg);
}

.jwn-merch-list-sub { margin: 10px 0 0; max-width: 46ch; }

/* ----- basket tools, revealed by 110-merch.js only ----- */

.jwn-merch-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: clamp(16px, 2vw, 20px) 0 0;
  padding: 11px 14px;
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r-sm);
  background: oklch(12% 0.03 258 / 0.4);
}
.jwn-merch-tools[hidden] { display: none; }
.jwn-merch-tools-btns { display: flex; gap: 8px; }
.jwn-merch-tools .jwn-btn-quiet { padding: 7px 15px; font-size: var(--jwn-m-cap); }

/* ----- rows ----- */

.jwn-merch-dl { margin: clamp(14px, 1.8vw, 18px) 0 0; }

/* A grid, not a wrapping flex row. The name and the price then hold their
   columns at every width, and the note can only ever be a full row. */
.jwn-merch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--jwn-line);
}
.jwn-merch-row:first-child { border-top-color: var(--jwn-hair-soft); }

.jwn-merch-name {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.jwn-merch-row .jwn-leader-fill { align-self: center; margin-bottom: 0; }

.jwn-merch-ck {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--jwn-gold);
  cursor: pointer;
}
.jwn-merch-ck[hidden] { display: none; }

.jwn-merch-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: var(--jwn-m-md);
  line-height: 1.3;
  color: var(--jwn-ink);
}
.jwn-merch-dl.is-pick .jwn-merch-label { cursor: pointer; }
.jwn-merch-dl.is-pick { --jwn-m-in: 65px; }

/* The shelf glyph. Colour comes from the colour the item's own note states,
   otherwise it falls back to brass hardware. */
.jwn-merch-sw {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--jwn-m-sw);
  height: var(--jwn-m-sw);
  border-radius: 7px;
  color: var(--jwn-m-swc, var(--jwn-brass));
  border: 1px solid color-mix(in oklab, currentColor 44%, transparent);
  background: color-mix(in oklab, currentColor 15%, transparent);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.jwn-merch-sw-i {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jwn-merch-price {
  margin: 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: var(--jwn-m-lg);
  line-height: 1.2;
  color: var(--jwn-ink);
}

.jwn-merch-note {
  grid-column: 1 / -1;
  margin: 3px 0 1px;
  padding-left: var(--jwn-m-in);
}
/* measure lives on the inner span, never on the grid item */
.jwn-merch-note > span { display: block; max-width: 56ch; }

/* deselected, but never below the contrast floor */
.jwn-merch-row.is-off .jwn-merch-label,
.jwn-merch-row.is-off .jwn-merch-note { color: var(--jwn-ink-3); }
.jwn-merch-row.is-off .jwn-merch-price { color: var(--jwn-ink-3); font-weight: 400; }
.jwn-merch-row.is-off .jwn-merch-sw {
  background: transparent;
  border-color: var(--jwn-line-2);
  color: var(--jwn-ink-4);
}

/* ---------------------------------------------------------------- total --- */

.jwn-merch-total {
  margin: clamp(16px, 2vw, 20px) 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--jwn-hair);
}
.jwn-merch-total-v {
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  color: var(--jwn-gold);
}
.jwn-merch-total-note { margin: 7px 0 0; }

.jwn-merch-where { margin: clamp(18px, 2.2vw, 24px) 0 0; }
.jwn-merch-ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--jwn-brass);
}

/* ------------------------------------------------------------ scale arc --- */

.jwn-merch-arc-list {
  list-style: none;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.jwn-merch-arc-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--jwn-line);
}
.jwn-merch-arc-step:last-child { border-bottom: 0; }

/* size and tracking come from .jwn-merch-k */
.jwn-merch-arc-step.is-now .jwn-merch-arc-year { color: var(--jwn-gold); }

/* The bulbs sit on a marquee wire that spans the whole column, so one bulb
   against seven against eight reads as length, not as three similar dots. */
.jwn-merch-bulbs {
  position: relative;
  gap: 7px;
  padding: 7px 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.jwn-merch-bulbs::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--jwn-hair), var(--jwn-hair-soft) 55%, transparent);
}
.jwn-merch-arc-step .jwn-bulb {
  position: relative;   /* paint above the wire */
  width: 8px;
  height: 8px;
  opacity: 0.6;
}
/* The shared chase dips to 0.35, which would put the lit season below the
   seasons behind it for most of every cycle. Same marquee, higher floor.
   Only the name is swapped, so the base timing and per-bulb delays survive. */
.jwn-merch-arc-step.is-now .jwn-bulb {
  opacity: 1;
  box-shadow: 0 0 10px oklch(86% 0.128 88 / 0.85);
  animation-name: jwn-merch-chase;
}
@keyframes jwn-merch-chase {
  0%, 100% { opacity: 0.78; box-shadow: 0 0 8px oklch(86% 0.128 88 / 0.55); }
  30%      { opacity: 1;    box-shadow: 0 0 13px oklch(86% 0.128 88 / 0.95); }
}
/* base freezes any chase at its dim keyframe under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .jwn-merch-arc-step.is-now .jwn-bulb { animation: none; opacity: 1; }
}

.jwn-merch-arc-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.jwn-merch-arc-n {
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  color: var(--jwn-ink-2);
}
.jwn-merch-arc-step.is-now .jwn-merch-arc-n { color: var(--jwn-gold); }

.jwn-merch-arc-cap { margin: clamp(14px, 1.8vw, 18px) 0 0; }

/* ------------------------------------------------------ year over year --- */

.jwn-merch-table { margin: clamp(12px, 1.6vw, 16px) 0 0; }
.jwn-merch-table th,
.jwn-merch-table td { padding: 9px 0; }
.jwn-merch-table thead th {
  padding-bottom: 10px;
  font-size: var(--jwn-m-label);
  letter-spacing: 0.16em;
  color: var(--jwn-ink-3);   /* base ink-4 misses AA on the card gradient */
}
/* Two classes, so it beats the base `.jwn-table th` text-align. */
.jwn-merch-table .jwn-merch-th-r { text-align: right; }

.jwn-merch-table .jwn-merch-move-item {
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: var(--jwn-m-sm);
  line-height: 1.35;
  color: var(--jwn-ink-2);
  padding-right: 14px;
}

.jwn-merch-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: var(--jwn-m-sm);
  white-space: nowrap;
}
.jwn-merch-delta.is-up { color: var(--jwn-rouge); }
.jwn-merch-delta.is-flat { color: var(--jwn-ink-3); }
.jwn-merch-delta-ico { width: 12px; height: 12px; flex: none; }

.jwn-merch-moves-foot {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-merch-swap {
  margin: 13px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--jwn-hair);
}
.jwn-merch-swap .jwn-merch-k { margin-bottom: 5px; }

/* ------------------------------------------------------------ reception --- */

/* Lives at the foot of the rail, which is where a margin note belongs and
   which also keeps the right column from running out above the price sheet. */
.jwn-merch-reception { margin: 2px 0 0; }

/* ---------------------------------------------------------------- misc --- */

.jwn-merch-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -------------------------------------------------------------- layout --- */

/* Between roughly 980 and 1220 the movement column's right edge runs under the
   app shell's fixed corner button. Step the column in so the one number this
   table exists for stays readable. The real fix belongs to the shell. */
@media (min-width: 981px) and (max-width: 1220px) {
  .jwn-merch-table .jwn-merch-th-r { padding-right: 30px; }
}

@media (max-width: 980px) {
  .jwn-merch-lead { grid-template-columns: minmax(0, 1fr); }
  .jwn-merch-grid { grid-template-columns: minmax(0, 1fr); }
  /* without this, grid stretch forces both rail cards to the taller one's
     height and the shorter card ends in half a card of empty navy */
  .jwn-merch-rail {
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    align-items: start;
  }
  .jwn-merch-reception { grid-column: 1 / -1; margin-top: 0; }

  /* The app shell parks a fixed 52px button in the bottom right corner of the
     viewport. Below 980 the movement column sits under it, and that column is
     the only place the price movement is printed. Pulling it in off the right
     edge keeps it readable. The real fix belongs to the shell, not here. */
  .jwn-merch-table .jwn-merch-th-r { text-align: left; }
  .jwn-merch-table .jwn-merch-move-item { width: 58%; }
  .jwn-merch-table td { padding-left: 12px; }
}

@media (max-width: 640px) {
  .jwn-merch-status {
    flex: 1 1 100%;
    align-self: stretch;
  }
  .jwn-merch-status-p { max-width: none; }

  .jwn-merch-list { padding: 20px 18px; }
  .jwn-merch-price { font-size: 16.5px; }   /* the one step the scale allows here */

  .jwn-merch-arc-step { gap: 10px; }
}

@media (max-width: 460px) {
  /* The dotted leader stops helping once the name has to wrap. */
  .jwn-merch-row .jwn-leader-fill,
  .jwn-merch-total .jwn-leader-fill { display: none; }
  .jwn-merch-total { justify-content: space-between; gap: 12px; }
  .jwn-merch-note { padding-left: 0; }
  .jwn-merch-dl.is-pick { --jwn-m-in: 0px; }
  .jwn-merch-bulbs { gap: 5px; }
  .jwn-merch-tools { justify-content: flex-start; }
}

/* ==== 120-tips.css ==== */
/* ============================================================= tips === */
/* Ten planning notes in one ranked column. Every row is numeral / argument /
   rail, so a hairline rule always has content at both ends. Above the rank,
   the single number the section is selling. Below it, a velvet panel of the
   frictions the ten do not cover, the dress code, the announcement agenda set
   as brass hardware with the house diamond riding a hairline spine, and the
   handoff into tickets. No JavaScript, nothing here needs any.

   Type is a scale, not a pile of numbers. Four prose steps, one caps token and
   two numerals, declared once at the top and used everywhere below. */

.jwn-tips {
  /* display and prose steps, roughly a 1.18 ratio */
  --jwn-tips-t1: clamp(21px, 2.6vw, 27px);   /* lead tip title */
  --jwn-tips-t2: 20px;                       /* ranked tip title */
  --jwn-tips-t3: 17px;                       /* primary prose, panel titles */
  --jwn-tips-t4: 15px;                       /* secondary prose */
  --jwn-tips-caps: 11.5px;                   /* every small-caps label */
  --jwn-tips-caps-tr: 0.16em;                /* one tracking, no exceptions */

  /* the two display numerals */
  --jwn-tips-num: clamp(48px, 7.2vw, 92px);
  --jwn-tips-num-2: clamp(25px, 2.7vw, 31px);

  /* the measure every ranked row is set to */
  --jwn-tips-measure: 66ch;
}

/* One micro-label for the whole section. Anything set in small caps here uses
   this and nothing else. */
.jwn-tips-cap {
  display: block;
  margin: 0;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: var(--jwn-tips-caps);
  letter-spacing: var(--jwn-tips-caps-tr);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--jwn-ink-3);
}

/* Playfair ships old-style figures by default, which sets 1, 0 and 4 at
   x-height and pushes 6 and 8 above the caps. Every numeral in this section is
   a ranking, a clock time or a measurement, so all of them are lining. */
.jwn-tips .jwn-tnum,
.jwn-tips-swing-end .jwn-stat-v {
  font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------------------- the one number --- */

.jwn-tips-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 38px);
  padding: clamp(20px, 2.8vw, 32px) clamp(20px, 3vw, 36px);
  margin: 0 0 clamp(34px, 4.6vw, 56px);
}

.jwn-tips-hero-v {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(54px, 8.6vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--jwn-gold-2);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .jwn-tips-hero-v {
    color: transparent;
    background-image: linear-gradient(176deg,
      oklch(97% 0.05 92) 0%,
      oklch(88% 0.118 90) 38%,
      oklch(71% 0.118 82) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.jwn-tips-hero-u {
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: var(--jwn-tips-caps);
  letter-spacing: var(--jwn-tips-caps-tr);
  text-transform: uppercase;
  color: var(--jwn-ink-3);
  -webkit-text-fill-color: var(--jwn-ink-3);
}

.jwn-tips-hero-p {
  margin: 9px 0 0;
  max-width: 56ch;
  font-size: var(--jwn-tips-t3);
  line-height: 1.6;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-tips-hero-p strong { color: var(--jwn-ink); font-weight: 700; }

/* --------------------------------------------------------- group labels --- */

.jwn-tips-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 30px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--jwn-hair);
  margin-bottom: clamp(24px, 3.2vw, 38px);
}
.jwn-tips-band.is-tl { margin-top: clamp(44px, 6.4vw, 78px); }

.jwn-tips-band-note {
  margin: 0;
  flex: 0 1 auto;
  color: var(--jwn-ink-4);
}
/* The agenda label carries a sentence, so it drops the small-caps treatment. */
.jwn-tips-band-note.is-prose {
  flex: 1 1 340px;
  max-width: 56ch;
  font-family: var(--jwn-ui);
  font-weight: 500;
  font-size: var(--jwn-tips-t4);
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--jwn-ink-3);
}

/* ------------------------------------------------------- the lead three --- */

.jwn-tips-lead,
.jwn-tips-rest {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* numeral | argument | the clock fact it turns on */
.jwn-tips-lead-item {
  display: grid;
  grid-template-columns:
    clamp(76px, 9vw, 128px)
    minmax(0, var(--jwn-tips-measure))
    minmax(0, 1fr);
  gap: clamp(18px, 2.8vw, 40px);
  align-items: start;
  padding: clamp(24px, 3.2vw, 36px) 0;
  border-top: 1px solid var(--jwn-line);
}
.jwn-tips-lead-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* line-height stays loose rather than tighter, because the gilt fill below is
   clipped to the element box and a shorter box would shave the digits. The
   negative margin does the optical tightening instead. */
.jwn-tips-num {
  grid-column: 1;
  grid-row: 1;
  margin: -0.07em 0 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: var(--jwn-tips-num);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--jwn-gold-2);
}
/* Gilt, the same way the hero lockup is gilt, but only where it will render. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .jwn-tips-num {
    color: transparent;
    background-image: linear-gradient(176deg,
      oklch(97% 0.05 92) 0%,
      oklch(88% 0.118 90) 38%,
      oklch(71% 0.118 82) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.jwn-tips-lead-body { grid-column: 2; grid-row: 1; }

.jwn-tips-lead-t {
  margin: 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: var(--jwn-tips-t1);
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--jwn-ink);
  text-wrap: balance;
}

.jwn-tips-lead-p {
  margin: 13px 0 0;
  font-size: var(--jwn-tips-t3);
  line-height: 1.68;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* The marginal rail. Flush to the right edge so the row rule is anchored at
   both ends rather than trailing off into nothing. */
.jwn-tips-rail {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  text-align: right;
}
.jwn-tips-rail .jwn-tips-cap { color: var(--jwn-ink-4); }
.jwn-tips-rail-v {
  display: block;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--jwn-hair);
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: var(--jwn-tips-t2);
  line-height: 1.2;
  color: var(--jwn-gold);
  white-space: nowrap;
}

/* ------------------------------------------------------ the other seven --- */

/* One column, in rank order, on the same three part rhythm as the lead. A
   ranked list read down one column and back up another is not a ranked list. */
.jwn-tips-rest-item {
  display: grid;
  grid-template-columns:
    clamp(44px, 5vw, 62px)
    minmax(0, var(--jwn-tips-measure))
    minmax(0, 1fr);
  column-gap: clamp(14px, 2vw, 26px);
  align-content: start;
  padding: clamp(19px, 2.3vw, 26px) 0;
  border-top: 1px solid var(--jwn-line);
}
.jwn-tips-rest-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.jwn-tips-rest-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  padding-top: 1px;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: var(--jwn-tips-num-2);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--jwn-brass);
}

.jwn-tips-rest-t {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: var(--jwn-tips-t2);
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--jwn-ink);
  text-wrap: balance;
}

.jwn-tips-rest-p {
  grid-column: 2;
  grid-row: 2;
  margin: 9px 0 0;
  font-size: var(--jwn-tips-t4);
  line-height: 1.64;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

.jwn-tips-rest-tag {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  color: var(--jwn-ink-4);
  padding-top: 5px;
}

/* ------------------------------------------------------ honest friction --- */

.jwn-tips-expect {
  margin-top: clamp(42px, 6vw, 74px);
  padding: clamp(24px, 3.4vw, 42px);
}

/* The panel draws its own Art Deco corners rather than taking .jwn-bracket.
   .jwn-card::before is declared after .jwn-bracket::before at equal specificity,
   wins the slot, and flattens the top left mark to a 1px stub, so the panel
   would carry one orphan corner. One pseudo, four hairlines, both corners, and
   .jwn-card keeps its brass top light. */
.jwn-tips-expect::after {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--jwn-hair), var(--jwn-hair)),
    linear-gradient(var(--jwn-hair), var(--jwn-hair)),
    linear-gradient(var(--jwn-hair), var(--jwn-hair)),
    linear-gradient(var(--jwn-hair), var(--jwn-hair));
  background-size: 18px 1px, 1px 18px, 18px 1px, 1px 18px;
  background-position: left top, left top, right bottom, right bottom;
  background-repeat: no-repeat;
}

.jwn-tips-expect-head { max-width: 60ch; }
.jwn-tips-expect-lede {
  margin: 12px 0 0;
  font-size: var(--jwn-tips-t4);
  line-height: 1.6;
  color: var(--jwn-ink-2);
}

.jwn-tips-expect-list {
  margin: clamp(24px, 3.2vw, 36px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 34px);
}

.jwn-tips-expect-item {
  padding-top: 16px;
  border-top: 1px solid oklch(86% 0.128 88 / 0.3);
}

.jwn-tips-expect-t {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: var(--jwn-tips-t3);
  line-height: 1.26;
  color: var(--jwn-ink);
  text-wrap: balance;
}

.jwn-tips-dot {
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--jwn-gold);
  transform: rotate(45deg);
}

.jwn-tips-expect-d {
  margin: 10px 0 0 17px;
  max-width: 58ch;
  font-size: var(--jwn-tips-t4);
  line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- dress code --- */

.jwn-tips-wear {
  margin-top: clamp(42px, 6vw, 74px);
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 48px);
  align-items: start;
}

.jwn-tips-wear-p {
  margin: 16px 0 0;
  font-size: var(--jwn-tips-t3);
}

/* --------------------------------------------------------- the layering --- */

.jwn-tips-layer { padding: clamp(20px, 2.6vw, 30px); }

.jwn-tips-swing {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  margin: clamp(17px, 2.2vw, 24px) 0 0;
}
.jwn-tips-swing-end {
  flex: 1 1 0;
  min-width: 0;
}
.jwn-tips-swing-end.is-cold { text-align: right; }

/* --jwn-ink-4 measures 4.27:1 on the card gradient, under the AA floor. The
   same token passes on the section background, so the fix is local to cards. */
.jwn-tips-layer .jwn-stat-k {
  font-size: var(--jwn-tips-caps);
  letter-spacing: var(--jwn-tips-caps-tr);
  color: var(--jwn-ink-3);
}
.jwn-tips-swing-end .jwn-stat-v {
  font-size: clamp(19px, 2.1vw, 24px);
  white-space: nowrap;
}
.jwn-tips-swing-end.is-warm .jwn-stat-v { color: var(--jwn-gold); }
.jwn-tips-swing-end.is-cold .jwn-stat-v { color: var(--jwn-ice); }
/* 0.52em of a 24px face reads as a stray comma, not a degree ring. */
.jwn-tips-swing-end .jwn-stat-v .jwn-unit { font-size: 0.66em; }

.jwn-tips-swing-rule {
  position: relative;
  flex: 0 1 clamp(26px, 5vw, 76px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jwn-gold), var(--jwn-ice));
}
.jwn-tips-swing-rule::before,
.jwn-tips-swing-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%) rotate(45deg);
}
.jwn-tips-swing-rule::before { left: -3px; background: var(--jwn-gold); }
.jwn-tips-swing-rule::after { right: -3px; background: var(--jwn-ice); }

.jwn-tips-layer-p {
  margin: clamp(17px, 2.2vw, 22px) 0 0;
  font-size: var(--jwn-tips-t4);
  line-height: 1.64;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- agenda --- */

/* Every row is the same height. The intervals here run from three weeks to two
   months, so a ladder spaced by paragraph length would draw a time axis that is
   not one. Equal rows read as an ordered agenda, which is what this is. */
.jwn-tips-tl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jwn-tips-tl-item {
  display: grid;
  grid-template-columns: minmax(0, 248px) 22px minmax(0, 1fr) auto;
  column-gap: clamp(14px, 2.2vw, 26px);
  align-items: center;
  min-height: clamp(76px, 8.6vw, 96px);
  padding: 11px 0;
}
.jwn-tips-tl-item + .jwn-tips-tl-item { border-top: 1px solid var(--jwn-line); }

/* The spine is a single brass hairline, drawn per row and butted end to end,
   so the diamonds ride it rather than sit beside it. */
.jwn-tips-tl-spine {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jwn-tips-tl-spine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--jwn-hair);
}
.jwn-tips-tl-item:first-child .jwn-tips-tl-spine::before { top: 50%; }
.jwn-tips-tl-item:last-child .jwn-tips-tl-spine::before { bottom: 50%; }

.jwn-tips-tl-mark { position: relative; }
.jwn-tips-tl-item.is-event .jwn-tips-tl-mark {
  background: var(--jwn-gold);
  box-shadow:
    0 0 0 3px var(--jwn-night),
    0 0 0 4px oklch(86% 0.128 88 / 0.5),
    0 0 14px oklch(86% 0.128 88 / 0.45);
}

/* 208px orphaned the year onto a second line on the two longest labels. */
.jwn-tips-tl-when {
  text-align: right;
  line-height: 1.45;
}
.jwn-tips-tl-item.is-event .jwn-tips-tl-when { color: var(--jwn-gold); }

.jwn-tips-tl-what {
  margin: 0;
  max-width: 66ch;
  font-size: var(--jwn-tips-t4);
  line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-tips-tl-item.is-event .jwn-tips-tl-what { color: var(--jwn-ink); }

/* Colour alone cannot carry the difference between an announcement window and
   an actual event night, so every row says which it is. */
.jwn-tips-tl-status {
  margin: 0;
  justify-self: end;
}

/* ------------------------------------------------------------- handoff --- */

.jwn-tips-end {
  margin: clamp(38px, 5vw, 60px) 0 0;
  padding-top: clamp(26px, 3.4vw, 36px);
  border-top: 1px solid var(--jwn-hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
}
.jwn-tips-end-copy { flex: 1 1 min(520px, 100%); }
.jwn-tips-end-p {
  margin: 12px 0 0;
  max-width: 64ch;
  font-size: var(--jwn-tips-t4);
  line-height: 1.64;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-tips-end-p a {
  color: var(--jwn-gold);
  text-decoration: underline;
  text-decoration-color: oklch(86% 0.128 88 / 0.4);
  text-underline-offset: 3px;
}
.jwn-tips-end-cta { flex: 0 0 auto; }

/* -------------------------------------------------------------- layout --- */

@media (max-width: 1080px) {
  .jwn-tips-lead-item { grid-template-columns: clamp(60px, 8vw, 110px) minmax(0, 1fr) auto; }
  .jwn-tips-rest-item { grid-template-columns: clamp(40px, 5vw, 56px) minmax(0, 1fr) auto; }
  .jwn-tips-lead-p,
  .jwn-tips-rest-p { max-width: 62ch; }
}

@media (max-width: 1000px) {
  .jwn-tips-expect-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  /* The rail drops under the argument rather than squeezing the measure. */
  .jwn-tips-lead-item {
    grid-template-columns: clamp(60px, 9vw, 110px) minmax(0, 1fr);
    row-gap: 0;
  }
  .jwn-tips-rail {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 15px;
  }
  .jwn-tips-rail-v {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .jwn-tips-rest-item { grid-template-columns: clamp(40px, 5vw, 56px) minmax(0, 1fr); }
  .jwn-tips-rest-tag {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    text-align: left;
    padding-top: 0;
    margin-bottom: 6px;
  }
  .jwn-tips-rest-t { grid-row: 2; }
  .jwn-tips-rest-p { grid-row: 3; }
  .jwn-tips-rest-num { grid-row: 1 / span 3; }
}

/* Under a certain width the date column, the spine and the status pill cannot
   share a line with a readable measure, so the row stacks. */
@media (max-width: 920px) {
  .jwn-tips-tl-item {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 15px;
    align-items: start;
    min-height: 0;
    padding: 16px 0;
  }
  .jwn-tips-tl-spine { grid-column: 1; grid-row: 1 / span 3; align-items: flex-start; }
  .jwn-tips-tl-mark { margin-top: 4px; }
  .jwn-tips-tl-item:first-child .jwn-tips-tl-spine::before { top: 8px; }
  .jwn-tips-tl-item:last-child .jwn-tips-tl-spine::before { bottom: calc(100% - 9px); }
  .jwn-tips-tl-when { grid-column: 2; grid-row: 1; text-align: left; }
  .jwn-tips-tl-status { grid-column: 2; grid-row: 2; justify-self: start; margin: 9px 0 0; }
  .jwn-tips-tl-what { grid-column: 2; grid-row: 3; margin-top: 9px; }
}

@media (max-width: 900px) {
  .jwn-tips-wear { grid-template-columns: minmax(0, 1fr); }
  .jwn-tips-layer { max-width: 560px; }
}

@media (max-width: 860px) {
  .jwn-tips-hero { gap: 14px 24px; }
  .jwn-tips-hero-v { font-size: clamp(48px, 12vw, 78px); }
}

@media (max-width: 700px) {
  .jwn-tips-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
  .jwn-tips-expect-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .jwn-tips-band { gap: 6px 18px; }
  .jwn-tips-band-note { flex: 1 1 100%; }
  .jwn-tips-end { align-items: flex-start; }
  .jwn-tips-end-cta { width: 100%; }
}

@media (max-width: 560px) {
  /* Mobile sets the numeral over the tip rather than beside it, so the copy
     keeps a readable measure instead of a 40 character gutter. */
  .jwn-tips-lead-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .jwn-tips-num { grid-column: 1; font-size: 44px; }
  .jwn-tips-lead-body { grid-column: 1; grid-row: 2; }
  .jwn-tips-rail { grid-column: 1; grid-row: 3; margin-top: 13px; }
  .jwn-tips-lead-t { font-size: 21px; }

  .jwn-tips-rest-item { column-gap: 12px; }
  .jwn-tips-rest-num { font-size: 24px; }
  .jwn-tips-rest-t { font-size: 18px; }
}

/* ==== 130-compare.css ==== */
/* ================================================ versus very merry ===
   The head to head. Two contenders with their own identity: Jollywood keeps
   the page's champagne gold, Mickey's Very Merry takes the cold ice blue
   already in the palette, which reads as snow on Main Street and sits
   comfortably beside gold without fighting it.

   The board is a real <table> at desktop and reflows into one card per point
   below 900px. The markup carries explicit ARIA roles so the table semantics
   survive the display overrides. Edge is always text plus a shape, never
   colour on its own.

   Type runs on the 00-base scale and nothing else: one body size, one
   secondary, one micro, one label, plus the shared heading clamps.
   ====================================================================== */

.jwn-vs {
  --vs-jolly:        var(--jwn-gold);
  --vs-jolly-2:      var(--jwn-gold-2);
  --vs-jolly-line:   oklch(66% 0.098 80 / 0.45);
  /* the magnitude ladder: column tint, ordinary win, decisive win */
  --vs-jolly-tint:   oklch(86% 0.128 88 / 0.045);
  --vs-jolly-win:    oklch(86% 0.128 88 / 0.10);
  /* champagne loses chroma fast over navy, so the decisive wash takes the
     deeper gold to stay gold rather than going warm grey next to the ice */
  --vs-jolly-key:    oklch(78% 0.126 84 / 0.22);

  --vs-merry:        var(--jwn-ice);
  --vs-merry-2:      var(--jwn-ice-dim);
  --vs-merry-line:   oklch(72% 0.055 230 / 0.45);
  --vs-merry-tint:   oklch(72% 0.055 230 / 0.05);
  --vs-merry-win:    oklch(72% 0.055 230 / 0.11);
  --vs-merry-key:    oklch(72% 0.055 230 / 0.20);

  --vs-sunk:         oklch(12% 0.03 258 / 0.6);

  /* the whole section's text scale */
  --vs-t-body:  16.5px;   /* matches .jwn-p */
  --vs-t-2:     14.5px;   /* secondary */
  --vs-t-3:     12.5px;   /* micro, matches .jwn-stat-note */
  --vs-t-lab:   11px;     /* uppercase label */

  /* Playfair defaults to oldstyle figures, which sets 0 at x-height and drops
     7 below the baseline, so $10 reads as $1o. Every numeral in here is a
     price, a time or a count. */
  font-variant-numeric: lining-nums;
}
.jwn-vs .jwn-tnum,
.jwn-vs .jwn-stat-v { font-variant-numeric: lining-nums tabular-nums; }

/* An author display rule beats the UA [hidden] rule, so the quiz needs this
   guard or it would render before the script has wired it up. */
.jwn-vs [hidden] { display: none !important; }

/* ================================================================ card === */
/* The scoreline that sits in the split section head. */

.jwn-vs-score {
  flex: 0 1 264px;
  align-self: flex-end;
  padding: 18px 20px 20px;
  border: 1px solid var(--jwn-hair);
  border-radius: var(--jwn-r);
  background:
    linear-gradient(180deg, var(--jwn-gold-wash), transparent 62%),
    var(--vs-sunk);
}
.jwn-vs-score > .jwn-stat-k { color: var(--jwn-ink-3); margin-bottom: 13px; }

.jwn-vs-score-list { margin: 0; padding: 0; display: grid; gap: 10px; }
.jwn-vs-score-row { display: flex; align-items: baseline; gap: 10px; }

.jwn-vs-score-k {
  flex: 1 1 auto;
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--vs-t-2);
  color: var(--jwn-ink-2);
}
/* the deco diamond that keys each row to its column */
.jwn-vs-score-k::before {
  content: ""; flex: none; align-self: center;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--jwn-line-2);
}
/* the dotted brass leader */
.jwn-vs-score-k::after {
  content: ""; flex: 1 1 auto; height: 1px; margin-bottom: 4px;
  background-image: radial-gradient(circle, var(--jwn-hair) 0.5px, transparent 0.5px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.jwn-vs-score-row.is-jolly .jwn-vs-score-k::before { background: var(--vs-jolly); }
.jwn-vs-score-row.is-merry .jwn-vs-score-k::before { background: var(--vs-merry); }
.jwn-vs-score-row.is-even  .jwn-vs-score-k::before { background: var(--jwn-ink-3); }
.jwn-vs-score-row.is-call  .jwn-vs-score-k::before {
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--jwn-ink-3);
}

.jwn-vs-score-v {
  margin: 0; flex: none;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1;
  color: var(--jwn-ink);
}

/* ============================================================ the call === */
/* The answer, above the evidence rather than two thousand pixels below it. */

.jwn-vs-topcall {
  margin: 0;
  padding-left: clamp(14px, 1.6vw, 18px);
  border-left: 2px solid var(--jwn-gold);
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--jwn-ink);
  max-width: 62ch;
  text-wrap: pretty;
}
.jwn-vs-topcall-x { color: var(--jwn-ink-3); }

/* =============================================================== board === */

.jwn-vs-board {
  margin-top: clamp(28px, 3.6vw, 44px);
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r-lg);
  background: linear-gradient(180deg, oklch(22% 0.045 258 / 0.85), oklch(17% 0.04 258 / 0.62));
  box-shadow: var(--jwn-sh-sm);
  overflow: hidden;
}

.jwn-vs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--jwn-ui);
  table-layout: auto;
}

/* ------------------------------------------------------------- caption --- */

/* Stays display:table-caption so it spans the full board above the header row.
   Forcing display:block would drop it into the first column. */
.jwn-vs-cap {
  display: table-caption;
  caption-side: top;
  text-align: left;
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 18px);
  font-size: var(--vs-t-2); line-height: 1.55;
  color: var(--jwn-ink-3);
  text-wrap: pretty;
}

/* --------------------------------------------------------- team header --- */

.jwn-vs-table thead th {
  vertical-align: bottom;
  text-align: left;
  padding: 16px clamp(14px, 1.6vw, 18px) 15px;
  border-bottom: 1px solid var(--jwn-hair);
}

/* These carry a .jwn-vs-table prefix throughout so they outrank the element
   level rules above, which is what the card reflow below 900px depends on. */
.jwn-vs-table .jwn-vs-h-cat,
.jwn-vs-table .jwn-vs-h-edge {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--vs-t-lab); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  line-height: 1.4;
}
.jwn-vs-table .jwn-vs-h-cat  { width: 17%; }
.jwn-vs-table .jwn-vs-h-edge { width: 13%; text-align: center; }

.jwn-vs-table .jwn-vs-h-team { position: relative; width: 35%; }
/* a fine deco pinstripe, the same interval as the panelling behind the page */
.jwn-vs-h-team.is-jolly {
  background:
    repeating-linear-gradient(90deg, oklch(66% 0.098 80 / 0.055) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, oklch(86% 0.128 88 / 0.13), var(--vs-jolly-tint));
}
.jwn-vs-h-team.is-merry {
  background:
    repeating-linear-gradient(90deg, oklch(72% 0.055 230 / 0.06) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, oklch(72% 0.055 230 / 0.14), var(--vs-merry-tint));
}
.jwn-vs-h-team::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
}
.jwn-vs-h-team.is-jolly::before { background: linear-gradient(90deg, var(--vs-jolly-2), var(--vs-jolly)); }
.jwn-vs-h-team.is-merry::before { background: linear-gradient(90deg, var(--vs-merry-2), var(--vs-merry)); }

.jwn-vs-h-name {
  display: block;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.16;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--jwn-ink);
  margin-bottom: 9px;
  text-wrap: balance;
}
.jwn-vs-h-meta {
  display: block;
  font-family: var(--jwn-ui); font-weight: 600;
  font-size: var(--vs-t-3); line-height: 1.4;
  letter-spacing: 0; text-transform: none;
  color: var(--jwn-ink-2);
}
/* the price line, keyed back to its column rather than dimmed */
.jwn-vs-h-meta + .jwn-vs-h-meta { margin-top: 4px; font-weight: 700; }
.jwn-vs-h-team.is-jolly .jwn-vs-h-meta + .jwn-vs-h-meta { color: var(--vs-jolly-2); }
.jwn-vs-h-team.is-merry .jwn-vs-h-meta + .jwn-vs-h-meta { color: var(--vs-merry-2); }

/* a short string of lights, gold for one house and ice for the other */
.jwn-vs-mark { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.jwn-vs-mark span { display: block; width: 5px; height: 5px; border-radius: 50%; }
.jwn-vs-mark span:nth-child(2n) { opacity: 0.45; }
.jwn-vs-mark.is-jolly span {
  background: var(--vs-jolly);
  box-shadow: 0 0 7px oklch(86% 0.128 88 / 0.65);
}
.jwn-vs-mark.is-merry span {
  background: var(--vs-merry);
  box-shadow: 0 0 7px oklch(89% 0.055 226 / 0.55);
}

/* ---------------------------------------------------------------- rows --- */

.jwn-vs-table tbody th,
.jwn-vs-table tbody td {
  padding: 14px clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--jwn-line);
  text-align: left;
  vertical-align: middle;
}
.jwn-vs-table tbody tr:first-child th,
.jwn-vs-table tbody tr:first-child td { border-top: 0; }

.jwn-vs-table .jwn-vs-cat {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--vs-t-lab); letter-spacing: 0.13em; text-transform: uppercase;
  line-height: 1.45;
  color: var(--jwn-ink-3);
}

.jwn-vs-table .jwn-vs-val {
  font-size: var(--vs-t-2); line-height: 1.5;
  color: var(--jwn-ink-2);
}
.jwn-vs-table .jwn-vs-val.is-jolly { background: var(--vs-jolly-tint); }
.jwn-vs-table .jwn-vs-val.is-merry { background: var(--vs-merry-tint); }

.jwn-vs-table .jwn-vs-val.is-win { color: var(--jwn-ink); font-weight: 600; }
.jwn-vs-table .jwn-vs-val.is-win.is-jolly {
  background: var(--vs-jolly-win);
  box-shadow: inset 2px 0 0 var(--vs-jolly-2);
}
.jwn-vs-table .jwn-vs-val.is-win.is-merry {
  background: var(--vs-merry-win);
  box-shadow: inset 2px 0 0 var(--vs-merry-2);
}
.jwn-vs-txt { display: block; }

/* --------------------------------------------------------- decisive rows -- */
/* Four of the eleven points actually swing the decision. They get the weight,
   and the rest step back, so the board argues the same thing the lede does. */

.jwn-vs-table tbody tr.is-key > * {
  border-top: 1px solid var(--jwn-hair-soft);
  padding-top: 17px; padding-bottom: 17px;
}
.jwn-vs-table tbody tr.is-key .jwn-vs-cat { color: var(--jwn-ink-2); }
.jwn-vs-table tbody tr.is-key .jwn-vs-cat::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 8px;
  transform: rotate(45deg);
  background: var(--jwn-brass);
}
.jwn-vs-table tbody tr.is-key .jwn-vs-val { font-size: var(--vs-t-body); line-height: 1.42; }
.jwn-vs-table tbody tr.is-key .jwn-vs-val.is-win.is-jolly {
  background: var(--vs-jolly-key);
  box-shadow: inset 4px 0 0 var(--vs-jolly);
}
.jwn-vs-table tbody tr.is-key .jwn-vs-val.is-win.is-merry {
  background: var(--vs-merry-key);
  box-shadow: inset 4px 0 0 var(--vs-merry);
}

/* the season stamp on the two rows that describe last time, not next time */
.jwn-vs-since {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--jwn-line-2);
  border-radius: 999px;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--vs-t-lab); line-height: 1.5;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  white-space: nowrap;
}

/* the mobile-only "which column is this" label */
.jwn-vs-tag { display: none; }

/* ---------------------------------------------------------------- edge --- */

.jwn-vs-table .jwn-vs-edge { text-align: center; }
.jwn-vs-edge-in {
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
}
.jwn-vs-edge svg { display: block; }
.jwn-vs-edge-t {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--vs-t-lab); letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.jwn-vs-table .jwn-vs-edge.is-jolly   { color: var(--vs-jolly); }
.jwn-vs-table .jwn-vs-edge.is-merry   { color: var(--vs-merry); }
.jwn-vs-table .jwn-vs-edge.is-tie     { color: var(--jwn-ink-3); }
/* brass, not pine. Green in a gold and oxblood board reads as a tick. */
.jwn-vs-table .jwn-vs-edge.is-depends { color: var(--jwn-brass); }

/* ------------------------------------------------------- board footer --- */
/* Phone only. Above that every row is on screen and needs no controls. */

.jwn-vs-board-foot { display: none; }

.jwn-vs-jump {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--vs-t-2);
  color: var(--jwn-ink-3);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.jwn-vs-jump:hover { color: var(--jwn-gold); }
.jwn-vs-rest svg { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.jwn-vs-rest[aria-expanded="true"] svg { transform: rotate(180deg); }

.jwn-vs-foot { margin: 18px 0 0; }

/* ============================================================= verdict === */

.jwn-vs-verdict {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 54px);
  align-items: start;
  padding: clamp(24px, 3.4vw, 42px);
  border-radius: var(--jwn-r-lg);
}
/* oxblood is darker than the panel, so every label steps up one shade */
.jwn-vs-verdict .jwn-stat-k,
.jwn-vs-verdict .jwn-stat-note { color: var(--jwn-ink-3); }

.jwn-vs-verdict-rail .jwn-h3 {
  font-size: clamp(21px, 2.7vw, 28px);
  margin-bottom: clamp(20px, 2.6vw, 28px);
}

.jwn-vs-nums { margin: 0; display: grid; gap: clamp(16px, 2vw, 22px); }
.jwn-vs-num dd { margin: 0; }
.jwn-vs-num .jwn-stat-v { color: var(--jwn-gold); }
.jwn-vs-num .jwn-stat-note { max-width: 34ch; }

.jwn-vs-verdict-body .jwn-p { max-width: 62ch; }

.jwn-vs-call {
  margin-top: clamp(18px, 2.2vw, 24px);
  padding-left: 17px;
  border-left: 2px solid var(--jwn-gold);
  color: var(--jwn-ink);
}

/* =============================================================== picks === */

.jwn-vs-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--jwn-gap);
  /* the same step the deco rules above it use, not a third of it */
  margin-top: clamp(30px, 5vw, 56px);
}

.jwn-vs-pick {
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r-lg);
  background: linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
}
.jwn-vs-pick.is-jolly {
  border-color: var(--vs-jolly-line);
  background:
    linear-gradient(180deg, var(--vs-jolly-key), transparent 52%),
    linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
}
.jwn-vs-pick.is-merry {
  border-color: var(--vs-merry-line);
  background:
    linear-gradient(180deg, var(--vs-merry-key), transparent 52%),
    linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
}

.jwn-vs-pick-head { margin-bottom: clamp(16px, 2vw, 20px); }
.jwn-vs-pick-head .jwn-eyebrow { margin-bottom: 10px; }
.jwn-vs-pick.is-jolly .jwn-h3 { color: var(--vs-jolly); }
.jwn-vs-pick.is-merry .jwn-h3 { color: var(--vs-merry); }

.jwn-vs-pick-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 13px;
}
.jwn-vs-pick-list li {
  position: relative; padding-left: 23px;
  font-size: var(--vs-t-body); line-height: 1.55;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-vs-pick-list li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; transform: rotate(45deg);
}
.jwn-vs-pick.is-jolly .jwn-vs-pick-list li::before { background: var(--vs-jolly); }
.jwn-vs-pick.is-merry .jwn-vs-pick-list li::before { background: var(--vs-merry); }
.jwn-vs-pick-list strong { color: var(--jwn-ink); font-weight: 700; }

.jwn-vs-pick-foot {
  margin: auto 0 0;
  padding-top: clamp(14px, 1.8vw, 18px);
}

/* ---------------------------------------------------------- more links --- */

.jwn-vs-more {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--vs-t-2);
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.jwn-vs-more svg { flex: none; transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.jwn-vs-pick.is-jolly .jwn-vs-more,
.jwn-vs-result .jwn-vs-more {
  color: var(--vs-jolly);
  text-decoration-color: oklch(86% 0.128 88 / 0.38);
}
.jwn-vs-pick.is-merry .jwn-vs-more {
  color: var(--vs-merry);
  text-decoration-color: oklch(89% 0.055 226 / 0.38);
}
@media (hover: hover) {
  .jwn-vs-more:hover { color: var(--jwn-ink); text-decoration-color: currentColor; }
  .jwn-vs-more:hover svg { transform: translateX(3px); }
}

/* ================================================================ quiz === */

.jwn-vs-quiz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(20px, 2.8vw, 40px);
  align-items: start;
  margin-top: clamp(30px, 5vw, 56px);
  padding-top: clamp(28px, 3.6vw, 44px);
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-vs-quiz-head { grid-column: 1 / -1; }
.jwn-vs-quiz-head .jwn-h3 { margin-bottom: 14px; }

.jwn-vs-form { display: grid; gap: clamp(16px, 2vw, 20px); }

.jwn-vs-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.jwn-vs-q-legend {
  display: flex; align-items: baseline; gap: 11px;
  width: 100%; padding: 0; margin: 0 0 11px;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--vs-t-body); line-height: 1.4;
  color: var(--jwn-ink);
}
.jwn-vs-q-n {
  flex: none;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--vs-t-body);
  color: var(--vs-jolly);
}

.jwn-vs-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 10px;
}

.jwn-vs-opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  padding: 12px 15px;
  border: 1px solid var(--jwn-line-2);
  border-radius: var(--jwn-r);
  background: var(--vs-sunk);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
/* kept in the accessibility tree and focusable, just not painted */
.jwn-vs-in {
  position: absolute;
  width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
/* the ring has to clear 3:1 against the sunk panel on its own, or the control
   does not read as a control */
.jwn-vs-opt-mark {
  flex: none;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid var(--jwn-ink-4);
  display: grid; place-items: center;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.jwn-vs-opt-mark::after {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--vs-jolly);
  transform: scale(0);
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.jwn-vs-opt-t { font-size: var(--vs-t-2); line-height: 1.45; color: var(--jwn-ink-2); }

.jwn-vs-in:checked + .jwn-vs-opt-mark { border-color: var(--vs-jolly); }
.jwn-vs-in:checked + .jwn-vs-opt-mark::after { transform: scale(1); }
.jwn-vs-in:focus-visible + .jwn-vs-opt-mark { box-shadow: 0 0 0 3px oklch(86% 0.128 88 / 0.35); }

.jwn-vs-opt:has(.jwn-vs-in:checked) {
  border-color: var(--vs-jolly-line);
  background: var(--jwn-gold-wash);
}
.jwn-vs-opt:has(.jwn-vs-in:checked) .jwn-vs-opt-t { color: var(--jwn-ink); }
.jwn-vs-opt:has(.jwn-vs-in:focus-visible) {
  outline: 2.5px solid var(--vs-jolly);
  outline-offset: 3px;
}
@media (hover: hover) {
  .jwn-vs-opt:hover { border-color: var(--jwn-brass); background: oklch(25.5% 0.046 258 / 0.75); }
  .jwn-vs-opt:hover .jwn-vs-opt-mark { border-color: var(--jwn-ink-3); }
}

.jwn-vs-form-foot { margin: 4px 0 0; }
.jwn-vs-reset { min-height: 44px; }
.jwn-vs-reset:disabled { opacity: 0.42; cursor: default; }

/* -------------------------------------------------------------- result --- */

.jwn-vs-result {
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--jwn-hair);
  border-radius: var(--jwn-r-lg);
  background:
    linear-gradient(180deg, var(--jwn-gold-wash), transparent 55%),
    oklch(12% 0.03 258 / 0.72);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.jwn-vs-result-h {
  margin: 0 0 10px;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--jwn-ink);
  text-wrap: balance;
}
/* a counter, not a second eyebrow stacked on the first */
.jwn-vs-result-prog {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
  font-size: var(--vs-t-3);
  color: var(--jwn-ink-4);
}
.jwn-vs-dots { display: flex; gap: 4px; }
.jwn-vs-dot {
  width: 6px; height: 6px; transform: rotate(45deg);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--jwn-ink-4);
  transition: background .2s ease, box-shadow .2s ease;
}
.jwn-vs-dot.is-on { background: var(--vs-jolly); box-shadow: none; }

.jwn-vs-result-p {
  margin: 0;
  font-size: var(--vs-t-2); line-height: 1.6;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* the two prices and the two gate times, always on, keyed to the call */
.jwn-vs-mini {
  margin: clamp(16px, 2vw, 20px) 0 0;
  display: grid; gap: 8px;
}
.jwn-vs-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
  padding: 11px 13px;
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r-sm);
  background: oklch(12% 0.03 258 / 0.45);
  transition: border-color .22s ease, background .22s ease;
}
.jwn-vs-mini-k {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--vs-t-lab); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-vs-mini-v { margin: 0; text-align: right; }
.jwn-vs-mini-p {
  display: block;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--vs-t-2);
  color: var(--jwn-ink-2);
}
.jwn-vs-mini-w {
  display: block; margin-top: 3px;
  font-size: var(--vs-t-3); color: var(--jwn-ink-4);
}
.jwn-vs-mini-row.is-on { background: oklch(12% 0.03 258 / 0.7); }
.jwn-vs-mini-row.is-jolly.is-on { border-color: var(--vs-jolly-line); }
.jwn-vs-mini-row.is-jolly.is-on .jwn-vs-mini-k,
.jwn-vs-mini-row.is-jolly.is-on .jwn-vs-mini-p { color: var(--vs-jolly); }
.jwn-vs-mini-row.is-merry.is-on { border-color: var(--vs-merry-line); }
.jwn-vs-mini-row.is-merry.is-on .jwn-vs-mini-k,
.jwn-vs-mini-row.is-merry.is-on .jwn-vs-mini-p { color: var(--vs-merry); }

.jwn-vs-result-foot {
  margin: clamp(16px, 2vw, 20px) 0 0;
  padding-top: clamp(13px, 1.6vw, 16px);
  border-top: 1px solid var(--jwn-line);
}

.jwn-vs-result.is-jolly {
  border-color: var(--vs-jolly-line);
  box-shadow: var(--jwn-halo);
}
.jwn-vs-result.is-jolly .jwn-vs-result-h { color: var(--vs-jolly); }

.jwn-vs-result.is-merry {
  border-color: var(--vs-merry-line);
  box-shadow: 0 0 0 1px oklch(72% 0.055 230 / 0.3), 0 18px 52px oklch(72% 0.055 230 / 0.12);
  background:
    linear-gradient(180deg, oklch(72% 0.055 230 / 0.14), transparent 55%),
    oklch(12% 0.03 258 / 0.72);
}
.jwn-vs-result.is-merry .jwn-vs-result-h { color: var(--vs-merry); }
.jwn-vs-result.is-merry .jwn-vs-dot.is-on { background: var(--vs-merry); }
.jwn-vs-result.is-merry .jwn-vs-more {
  color: var(--vs-merry);
  text-decoration-color: oklch(89% 0.055 226 / 0.38);
}

/* ============================================================ 900 down === */
/* The board stops being a table and becomes one card per point. Each card
   still shows both parties, because comparability is the entire point. */

@media (max-width: 900px) {
  .jwn-vs-score { flex: 1 1 100%; align-self: stretch; }

  .jwn-vs-board {
    border: 0; border-radius: 0; overflow: visible;
    background: none; box-shadow: none;
    margin-top: clamp(22px, 4vw, 32px);
  }

  .jwn-vs-table,
  .jwn-vs-table thead,
  .jwn-vs-table tbody,
  .jwn-vs-table tr,
  .jwn-vs-table th,
  .jwn-vs-table td { display: block; }

  .jwn-vs-cap { display: block; padding: 0 0 16px; }

  /* the two contenders as a paired strip above the cards */
  .jwn-vs-table thead tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .jwn-vs-table .jwn-vs-h-cat,
  .jwn-vs-table .jwn-vs-h-edge { display: none; }
  .jwn-vs-table thead th.jwn-vs-h-team {
    width: auto;
    padding: 15px 14px 16px;
    border: 1px solid var(--jwn-line);
    border-radius: var(--jwn-r);
    overflow: hidden;
  }
  .jwn-vs-h-team.is-jolly { border-color: var(--vs-jolly-line); }
  .jwn-vs-h-team.is-merry { border-color: var(--vs-merry-line); }
  .jwn-vs-h-name { font-size: var(--vs-t-body); }

  .jwn-vs-table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }
  .jwn-vs-table tbody tr {
    border: 1px solid var(--jwn-line);
    border-radius: var(--jwn-r);
    background: linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
    overflow: hidden;
  }
  /* an odd number of cards would otherwise end the board on a hole */
  .jwn-vs-table tbody tr:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .jwn-vs-table tbody tr.is-key { border-color: var(--jwn-hair); }

  .jwn-vs-table tbody th,
  .jwn-vs-table tbody td,
  .jwn-vs-table tbody tr.is-key > * { border-top: 0; padding: 12px 14px; }

  .jwn-vs-table .jwn-vs-cat,
  .jwn-vs-table tbody tr.is-key .jwn-vs-cat {
    background: oklch(12% 0.03 258 / 0.5);
    border-bottom: 1px solid var(--jwn-line);
    padding: 11px 14px;
  }
  .jwn-vs-table tbody tr.is-key .jwn-vs-cat { color: var(--jwn-ink-2); }

  .jwn-vs-table .jwn-vs-val,
  .jwn-vs-table tbody tr.is-key .jwn-vs-val {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
  }
  .jwn-vs-table .jwn-vs-val.is-merry { border-top: 1px solid var(--jwn-line); }

  .jwn-vs-tag {
    display: flex; align-items: baseline; gap: 7px;
    font-family: var(--jwn-ui); font-weight: 800;
    font-size: var(--vs-t-lab); letter-spacing: 0.12em; text-transform: uppercase;
    line-height: 1.6;
    color: var(--jwn-ink-3);
  }
  .jwn-vs-tag-d {
    flex: none; align-self: center;
    width: 6px; height: 6px; transform: rotate(45deg);
  }
  /* the key stays on one line, so both values sit on the same baseline */
  .jwn-vs-val .jwn-vs-tag-t { white-space: nowrap; }
  /* filled for one house, hollow for the other, so the key is not colour alone */
  .jwn-vs-val.is-jolly .jwn-vs-tag { color: var(--vs-jolly-2); }
  .jwn-vs-val.is-jolly .jwn-vs-tag-d { background: var(--vs-jolly); }
  .jwn-vs-val.is-merry .jwn-vs-tag { color: var(--vs-merry-2); }
  .jwn-vs-val.is-merry .jwn-vs-tag-d { box-shadow: inset 0 0 0 1.5px var(--vs-merry); }

  .jwn-vs-since { margin-left: 6px; }

  .jwn-vs-table .jwn-vs-edge {
    display: flex; align-items: center; gap: 12px;
    text-align: left;
    border-top: 1px solid var(--jwn-line);
    background: oklch(12% 0.03 258 / 0.4);
    padding: 10px 14px;
  }
  .jwn-vs-edge-in { flex-direction: row; align-items: center; gap: 8px; }
  .jwn-vs-edge .jwn-vs-tag { flex: none; width: 76px; }

  .jwn-vs-verdict { grid-template-columns: minmax(0, 1fr); }
  .jwn-vs-verdict-rail .jwn-h3 { margin-bottom: 22px; }
  .jwn-vs-nums { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  .jwn-vs-quiz { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ 700 down === */
/* One column of cards, so eleven points is ten screens of table. The four
   that decide it stay, the rest go behind a control the script adds, and
   there is a way out of the board without scrolling past all of it. */

@media (max-width: 700px) {
  .jwn-vs-board:not(.is-open) tbody tr:not(.is-key) { display: none; }

  .jwn-vs-board-foot {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 6px 16px;
    margin-top: 14px;
  }
}

/* ============================================================ 560 down === */

@media (max-width: 560px) {
  .jwn-vs-table thead tr { grid-template-columns: minmax(0, 1fr); }
  .jwn-vs-h-meta + .jwn-vs-h-meta { display: inline-block; margin-top: 2px; }
  .jwn-vs-mark { margin-bottom: 10px; }
  .jwn-vs-nums { grid-template-columns: minmax(0, 1fr); }
  .jwn-vs-opts { grid-template-columns: minmax(0, 1fr); }
  .jwn-vs-mini-row { grid-template-columns: minmax(0, 1fr); }
  .jwn-vs-mini-v { text-align: left; }
}

/* ============================================================ 430 down === */
/* The two values stay side by side against a colour and shape key rather
   than stacking into seven lines a card. The full word stays in the
   accessibility tree. */

@media (max-width: 430px) {
  .jwn-vs-table .jwn-vs-val,
  .jwn-vs-table tbody tr.is-key .jwn-vs-val {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 10px;
  }
  .jwn-vs-val .jwn-vs-tag { position: relative; }
  .jwn-vs-val .jwn-vs-tag-t {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .jwn-vs-edge .jwn-vs-tag { width: auto; }
  .jwn-vs-since { display: inline-block; margin: 4px 0 0; }
}

/* ==== 140-faq.css ==== */
/* ============================================================== faq === */
/* Sixteen questions set as a theatre programme. Each group is a landmark
   section with a brass sidebar on the left, a column rule that runs the full
   height of the group so the sidebar reads as a rail rather than as a column
   that ran out of copy, and a numbered list of native details rows on the
   right that fills its track edge to edge.

   A row is an index plate, the question, and a 30px chevron disc. Opening one
   turns the whole row into a framed card, brass rule on all four sides, deco
   corner marks, a fill with a real bottom edge. The answer sits at a fixed
   measure with its own permanent link out at the right of the row, so the
   generated anchors are something a reader can take away.

   Two line jobs and no more. Structure (--jwn-faq-rule) separates things and
   is measured to clear 3:1 on this ground; decoration (--jwn-faq-deco) is
   ornament and never carries a boundary on its own.

   Under the questions, the curtain. A velvet marquee panel with the house
   bulbs top and bottom, the one number worth screenshotting, the official
   ticket link, and the two ways back into the site. */

.jwn-faq,
.jwn-faq-end {
  /* oklch(52% 0.064 80) measures 3.5:1 on the section ground and 3.6:1 on the
     panel's near-black floor, so one value works on both surfaces. */
  --jwn-faq-rule: oklch(52% 0.064 80);
  --jwn-faq-deco: var(--jwn-hair);

  /* The open row's frame bleeds past the text so it reads as a card around the
     column rather than a box inside it. */
  --jwn-faq-pad: clamp(12px, 1.2vw, 18px);

  /* Index plate plus its gap. The answer hangs off it, so they stay in step. */
  --jwn-faq-ind: 46px;

  --jwn-faq-rail: 250px;
  --jwn-faq-gap: clamp(18px, 3.2vw, 52px);
  --jwn-faq-gy: clamp(32px, 4.4vw, 54px);
}

/* Lets block-size: auto animate on ::details-content. Inherited, so it has to
   sit on the section rather than on the rows. */
.jwn-faq { interpolate-size: allow-keywords; }

/* --------------------------------------------------------------- head --- */

.jwn-faq-head .jwn-lede { max-width: 58ch; }

/* The three groups, as a jump list. Server rendered, so the promise the lede
   makes is kept with JavaScript off. */
.jwn-faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 24px);
}

.jwn-faq-jump-l {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--jwn-faq-rule);
  border-radius: 999px;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--jwn-ink-2);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.jwn-faq-jump-n {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--jwn-gold-wash);
  color: var(--jwn-gold);
  font-size: 11px;
  line-height: 1;
}

@media (hover: hover) {
  .jwn-faq-jump-l:hover {
    color: var(--jwn-ink);
    border-color: var(--jwn-brass);
    background: var(--jwn-gold-wash);
    text-decoration: none;
  }
}

/* Injected by the section script, so a visitor without JavaScript never meets
   a control that cannot do anything. The script also splits the head, so no
   empty slot is reserved when the control is absent. */
.jwn-faq-tools:empty { display: none; }

.jwn-faq-toggle {
  gap: 10px;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}
.jwn-faq-toggle svg { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.jwn-faq-toggle[data-all-open="true"] svg { transform: rotate(180deg); }

/* ------------------------------------------------------------- groups --- */

.jwn-faq-group {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--jwn-faq-rail)) minmax(0, 1fr);
  gap: var(--jwn-faq-gap);
  padding: var(--jwn-faq-gy) 0;
  border-top: 1px solid var(--jwn-faq-rule);
}
.jwn-faq-group:first-child {
  --jwn-faq-gy: 0px;
  border-top: 0;
}
.jwn-faq-group:last-child { padding-bottom: 0; }

/* The column rule and its deco mark, drawn on the group so they hold the full
   height of the questions no matter how short the rail copy runs. */
.jwn-faq-group::before,
.jwn-faq-group::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.jwn-faq-group::before {
  top: var(--jwn-faq-gy);
  bottom: 0;
  left: calc(var(--jwn-faq-rail) + var(--jwn-faq-gap) / 2);
  width: 1px;
  background: linear-gradient(180deg,
    var(--jwn-brass),
    var(--jwn-faq-deco) 9%,
    var(--jwn-faq-deco) 86%,
    transparent);
}
.jwn-faq-group::after {
  top: calc(var(--jwn-faq-gy) - 4px);
  left: calc(var(--jwn-faq-rail) + var(--jwn-faq-gap) / 2 - 4px);
  width: 9px;
  height: 9px;
  background: var(--jwn-brass);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------- the rail --- */

/* The grid area stays full height, so the rail can ride the group while its
   questions scroll past. align-self keeps the box itself at the top. */
.jwn-faq-rail {
  position: sticky;
  top: 84px;
  align-self: start;
}

.jwn-faq-rail-k {
  margin: 0 0 9px;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jwn-brass);
}

/* No size override. The group title sits on the shared .jwn-h3 step. */
.jwn-faq-rail-t { text-wrap: balance; }

.jwn-faq-rail-note {
  margin: 13px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--jwn-faq-rule);
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--jwn-ink-3);
  text-wrap: pretty;
}

/* The group where the corrections live gets the promotion, because those are
   the three findings a scanner most needs to see. */
.jwn-faq-group.is-key .jwn-faq-rail-note { color: var(--jwn-ink-2); }
.jwn-faq-rail-flag { margin: 15px 0 0; }

/* -------------------------------------------------------------- the rows --- */

.jwn-faq-list { max-width: none; }

.jwn-faq-item {
  position: relative;
  padding-inline: var(--jwn-faq-pad);
  margin-inline: calc(var(--jwn-faq-pad) * -1);
  /* The border box never changes size, only colour, so opening a row cannot
     shift the rows under it. */
  border: 1px solid transparent;
  border-top-color: var(--jwn-faq-rule);
  transition: border-color .22s ease, background-color .22s ease;
}
.jwn-faq-list > .jwn-faq-item:last-child { border-bottom-color: var(--jwn-faq-rule); }

/* An open card already draws the edge the next row would repeat. */
.jwn-faq-item[open] + .jwn-faq-item:not([open]) { border-top-color: transparent; }

/* Deco corner marks, brought up with the open state. */
.jwn-faq-item::before,
.jwn-faq-item::after {
  content: "";
  position: absolute;
  /* Sized to clear the index plate at the tightest row padding. */
  width: 8px;
  height: 8px;
  border: 1px solid var(--jwn-brass);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.jwn-faq-item::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.jwn-faq-item::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* The open row is a container, not a wash. A fill that runs the whole height
   with a defined bottom edge, the structure rule thickened into a frame, and
   the corner marks lit. :target carries the same state so a deep link lands on
   something that looks deliberate with JavaScript off. */
.jwn-faq-item[open],
.jwn-faq-item:target {
  border-color: var(--jwn-faq-rule);
  border-radius: 3px;
  background-color: var(--jwn-panel);
  background-image: linear-gradient(180deg, oklch(86% 0.128 88 / 0.07), transparent 76px);
  box-shadow: var(--jwn-sh-sm);
}
.jwn-faq-item[open]::before,
.jwn-faq-item[open]::after,
.jwn-faq-item:target::before,
.jwn-faq-item:target::after { opacity: 1; }

/* ------------------------------------------------------------ the question --- */

.jwn-faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  min-height: 46px;
  cursor: pointer;
  list-style: none;
  color: var(--jwn-ink);
  transition: color .18s ease;
}
.jwn-faq-q::-webkit-details-marker { display: none; }
.jwn-faq-q::marker { content: ""; }

/* The programme number. Decorative, so it is hidden from assistive tech and
   sized as an index rather than a headline. */
.jwn-faq-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 21px;
  border-radius: 2px;
  border: 1px solid var(--jwn-faq-deco);
  background: oklch(12% 0.03 258 / 0.55);
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--jwn-brass);
  transition: color .18s ease, border-color .18s ease;
}
.jwn-faq-item[open] .jwn-faq-n,
.jwn-faq-item:target .jwn-faq-n {
  color: var(--jwn-gold);
  border-color: var(--jwn-brass);
}

.jwn-faq-q-t {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: inherit;
  text-wrap: pretty;
}
.jwn-faq-item[open] .jwn-faq-q-t,
.jwn-faq-item:target .jwn-faq-q-t { color: var(--jwn-gold); }

.jwn-faq-chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--jwn-faq-deco);
  background: oklch(12% 0.03 258 / 0.5);
  color: var(--jwn-brass);
  transition:
    transform .3s cubic-bezier(.2,.7,.3,1),
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}
.jwn-faq-item[open] .jwn-faq-chev,
.jwn-faq-item:target .jwn-faq-chev {
  transform: rotate(180deg);
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  border-color: transparent;
  color: var(--jwn-gold-ink);
}

@media (hover: hover) {
  .jwn-faq-q:hover { color: var(--jwn-gold); }
  .jwn-faq-q:hover .jwn-faq-chev { color: var(--jwn-gold); border-color: var(--jwn-brass); }
  .jwn-faq-q:hover .jwn-faq-n { color: var(--jwn-gold); border-color: var(--jwn-brass); }
  .jwn-faq-item[open] .jwn-faq-q:hover .jwn-faq-chev { color: var(--jwn-gold-ink); }
}

/* -------------------------------------------------------------- the answer --- */

/* The answer hangs off the index plate and the row's own link sits out at the
   far edge, so the row is filled by its content rather than by a rule running
   on past it. */
.jwn-faq-a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 30px;
  padding: 0 0 20px var(--jwn-faq-ind);
}

/* Measured, not guessed. 520px lands the answers at roughly 65 to 70
   characters a line in this face at this size. */
.jwn-faq-a-body {
  flex: 0 1 min(100%, 520px);
  min-width: 0;
}

.jwn-faq-a-p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* What the model still has as unannounced, said next to the answer that would
   otherwise send a reader off to book on a date nobody has set. */
.jwn-faq-a-note {
  margin: 11px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--jwn-faq-deco);
  font-size: 13px;
  line-height: 1.55;
  color: var(--jwn-ink-3);
}

.jwn-faq-a-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--jwn-ink-3);
  text-decoration: none;
  transition: color .18s ease;
}
.jwn-faq-a-link-i { flex: none; color: var(--jwn-brass); }
.jwn-faq-a-link.is-copied { color: var(--jwn-gold); }

@media (hover: hover) {
  .jwn-faq-a-link:hover { color: var(--jwn-gold); text-decoration: none; }
  .jwn-faq-a-link:hover .jwn-faq-a-link-i { color: var(--jwn-gold); }
}

/* Height animation, where the browser can interpolate to auto. Everywhere else
   the row still opens and closes, it just does it instantly. */
@supports (interpolate-size: allow-keywords) {
  .jwn-faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size .34s cubic-bezier(.2,.7,.3,1),
      opacity .26s ease,
      content-visibility .34s allow-discrete;
  }
  .jwn-faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* A hash aimed at a question shows its answer with JavaScript off, so all
   sixteen anchors are live links rather than scroll positions. */
@supports selector(::details-content) {
  .jwn-faq-item:target::details-content {
    content-visibility: visible;
    block-size: auto;
    overflow: visible;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jwn-faq-item::details-content,
  .jwn-faq-item[open]::details-content { transition: none; }
}

/* ========================================================== the curtain === */

.jwn-faq-end { padding: 0 0 clamp(34px, 5vw, 60px); }

.jwn-faq-end-panel {
  position: relative;
  padding: clamp(38px, 5.2vw, 66px) clamp(20px, 4.4vw, 60px);
  text-align: center;
  border: 1px solid var(--jwn-faq-deco);
  border-radius: 3px;
  background:
    radial-gradient(96% 62% at 50% 0%, oklch(41% 0.105 24 / 0.55), transparent 66%),
    radial-gradient(70% 46% at 50% 100%, oklch(12% 0.03 258 / 0.6), transparent 70%),
    linear-gradient(180deg, var(--jwn-velvet), var(--jwn-velvet-2));
  box-shadow:
    inset 0 0 0 6px oklch(11% 0.032 20 / 0.45),
    inset 0 0 0 7px var(--jwn-faq-deco),
    var(--jwn-sh-lg);
}

.jwn-faq-end-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
  border: 1px solid var(--jwn-brass);
}
.jwn-faq-end-corner.is-tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.jwn-faq-end-corner.is-tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.jwn-faq-end-corner.is-bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.jwn-faq-end-corner.is-br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.jwn-faq-end-bulbs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 46px);
  justify-content: space-between;
  gap: 0;
}
.jwn-faq-end-bulbs.is-top { top: -3.5px; }
.jwn-faq-end-bulbs.is-bottom { bottom: -3.5px; }

/* The chase runs on opacity alone against the bulb's own static glow, so it
   composites instead of repainting, and the script only switches it on while
   the panel is actually on screen. */
.jwn-faq-end-bulbs.is-on .jwn-bulb { animation: jwn-faq-bulb 1.9s linear infinite; }
.jwn-faq-end-bulbs.is-on .jwn-bulb:nth-child(3n+2) { animation-delay: .63s; }
.jwn-faq-end-bulbs.is-on .jwn-bulb:nth-child(3n+3) { animation-delay: 1.26s; }

@keyframes jwn-faq-bulb {
  0%, 100% { opacity: .35; }
  30%      { opacity: 1; }
}

/* ---------------------------------------------------------- the payoff --- */

/* Sized under the price on purpose. The number is the thing a reader keeps. */
.jwn-faq-end-h {
  font-size: clamp(23px, 3vw, 32px);
  margin-inline: auto;
  max-width: 24ch;
}

.jwn-faq-end-price {
  margin: clamp(10px, 1.4vw, 16px) 0 0;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(46px, 7vw, 78px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--jwn-gold);
  text-shadow: 0 0 44px oklch(86% 0.128 88 / 0.25);
}

.jwn-faq-end-sub {
  margin: clamp(10px, 1.4vw, 14px) auto 0;
  max-width: 46ch;
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.5;
  color: var(--jwn-ink-3);
  text-wrap: balance;
}

/* Only the units that must never split carry it, so nothing fights balance. */
.jwn-faq-nw { white-space: nowrap; }

/* ---------------------------------------------------------- the actions --- */

.jwn-faq-end-cta { margin-top: clamp(26px, 3.4vw, 34px); }

.jwn-faq-end-buy { padding-inline: 28px; }
.jwn-faq-ext { width: 14px; height: 14px; flex: none; }

.jwn-faq-end-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 16px);
  margin: clamp(28px, 3.8vw, 40px) auto 0;
  max-width: 720px;
  text-align: left;
}

.jwn-faq-end-link {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 17px 19px;
  border: 1px solid var(--jwn-faq-rule);
  border-radius: var(--jwn-r-sm);
  background: oklch(10% 0.028 258 / 0.42);
  color: var(--jwn-ink);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2,.7,.3,1);
}

.jwn-faq-end-link-k {
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jwn-gold);
}

.jwn-faq-end-link-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.24;
  color: var(--jwn-ink);
  text-wrap: pretty;
}

.jwn-faq-arrow {
  flex: none;
  width: 18px;
  height: 12px;
  color: var(--jwn-brass);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), color .2s ease;
}

.jwn-faq-end-link-p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

@media (hover: hover) {
  .jwn-faq-end-link:hover {
    background: oklch(10% 0.028 258 / 0.62);
    border-color: var(--jwn-brass);
    text-decoration: none;
  }
  .jwn-faq-end-link:hover .jwn-faq-arrow { transform: translateX(4px); color: var(--jwn-gold); }
}

/* Left edge on the panel's left edge, and a single block rather than a flex
   row wrapping one child. */
.jwn-faq-end-update {
  display: block;
  margin: clamp(24px, 3.2vw, 34px) 0 0;
  color: var(--jwn-ink-3);
}
.jwn-faq-end-update strong { color: var(--jwn-ink-2); }

/* -------------------------------------------------------------- layout --- */

@media (max-width: 900px) {
  /* The rail stops being a column and becomes a header, so the questions get
     the full width rather than a squeezed one. */
  .jwn-faq-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .jwn-faq-group::before,
  .jwn-faq-group::after { display: none; }

  /* No rule of its own here. The first row's own rule sits right under the
     header and does that job, so the header is not underlined twice. */
  .jwn-faq-rail { position: static; }
  .jwn-faq-rail-note {
    max-width: 56ch;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
  }
  .jwn-faq-rail-flag { margin-top: 13px; }
}

@media (max-width: 680px) {
  .jwn-faq-end-links { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  /* The site's fixed treat button parks in the bottom right corner and covers
     a 52px square of whatever is under it. The row's control moves out of that
     lane on phones, and the index plate stands down so the question keeps the
     width it needs. */
  .jwn-faq { --jwn-faq-ind: 40px; }
  .jwn-faq-n { display: none; }
  .jwn-faq-chev { order: -1; width: 28px; height: 28px; }
  .jwn-faq-q { gap: 12px; padding: 14px 0; }
  .jwn-faq-a { padding-bottom: 18px; }

  .jwn-faq-end-panel { padding-inline: 18px; }
  .jwn-faq-end-bulbs { width: calc(100% - 28px); }
  .jwn-faq-end-bulbs .jwn-bulb:nth-child(n+10) { display: none; }
  /* Keeps the primary action on one line at 375. */
  .jwn-faq-end-buy { width: 100%; padding-inline: 16px; }
  .jwn-faq-end-corner { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .jwn-faq-end-bulbs.is-on .jwn-bulb { animation: none; }
}

/* ==== 20-overview.css ==== */
/* ========================================================== overview ===
   The editorial opening. Four movements, and every one after the lede opens
   identically: a deco rule, a left aligned .jwn-h3, a sub-deck. Same
   structural level, same visual grammar.

   Two label styles only, both inherited from the base layer: .jwn-eyebrow
   for a section or pull-out head, .jwn-h4 (12px / 0.16em) for every panel
   key, figure caption and ledger label. Nothing here re-tracks either.

   Body type is a three step scale, 17.5 / 15.5 / 13. Vertical rhythm is a
   three step scale, --jwn-ov-move / --jwn-ov-block / --jwn-ov-tight, declared once below
   and never bypassed by a loose clamp().

   Owns .jwn-ov-* only. Nothing here restyles the base layer.
   ====================================================================== */

.jwn-ov {
  --jwn-ov-move:  clamp(44px, 6vw, 72px);   /* one movement to the next */
  --jwn-ov-block: clamp(20px, 2.4vw, 28px); /* a head to the thing it heads */
  --jwn-ov-tight: clamp(10px, 1.2vw, 12px); /* inside a single block */
}

/* The section head is the first movement boundary, so it steps like one. */
.jwn-ov-head { margin-bottom: var(--jwn-ov-move); }

/* The rule closes a movement and introduces the next head, so it carries the
   long step above it and the short one below. */
.jwn-ov-rule { margin: var(--jwn-ov-move) 0 var(--jwn-ov-block); }

/* ------------------------------------------------ lede and the pull-out --- */

.jwn-ov-open {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(26px, 4.2vw, 60px);
  align-items: start;
}

/* No measure cap. The 1.62fr track is the measure, which lands near 65ch at
   1140 and keeps the declared gutter the only gutter. */
.jwn-ov-body .jwn-p {
  font-size: clamp(16px, 1.6vw, 17.5px);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Magazine drop cap, sized to an exact multiple of the line box so its foot
   lands on the second line's baseline. 2 * 1.7em (the parent leading) divided
   by the cap's own 3.4em multiplier resolves to exactly two line boxes at any
   parent size, so the alignment holds at every viewport. */
.jwn-ov-lead::first-letter {
  float: left;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: 3.4em;
  line-height: calc(2 * 1.7em / 3.4);
  /* The float box lands on exactly two line boxes, and sub-pixel rounding can
     tip a third line into it. Two pixels off the margin box guarantees two
     wrapped lines at every size without moving the glyph. */
  margin-bottom: -2px;
  padding: 0 0.08em 0 0;
  color: var(--jwn-gold);
  text-shadow: 0 2px 18px oklch(80% 0.12 86 / 0.28);
}

.jwn-ov-aside {
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--jwn-sh);
  isolation: isolate;
}
/* A house light falling across the velvet from above, so the pull-out reads
   as lit rather than as one more dark rectangle. Sits behind the copy. */
.jwn-ov-aside-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(126% 76% at 50% -16%, oklch(86% 0.128 88 / 0.22), transparent 64%);
}
.jwn-ov-aside-k { margin-bottom: var(--jwn-ov-tight); }
.jwn-ov-aside-verdict {
  margin: 0;
  font-family: var(--jwn-display);
  font-weight: 500;
  font-size: clamp(17px, 1.9vw, 19.5px);
  line-height: 1.45;
  color: var(--jwn-ink);
  text-wrap: pretty;
}

/* A brass leader ledger, not a definition table. The dotted fill carries the
   eye from label to figure and pins every figure to one right edge. */
.jwn-ov-facts {
  margin: var(--jwn-ov-block) 0 0;
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-ov-fact {
  padding: 11px 0;
  border-bottom: 1px solid var(--jwn-hair-soft);
}
.jwn-ov-fact dt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--jwn-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-ov-fact .jwn-leader-fill { margin-bottom: 3px; }
.jwn-ov-fact dd {
  margin: 0;
  flex: none;
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  color: var(--jwn-gold);
}
/* Price leads the box, because a reader who reads only the box still has to
   leave with it. */
.jwn-ov-fact.is-lead {
  background: linear-gradient(90deg, var(--jwn-gold-wash), transparent 82%);
}
.jwn-ov-fact.is-lead dt { color: var(--jwn-ink-2); }
.jwn-ov-fact.is-lead dd { font-size: 24px; }

.jwn-ov-aside-note {
  margin: var(--jwn-ov-tight) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--jwn-ink-3);
}

/* --------------------------------------------------- the 2026 marquee --- */

.jwn-ov-new {
  position: relative;
  padding: clamp(28px, 3.6vw, 40px) clamp(15px, 2.4vw, 30px) clamp(24px, 3.2vw, 34px);
  border: 1px solid var(--jwn-hair);
  border-radius: 3px;
  background:
    radial-gradient(66% 44% at 50% -8%, oklch(86% 0.128 88 / 0.16), transparent 68%),
    linear-gradient(180deg, oklch(86% 0.128 88 / 0.05), transparent 42%),
    oklch(12% 0.03 258 / 0.62);
  box-shadow:
    inset 0 0 0 5px oklch(10% 0.03 258 / 0.6),
    inset 0 0 0 6px var(--jwn-hair-soft),
    var(--jwn-sh);
}

.jwn-ov-new-bulbs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  justify-content: space-between;
  gap: 0;
}
.jwn-ov-new-bulbs.is-top { top: -3.5px; }
.jwn-ov-new-bulbs.is-bottom { bottom: -3.5px; }

/* One divided plate rather than six floating cards. The 1px grid gap is the
   brass hairline showing through. Two lead figures on the top row, two note
   tiles under them, so a count, a price and a piece of calendar shape are
   never set at the same weight. */
.jwn-ov-new-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--jwn-hair-soft);
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r-sm);
  overflow: hidden;
}
.jwn-ov-new-item {
  background: oklch(13% 0.032 258 / 0.86);
  padding: clamp(18px, 2.2vw, 24px);
}
.jwn-ov-new-item.is-lead {
  background:
    linear-gradient(180deg, oklch(86% 0.128 88 / 0.11), oklch(13% 0.032 258 / 0.9) 72%);
}

/* The hairline under the head is the common internal grid line, so every cell
   in a row starts its copy on the same y rather than floating in a tall box. */
.jwn-ov-new-t {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 11px;
  margin: 0 0 var(--jwn-ov-tight);
  padding-bottom: var(--jwn-ov-tight);
  border-bottom: 1px solid var(--jwn-hair-soft);
}
.jwn-ov-new-fig {
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 54px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
}
.jwn-ov-new-lab {
  font-family: var(--jwn-ui);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-ov-new-item.is-note .jwn-ov-new-lab { color: var(--jwn-gold); }
.jwn-ov-new-d {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------- sub-heads --- */

.jwn-ov-sub { margin-bottom: var(--jwn-ov-block); }
.jwn-ov-sub-p {
  margin: var(--jwn-ov-tight) 0 0;
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--jwn-ink-3);
}

/* ---------------------------------------------------- ticket ledger --- */

.jwn-ov-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  overflow: hidden;
}
.jwn-ov-led-col { padding: clamp(20px, 2.4vw, 28px); }
.jwn-ov-led-col + .jwn-ov-led-col { border-left: 1px solid var(--jwn-line); }
.jwn-ov-led-col.is-yes .jwn-ov-led-k { color: var(--jwn-pine); }
.jwn-ov-led-col.is-no .jwn-ov-led-k { color: var(--jwn-rouge); }

.jwn-ov-ledger-note { margin: var(--jwn-ov-block) 0 0; }

/* ------------------------------------------------------ marked lists --- */

.jwn-ov-list {
  list-style: none;
  margin: var(--jwn-ov-tight) 0 0;
  padding: 0;
  display: grid;
  gap: var(--jwn-ov-tight);
}
.jwn-ov-list > li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-ov-ico {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 4px;
}
.jwn-ov-led-col.is-yes .jwn-ov-ico,
.jwn-ov-list.is-yes .jwn-ov-ico { color: var(--jwn-pine); }
.jwn-ov-led-col.is-no .jwn-ov-ico,
.jwn-ov-list.is-no .jwn-ov-ico { color: var(--jwn-rouge); }

/* ---------------------------------------------------------- verdicts --- */

/* align-items: start so each panel sizes to its own copy. Stretching them
   left a quarter of the buy-side card empty. min() on the track floor so a
   320px viewport cannot force a 320px column inside a 288px content box. */
.jwn-ov-verdict {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--jwn-gap);
  align-items: start;
}
.jwn-ov-panel { padding: clamp(20px, 2.4vw, 28px); }
.jwn-ov-panel.is-for .jwn-ov-panel-k { color: var(--jwn-gold); }
.jwn-ov-panel.is-for .jwn-ov-ico { color: var(--jwn-gold); }
.jwn-ov-panel.is-skip .jwn-ov-panel-k { color: var(--jwn-ink); }
/* On oxblood, a red cross would sit on its own hue. A plain bulb-white mark
   reads instantly and the column heading carries the meaning anyway. */
.jwn-ov-panel.is-skip .jwn-ov-ico { color: var(--jwn-ink); }
.jwn-ov-panel.is-skip .jwn-ov-list > li { color: var(--jwn-ink-2); }

/* ------------------------------------------------------- bottom line --- */

.jwn-ov-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-top: var(--jwn-ov-block);
  padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.8vw, 32px);
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r);
  background:
    radial-gradient(70% 150% at 100% 0%, oklch(86% 0.128 88 / 0.10), transparent 66%),
    oklch(12% 0.03 258 / 0.55);
}
.jwn-ov-bottom-t {
  margin: 0;
  flex: 1 1 min(46ch, 100%);
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-ov-bottom-t strong { color: var(--jwn-gold); font-weight: 700; }
/* The only action in the section, so its boundary is brass rather than a
   line colour that lands under the 3:1 non-text contrast floor. */
.jwn-ov-bottom-cta {
  flex: none;
  min-height: 44px;
  border-color: var(--jwn-brass);
}

/* ------------------------------------------------------------ layout --- */

@media (max-width: 900px) {
  .jwn-ov-open { grid-template-columns: minmax(0, 1fr); }
  .jwn-ov-body .jwn-p { max-width: 66ch; }
  /* The verdict box is the answer, so on one column it leads instead of
     sitting under 450px of prose. */
  .jwn-ov-aside { order: -1; }
}

@media (max-width: 760px) {
  .jwn-ov-ledger { grid-template-columns: minmax(0, 1fr); }
  .jwn-ov-led-col + .jwn-ov-led-col {
    border-left: 0;
    border-top: 1px solid var(--jwn-line);
  }
}

@media (max-width: 620px) {
  .jwn-ov-new-grid { grid-template-columns: minmax(0, 1fr); }
  .jwn-ov-new-item.is-lead { background: linear-gradient(180deg, oklch(86% 0.128 88 / 0.12), oklch(13% 0.032 258 / 0.9) 78%); }
  .jwn-ov-new-bulbs { width: calc(100% - 26px); }
  .jwn-ov-new-bulbs .jwn-bulb:nth-child(n+11) { display: none; }
  .jwn-ov-bottom { flex-direction: column; align-items: stretch; }
  .jwn-ov-bottom-cta { justify-content: center; }
}

@media (max-width: 430px) {
  .jwn-ov-new-bulbs .jwn-bulb:nth-child(n+9) { display: none; }
}

/* ==== 30-nights.css ==== */
/* ========================================================== nights ===
   "Every night, priced and ranked." The centrepiece tool.

   Owns .jwn-nights-* (section chrome), .jwn-npick* (quick picks),
   .jwn-nlad-* (price ladder), .jwn-night-* (ledger rows) and
   .jwn-ncalc-* (party cost calculator). Restyles nothing in the base.

   Two rules the whole section is built on:

   1. Gold is the recommendation colour and nothing else. It marks the best
      value, the selected row, the live control and the running total. Facts
      that are merely true (a weekend, a month stub, a moderate crowd) stay
      on ink, so the one thing worth acting on is the one thing that glows.

   2. Small type moves in four steps and no others, and every uppercase
      micro label shares one tracking value.

   Progressive enhancement contract: .jwn-nights-js is hidden until the
   section module adds .is-live, so no control is ever dead without
   JavaScript, and .jwn-nights-nojs carries the static alternative.
   ===================================================================== */

.jwn-nights {
  /* one row template, shared by the ledger head and every row */
  --jwn-nrow: 76px minmax(0, 1fr) 168px 152px;
  --jwn-ngap: 18px;
  /* a lifted rouge so the peak reads at 4.5:1 on a panel, unlike --jwn-rouge */
  --jwn-nhot: oklch(80% 0.145 24);

  /* The small type scale. Four steps, nothing between them, and every label,
     note, caption and control below maps onto one of them. */
  --jwn-fs-caps: 10px;     /* uppercase micro label */
  --jwn-fs-fine: 12px;     /* fine print, notes, status */
  --jwn-fs-sub: 13.5px;    /* secondary body, controls, captions */
  --jwn-fs-body: 15px;     /* body */

  /* One tracking value for every uppercase micro label in the section. The
     pills keep the base 0.08em, the single deliberate exception, because
     their text is sentence-like rather than a label. */
  --jwn-caps-ls: 0.16em;

  /* The display scale, for figures only. */
  --jwn-fs-amt: clamp(26px, 2.8vw, 32px);
  --jwn-fs-num: clamp(19px, 2vw, 22px);
}

/* ---------------------------------------------------- js gating --- */

.jwn-nights:not(.is-live) .jwn-nights-js { display: none !important; }
.jwn-nights.is-live .jwn-nights-nojs { display: none !important; }

/* ------------------------------------------------------- section --- */

.jwn-nights-note { margin-top: clamp(20px, 2.6vw, 28px); }

.jwn-nights-sub {
  margin: clamp(38px, 5vw, 62px) 0 clamp(16px, 2vw, 20px);
}

/* ==================================================== quick picks === */

/* Stacked by default, so nothing carries a minimum width the phone cannot
   honour. Two columns with the hero spanning across the tablet band, three
   across on desktop. There is never a 2 + 1 row with a hole in it. */
.jwn-npicks {
  display: grid;
  gap: var(--jwn-gap);
  grid-template-columns: 1fr;
  align-items: stretch;
}

/* One padding for all three, so nothing sits four pixels lower than the card
   beside it. */
.jwn-npick {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: clamp(20px, 2.3vw, 28px);
}

@media (min-width: 600px) and (max-width: 939px) {
  .jwn-npicks { grid-template-columns: 1fr 1fr; }
  .jwn-npick.is-hero { grid-column: 1 / -1; }
}

@media (min-width: 940px) {
  /* Three cards, one shared set of rows. Subgrid is what makes the eyebrow,
     the date, the price, the copy and the tags sit on the same five baselines
     in all three cards instead of three private ones. */
  .jwn-npicks {
    grid-template-columns: 1.16fr 1fr 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: var(--jwn-gap);
    row-gap: 11px;
  }
  .jwn-npick {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 5;
    row-gap: 11px;
  }
}

.jwn-npick-k {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-npick.is-hero .jwn-npick-k { color: var(--jwn-gold); }

/* Two lines of room whatever the date does, so the price under it starts at
   the same height in every card even where subgrid is not available. */
.jwn-npick-date {
  margin: 0;
  min-height: 2.36em;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--jwn-ink);
  text-wrap: balance;
}

.jwn-npick-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin: 2px 0 0;
}
.jwn-npick-price.is-rows { display: block; }
.jwn-npick-amt {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px); line-height: 1;
  color: var(--jwn-ink);
  font-variant-numeric: tabular-nums;
}
.jwn-npick.is-hero .jwn-npick-amt { color: var(--jwn-gold); }
.jwn-npick-note {
  font-size: var(--jwn-fs-fine); line-height: 1.4;
  color: var(--jwn-ink-3);
}
.jwn-npick-note.is-block { display: block; margin: 7px 0 0; }

.jwn-npick-rows {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px;
}
.jwn-npick-row-d {
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--jwn-fs-sub);
  color: var(--jwn-ink-2);
}
.jwn-npick-row-p {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: 22px; line-height: 1; color: var(--jwn-ink);
}

.jwn-npick-why {
  margin: 0;
  font-size: var(--jwn-fs-body); line-height: 1.55;
  color: var(--jwn-ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.jwn-npick-tags {
  list-style: none; margin: auto 0 0; padding: 6px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* long, sentence-like badge text has to wrap rather than blow out a row */
.jwn-night-badge {
  white-space: normal;
  text-align: left;
  font-size: var(--jwn-fs-caps);
  letter-spacing: 0.08em;
  padding: 4px 9px;
  line-height: 1.3;
}

/* ================================================== price ladder === */

.jwn-nlad {
  margin: clamp(34px, 4.4vw, 52px) 0 0;
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2.4vw, 26px) clamp(16px, 2vw, 20px);
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r);
  background: linear-gradient(180deg, oklch(12% 0.03 258 / 0.5), oklch(12% 0.03 258 / 0.2));
}

.jwn-nlad-plot {
  position: relative;
  height: clamp(58px, 8vw, 92px);
  padding-right: 52px;
}
.jwn-nlad-grid {
  position: absolute; left: 0; right: 52px;
  height: 1px;
  background-image: radial-gradient(circle, var(--jwn-hair) 0.5px, transparent 0.5px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.jwn-nlad-grid.is-hi { top: 0; }
.jwn-nlad-grid.is-lo { bottom: 40%; }
.jwn-nlad-grid-n {
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  padding-left: 9px;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-fine);
  letter-spacing: 0.03em;
  color: var(--jwn-ink-3);
  white-space: nowrap;
}

.jwn-nlad-months {
  position: absolute; inset: 0 52px 0 0;
  display: flex; align-items: flex-end; gap: 18px;
}
.jwn-nlad-month {
  display: flex; align-items: flex-end; gap: 4px;
  height: 100%;
}
.jwn-nlad-bar {
  flex: 1 1 0; min-width: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--jwn-brass), var(--jwn-brass-dim));
  opacity: 0.85;
}
.jwn-nlad-bar.is-best {
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  opacity: 1;
  box-shadow: 0 0 16px oklch(86% 0.128 88 / 0.35);
}
.jwn-nlad-bar.is-strong { background: linear-gradient(180deg, var(--jwn-pine), var(--jwn-pine-dim)); opacity: 1; }
.jwn-nlad-bar.is-priciest { background: linear-gradient(180deg, var(--jwn-nhot), oklch(58% 0.14 24)); }

.jwn-nlad-axis {
  display: flex; gap: 18px;
  margin: 9px 52px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-nlad-axis p {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}

.jwn-nlad-cap {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  font-size: var(--jwn-fs-sub); line-height: 1.55;
  color: var(--jwn-ink-3);
  max-width: 62ch;
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .jwn-nlad-plot { padding-right: 44px; }
  .jwn-nlad-grid { right: 44px; }
  .jwn-nlad-months { inset: 0 44px 0 0; gap: 12px; }
  .jwn-nlad-axis { gap: 12px; margin-right: 44px; }
  .jwn-nlad-month { gap: 3px; }
  .jwn-nlad-grid-n { padding-left: 7px; }
}

/* ======================================================== layout === */

.jwn-nights-work {
  display: grid;
  gap: clamp(26px, 3.2vw, 34px);
  margin-top: clamp(40px, 5.4vw, 68px);
}
.jwn-nights-main { min-width: 0; }

@media (min-width: 1060px) {
  .jwn-nights-work {
    grid-template-columns: minmax(0, 1fr) 322px;
    align-items: start;
  }
}

/* The stacked layout deliberately leaves the calculator in source order, after
   the ledger. An earlier fix reordered it visually with `order: -1`, which put
   the card above the list on screen while the keyboard still reached it last,
   so focus order and reading order disagreed. The fixed result bar
   (.jwn-ncalc-peek) solves the same problem without that split: it surfaces the
   running total while the ledger is on screen and taps back to the card. */

.jwn-nights-lead { margin-bottom: clamp(16px, 2vw, 20px); }
.jwn-nights-lead-p {
  margin: 10px 0 0;
  font-size: var(--jwn-fs-body); line-height: 1.6;
  color: var(--jwn-ink-3);
  max-width: 62ch;
}

/* ====================================================== controls === */

/* The whole panel is JavaScript only, so it is never an empty bordered box
   describing filters that are not there. */
.jwn-nights-ctl {
  display: grid;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r);
  background: oklch(12% 0.03 258 / 0.55);
}
.jwn-nights-ctl-g {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; max-width: 100%;
}
.jwn-nights-ctl-k {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-nights-ctl-n {
  display: inline-block;
  margin-left: 5px;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* Options share equal cells and wrap in even rows, so the third option of a
   three-option control never lands alone as a full width bar. */
.jwn-nights-ctl .jwn-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-radius: var(--jwn-r);
}
/* four options make an even 2 x 2, two options make a pair */
.jwn-nights-ctl-g.is-4up .jwn-seg,
.jwn-nights-ctl-g.is-2up .jwn-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jwn-nights-ctl .jwn-seg-btn {
  min-height: 44px;
  padding: 9px 10px;
  white-space: normal;
}

.jwn-nights-count {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: var(--jwn-fs-fine); font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--jwn-ink-3);
  font-variant-numeric: tabular-nums;
}
.jwn-nights-count-dot {
  width: 5px; height: 5px; flex: none;
  background: var(--jwn-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px oklch(86% 0.128 88 / 0.6);
}

@media (min-width: 720px) {
  /* Two columns with matching edges. Sort and Month on the first row, Ticket
     and Tax on the second, the status line left aligned on its own. */
  .jwn-nights-ctl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
  }
  .jwn-nights-count { grid-column: 1 / -1; }
  /* the seg goes back to being a pill that sizes to its options, and wraps
     inside its column rather than pushing past it */
  .jwn-nights-ctl-g { align-items: flex-start; }
  .jwn-nights-ctl .jwn-seg {
    display: inline-flex; flex-wrap: wrap;
    max-width: 100%;
  }
  .jwn-nights-ctl .jwn-seg-btn {
    min-height: 40px;
    padding: 9px 16px;
    white-space: nowrap;
  }
}

/* ==================================================== ledger head === */

.jwn-nights-thead { display: none; }

@media (min-width: 820px) {
  .jwn-nights-thead {
    display: grid;
    grid-template-columns: var(--jwn-nrow);
    gap: 0 var(--jwn-ngap);
    margin-top: clamp(20px, 2.6vw, 28px);
    padding: 0 19px 9px;
    border-bottom: 1px solid var(--jwn-hair);
  }
  .jwn-nights-thead-c {
    font-family: var(--jwn-ui); font-weight: 800;
    font-size: var(--jwn-fs-caps);
    letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
    color: var(--jwn-ink-3);
  }
  .jwn-nights-thead-c.is-date { grid-column: 1 / span 2; }
  .jwn-nights-thead-c.is-price { grid-column: 4; text-align: right; }
}

/* ========================================================== rows === */

.jwn-nights-list {
  list-style: none;
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (min-width: 820px) {
  .jwn-nights-list { margin-top: 10px; gap: 8px; }
}

.jwn-night.is-out { display: none; }

.jwn-night-in {
  position: relative;
  display: grid;
  gap: 12px 14px;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-areas:
    "stub  head"
    "reads reads"
    "price price"
    "why   why";
  padding: 14px 16px;
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r);
  background: linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
  box-shadow: var(--jwn-sh-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.jwn-night-in::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--jwn-r) var(--jwn-r) 0 0;
  background: linear-gradient(90deg, transparent, var(--jwn-hair-soft) 20%, var(--jwn-hair-soft) 80%, transparent);
}

@media (hover: hover) {
  .jwn-night-in:hover { border-color: var(--jwn-line-2); }
}

.jwn-night.is-selected .jwn-night-in {
  border-color: oklch(66% 0.098 80 / 0.55);
  box-shadow: var(--jwn-halo);
  background: linear-gradient(180deg, oklch(27% 0.05 262), var(--jwn-panel));
}

@media (min-width: 820px) {
  .jwn-night-in {
    grid-template-columns: var(--jwn-nrow);
    grid-template-areas:
      "stub head  reads price"
      "stub why   why   why";
    gap: 4px var(--jwn-ngap);
    align-items: center;
    padding: 15px 18px;
  }
}

/* ------------------------------------------------------- the stub --- */

/* The calendar chip. It orients the eye when the list is re-sorted, which is
   the whole of its job, so it is set below the price rather than above it. */
.jwn-night-stub {
  grid-area: stub;
  margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  align-self: stretch;
  padding-right: 12px;
  border-right: 1px dashed var(--jwn-hair);
}
.jwn-night-dow,
.jwn-night-mon {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-night-num {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--jwn-fs-num); line-height: 1.02;
  color: var(--jwn-ink-2);
}

/* ------------------------------------------------------ the title --- */

.jwn-night-head {
  grid-area: head;
  min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.jwn-night-h {
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  line-height: 1.24; letter-spacing: -0.005em;
  color: var(--jwn-ink);
  text-wrap: balance;
}
.jwn-night-badges {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}

/* -------------------------------------------------------- our call --- */

.jwn-night-reads {
  grid-area: reads;
  margin: 0;
  display: grid; gap: 7px;
  align-content: center;
}
.jwn-night-read {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.jwn-night-read dt {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-night-read dd {
  margin: 0;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--jwn-fs-sub);
  color: var(--jwn-ink-2);
}

.jwn-night-meter { display: inline-flex; gap: 3px; flex: none; }
.jwn-night-meter span {
  display: block;
  width: 6px; height: 13px;
  border-radius: 1px;
  background: var(--jwn-line-2);
}
.jwn-night-meter span.is-on { background: currentColor; }

/* The crowd scale runs pine, ice, ink, hot. It never borrows gold, because
   gold is the recommendation and a moderate crowd is not one. */
.jwn-night-read.is-calmest dd { color: var(--jwn-pine); }
.jwn-night-read.is-lighter dd { color: var(--jwn-ice); }
.jwn-night-read.is-moderate dd { color: var(--jwn-ink-2); }
.jwn-night-read.is-busier dd { color: var(--jwn-nhot); }
/* Nights nobody has ever attended read as unknown, not as quiet. */
.jwn-night-read.is-nohistory dd { color: var(--jwn-ink-3); font-style: italic; }

.jwn-night-value {
  font-size: var(--jwn-fs-caps);
  letter-spacing: 0.08em;
  padding: 4px 10px;
}
.jwn-night-value.is-priciest { color: var(--jwn-nhot); }

/* ------------------------------------------------------ the price --- */

.jwn-night-price {
  grid-area: price;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.jwn-night-amt-wrap {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.jwn-night-amt {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--jwn-fs-amt); line-height: 1;
  color: var(--jwn-ink);
}
.jwn-night.is-selected .jwn-night-amt { color: var(--jwn-gold); }
.jwn-night-amt-note {
  font-size: var(--jwn-fs-fine); line-height: 1.35;
  color: var(--jwn-ink-3);
}

/* The basis is stated by the column header and the Ticket control, so once
   the controls are live it is printed on the first row and the chosen row
   only, instead of fifteen times. */
.jwn-nights.is-live .jwn-night-amt-note { display: none; }
.jwn-nights.is-live .jwn-night.is-first .jwn-night-amt-note,
.jwn-nights.is-live .jwn-night.is-selected .jwn-night-amt-note { display: block; }

/* The select button is a JS enhancement, so its slot is reserved in both
   layouts and the row never reflows when the module comes alive. */
@media (min-width: 820px) {
  .jwn-night-price {
    flex-direction: column; align-items: flex-end; justify-content: center;
    gap: 9px;
    min-height: 94px;
  }
  .jwn-night-amt-wrap { align-items: flex-end; text-align: right; }
}

.jwn-night-use {
  appearance: none; cursor: pointer;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 8px 14px;
  border: 1px solid var(--jwn-line-2);
  border-radius: 999px;
  background: transparent;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--jwn-fs-sub);
  color: var(--jwn-ink-2);
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
@media (max-width: 819px) {
  .jwn-night-use { min-height: 44px; padding: 9px 16px; }
}
@media (hover: hover) {
  .jwn-night-use:hover {
    background: var(--jwn-gold-wash);
    border-color: var(--jwn-brass);
    color: var(--jwn-ink);
  }
}
.jwn-night-use[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  border-color: transparent;
  color: var(--jwn-gold-ink);
  box-shadow: 0 4px 14px oklch(72% 0.12 84 / 0.28);
}
.jwn-night-use-ico { display: none; flex: none; }
.jwn-night-use[aria-pressed="true"] .jwn-night-use-ico { display: block; }

/* --------------------------------------------------------- the why --- */

.jwn-night-why { grid-area: why; }
.jwn-night-why summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding-right: 6px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--jwn-fs-sub);
  letter-spacing: 0.02em;
  color: var(--jwn-ink-3);
  transition: color .18s ease;
}
.jwn-night-why summary::-webkit-details-marker { display: none; }
@media (min-width: 820px) {
  .jwn-night-why summary { min-height: 36px; }
}
@media (hover: hover) {
  .jwn-night-why summary:hover { color: var(--jwn-gold); }
}
.jwn-night-why[open] summary { color: var(--jwn-gold); }
.jwn-night-why-ico { flex: none; transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.jwn-night-why[open] .jwn-night-why-ico { transform: rotate(180deg); }
.jwn-night-why-t {
  margin: 0 0 6px;
  padding-left: 18px;
  border-left: 2px solid var(--jwn-hair-soft);
  font-size: var(--jwn-fs-body); line-height: 1.6;
  color: var(--jwn-ink-2);
  max-width: 64ch;
  text-wrap: pretty;
}

/* ==================================================== calculator === */

@media (min-width: 1060px) {
  .jwn-ncalc {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
}

.jwn-ncalc .jwn-h3 { margin-bottom: 12px; }

.jwn-ncalc-night {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800; font-size: var(--jwn-fs-body);
  letter-spacing: 0.01em;
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
}
.jwn-ncalc-hint {
  margin: 7px 0 0;
  font-size: var(--jwn-fs-fine); line-height: 1.5;
  color: var(--jwn-ink-3);
}

.jwn-ncalc-fields {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  margin-top: 18px;
}
.jwn-ncalc-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.jwn-ncalc-field label {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-ncalc-field input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--jwn-line-2);
  border-radius: var(--jwn-r-sm);
  background: oklch(12% 0.03 258 / 0.7);
  color: var(--jwn-ink);
  font-family: var(--jwn-display); font-weight: 700; font-size: 20px;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, background .18s ease;
}
.jwn-ncalc-field input:focus { border-color: var(--jwn-brass); }

.jwn-ncalc-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 0;
  padding: 11px 12px;
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r-sm);
  background: oklch(12% 0.03 258 / 0.45);
}
.jwn-ncalc-check input {
  flex: none;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: oklch(80% 0.126 86);
  cursor: pointer;
}
.jwn-ncalc-check label {
  font-size: var(--jwn-fs-sub); line-height: 1.42;
  color: var(--jwn-ink-2);
  cursor: pointer;
}

.jwn-ncalc-out {
  margin: 18px 0 0;
  border-top: 1px solid var(--jwn-hair);
}
.jwn-ncalc-out-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jwn-line);
}
.jwn-ncalc-out-row:last-child { border-bottom: 0; }
.jwn-ncalc-out-row dt {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-ncalc-out-row dd {
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: 26px; line-height: 1;
  color: var(--jwn-ink-2);
}
.jwn-ncalc-out-row.is-total dd {
  font-size: clamp(30px, 3.4vw, 36px);
  color: var(--jwn-gold);
}

.jwn-ncalc-break {
  margin: 12px 0 0;
  font-size: var(--jwn-fs-sub); line-height: 1.5;
  color: var(--jwn-ink-2);
  font-variant-numeric: tabular-nums;
}
.jwn-ncalc-foot {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--jwn-line);
  font-size: var(--jwn-fs-fine); line-height: 1.5;
  color: var(--jwn-ink-3);
}

/* ----------------------------------------------------- result bar --- */

/* On the stacked layout the calculator is one card at the top and the ledger
   is four thousand pixels of rows below it, so by the time a reader chooses a
   night the total is long off screen. This bar carries the running total for
   as long as the ledger is on screen and taps back to the full card, so the
   choice is never made blind and choosing never moves the page. JS only, and
   never on desktop, where the card is already sticky beside the list. Fixed
   rather than sticky because it has to escape the grid it belongs to. */
.jwn-ncalc-peek {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex; justify-content: center;
  /* the site keeps a round floating control in the bottom right corner, so the
     bar stops short of it rather than sliding underneath it */
  padding: 0 76px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(130%);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.jwn-ncalc-peek.is-up { opacity: 1; transform: none; }

.jwn-ncalc-peek-btn {
  pointer-events: auto;
  appearance: none; cursor: pointer;
  width: 100%; max-width: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid oklch(66% 0.098 80 / 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--jwn-panel-2), oklch(17% 0.04 258));
  box-shadow: 0 -2px 30px oklch(6% 0.025 258 / 0.7), var(--jwn-halo);
  text-align: left;
  transition: border-color .18s ease, transform .18s ease;
}
.jwn-ncalc-peek-btn:active { transform: translateY(1px); }

.jwn-ncalc-peek-side { display: block; min-width: 0; }
.jwn-ncalc-peek-side.is-end { text-align: right; }
.jwn-ncalc-peek-k {
  display: block;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-fs-caps);
  letter-spacing: var(--jwn-caps-ls); text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-ncalc-peek-n {
  display: block;
  margin-top: 4px;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: var(--jwn-fs-sub);
  color: var(--jwn-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jwn-ncalc-peek-v {
  display: block;
  margin-top: 3px;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: 22px; line-height: 1;
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.jwn-ncalc-peek-ico { flex: none; color: var(--jwn-ink-3); }

/* A short flash when the reader picks a different night, so the confirmation
   is felt where their thumb already is. */
.jwn-ncalc-peek.is-hit .jwn-ncalc-peek-btn { border-color: var(--jwn-gold); }

@media (min-width: 1060px) {
  .jwn-ncalc-peek { display: none !important; }
}

/* ------------------------------------------------------- 375px pass --- */

@media (max-width: 400px) {
  .jwn-night-in { padding: 13px 13px; gap: 11px 12px; grid-template-columns: 56px minmax(0, 1fr); }
  .jwn-night-stub { padding-right: 10px; }
  /* 46px is the width of the widest label at the shared caps tracking, so the
     column never squeezes "Crowd" into the gap beside it. */
  .jwn-night-read { grid-template-columns: 46px minmax(0, 1fr); gap: 7px; }
  .jwn-night-use { padding: 9px 13px; }
  .jwn-npick { padding: 18px; }
  .jwn-nights-ctl { padding: 14px; }
  .jwn-ncalc-peek-btn { gap: 10px; padding: 10px 12px; }
}

/* ==== 40-tickets.css ==== */
/* ============================================================ tickets ===
   Section 40. The rules and mechanics of buying, after the night picker has
   already priced every date. A set price panel, the in / not-in contrast, the
   seven hour clock, the on sale rail, the sell out pattern and the buy panel.

   Namespace: .jwn-tix-*. Nothing here restyles a base component; where a base
   class needed a local tweak it got its own .jwn-tix- class alongside.

   Two scales govern the whole section and nothing is allowed outside them.
   Type runs on five body steps and three display steps. Vertical rhythm
   between top level blocks runs on exactly two steps, tight and module.
   ======================================================================= */

.jwn-tix {
  /* body, uppercase micro label through to running prose */
  --jwn-tix-t-2xs: 11px;
  --jwn-tix-t-xs:  12.5px;
  --jwn-tix-t-sm:  13.5px;
  --jwn-tix-t-md:  14.5px;
  --jwn-tix-t-lg:  16.5px;
  /* display, Playfair */
  --jwn-tix-d-sm:  18.5px;
  --jwn-tix-d-md:  24px;
  --jwn-tix-d-lg:  30px;
  /* the only two vertical gaps between blocks */
  --jwn-tix-y-tight: clamp(18px, 2.2vw, 24px);
  --jwn-tix-y-mod:   clamp(30px, 4.4vw, 56px);
}

/* --------------------------------------------------------- price panel --- */

.jwn-tix-price {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3.2vw, 46px);
  align-items: start;
  padding: clamp(22px, 3vw, 38px);
}
/* Beats .jwn-card.is-raised on specificity so the panel keeps its brass inlay. */
.jwn-card.jwn-tix-price {
  box-shadow: var(--jwn-sh), inset 0 0 0 1px oklch(66% 0.098 80 / 0.09);
}

/* Sits alongside .jwn-stat-k. At 10.5px the base ink-4 lands too close to the
   panel for a comfortable read, so these labels take the next step up on both
   size and ink, which also keeps 10.5px out of the section's type scale. */
.jwn-tix-k {
  font-size: var(--jwn-tix-t-2xs);
  color: var(--jwn-ink-3);
}

.jwn-tix-headline { padding-top: 2px; }

/* The one deliberate outlier above the display scale. It is the headline
   figure of the whole section and nothing else is allowed near it. */
.jwn-tix-band {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin: 8px 0 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(38px, 5.8vw, 66px);
  line-height: 0.96; letter-spacing: -0.02em;
  color: var(--jwn-ink);
  font-variant-numeric: tabular-nums;
}
.jwn-tix-cur {
  color: var(--jwn-gold);
  font-size: 0.56em;
  align-self: flex-start;
  padding-top: 0.14em;
  margin-right: 0.03em;
}
.jwn-tix-to {
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: var(--jwn-tix-t-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  margin: 0 0.5em 0 0.42em;
}

.jwn-tix-headline-p {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: var(--jwn-tix-t-md); line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-tix-headline-p .jwn-tnum { color: var(--jwn-ink); font-weight: 600; }
.jwn-tix-headline-link { margin: 12px 0 0; font-size: var(--jwn-tix-t-md); }

/* The Passholder argument closes the headline column, which is what stops the
   column running short against the ladder beside it. */
.jwn-tix-price-note {
  margin: var(--jwn-tix-y-tight) 0 0;
  font-size: var(--jwn-tix-t-sm);
  color: var(--jwn-ink-3);
}
.jwn-tix-price-note strong { color: var(--jwn-ink); }

/* ------------------------------------------------------ the tier ladder --- */

.jwn-tix-tiers-k { margin: 0 0 14px; }
.jwn-tix-tiers { margin: 0; }

.jwn-tix-tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  gap: 8px 18px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-tix-tier:first-child { border-top: 0; padding-top: 0; }

/* The Passholder and DVC row is the whole argument of this panel, so it sits
   on brass with a hairline ring rather than shouting in colour alone. The
   flat gold wash sampled as grey against this panel, hence the warmer,
   heavier fill and the inset ring that gives the row an edge. */
.jwn-tix-tier.is-key {
  background: linear-gradient(180deg, oklch(60% 0.09 78 / 0.22), oklch(50% 0.07 78 / 0.14));
  box-shadow: inset 0 0 0 1px var(--jwn-hair);
  border-top-color: transparent;
  border-radius: 10px;
  margin-inline: -12px;
  padding: 15px 12px;
}
/* On brass, the pill's own champagne wash disappears. It takes a solid dark
   ground so it reads as hardware sitting on the row. */
.jwn-pill.jwn-tix-pill-solid {
  background: oklch(12% 0.032 258 / 0.72);
  border-color: oklch(66% 0.098 80 / 0.62);
}

.jwn-tix-tier-who {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;
}
.jwn-tix-tier-name {
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--jwn-tix-t-md);
  line-height: 1.3; color: var(--jwn-ink);
}
.jwn-tix-tier-meta {
  flex: 1 1 100%;
  font-size: var(--jwn-tix-t-xs); line-height: 1.45;
  color: var(--jwn-ink-3);
}

.jwn-tix-tier-val { margin: 0; text-align: right; }
.jwn-tix-tier-price {
  display: block;
  font-family: var(--jwn-display); font-weight: 700; font-size: var(--jwn-tix-d-sm);
  line-height: 1.15; color: var(--jwn-ink);
  font-variant-numeric: tabular-nums;
}
.jwn-tix-tier-tax {
  display: block; margin-top: 4px;
  font-size: var(--jwn-tix-t-xs); color: var(--jwn-ink-3);
  font-variant-numeric: tabular-nums;
}
.jwn-tix-tier.is-free .jwn-tix-tier-price { color: var(--jwn-pine); }

@media (max-width: 940px) {
  .jwn-tix-price { grid-template-columns: 1fr; }
}
@media (min-width: 941px) {
  .jwn-tix-tiers-wrap {
    border-left: 1px solid var(--jwn-hair-soft);
    padding-left: clamp(24px, 3vw, 44px);
  }
}
@media (max-width: 560px) {
  .jwn-tix-tier { grid-template-columns: 1fr; gap: 8px; }
  .jwn-tix-tier-val { text-align: left; }
}

/* -------------------------------------------------------- in / not in --- */

.jwn-tix-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--jwn-tix-y-tight);
  align-items: start;
  margin-top: var(--jwn-tix-y-mod);
}
@media (max-width: 900px) { .jwn-tix-split { grid-template-columns: 1fr; } }

.jwn-tix-cardsub {
  margin: 9px 0 0;
  font-size: var(--jwn-tix-t-sm); line-height: 1.5;
  color: var(--jwn-ink-3);
}

.jwn-tix-list { list-style: none; margin: clamp(14px, 1.8vw, 18px) 0 0; padding: 0; }
.jwn-tix-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-tix-item:first-child { border-top: 0; }
.jwn-tix-item:last-child { padding-bottom: 0; }

.jwn-tix-ico { width: 17px; height: 17px; margin-top: 3px; }
.jwn-tix-in .jwn-tix-ico { color: var(--jwn-gold); }
.jwn-tix-out .jwn-tix-ico { color: var(--jwn-rouge); }

.jwn-tix-item-t {
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--jwn-tix-d-sm); line-height: 1.25;
  color: var(--jwn-ink);
  font-variant-numeric: tabular-nums;
}
.jwn-tix-item-d {
  margin: 7px 0 0;
  font-size: var(--jwn-tix-t-md); line-height: 1.6;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-tix-item-d .jwn-tnum { color: var(--jwn-ink); font-weight: 600; }

/* The two lists are a matched pair and read as one. The exclusions carry the
   promise of the section headline, so they take the same display face and the
   same rank as the inclusions, and the oxblood card and the rouge cross do
   the separating instead. */
.jwn-tix-out .jwn-tix-item { border-top-color: oklch(100% 0 0 / 0.13); }

/* ------------------------------------------------------- the seven hours --- */

.jwn-tix-blockhead { margin-bottom: var(--jwn-tix-y-tight); max-width: 74ch; }
.jwn-tix-blockhead .jwn-p { margin: 12px 0 0; }

.jwn-tix-clock { margin: 0; padding: clamp(18px, 2.4vw, 26px); }

.jwn-tix-rail {
  display: grid;
  grid-template-columns: 2fr 5fr;
  min-height: 78px;
  border: 1px solid var(--jwn-hair);
  border-radius: 10px;
  overflow: hidden;
}
.jwn-tix-seg {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 14px clamp(12px, 1.6vw, 18px);
  min-width: 0;
}
/* The two hours you are told not to spend on rides stay quiet. A flat cold
   tint, no hatch, because a hatch reads as missing data. */
.jwn-tix-seg.is-mix {
  border-right: 1px solid var(--jwn-hair);
  background: oklch(72% 0.055 230 / 0.08);
}
/* The party is the thing you bought, so it is the brightest bar in the section. */
.jwn-tix-seg.is-party {
  background: linear-gradient(180deg, oklch(66% 0.098 80 / 0.42), oklch(50% 0.062 78 / 0.26));
  box-shadow: inset 0 1px 0 var(--jwn-hair);
}
.jwn-tix-seg-l {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-tix-t-2xs); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--jwn-ink-2);
}
.jwn-tix-seg-h {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(var(--jwn-tix-d-sm), 2.2vw, var(--jwn-tix-d-md)); line-height: 1;
  color: var(--jwn-ink);
}

/* The marks are pinned to the times they describe, not to a second grid that
   nearly matches the rail. 7:30 PM sits exactly on the segment boundary. */
.jwn-tix-marks {
  list-style: none; margin: 12px 0 0; padding: 0;
  position: relative; min-height: 62px;
}
.jwn-tix-marks li {
  position: absolute; top: 0; max-width: 34%;
  display: flex; flex-direction: column; gap: 3px;
  text-wrap: balance;
}
.jwn-tix-marks li::before {
  content: ""; width: 1px; height: 9px; margin-bottom: 5px;
  background: var(--jwn-hair);
}
.jwn-tix-marks li:nth-child(1) { left: 0; align-items: flex-start; text-align: left; }
.jwn-tix-marks li:nth-child(2) {
  left: 28.571%; transform: translateX(-50%);
  align-items: center; text-align: center;
}
.jwn-tix-marks li:nth-child(3) { right: 0; align-items: flex-end; text-align: right; }

.jwn-tix-mark-t {
  font-family: var(--jwn-ui); font-weight: 800; font-size: var(--jwn-tix-t-sm);
  letter-spacing: 0.04em; color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
}
.jwn-tix-mark-d { font-size: var(--jwn-tix-t-xs); line-height: 1.4; color: var(--jwn-ink-3); }

.jwn-tix-window {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--jwn-tix-y-tight);
  margin-top: var(--jwn-tix-y-tight);
}
.jwn-tix-win.is-good { border-color: oklch(66% 0.098 80 / 0.42); }
/* Shares its rank with the on sale rail's stop titles. Both are h4, both are
   display faced, and both sit clearly above the body they title. */
.jwn-tix-win-k {
  margin: 0 0 9px;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--jwn-tix-d-sm); line-height: 1.2;
  letter-spacing: normal; text-transform: none;
}
.jwn-tix-win-k.is-cold { color: var(--jwn-ice); }
.jwn-tix-win-k.is-warm { color: var(--jwn-gold); }
.jwn-tix-win-d {
  margin: 0;
  font-size: var(--jwn-tix-t-md); line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

@media (max-width: 620px) {
  .jwn-tix-rail { grid-template-columns: 1fr; grid-template-rows: 2fr 5fr; min-height: 170px; }
  .jwn-tix-seg.is-mix { border-right: 0; border-bottom: 1px solid var(--jwn-hair); }
  .jwn-tix-seg.is-party {
    background: linear-gradient(180deg, oklch(66% 0.098 80 / 0.42), oklch(50% 0.062 78 / 0.26));
  }
  .jwn-tix-marks { display: grid; grid-template-columns: 1fr; gap: 12px; min-height: 0; }
  .jwn-tix-marks li,
  .jwn-tix-marks li:nth-child(1),
  .jwn-tix-marks li:nth-child(2),
  .jwn-tix-marks li:nth-child(3) {
    position: static; transform: none; max-width: none;
    flex-direction: row; align-items: baseline; text-align: left; gap: 12px;
  }
  .jwn-tix-marks li::before { display: none; }
  .jwn-tix-mark-t { flex: none; min-width: 74px; }
}

/* ---------------------------------------------------------- on sale rail --- */

.jwn-tix-timeline { margin-top: var(--jwn-tix-y-mod); }

/* Three stops, three columns. Opening night is a forward looking date and
   lives in the buy panel, not in a rail of things that have already happened. */
.jwn-tix-onsale {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jwn-tix-stop { position: relative; padding: 28px clamp(16px, 2.4vw, 30px) 0 0; }
.jwn-tix-stop::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px;
  background: var(--jwn-hair);
}
.jwn-tix-stop:last-child::before { right: auto; width: 10px; }
.jwn-tix-stop::after {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 9px; height: 9px;
  background: var(--jwn-brass);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--jwn-night-2);
}

.jwn-tix-stop-d {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--jwn-tix-t-2xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
}
.jwn-tix-stop-t {
  margin: 9px 0 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--jwn-tix-d-sm); line-height: 1.2;
  color: var(--jwn-ink);
}
.jwn-tix-stop-p {
  margin: 8px 0 0;
  font-size: var(--jwn-tix-t-sm); line-height: 1.55;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* Below three comfortable columns the rail turns vertical rather than
   wrapping, which is what kept the connector pointing off the page. */
@media (max-width: 820px) {
  .jwn-tix-onsale { grid-template-columns: 1fr; }
  .jwn-tix-stop { padding: 0 0 24px 26px; }
  .jwn-tix-stop::before { left: 4px; right: auto; top: 6px; bottom: 0; width: 1px; height: auto; }
  .jwn-tix-stop:last-child { padding-bottom: 0; }
  .jwn-tix-stop:last-child::before { display: none; }
}

/* ------------------------------------------------------------- sell out --- */

.jwn-tix-sellout {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: center;
  margin-top: var(--jwn-tix-y-mod);
  padding: clamp(22px, 3vw, 36px);
}
.jwn-tix-sellout-body .jwn-h3 { margin-bottom: 14px; }

.jwn-tix-stats { margin: 0; }
.jwn-tix-stat { padding: 15px 0; border-top: 1px solid var(--jwn-hair-soft); }
.jwn-tix-stat:first-child { border-top: 0; padding-top: 0; }
.jwn-tix-stat:last-child { padding-bottom: 0; }
.jwn-tix-stat dd { margin: 0; }
/* The reset above is a dd rule and the note is a dd, so the note has to match
   it on element to win back its own gap. */
.jwn-tix-stat dd.jwn-tix-stat-note {
  display: block; margin-top: 7px;
  font-family: var(--jwn-ui); font-weight: 400;
  font-size: var(--jwn-tix-t-xs); line-height: 1.45;
  color: var(--jwn-ink-3);
}
/* A phrase is not a figure. The qualitative value sits a step below the two
   hard numbers so the eye lands on those first. */
.jwn-tix-stat.is-qual .jwn-stat-v { font-size: var(--jwn-tix-d-sm); color: var(--jwn-ink-2); }

@media (max-width: 860px) {
  .jwn-tix-sellout { grid-template-columns: 1fr; align-items: start; }
  .jwn-tix-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 clamp(16px, 3vw, 32px);
  }
  .jwn-tix-stat { border-top: 1px solid var(--jwn-hair-soft); padding-top: 15px; }
  /* Side by side, the labels wrap to different depths, so pin them to two
     lines and the three figures land on one baseline. */
  .jwn-tix-stat dt { min-height: 2.7em; }
}
@media (max-width: 520px) {
  .jwn-tix-stats { grid-template-columns: 1fr; }
  .jwn-tix-stat:first-child { border-top: 0; padding-top: 0; }
}

/* --------------------------------------------------- fine print and buy --- */

.jwn-tix-close { display: grid; gap: var(--jwn-tix-y-tight); }
.jwn-tix-fine {
  margin: 0;
  font-size: var(--jwn-tix-t-sm);
  color: var(--jwn-ink-3);
}
.jwn-tix-fine strong { color: var(--jwn-ink); }

/* The buy is the point of the section, so it gets a panel of its own with a
   marquee bulb string over it and no visual peer inside it. */
.jwn-tix-buy {
  position: relative;
  display: grid; justify-items: center; text-align: center;
  padding: clamp(38px, 5vw, 56px) clamp(20px, 3vw, 40px) clamp(26px, 3vw, 34px);
}
.jwn-tix-buy-bulbs {
  position: absolute; top: 17px; left: 0; right: 0;
}

.jwn-tix-buy-k { margin: 0 0 6px; }
.jwn-tix-buy-band {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--jwn-tix-d-lg);
  line-height: 1.12; letter-spacing: -0.01em;
  color: var(--jwn-ink);
  font-variant-numeric: tabular-nums;
  gap: 4px 0;
}
/* Matches the ratio .jwn-unit uses on a stat value, so the two read as one voice. */
.jwn-tix-buy-unit {
  font-size: 0.52em; font-weight: 400; color: var(--jwn-ink-3);
  margin: 0 0.42em 0 0.16em;
}
.jwn-tix-buy-sub {
  margin: 12px 0 0;
  font-size: var(--jwn-tix-t-md); line-height: 1.6;
  color: var(--jwn-ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.jwn-tix-buy-btn {
  margin-top: clamp(20px, 2.6vw, 28px);
  font-size: var(--jwn-tix-d-sm);
  padding: 16px 34px;
}
.jwn-tix-buy-alt {
  margin: 14px 0 0;
  font-size: var(--jwn-tix-t-sm);
  color: var(--jwn-ink-3);
}
.jwn-tix-ext { width: 15px; height: 15px; flex: none; opacity: 0.85; }
.jwn-tix-buy-note {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  font-size: var(--jwn-tix-t-xs); line-height: 1.5;
  color: var(--jwn-ink-3);
  max-width: 52ch;
}

@media (max-width: 560px) {
  .jwn-tix-buy-btn { width: 100%; padding-inline: 18px; }
}

/* ==== 50-shows.css ==== */
/* ==================================================== entertainment ===
   The lineup and the showtime planner.

   Two independent renderings of the same evening. Below 720px the reader
   gets a vertical clock, at 720px and up a horizontal Gantt with one lane
   per show. Only one is ever in the box tree, so neither is read twice.

   Highlighting is a native radio group plus :has(), which means it works
   with JavaScript off and gets arrow-key support from the browser. The
   matched lane carries --jwnsh-on 1, everything else --jwnsh-dim 1, and any
   showing that starts within twenty minutes of the pick carries --jwnsh-x 1.
   All three custom properties inherit, so descendants style themselves.

   Dimming never touches text. A dimmed lane keeps every showtime at full
   contrast; only the diamonds and the chip surface soften, because the rows
   the reader is comparing against are the whole point of the tool.
   ===================================================================== */

/* ============================================================== head === */

.jwn-shows-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r-sm);
  background: oklch(11% 0.03 258 / 0.5);
  min-width: min(100%, 320px);
}
.jwn-shows-glance > div {
  padding: 13px 14px;
  border-left: 1px solid var(--jwn-hair-soft);
}
.jwn-shows-glance > div:first-child { border-left: 0; }
.jwn-shows-glance dd { margin: 0; }
.jwn-shows-glance .jwn-stat-k { letter-spacing: 0.14em; }
.jwn-shows-glance .jwn-stat-v { font-size: clamp(20px, 2.2vw, 26px); }

@media (max-width: 480px) {
  .jwn-shows-glance > div { padding: 11px 9px; }
  .jwn-shows-glance .jwn-stat-k { font-size: 9.5px; letter-spacing: 0.08em; }
}

.jwn-shows-excl {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--jwn-ink-2);
  border-left-color: var(--jwn-gold);
}
.jwn-shows-excl strong { color: var(--jwn-gold); }

/* ======================================================== tier heads === */

.jwn-shows-tier {
  margin: clamp(48px, 6.4vw, 82px) 0 clamp(18px, 2.2vw, 26px);
  max-width: 62ch;
}
.jwn-shows-tier-k {
  display: inline-flex; align-items: center; gap: 11px;
  margin: 0 0 11px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--jwn-brass);
}
.jwn-shows-tier-k::after {
  content: ""; width: clamp(30px, 5vw, 54px); height: 1px;
  background: linear-gradient(90deg, var(--jwn-brass), transparent);
}
/* The tier heads are the section's navigation, so they outrank every show
   name that sits under them by roughly a third. */
.jwn-shows-tier-h {
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.08; letter-spacing: -0.014em;
  color: var(--jwn-ink);
  text-wrap: balance;
}
.jwn-shows-tier-note {
  margin: 12px 0 0;
  font-size: 15px; line-height: 1.62;
  color: var(--jwn-ink-3);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ================================================== shared show parts === */

.jwn-shows-name {
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 22px);
  line-height: 1.14; letter-spacing: -0.01em;
  color: var(--jwn-ink);
  text-wrap: balance;
}
.jwn-shows-name.is-big { font-size: clamp(21px, 2.5vw, 27px); line-height: 1.1; }
.jwn-shows-name.is-sm { font-size: clamp(18px, 1.9vw, 20px); }

.jwn-shows-where {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  margin: 11px 0 0;
}
.jwn-shows-venue {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-gold);
}
/* A brass bullet, not a rule. A rule strands itself in the margin the moment
   the venue and the land wrap onto separate lines. */
.jwn-shows-land { font-size: 12.5px; color: var(--jwn-ink-3); }
.jwn-shows-where .jwn-shows-sep { margin: 0; align-self: center; }

.jwn-shows-sep {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--jwn-brass-dim);
  margin: 0 9px; vertical-align: middle;
}

.jwn-shows-runtime {
  margin: 9px 0 0;
  font-size: 13px; line-height: 1.5;
  color: var(--jwn-ink-3);
}
.jwn-shows-runtime .jwn-shows-sep { margin: 0 5px; }

.jwn-shows-open {
  margin: 7px 0 0;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--jwn-ink-3);
  display: flex; align-items: center; gap: 7px;
}
.jwn-shows-open::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--jwn-ice-dim);
  box-shadow: 0 0 0 2px oklch(72% 0.055 230 / 0.18);
}

.jwn-shows-blurb {
  margin: 15px 0 0;
  font-size: 15px; line-height: 1.64;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

.jwn-shows-verdict {
  margin-top: 17px;
  padding-left: 16px;
  border-left: 2px solid var(--jwn-brass);
}
.jwn-shows-verdict-k {
  margin: 0 0 6px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--jwn-gold);
}
.jwn-shows-verdict-t {
  margin: 0;
  font-size: 15px; line-height: 1.6;
  color: var(--jwn-ink);
  text-wrap: pretty;
}
.jwn-shows-verdict.is-pull {
  margin-top: 22px; padding-left: 0; padding-top: 19px;
  border-left: 0;
  border-top: 1px solid var(--jwn-hair);
}
.jwn-shows-verdict.is-pull .jwn-shows-verdict-t {
  font-family: var(--jwn-display); font-style: italic;
  font-size: clamp(17px, 1.95vw, 20px);
  line-height: 1.46;
}

/* ============================================== tier one, the features === */

.jwn-shows-features {
  display: grid; gap: var(--jwn-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 840px) {
  /* Deliberately unequal. The award winner gets the wider column. */
  .jwn-shows-features { grid-template-columns: 1.14fr 0.86fr; }
}

.jwn-shows-feature {
  overflow: hidden;
  padding: clamp(22px, 2.7vw, 34px);
}
/* Velvet folds, fading out before they reach the body copy. */
.jwn-shows-drape {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(90deg,
    oklch(10% 0.03 22 / 0.32) 0 2px,
    transparent 2px 9px,
    oklch(100% 0 0 / 0.03) 9px 11px,
    transparent 11px 30px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, oklch(0% 0 0 / 0.42) 32%, transparent 60%);
  mask-image: linear-gradient(180deg, #000 0%, oklch(0% 0 0 / 0.42) 32%, transparent 60%);
}
.jwn-shows-corner {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid oklch(66% 0.098 80 / 0.55);
}
.jwn-shows-corner.is-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.jwn-shows-corner.is-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.jwn-shows-feature-in { position: relative; z-index: 1; }

/* ============================================= tier two, the four cards === */

.jwn-shows-cards {
  display: grid; gap: var(--jwn-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .jwn-shows-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jwn-shows-card { display: flex; flex-direction: column; }
.jwn-shows-card .jwn-shows-verdict { margin-top: auto; padding-top: 17px; }

/* ================================================ the 10 PM anchor card === */

.jwn-shows-anchor {
  display: grid; gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(22px, 2.7vw, 32px);
  border-color: oklch(66% 0.098 80 / 0.42);
  box-shadow: var(--jwn-sh-sm), 0 0 44px oklch(72% 0.12 84 / 0.07);
}
@media (min-width: 780px) {
  .jwn-shows-anchor { grid-template-columns: 214px minmax(0, 1fr); align-items: stretch; }
}
.jwn-shows-anchor-clock {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 17px 19px 16px;
  border: 1px solid var(--jwn-hair);
  border-radius: var(--jwn-r-sm);
  background:
    radial-gradient(120% 90% at 20% 0%, oklch(86% 0.128 88 / 0.10), transparent 62%),
    oklch(12% 0.03 258 / 0.55);
}
.jwn-shows-anchor-dial { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.jwn-shows-anchor-time {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(40px, 5.2vw, 56px); line-height: 0.9;
  color: var(--jwn-gold);
}
.jwn-shows-anchor-mer {
  margin-top: 7px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 12px;
  letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--jwn-gold-2);
}
.jwn-shows-anchor-once {
  margin: 13px 0 0; padding-top: 12px;
  border-top: 1px solid var(--jwn-hair-soft);
  align-self: stretch;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
/* The split the copy talks about, so the column carries its own height. */
.jwn-shows-anchor-split {
  margin: 16px 0 0; padding-top: 16px;
  align-self: stretch; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-shows-anchor-split dt {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-shows-anchor-split dd {
  margin: 4px 0 0;
  font-family: var(--jwn-display); font-weight: 700; font-size: 26px;
  line-height: 1; color: var(--jwn-ink);
}
@media (max-width: 779px) {
  .jwn-shows-anchor-clock {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 16px 26px;
  }
  .jwn-shows-anchor-once { margin: 0; padding-top: 0; border-top: 0; align-self: auto; }
  .jwn-shows-anchor-split {
    margin: 0; padding-top: 0; border-top: 0;
    padding-left: 24px; border-left: 1px solid var(--jwn-hair-soft);
    flex: 0 1 auto; flex-direction: row; gap: 26px;
    align-self: auto;
  }
}
@media (max-width: 460px) {
  .jwn-shows-anchor-split {
    padding-left: 0; border-left: 0;
    flex-direction: column; gap: 14px;
    flex-basis: 100%;
  }
}
.jwn-shows-anchor-body > .jwn-shows-name { margin-top: 0; }
.jwn-shows-anchor-foot {
  margin: 18px 0 0;
  font-size: 14px; line-height: 1.62;
  color: var(--jwn-ink-3);
  max-width: 62ch;
}

/* ============================================== tier three, the rest === */

.jwn-shows-rest {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--jwn-line);
}
.jwn-shows-rest-item {
  padding: clamp(20px, 2.5vw, 30px) 0;
  border-bottom: 1px solid var(--jwn-line);
}
.jwn-shows-rest-say { margin-top: 16px; }
.jwn-shows-rest-say > .jwn-shows-blurb { margin-top: 0; }

@media (min-width: 800px) {
  .jwn-shows-rest-item {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 58px);
    align-items: start;
  }
  .jwn-shows-rest-say { margin-top: 0; }
}

/* ============================================================ planner === */

.jwn-shows-break { margin-block: clamp(56px, 8vw, 96px) clamp(38px, 5vw, 56px); }

/* Same rank as the other tier heads. The gold eyebrow is the only extra
   signal it gets, so it never reads as a second section. */
.jwn-shows-planner-head { margin-top: 0; max-width: 64ch; }

.jwn-shows-caveat {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 15px 0 16px;
  max-width: 74ch;
  border-top: 1px solid var(--jwn-hair);
  border-bottom: 1px solid var(--jwn-hair);
}
.jwn-shows-caveat-k {
  display: flex; align-items: center;
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--jwn-brass);
}
.jwn-shows-caveat-mark {
  width: 7px; height: 7px; flex: none;
  margin-right: 12px;
  background: var(--jwn-brass);
  transform: rotate(45deg);
}
.jwn-shows-caveat-t {
  margin: 8px 0 0;
  font-size: 14.5px; line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

.jwn-shows-board { margin-top: clamp(26px, 3.2vw, 38px); }

.jwn-shows-foot {
  margin: clamp(22px, 2.8vw, 30px) 0 0;
  font-size: 13.5px;
  color: var(--jwn-ink-3);
}

/* ------------------------------------------------------- the controls --- */

.jwn-shows-keys {
  border: 0; margin: 0 0 clamp(20px, 2.4vw, 26px); padding: 0;
  min-width: 0;
}
.jwn-shows-keys-legend {
  padding: 0; margin-bottom: 12px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-shows-keys-in { display: flex; flex-wrap: wrap; gap: 8px; }

/* On a phone the twelve pills used to eat seven rows of screen before the
   reader saw a single showtime. One snapping rail instead. */
@media (max-width: 719px) {
  .jwn-shows-keys-in {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
    mask-image: linear-gradient(90deg, #000 0 94%, rgba(0, 0, 0, 0.3) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0 94%, rgba(0, 0, 0, 0.3) 100%);
  }
  .jwn-shows-keys-in > .jwn-shows-key { flex: none; scroll-snap-align: start; }
}

.jwn-shows-key {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--jwn-line);
  background: oklch(12% 0.03 258 / 0.55);
  color: var(--jwn-ink-2);
  font-family: var(--jwn-ui); font-weight: 700; font-size: 12.5px; line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.jwn-shows-key.is-all { border-style: dashed; }
@media (hover: hover) {
  .jwn-shows-key:hover { color: var(--jwn-ink); border-color: var(--jwn-brass); background: var(--jwn-gold-wash); }
}
@media (pointer: coarse) {
  .jwn-shows-key { min-height: 44px; }
}
.jwn-shows-r:checked + .jwn-shows-key,
.jwn-shows-rall:checked + .jwn-shows-key {
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  border-color: transparent;
  color: var(--jwn-gold-ink);
  box-shadow: 0 4px 14px oklch(72% 0.12 84 / 0.28);
}
.jwn-shows-r:focus-visible + .jwn-shows-key,
.jwn-shows-rall:focus-visible + .jwn-shows-key {
  outline: 2.5px solid var(--jwn-gold);
  outline-offset: 3px;
}

/* The result of the tap, at the tap. Empty until script fills it, and the
   space is reserved so nothing jumps when it does. */
.jwn-shows-keys-read {
  margin: 12px 0 0;
  min-height: 20px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--jwn-ink-2);
  max-width: 62ch;
}

/* ============================================ desktop chart, the Gantt === */

.jwn-shows-chart { display: none; }

@media (min-width: 720px) {
  .jwn-shows-chart { display: block; }
  .jwn-shows-clockwrap { display: none; }
}

.jwn-shows-chart {
  --lab: clamp(158px, 20vw, 236px);
  --gut: clamp(12px, 1.7vw, 22px);
  padding: clamp(16px, 2vw, 26px) clamp(16px, 2vw, 26px) 18px;
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r);
  /* A lit room, not a spreadsheet. Brass top light, soft vignette. */
  background:
    radial-gradient(130% 90% at 50% -10%, oklch(100% 0 0 / 0.035), transparent 60%),
    radial-gradient(150% 130% at 50% 50%, transparent 40%, oklch(7% 0.02 258 / 0.45) 100%),
    linear-gradient(180deg, oklch(20% 0.044 258), oklch(16.5% 0.04 258));
  box-shadow: var(--jwn-sh), inset 0 1px 0 oklch(66% 0.098 80 / 0.30);
}

.jwn-shows-head,
.jwn-shows-ruler {
  display: grid;
  grid-template-columns: var(--lab) minmax(0, 1fr);
  column-gap: var(--gut);
}
.jwn-shows-head { align-items: end; }
.jwn-shows-head-track { display: flex; flex-direction: column; gap: 8px; }
.jwn-shows-wins-track,
.jwn-shows-flags-track,
.jwn-shows-ruler-track { position: relative; }

/* ---- the legend, in what used to be an empty corner --------------------- */

.jwn-shows-legend {
  align-self: start;
  padding: 11px 13px 12px;
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r-sm);
  background: oklch(12% 0.03 258 / 0.45);
}
.jwn-shows-legend-k {
  margin: 0 0 9px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jwn-brass);
}
.jwn-shows-legend-l {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.jwn-shows-legend-l li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--jwn-ui); font-weight: 600; font-size: 10.5px;
  line-height: 1.25;
  color: var(--jwn-ink-3);
}
.jwn-shows-lg { flex: none; display: block; width: 14px; }
.jwn-shows-lg.is-dot,
.jwn-shows-lg.is-anchor,
.jwn-shows-lg.is-clash {
  height: 8px; width: 8px; margin: 0 3px;
  background: var(--jwn-gold-2);
  transform: rotate(45deg);
}
.jwn-shows-lg.is-anchor {
  width: 11px; height: 11px; margin: 0 1.5px;
  background: var(--jwn-gold);
  box-shadow: 0 0 10px oklch(86% 0.128 88 / 0.5);
}
.jwn-shows-lg.is-clash {
  width: 6px; height: 6px; margin: 0 4px;
  outline: 1.5px solid var(--jwn-rouge); outline-offset: 2px;
}
.jwn-shows-lg.is-bar {
  height: 9px; border-radius: 3px;
  background: linear-gradient(180deg, oklch(58% 0.09 160 / 0.55), oklch(58% 0.09 160 / 0.3));
  border: 1px solid oklch(58% 0.09 160 / 0.6);
}
.jwn-shows-lg.is-loose {
  height: 1px;
  background-image: radial-gradient(circle, var(--jwn-line-2) 0.5px, transparent 0.5px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.jwn-shows-lg.is-open {
  width: 7px; height: 7px; margin: 0 3.5px; border-radius: 50%;
  background: var(--jwn-ice-dim);
  box-shadow: 0 0 0 2px oklch(72% 0.055 230 / 0.2);
}

/* ---- the two windows, mix in versus the party proper -------------------- */

.jwn-shows-wins-track { height: 42px; }
.jwn-shows-win {
  position: absolute; top: 0; bottom: 0;
  left: var(--a); right: calc(100% - var(--b));
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 6px 13px;
  border-radius: 7px;
  overflow: hidden;
}
.jwn-shows-win b {
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
}
.jwn-shows-win i {
  font-style: normal; font-size: 11.5px; color: var(--jwn-ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jwn-shows-win.is-mix {
  background: oklch(72% 0.055 230 / 0.13);
  border: 1px solid oklch(72% 0.055 230 / 0.34);
}
.jwn-shows-win.is-mix b { color: var(--jwn-ice); }
.jwn-shows-win.is-party {
  background: var(--jwn-gold-wash);
  border: 1px solid oklch(66% 0.098 80 / 0.36);
}
.jwn-shows-win.is-party b { color: var(--jwn-gold); }

@media (max-width: 1059px) {
  .jwn-shows-win { padding: 5px 9px; }
  .jwn-shows-win b { font-size: 9.5px; letter-spacing: 0.1em; }
  .jwn-shows-win i { font-size: 9.5px; }
}

/* ---- the one fixed point ------------------------------------------------ */

.jwn-shows-flags-track { height: 36px; }
.jwn-shows-flag {
  position: absolute; top: 9px; left: var(--pos);
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  color: var(--jwn-gold-ink);
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px oklch(72% 0.12 84 / 0.28);
}
.jwn-shows-flag::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 1px; height: 7px; background: var(--jwn-gold);
  transform: translateX(-50%);
}
@media (max-width: 899px) {
  .jwn-shows-flag { font-size: 9px; letter-spacing: 0.1em; padding: 5px 10px; }
}

/* ---- the ruler ---------------------------------------------------------- */

.jwn-shows-ruler-lab {
  align-self: end; padding-bottom: 9px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-shows-ruler-track { height: 28px; border-bottom: 1px solid var(--jwn-hair); }
.jwn-shows-tick {
  position: absolute; bottom: 7px; left: var(--pos);
  transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 3px;
  white-space: nowrap;
}
.jwn-shows-tick.is-first { transform: none; }
.jwn-shows-tick.is-last { transform: translateX(-100%); }
.jwn-shows-tick-h { font-size: 11px; color: var(--jwn-ink-3); }
.jwn-shows-tick-m {
  font-size: 9px; letter-spacing: 0.08em; color: var(--jwn-ink-3);
}

/* ---- the plot ----------------------------------------------------------- */

.jwn-shows-plot { position: relative; padding-top: 12px; }
.jwn-shows-overlay {
  position: absolute; z-index: 0;
  inset: 0 0 0 calc(var(--lab) + var(--gut));
  pointer-events: none;
}
.jwn-shows-shade {
  position: absolute; top: 0; bottom: 0; left: 0; right: calc(100% - var(--b));
  background: linear-gradient(180deg, oklch(72% 0.055 230 / 0.09), oklch(72% 0.055 230 / 0.025));
}
/* The house lights coming up at 7:30, as a lighting change rather than a line. */
.jwn-shows-lit {
  position: absolute; top: 0; bottom: 0; left: var(--a); right: 0;
  background: linear-gradient(90deg, oklch(86% 0.128 88 / 0.075), oklch(86% 0.128 88 / 0.012) 26%, transparent 52%);
}
.jwn-shows-grid {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 1px; background: oklch(66% 0.098 80 / 0.10);
}
.jwn-shows-edge {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px;
  background: linear-gradient(180deg, oklch(72% 0.055 230 / 0.65), oklch(72% 0.055 230 / 0.12));
  box-shadow: 0 0 20px 5px oklch(86% 0.128 88 / 0.045);
}
.jwn-shows-anchorline {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px;
  background: linear-gradient(180deg, oklch(86% 0.128 88 / 0.8), oklch(86% 0.128 88 / 0.18));
  box-shadow: 0 0 12px oklch(86% 0.128 88 / 0.28);
}

.jwn-shows-grouplab {
  position: relative; z-index: 1;
  margin: 24px 0 9px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-shows-plot > .jwn-shows-grouplab:first-of-type { margin-top: 2px; }

/* ---- lanes -------------------------------------------------------------- */

/* Every lane the same height. The vertical axis of a timeline carries no
   meaning, so any rhythm break in it is pure noise. */
.jwn-shows-lane {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--lab) minmax(0, 1fr);
  column-gap: var(--gut);
  align-items: center;
  min-height: 66px;
  padding: 9px 0;
  border-top: 1px solid var(--jwn-line);
}
.jwn-shows-grouplab + .jwn-shows-lane { border-top: 0; }

/* the active wash and brass edge, driven by the inherited --jwnsh-on */
.jwn-shows-lane::before {
  content: ""; position: absolute; inset: 2px -12px; z-index: -1;
  border-radius: 8px;
  background: oklch(86% 0.128 88 / 0.085);
  opacity: var(--jwnsh-on, 0);
  transition: opacity .3s ease;
  pointer-events: none;
}
.jwn-shows-lane::after {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px;
  width: 2px; background: var(--jwn-gold);
  opacity: var(--jwnsh-on, 0);
  transition: opacity .3s ease;
  pointer-events: none;
}

.jwn-shows-lane-lab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.jwn-shows-lane-name {
  font-family: var(--jwn-display); font-weight: 700; font-size: 15px;
  line-height: 1.2; color: var(--jwn-ink);
  cursor: pointer;
}
@media (hover: hover) {
  .jwn-shows-lane-name:hover { color: var(--jwn-gold); }
}
/* Not party exclusive, as an ice dot rather than a pill that would make three
   of the eleven lanes 20px taller than the rest. */
.jwn-shows-lane.is-open .jwn-shows-lane-name::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 7px;
  background: var(--jwn-ice-dim);
  box-shadow: 0 0 0 2px oklch(72% 0.055 230 / 0.2);
}
.jwn-shows-lane-venue {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}

@media (max-width: 1059px) {
  .jwn-shows-lane-name { font-size: 13px; line-height: 1.18; }
  .jwn-shows-lane-venue { font-size: 9px; letter-spacing: 0.09em; }
}

.jwn-shows-track { position: relative; height: 42px; }

.jwn-shows-mark {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* The edge correction moves the label only. Shifting the whole mark drags the
   diamond off its own position, which on a 7 hour ruler is minutes of error. */
.jwn-shows-mark.is-edge-r .jwn-shows-mark-t { transform: translateX(-40%); }
.jwn-shows-mark.is-edge-l .jwn-shows-mark-t { transform: translateX(40%); }

.jwn-shows-dot {
  width: 9px; height: 9px; flex: none;
  background: color-mix(in oklab, var(--jwn-gold-2), var(--jwn-brass-dim) calc(var(--jwnsh-dim, 0) * 65%));
  transform: rotate(45deg) scale(calc(1 + var(--jwnsh-on, 0) * 0.34));
  box-shadow: 0 0 0 calc(var(--jwnsh-on, 0) * 4px) var(--jwn-gold-wash);
  outline: 0 solid var(--jwn-rouge);
  outline-width: calc(var(--jwnsh-x, 0) * 2px);
  outline-offset: 3px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease,
              background .3s ease, outline-width .28s ease;
}
.jwn-shows-mark-t {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  color: color-mix(in oklab, var(--jwn-ink-3), var(--jwn-rouge) calc(var(--jwnsh-x, 0) * 100%));
  transition: color .28s ease;
}
.jwn-shows-mark.is-anchor .jwn-shows-dot {
  width: 12px; height: 12px;
  background: var(--jwn-gold);
  box-shadow:
    0 0 0 calc(4px + var(--jwnsh-on, 0) * 4px) var(--jwn-gold-wash),
    0 0 16px oklch(86% 0.128 88 / 0.5);
}
.jwn-shows-mark.is-anchor .jwn-shows-mark-t {
  color: color-mix(in oklab, var(--jwn-gold), var(--jwn-rouge) calc(var(--jwnsh-x, 0) * 100%));
}

/* ---- the all-night bars ------------------------------------------------- */

.jwn-shows-run {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: var(--a); right: calc(100% - var(--b));
  height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: linear-gradient(180deg, oklch(58% 0.09 160 / 0.30), oklch(58% 0.09 160 / 0.15));
  border: 1px solid oklch(58% 0.09 160 / 0.45);
}
.jwn-shows-run-t {
  padding: 0 9px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--jwn-pine);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* A show with no published times gets a caption, not a bar. A bar spanning the
   whole evening would assert a schedule that does not exist. */
.jwn-shows-loose {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.jwn-shows-loose::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background-image: radial-gradient(circle, var(--jwn-line-2) 0.5px, transparent 0.5px);
  background-size: 7px 1px; background-repeat: repeat-x;
}
.jwn-shows-loose > span {
  position: relative;
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px dashed var(--jwn-line-2);
  background: oklch(17% 0.04 258);
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  white-space: nowrap;
}

/* ============================================ mobile clock, the run down === */

.jwn-shows-clockwrap {
  padding: clamp(16px, 4vw, 22px) clamp(14px, 3.6vw, 20px) 20px;
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r);
  background:
    radial-gradient(130% 60% at 50% -6%, oklch(100% 0 0 / 0.03), transparent 60%),
    linear-gradient(180deg, oklch(20% 0.044 258), oklch(16.5% 0.04 258));
  box-shadow: var(--jwn-sh), inset 0 1px 0 oklch(66% 0.098 80 / 0.28);
}

.jwn-shows-clock {
  position: relative;
  list-style: none; margin: 0; padding: 0;
}
/* the rail */
.jwn-shows-clock::before {
  content: ""; position: absolute;
  left: 58px; top: 14px; bottom: 22px; width: 1px;
  background: linear-gradient(180deg,
    oklch(72% 0.055 230 / 0.55) 0%,
    oklch(72% 0.055 230 / 0.55) 14%,
    var(--jwn-line) 22%,
    var(--jwn-line) 92%,
    transparent 100%);
}

.jwn-shows-slot,
.jwn-shows-cband {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 24px;
  padding: 9px 0 13px;
}
.jwn-shows-slot::before,
.jwn-shows-cband::before {
  content: ""; position: absolute; left: 58px; top: 16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jwn-brass);
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px oklch(20% 0.044 258);
}
.jwn-shows-slot.is-mix::before,
.jwn-shows-cband.is-mix::before { background: var(--jwn-ice-dim); }
.jwn-shows-slot.is-partystart::before {
  background: var(--jwn-gold-2);
  box-shadow: 0 0 0 3px oklch(20% 0.044 258), 0 0 10px oklch(86% 0.128 88 / 0.35);
}
.jwn-shows-slot.is-anchor::before {
  width: 11px; height: 11px; top: 14px;
  background: var(--jwn-gold);
  box-shadow: 0 0 0 3px oklch(20% 0.044 258), 0 0 14px oklch(86% 0.128 88 / 0.6);
}
.jwn-shows-cband::before {
  border-radius: 0; width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--jwn-brass);
}

.jwn-shows-slot-t {
  margin: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right;
}
.jwn-shows-slot-h {
  font-family: var(--jwn-display); font-weight: 700; font-size: 17px;
  line-height: 1; color: var(--jwn-ink);
}
.jwn-shows-slot.is-anchor .jwn-shows-slot-h { color: var(--jwn-gold); }
.jwn-shows-slot-m {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--jwn-ink-3);
}

.jwn-shows-slot-body { min-width: 0; }
.jwn-shows-slot-flag {
  margin: 0 0 8px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-shows-slot-flag.is-anchor { color: var(--jwn-gold); }

.jwn-shows-slot-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}

.jwn-shows-chip {
  border: 1px solid var(--jwn-line);
  border-radius: 11px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--jwn-panel-2), var(--jwn-panel) calc(var(--jwnsh-dim, 0) * 100%)),
    var(--jwn-panel));
  box-shadow:
    inset 0 0 0 calc(var(--jwnsh-on, 0) * 1.5px) var(--jwn-gold),
    inset calc(var(--jwnsh-x, 0) * 3px) 0 0 var(--jwn-rouge);
  transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.jwn-shows-chip-in {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
}
.jwn-shows-chip-n {
  font-family: var(--jwn-display); font-weight: 700; font-size: 15px;
  line-height: 1.2; color: var(--jwn-ink);
}
.jwn-shows-chip-v {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-shows-chip-w { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--jwn-ink-2); }
/* Collapsed to nothing until the pick makes it true. */
.jwn-shows-chip-x {
  display: block; overflow: hidden;
  padding-inline: 14px;
  max-height: calc(var(--jwnsh-x, 0) * 22px);
  padding-bottom: calc(var(--jwnsh-x, 0) * 11px);
  opacity: var(--jwnsh-x, 0);
  font-family: var(--jwn-ui); font-weight: 800; font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-rouge);
  transition: max-height .3s ease, opacity .3s ease, padding-bottom .3s ease;
}

.jwn-shows-cband-t {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-gold);
  text-align: right;
  grid-column: 1;
}
.jwn-shows-cband.is-mix .jwn-shows-cband-t { color: var(--jwn-ice); }
.jwn-shows-cband-d {
  margin: 0; grid-column: 2;
  max-width: 62ch;
  font-size: 13.5px; line-height: 1.55;
  color: var(--jwn-ink-3);
  text-wrap: pretty;
}

.jwn-shows-standing {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--jwn-line);
}
.jwn-shows-standing-k {
  margin: 0 0 12px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-shows-standing-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.jwn-shows-chip.is-standing { border-color: oklch(58% 0.09 160 / 0.38); }

/* Two columns of chips on the wide end of the clock, so a chip stops being a
   650px box holding a 15px title. */
@media (min-width: 560px) and (max-width: 719px) {
  .jwn-shows-slot-list,
  .jwn-shows-standing-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* very narrow phones */
@media (max-width: 400px) {
  .jwn-shows-clockwrap { padding-inline: 12px; }
  .jwn-shows-clock::before { left: 50px; }
  .jwn-shows-slot::before,
  .jwn-shows-cband::before { left: 50px; }
  .jwn-shows-slot,
  .jwn-shows-cband { grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; }
  .jwn-shows-slot-h { font-size: 15.5px; }
  .jwn-shows-chip-n { font-size: 14.5px; }
}

/* ==================================================== the highlighting === */
/*
   One generic rule marks every element the moment a specific show is chosen,
   then one rule per show clears the dim and lights it, and one rule per show
   rings the showings that start within twenty minutes of it. All three states
   are custom properties, so descendants inherit them without their own
   selectors. Extend the blocks below if a show is ever added.
*/

.jwn-shows-hl { transition: opacity .3s ease; }

.jwn-shows-board:has(.jwn-shows-r:checked) .jwn-shows-hl { --jwnsh-dim: 1; }

.jwn-shows-board:has(#jwn-shows-r0:checked)  .jwn-shows-hl[data-show="0"],
.jwn-shows-board:has(#jwn-shows-r1:checked)  .jwn-shows-hl[data-show="1"],
.jwn-shows-board:has(#jwn-shows-r2:checked)  .jwn-shows-hl[data-show="2"],
.jwn-shows-board:has(#jwn-shows-r3:checked)  .jwn-shows-hl[data-show="3"],
.jwn-shows-board:has(#jwn-shows-r4:checked)  .jwn-shows-hl[data-show="4"],
.jwn-shows-board:has(#jwn-shows-r5:checked)  .jwn-shows-hl[data-show="5"],
.jwn-shows-board:has(#jwn-shows-r6:checked)  .jwn-shows-hl[data-show="6"],
.jwn-shows-board:has(#jwn-shows-r7:checked)  .jwn-shows-hl[data-show="7"],
.jwn-shows-board:has(#jwn-shows-r8:checked)  .jwn-shows-hl[data-show="8"],
.jwn-shows-board:has(#jwn-shows-r9:checked)  .jwn-shows-hl[data-show="9"],
.jwn-shows-board:has(#jwn-shows-r10:checked) .jwn-shows-hl[data-show="10"] {
  --jwnsh-dim: 0;
  --jwnsh-on: 1;
}

.jwn-shows-board:has(#jwn-shows-r0:checked)  .is-x0,
.jwn-shows-board:has(#jwn-shows-r1:checked)  .is-x1,
.jwn-shows-board:has(#jwn-shows-r2:checked)  .is-x2,
.jwn-shows-board:has(#jwn-shows-r3:checked)  .is-x3,
.jwn-shows-board:has(#jwn-shows-r4:checked)  .is-x4,
.jwn-shows-board:has(#jwn-shows-r5:checked)  .is-x5,
.jwn-shows-board:has(#jwn-shows-r6:checked)  .is-x6,
.jwn-shows-board:has(#jwn-shows-r7:checked)  .is-x7,
.jwn-shows-board:has(#jwn-shows-r8:checked)  .is-x8,
.jwn-shows-board:has(#jwn-shows-r9:checked)  .is-x9,
.jwn-shows-board:has(#jwn-shows-r10:checked) .is-x10 {
  --jwnsh-x: 1;
}

/* The picked chip takes a brass edge on top of the inset gold rule. Driven off
   the same inherited property, so it follows whichever mechanism set it. */
.jwn-shows-chip {
  border-color: color-mix(in oklab, var(--jwn-line), var(--jwn-brass) calc(var(--jwnsh-on, 0) * 100%));
}

/* ========================================================= reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .jwn-shows-hl,
  .jwn-shows-dot,
  .jwn-shows-mark-t,
  .jwn-shows-chip,
  .jwn-shows-chip-x,
  .jwn-shows-lane::before,
  .jwn-shows-lane::after { transition: none; }
}

/* ==== 60-characters.css ==== */
/* ====================================================== characters ===
   The roster (rare tier + everyday tier, both built from the same card
   block), a land filter that only exists once JS is running, and the
   measured-wait chart. Namespace: .jwn-ch-*.

   Nothing here restyles a base component for the whole page; cards extend
   .jwn-card, pills extend .jwn-pill, the footnote extends .jwn-note, and
   every local change is hung off a .jwn-ch-* class.
   ==================================================================== */

/* ------------------------------------------------------------ scale --- */
/* Five type steps and four spacing steps for the entire section. Every rule
   below picks from these. No rule sets a raw pixel size, and nothing uses a
   half pixel. */

#characters {
  --ch-t-cap: 11px;   /* caps kickers, axis and column labels */
  --ch-t-s:   13px;   /* captions, legend, the wait line, controls */
  --ch-t-m:   15px;   /* running copy inside the roster */
  --ch-t-l:   18px;   /* every character name */
  --ch-t-xl:  22px;   /* featured card names, the insight head */

  --ch-y-xs: 12px;
  --ch-y-s:  24px;
  --ch-y-m:  40px;
  --ch-y-l:  64px;

  --ch-pad:  18px;    /* card padding */
  --ch-tab:  5px;     /* the filter tab radius */
}

/* One icon sprite for the whole section, referenced by <use>. */
.jwn-ch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -------------------------------------------------------- section head --- */

.jwn-ch-jumpline { margin: var(--ch-y-xs) 0 0; }
.jwn-ch-jump {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--ch-t-s);
  letter-spacing: 0.02em;
  color: var(--jwn-gold);
  text-decoration: underline;
  text-decoration-color: oklch(86% 0.128 88 / 0.35);
  text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.jwn-ch-jump:hover { color: var(--jwn-ink); text-decoration-color: currentColor; }

/* ------------------------------------------------- the waits footnote --- */
/* Pulled left by its own rule and padding so the copy shares one edge with
   the headline and the tier heads above and below it. */

.jwn-ch-measured { margin: 0 0 var(--ch-y-m); }
.jwn-ch-measured strong { color: var(--jwn-ink-2); }
.jwn-ch-note-ico {
  flex: none;
  display: inline-flex;
  margin-top: 2px;
  color: var(--jwn-brass);
}
@media (min-width: 760px) {
  .jwn-ch-measured { margin-left: -16px; }
}

/* ------------------------------------------------------- land filter --- */
/* Hidden in the markup and unhidden by 60-characters.js, so a no-JS visitor
   never meets a control that cannot do anything. The roster is complete
   without it. Deco hardware, not a form panel: brass rules top and bottom,
   flat brass tabs on one baseline. */

.jwn-ch-tools {
  margin: 0 0 var(--ch-y-m);
  padding: var(--ch-y-xs) 0;
  border-top: 1px solid var(--jwn-hair);
  border-bottom: 1px solid var(--jwn-hair);
}
.jwn-ch-tools[hidden] { display: none; }

.jwn-ch-tools-in {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 20px;
}

.jwn-ch-tools-k {
  flex: none;
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--ch-t-cap); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}

.jwn-ch-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.jwn-ch-chip {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  min-height: 40px; padding: 0 13px;
  border: 1px solid oklch(66% 0.098 80 / 0.32);
  border-radius: var(--ch-tab);
  background: transparent;
  color: var(--jwn-ink-2);
  font-family: var(--jwn-ui); font-weight: 700; font-size: var(--ch-t-s);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.jwn-ch-chip-n {
  font-size: var(--ch-t-cap); font-weight: 800;
  color: var(--jwn-ink-3);
  font-variant-numeric: tabular-nums;
}
.jwn-ch-chip-ck { display: none; flex: none; }

.jwn-ch-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  border-color: transparent;
  color: var(--jwn-gold-ink);
  box-shadow: 0 4px 14px oklch(72% 0.12 84 / 0.22);
}
.jwn-ch-chip[aria-pressed="true"] .jwn-ch-chip-n { color: oklch(21% 0.045 70 / 0.7); }
.jwn-ch-chip[aria-pressed="true"] .jwn-ch-chip-ck { display: block; }

@media (hover: hover) {
  .jwn-ch-chip[aria-pressed="false"]:hover {
    border-color: var(--jwn-brass);
    color: var(--jwn-ink);
    background: var(--jwn-gold-wash);
  }
  .jwn-ch-chip[aria-pressed="false"]:hover .jwn-ch-chip-n { color: var(--jwn-gold); }
  .jwn-ch-chip[aria-pressed="true"]:hover { box-shadow: 0 7px 20px oklch(72% 0.12 84 / 0.3); }
}

/* The shared focus ring squares off any radius it lands on. Restate the tab
   and button shapes so a focused control keeps its own silhouette. */
.jwn .jwn-ch-chip:focus-visible { border-radius: var(--ch-tab); }
.jwn .jwn-ch-reset:focus-visible { border-radius: 999px; }

.jwn-ch-status {
  margin: var(--ch-y-xs) 0 0;
  font-size: var(--ch-t-s); line-height: 1.5;
  color: var(--jwn-ink-3);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- tiers --- */

.jwn-ch-tier + .jwn-ch-tier { margin-top: var(--ch-y-l); }

.jwn-ch-tier-head {
  margin-bottom: var(--ch-y-s);
  padding-bottom: var(--ch-y-xs);
  border-bottom: 1px solid var(--jwn-hair-soft);
}
.jwn-ch-tier-title {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 14px;
}
.jwn-ch-tier-n { font-variant-numeric: tabular-nums; }
.jwn-ch-tier-sub {
  margin: 9px 0 0;
  max-width: 62ch;
  font-size: var(--ch-t-m); line-height: 1.6;
  color: var(--jwn-ink-3);
}
.jwn-ch-tier-sub[hidden] { display: none; }

/* Filtering to a land that holds none of a tier leaves the heading in place
   and swaps the roster for a way back, rather than silently deleting a whole
   block of the page. */
.jwn-ch-empty { display: none; }
.jwn-ch-tier.is-empty .jwn-ch-empty:not([hidden]) {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: var(--ch-y-s);
  border: 1px dashed var(--jwn-line-2);
  border-radius: var(--jwn-r);
  background: oklch(12% 0.03 258 / 0.35);
  font-size: var(--ch-t-m); line-height: 1.5;
  color: var(--jwn-ink-2);
}
.jwn-ch-tier.is-empty .jwn-ch-grid,
.jwn-ch-tier.is-empty .jwn-ch-rows,
.jwn-ch-tier.is-empty .jwn-ch-tier-n { display: none; }

/* --------------------------------------------------------- the cards --- */
/* Both tiers use this block, in this order: land, name, location, note, the
   2025 line. The everyday tier lays it out as a ledger row instead of a card,
   but the facts never change shape or reading order. */

.jwn-ch-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--ch-y-xs);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.jwn-ch-card {
  display: flex;
  flex-direction: column;
  padding: var(--ch-pad);
  min-width: 0;
  /* one warm light source at the top left, so the grid is lit rather than flat */
  background-image:
    radial-gradient(130% 90% at 8% -12%, oklch(86% 0.128 88 / 0.085), transparent 60%),
    linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
  box-shadow: var(--jwn-sh-sm), inset 0 1px 0 oklch(86% 0.128 88 / 0.06);
}
.jwn-ch-card.is-off { display: none; }
.jwn-ch-id { min-width: 0; }

.jwn-ch-land {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 9px;
  min-width: 0;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: var(--ch-t-cap); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  line-height: 1.25;
}
.jwn-ch-ico { flex: none; color: var(--jwn-brass); }

.jwn-ch-name {
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--ch-t-l); line-height: 1.2; letter-spacing: -0.008em;
  color: var(--jwn-ink);
  text-wrap: pretty;
}

.jwn-ch-where {
  display: flex; align-items: baseline; gap: 7px;
  margin: 7px 0 0;
  font-size: var(--ch-t-s); line-height: 1.4;
  color: var(--jwn-ink-3);
}
.jwn-ch-where::before {
  content: "";
  flex: none;
  width: 12px; height: 1px;
  transform: translateY(-4px);
  background: var(--jwn-hair);
}

.jwn-ch-note {
  margin: var(--ch-y-xs) 0 0;
  font-size: var(--ch-t-m); line-height: 1.55;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* The measured figure is a caption, not a headline. The chart below is the
   only place the waits are ranked, so the number does not compete with the
   name it sits under. */
.jwn-ch-wait {
  display: flex; align-items: baseline;
  gap: 5px;
  margin: auto 0 0;
  padding-top: var(--ch-y-xs);
  border-top: 1px solid var(--jwn-hair-soft);
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: var(--ch-t-s); line-height: 1.3;
}
.jwn-ch-wait-v {
  color: var(--jwn-ink-2);
  font-variant-numeric: tabular-nums;
}
.jwn-ch-wait-u { color: var(--jwn-ink-3); font-weight: 400; }
.jwn-ch-untimed { color: var(--jwn-ink-3); font-weight: 400; }

/* Cards carrying a note earn a double-width slot with the note set off behind
   a brass hairline. The trailing plain cards widen only as far as they have to
   for the last row to close. */
@media (min-width: 1040px) {
  .jwn-ch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jwn-ch-card.is-wide,
  .jwn-ch-card.is-fill { grid-column: span 2; }

  .jwn-ch-card.is-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    border-color: oklch(66% 0.098 80 / 0.3);
  }
  .jwn-ch-card.is-wide .jwn-ch-id { grid-column: 1; grid-row: 1; }
  .jwn-ch-card.is-wide .jwn-ch-name { font-size: var(--ch-t-xl); line-height: 1.14; }
  .jwn-ch-card.is-wide .jwn-ch-wait {
    grid-column: 1; grid-row: 2;
    align-self: end;
    margin: var(--ch-y-s) 0 0;
  }
  .jwn-ch-card.is-wide .jwn-ch-note {
    grid-column: 2; grid-row: 1 / -1;
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid var(--jwn-hair-soft);
  }

  /* Filtered to one land the roster is short, so the wide slots stand down and
     whatever is left fills the row evenly instead of stranding a card. */
  .jwn-ch-grid[data-filtered] { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
  .jwn-ch-grid[data-filtered] .jwn-ch-card.is-wide,
  .jwn-ch-grid[data-filtered] .jwn-ch-card.is-fill { grid-column: auto; }
  .jwn-ch-grid[data-filtered] .jwn-ch-card.is-wide {
    display: flex; flex-direction: column;
    border-color: var(--jwn-line);
  }
  .jwn-ch-grid[data-filtered] .jwn-ch-card.is-wide .jwn-ch-name { font-size: var(--ch-t-l); }
  .jwn-ch-grid[data-filtered] .jwn-ch-card.is-wide .jwn-ch-wait { margin: auto 0 0; }
  .jwn-ch-grid[data-filtered] .jwn-ch-card.is-wide .jwn-ch-note {
    margin: var(--ch-y-xs) 0 0;
    padding-left: 0;
    border-left: 0;
  }
}

/* ------------------------------------------------ everyday tier rows --- */
/* A two column ledger. Three of the five everyday sets carry no note, and a
   third column would sit empty on every one of them. */

.jwn-ch-rows { list-style: none; margin: 0; padding: 0; }
.jwn-ch-srow {
  padding: var(--ch-y-s) 0;
  border-bottom: 1px solid var(--jwn-line);
}
.jwn-ch-srow.is-off { display: none; }
.jwn-ch-srow .jwn-ch-note { max-width: 58ch; }
.jwn-ch-srow .jwn-ch-wait {
  margin: var(--ch-y-xs) 0 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 900px) {
  .jwn-ch-srow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    column-gap: var(--ch-y-s);
    align-items: start;
  }
  .jwn-ch-srow .jwn-ch-id { grid-column: 1; grid-row: 1; }
  .jwn-ch-srow .jwn-ch-note { grid-column: 1; grid-row: 2; }
  .jwn-ch-srow .jwn-ch-wait {
    grid-column: 2; grid-row: 1 / -1;
    justify-content: flex-end;
    align-self: center;
    margin: 0;
    text-align: right;
  }
}

/* ------------------------------------------------------- chart intro --- */

.jwn-ch-chart-head { margin-bottom: var(--ch-y-s); }
.jwn-ch-h {
  margin: 0;
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1; letter-spacing: -0.014em;
  color: var(--jwn-ink);
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- wait chart --- */
/* A brass framed board rather than a dashboard panel: bulb ticks along the
   foot, a routed channel for each line, and a physical bracket around the two
   rows the section is arguing about. */

.jwn-ch-chart { margin: 0; }

.jwn-ch-chart-in {
  padding: var(--ch-y-s) var(--ch-y-s) var(--ch-y-xs);
  border: 1px solid var(--jwn-brass-dim);
  border-radius: var(--jwn-r);
  background: linear-gradient(180deg, oklch(19% 0.042 258), oklch(14% 0.036 258));
  box-shadow: var(--jwn-sh-sm), inset 0 0 0 1px oklch(66% 0.098 80 / 0.13);
}

.jwn-ch-marquee {
  display: flex; align-items: center; gap: var(--ch-y-xs);
  margin: 0 0 var(--ch-y-s);
}
.jwn-ch-marquee-r { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--jwn-hair)); }
.jwn-ch-marquee-r + .jwn-bulbs + .jwn-ch-marquee-r { background: linear-gradient(90deg, var(--jwn-hair), transparent); }
.jwn-ch-marquee .jwn-bulbs { gap: 12px; }

.jwn-ch-head,
.jwn-ch-bar-row,
.jwn-ch-axis {
  display: grid;
  grid-template-columns: minmax(148px, 1.05fr) minmax(0, 2.3fr) 64px;
  column-gap: 16px;
  align-items: center;
}

.jwn-ch-head {
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--jwn-hair-soft);
  margin-bottom: 6px;
}
.jwn-ch-head span {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--ch-t-cap); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}

.jwn-ch-bars { list-style: none; margin: 0; padding: 0; }

.jwn-ch-bar-row {
  position: relative;
  padding: 9px 10px;
  border-radius: 4px;
}
.jwn-ch-bar-row.is-flag {
  background: linear-gradient(90deg, var(--jwn-gold-wash), transparent 64%);
}
.jwn-ch-bar-row.is-flag::before,
.jwn-ch-bar-row.is-flag::after {
  content: "";
  position: absolute; left: 0;
  width: 11px; height: 11px;
  border: 1px solid var(--jwn-gold);
  pointer-events: none;
}
.jwn-ch-bar-row.is-flag::before { top: 0; border-right: 0; border-bottom: 0; }
.jwn-ch-bar-row.is-flag::after { bottom: 0; border-right: 0; border-top: 0; }

.jwn-ch-bar-name { display: block; min-width: 0; }
.jwn-ch-bar-who {
  display: block;
  font-size: var(--ch-t-m); line-height: 1.28; font-weight: 600;
  color: var(--jwn-ink);
}
.jwn-ch-bar-land {
  display: block;
  margin-top: 3px;
  font-size: var(--ch-t-cap); letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700;
  color: var(--jwn-ink-3);
}

.jwn-ch-track {
  position: relative;
  display: block;
  height: 15px;
  border-radius: 3px;
  background-color: oklch(9% 0.026 258 / 0.72);
  background-image: repeating-linear-gradient(90deg,
    oklch(66% 0.098 80 / 0.16) 0 1px,
    transparent 1px var(--jwn-ch-step, 25%));
  box-shadow: inset 0 1px 2px oklch(4% 0.02 258 / 0.55), inset -1px 0 0 var(--jwn-line);
}
.jwn-ch-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  min-width: 3px;
  border-radius: 3px;
}
/* the lit leading edge, the way a bulb sits at the head of a marquee strip */
.jwn-ch-bar::after {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 2px;
  border-radius: 0 3px 3px 0;
  background: oklch(98% 0.02 88 / 0.6);
}
.jwn-ch-bar-row.is-short .jwn-ch-bar  { background: linear-gradient(90deg, var(--jwn-ice-dim), var(--jwn-ice)); }
.jwn-ch-bar-row.is-medium .jwn-ch-bar { background: linear-gradient(90deg, var(--jwn-gold-2), var(--jwn-gold)); }
.jwn-ch-bar-row.is-long .jwn-ch-bar   { background: linear-gradient(90deg, oklch(56% 0.165 22), var(--jwn-rouge)); }

.jwn-ch-num {
  justify-self: end;
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: var(--ch-t-m);
  color: var(--jwn-ink);
  white-space: nowrap;
}
.jwn-ch-unit {
  font-size: var(--ch-t-cap); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}

/* -------------------------------------------------------------- axis --- */

.jwn-ch-axis { margin-top: 8px; padding: 0 10px; }
.jwn-ch-axis-rail { position: relative; display: block; height: 26px; }
.jwn-ch-tick {
  position: absolute; top: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transform: translateX(-50%);
}
.jwn-ch-tick.is-first { transform: none; align-items: flex-start; }
.jwn-ch-tick.is-last { transform: translateX(-100%); align-items: flex-end; }
.jwn-ch-tick-line {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--jwn-brass);
  box-shadow: 0 0 6px oklch(86% 0.128 88 / 0.4);
}
.jwn-ch-tick.is-first .jwn-ch-tick-line,
.jwn-ch-tick.is-last .jwn-ch-tick-line {
  background: var(--jwn-gold);
  box-shadow: 0 0 8px oklch(86% 0.128 88 / 0.7);
}
.jwn-ch-tick-n {
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: var(--ch-t-cap); letter-spacing: 0.06em;
  color: var(--jwn-ink-3);
}
.jwn-ch-axis-unit {
  justify-self: end;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: var(--ch-t-cap); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  align-self: start;
}

/* ------------------------------------------------------------ legend --- */

.jwn-ch-legend {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px var(--ch-y-s);
  margin: var(--ch-y-xs) 0 0; padding: 0;
}
.jwn-ch-legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--ch-t-s); line-height: 1.3;
  color: var(--jwn-ink-3);
  font-variant-numeric: tabular-nums;
}
.jwn-ch-sw { width: 18px; height: 8px; border-radius: 2px; flex: none; }
.jwn-ch-sw.is-short  { background: linear-gradient(90deg, var(--jwn-ice-dim), var(--jwn-ice)); }
.jwn-ch-sw.is-medium { background: linear-gradient(90deg, var(--jwn-gold-2), var(--jwn-gold)); }
.jwn-ch-sw.is-long   { background: linear-gradient(90deg, oklch(56% 0.165 22), var(--jwn-rouge)); }

.jwn-ch-cap {
  margin: var(--ch-y-xs) 0 0;
  max-width: 74ch;
  font-size: var(--ch-t-s); line-height: 1.55;
  color: var(--jwn-ink-3);
}

/* ----------------------------------------------------------- insight --- */

.jwn-ch-insight {
  display: grid;
  gap: var(--ch-y-s);
  margin-top: var(--ch-y-m);
  padding: var(--ch-y-s);
}

.jwn-ch-gap { align-self: center; }
.jwn-ch-gap-row {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0 10px;
  margin: 0;
}
.jwn-ch-gap-row + .jwn-ch-gap-row { margin-top: var(--ch-y-xs); }
.jwn-ch-gap-n {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(44px, 6vw, 62px); line-height: 0.9;
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
}
.jwn-ch-gap-row.is-small .jwn-ch-gap-n {
  font-size: clamp(30px, 4vw, 42px);
  color: var(--jwn-ice);
}
.jwn-ch-gap-u {
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: var(--ch-t-cap); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-ch-gap-l {
  flex: 1 1 100%;
  margin-top: 6px;
  font-size: var(--ch-t-m); line-height: 1.45;
  color: var(--jwn-ink-2);
}
.jwn-ch-gap-foot {
  margin: var(--ch-y-xs) 0 0;
  padding-top: var(--ch-y-xs);
  border-top: 1px solid oklch(86% 0.128 88 / 0.22);
  font-size: var(--ch-t-s); line-height: 1.5;
  color: var(--jwn-ink-3);
  font-variant-numeric: tabular-nums;
}

.jwn-ch-route-h {
  margin: 0 0 var(--ch-y-xs);
  font-family: var(--jwn-display); font-weight: 700;
  font-size: var(--ch-t-xl); line-height: 1.16; letter-spacing: -0.01em;
  color: var(--jwn-ink);
}

@media (min-width: 900px) {
  .jwn-ch-insight {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: var(--ch-y-m);
    padding: var(--ch-y-m);
  }
  .jwn-ch-gap {
    padding-right: var(--ch-y-s);
    border-right: 1px solid oklch(86% 0.128 88 / 0.2);
  }
}

/* =========================================================== mobile === */

/* Below this the bar gets its own full-width line. A squeezed track is a
   worse chart than a stacked one. */
@media (max-width: 820px) {
  .jwn-ch-head { display: none; }

  .jwn-ch-bar-row {
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-areas:
      "name name"
      "track num";
    row-gap: 9px;
    padding: 12px 10px;
  }
  .jwn-ch-bar-name { grid-area: name; }
  .jwn-ch-track { grid-area: track; }
  .jwn-ch-num { grid-area: num; }

  .jwn-ch-bar-row + .jwn-ch-bar-row { border-top: 1px solid var(--jwn-line); border-radius: 0; }

  .jwn-ch-axis { grid-template-columns: minmax(0, 1fr) 64px; }
  .jwn-ch-axis-pad { display: none; }
  .jwn-ch-axis-rail { grid-column: 1; }
  .jwn-ch-axis-unit { grid-column: 2; }
}

/* One row of tabs that scrolls sideways, the way the section nav already
   does, instead of six stacked rows of chips before any content. */
@media (max-width: 700px) {
  .jwn-ch-tools-in { display: block; }
  .jwn-ch-tools-k { margin-bottom: 10px; }
  .jwn-ch-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* room for the focus ring, which a scroll container would otherwise clip */
    padding: 6px;
    margin: -6px;
    /* Without this the chips' own glow and shadows count as ink overflow on the
       scroller, and Chrome folds that into the ancestor's scrollWidth, which
       dragged the whole page sideways to 1223px at 390px wide. Painting is
       contained to this box; scrolling is unaffected. */
    contain: paint;
  }
  .jwn-ch-chips::-webkit-scrollbar { display: none; }
  .jwn-ch-chip { scroll-snap-align: start; min-height: 44px; }
}

/* Copy never drops below 14px on a phone. */
@media (max-width: 640px) {
  #characters {
    --ch-t-cap: 12px;
    --ch-t-s:   14px;
    --ch-y-s:   20px;
    --ch-y-m:   30px;
    --ch-y-l:   44px;
    --ch-pad:   16px;
  }
  .jwn-ch-legend { gap: 7px 16px; }
}

/* =========================================================== motion === */
/* The zero-width state only exists under .jwn-anim, which the core script
   adds when motion is allowed. No JS, or reduced motion, means the bars are
   already at their true widths. */

.jwn-anim .jwn-ch-chart .jwn-ch-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar { transform: scaleX(1); }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(1) .jwn-ch-bar { transition-delay: .06s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(2) .jwn-ch-bar { transition-delay: .12s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(3) .jwn-ch-bar { transition-delay: .18s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(4) .jwn-ch-bar { transition-delay: .24s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(5) .jwn-ch-bar { transition-delay: .30s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(6) .jwn-ch-bar { transition-delay: .36s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(7) .jwn-ch-bar { transition-delay: .42s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(8) .jwn-ch-bar { transition-delay: .48s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(9) .jwn-ch-bar { transition-delay: .54s; }
.jwn-anim .jwn-ch-chart.is-in .jwn-ch-bar-row:nth-child(10) .jwn-ch-bar { transition-delay: .60s; }

@media (prefers-reduced-motion: reduce) {
  .jwn-anim .jwn-ch-chart .jwn-ch-bar { transform: none; transition: none; }
}

/* ==== 70-food.css ==== */
/* ==================================================== food and drink ===
   A menu spread, not a data table. The full lineup runs in two true columns
   with a brass rule between them, each venue set like a card in a restaurant
   menu and each item on a dotted leader. Course headings carry the kind, so
   the filter can hide a whole course and nothing needs a coloured badge.

   Three rules this file holds itself to.
   1. Every price in the section renders in one figure style, the UI face with
      lining tabular figures, so the estimator total and a $6.49 popover agree.
   2. The dotted leader never collapses. Names top align, prices are fixed
      width, and the fill keeps a minimum run of dots even on a wrapped row.
   3. Nothing sizes to max-content across a full row, so the page never gains
      a horizontal scrollbar on a phone.

   Owns .jwn-food-*. Nothing here restyles a base component globally; the few
   base overrides are scoped to a .jwn-food-* instance.
   ====================================================================== */

/* ------------------------------------------------------------ shared --- */

.jwn-food-sub {
  color: var(--jwn-ink-2);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 60ch;
  margin: 12px 0 0;
  text-wrap: pretty;
}

.jwn-food-ico {
  width: 12px; height: 12px; flex: none;
  margin-right: 5px;
  transform: translateY(1.5px);
  opacity: .85;
}

/* One figure style for the whole section. Tabular so columns of prices line
   up, lining so no numeral drops below the baseline next to another. */
.jwn-food-price,
.jwn-food-band-v,
.jwn-food-pick-price,
.jwn-food-pick-rank,
.jwn-food-calc-total,
.jwn-food-jazzy-stat .jwn-stat-v,
.jwn-food-term dd {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Course heading, reused by the venue menus and the Brown Derby lists. */
.jwn-food-course-h {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--jwn-brass);
  margin: 0 0 10px;
}
.jwn-food-course-h::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--jwn-hair), transparent);
}

/* ------------------------------------------------------ item + leader --- */

.jwn-food-items { list-style: none; margin: 0; padding: 0; }

.jwn-food-item { padding: 7px 0; }
.jwn-food-item + .jwn-food-item { border-top: 1px solid oklch(44% 0.04 258 / 0.28); }

/* A long name has to be allowed to wrap without dragging the price down with
   it, so the row top aligns and the price is pinned to the first line by
   matching line boxes rather than by baseline alignment. */
.jwn-food-line,
.jwn-food-band-top {
  margin: 0;
  align-items: flex-start;
}
.jwn-food-line .jwn-leader-fill,
.jwn-food-band-top .jwn-leader-fill {
  align-self: flex-start;
  flex: 1 1 24px;
  min-width: 24px;
  margin: 15px 0 0;
}

.jwn-food-name {
  font-family: var(--jwn-ui);
  font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--jwn-ink-2);
  min-width: 0;
}
.jwn-food-price {
  flex: none;
  font-family: var(--jwn-ui);
  font-size: 14px; font-weight: 700; line-height: 1.5;
  color: var(--jwn-ink-3);
  white-space: nowrap;
}

/* An item with no posted price is not a number, so it does not get to sit in
   the numeral column pretending to be one. */
.jwn-food-price.is-unpriced {
  font-size: 10.5px; font-weight: 800; line-height: 2;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-brass);
}

.jwn-food-note-line {
  margin: 4px 0 0;
  font-size: 13px; line-height: 1.5;
  color: var(--jwn-ink-3);
  max-width: 52ch;
}

/* Anything carrying an editorial note reads a step brighter. */
.jwn-food-item.is-noted .jwn-food-name,
.jwn-food-item.is-pick .jwn-food-name { color: var(--jwn-ink); }
.jwn-food-item.is-noted .jwn-food-price { color: var(--jwn-ink-2); }

/* The three the section argues for get the full gold treatment. This is the
   strongest editorial signal in a 53 item list, so the fill has to read warm
   rather than as a greyed out row. */
.jwn-food-item.is-pick {
  margin: 6px -12px;
  padding: 10px 12px;
  border-radius: var(--jwn-r-sm);
  border: 1px solid oklch(66% 0.098 80 / 0.55);
  background:
    linear-gradient(180deg, oklch(86% 0.128 88 / 0.16), transparent 70%),
    oklch(82% 0.145 80 / 0.28);
  box-shadow: inset 0 1px 0 oklch(86% 0.128 88 / 0.35);
}
.jwn-food-item.is-pick + .jwn-food-item { border-top: 0; }
.jwn-food-item.is-pick .jwn-food-price { color: var(--jwn-gold); }
.jwn-food-item.is-pick .jwn-food-note-line { color: var(--jwn-ink-2); }

.jwn-food-star {
  width: 10px; height: 10px;
  margin-right: 6px;
  color: var(--jwn-gold);
  transform: translateY(1px);
}

.jwn-food-tag {
  display: inline-block;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-gold);
  margin-right: 8px;
  transform: translateY(-0.5px);
}

/* ------------------------------------------------------- status panel --- */

.jwn-food-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px clamp(20px, 3vw, 34px);
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid oklch(66% 0.098 80 / 0.42);
  border-radius: var(--jwn-r);
  background:
    linear-gradient(180deg, oklch(86% 0.128 88 / 0.07), transparent 62%),
    linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
  box-shadow: var(--jwn-sh-sm);
}
.jwn-food-status-pill { margin: 0; align-self: start; justify-self: start; }
.jwn-food-status-body { min-width: 0; }
.jwn-food-status-body .jwn-h3 { margin-bottom: 10px; }

@media (min-width: 760px) {
  .jwn-food-status { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .jwn-food-status-pill { margin-top: 5px; }
}

/* ---------------------------------------------------------- standouts --- */

.jwn-food-lead { margin-bottom: clamp(20px, 2.6vw, 28px); }

.jwn-food-picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jwn-gap);
}
.jwn-food-pick { display: flex; min-width: 0; }

.jwn-food-pick-card {
  display: flex; flex-direction: column;
  width: 100%; min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
}

/* Rank on the left, verdict pill on the right, the way a listing reads. The
   row is a fixed height so the lead card's larger rank cannot push its own
   headline out of register with the two beside it. */
.jwn-food-pick-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  margin-bottom: 14px;
}
.jwn-food-pick-rank {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: 32px; line-height: 1;
  color: oklch(66% 0.098 80 / 0.45);
  margin: 0;
}
.jwn-food-pick-tag { margin: 0; }

.jwn-food-pick-name {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(21px, 2.3vw, 26px); line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--jwn-ink);
  margin: 0;
  text-wrap: balance;
}
.jwn-food-pick-price {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 20px; letter-spacing: 0.01em;
  color: var(--jwn-gold);
  margin: 8px 0 0;
}
.jwn-food-pick-where {
  display: flex; align-items: baseline;
  margin: 10px 0 0;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--jwn-ink-3);
}

/* The two paragraphs travel together, which lets the closing line sit on the
   card floor instead of leaving a pocket of dead air under it. */
.jwn-food-pick-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.jwn-food-pick-why {
  margin: 14px 0 0;
  font-size: 14.5px; line-height: 1.58;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-food-pick-why.is-quiet {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--jwn-hair-soft);
  font-size: 13.5px;
  color: var(--jwn-ink-3);
}

@media (min-width: 680px) {
  .jwn-food-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jwn-food-pick.is-lead { grid-column: 1 / -1; }
  /* The lead is genuinely promoted, not just outlined in gold. */
  .jwn-food-pick.is-lead .jwn-food-pick-name { font-size: clamp(26px, 3.2vw, 32px); }
  .jwn-food-pick.is-lead .jwn-food-pick-price { font-size: 22px; }
  .jwn-food-pick.is-lead .jwn-food-pick-why { max-width: 62ch; }
}

/* Between the two-up and three-up layouts the lead card runs full width, so
   it splits in two rather than stretching one 95 character measure across it
   and stranding the rank a half card away from its own pill. */
@media (min-width: 680px) and (max-width: 1039.98px) {
  .jwn-food-pick.is-lead .jwn-food-pick-card {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(26px, 3.6vw, 44px);
    align-items: start;
  }
  .jwn-food-pick.is-lead .jwn-food-pick-top   { grid-column: 1; grid-row: 1; margin-bottom: 12px; }
  .jwn-food-pick.is-lead .jwn-food-pick-name  { grid-column: 1; grid-row: 2; }
  .jwn-food-pick.is-lead .jwn-food-pick-price { grid-column: 1; grid-row: 3; }
  .jwn-food-pick.is-lead .jwn-food-pick-where { grid-column: 1; grid-row: 4; align-self: start; }
  .jwn-food-pick.is-lead .jwn-food-pick-body  { grid-column: 2; grid-row: 1 / 5; align-self: stretch; }
  .jwn-food-pick.is-lead .jwn-food-pick-why:first-child { margin-top: 0; }
}

@media (min-width: 1040px) {
  .jwn-food-picks { grid-template-columns: 1.24fr 1fr 1fr; }
  .jwn-food-pick.is-lead { grid-column: auto; }
  .jwn-food-pick.is-lead .jwn-food-pick-rank { font-size: 42px; }
}

/* ------------------------------------------------------------- budget --- */

.jwn-food-budget {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 44px);
  margin-top: clamp(40px, 5.6vw, 68px);
}
@media (min-width: 920px) {
  .jwn-food-budget {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
    align-items: start;
  }
}

.jwn-food-bands { list-style: none; margin: 22px 0 0; padding: 0; }
.jwn-food-band { padding: 13px 0; border-top: 1px solid var(--jwn-line); }
.jwn-food-band:first-child { border-top: 0; padding-top: 0; }

.jwn-food-band-k {
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 15px; line-height: 1.35;
  color: var(--jwn-ink);
  min-width: 0;
}
.jwn-food-band-v {
  flex: none;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 15px; line-height: 1.35;
  color: var(--jwn-gold);
  white-space: nowrap;
}
.jwn-food-band-note {
  margin: 5px 0 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--jwn-ink-3);
  max-width: 58ch;
}

/* --------------------------------------------------------- estimator --- */

/* The estimator tracks the bands instead of ending a third of the way down
   the column and leaving the right side empty. */
.jwn-food-calc { position: relative; }
.jwn-food-calc [hidden] { display: none !important; }

@media (min-width: 920px) {
  .jwn-food-calc { position: sticky; top: 92px; }
}

.jwn-food-calc-ctl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.jwn-food-calc-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }

.jwn-food-calc-lab {
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-food-calc-in {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 16px;
  color: var(--jwn-ink);
  background: oklch(12% 0.03 258 / 0.7);
  border: 1px solid var(--jwn-line-2);
  border-radius: var(--jwn-r-sm);
  color-scheme: dark;
  transition: border-color .18s ease, background .18s ease;
}
.jwn-food-calc-in:focus { border-color: var(--jwn-brass); background: oklch(14% 0.03 258 / 0.9); }
@media (hover: hover) {
  .jwn-food-calc-in:hover { border-color: var(--jwn-brass-dim); }
}

.jwn-food-calc-basis {
  margin: 18px 0 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--jwn-ink-3);
}

.jwn-food-calc-out {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--jwn-hair);
}
.jwn-food-calc-out .jwn-stat-k { color: var(--jwn-ink-3); }
.jwn-food-calc-total {
  display: block;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 36px); line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--jwn-gold);
}
.jwn-food-calc-zero {
  display: block;
  margin-top: 8px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--jwn-ink-4);
}
.jwn-food-calc-note { margin: 16px 0 0; color: var(--jwn-ink-3); }
.jwn-food-calc-note strong { color: var(--jwn-ink-2); }

/* ---------------------------------------------------- menu head + bar --- */

/* The head, the toolbar and the spread share one block so the toolbar can
   stay with the reader on a phone. It is a plain block below the desktop
   breakpoint, which is what gives the sticky bar a containing block that
   runs the full height of the menu. */
.jwn-food-menu-block { position: relative; }

.jwn-food-menu-head {
  min-width: 0;
  margin-bottom: 22px;
}

.jwn-food-toolbar {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
  min-width: 0;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.jwn-food-toolbar[hidden] { display: none !important; }

/* Once the reader is three screens into the list, the filter is the only way
   back out of it, so on anything narrower than the desktop layout it rides
   along under the section nav. */
@media (max-width: 999.98px) {
  .jwn-food-toolbar {
    position: sticky; top: 52px; z-index: 12;
    margin-inline: -10px;
    padding: 10px;
    border: 1px solid var(--jwn-line);
    border-radius: var(--jwn-r);
    background: oklch(12% 0.032 258 / 0.94);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    box-shadow: var(--jwn-sh-sm);
  }
}

@media (min-width: 1000px) {
  .jwn-food-menu-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    column-gap: clamp(24px, 3vw, 40px);
    align-items: end;
  }
  .jwn-food-menu-head { grid-column: 1; margin-bottom: clamp(26px, 3.4vw, 40px); }
  .jwn-food-toolbar {
    grid-column: 2;
    align-items: flex-end;
    margin-bottom: clamp(26px, 3.4vw, 40px);
  }
  .jwn-food-menus { grid-column: 1 / -1; }
  .jwn-food-menu-foot { grid-column: 1 / -1; }
}

/* The segmented control can be wider than a phone. Let it scroll, not wrap,
   and never let it size the row it sits in. */
.jwn-food-filter {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.jwn-food-filter::-webkit-scrollbar { display: none; }
.jwn-food-filter .jwn-seg { min-width: max-content; }
@media (min-width: 1000px) {
  .jwn-food-filter { width: auto; }
}

.jwn-food-fbtn { min-height: 44px; }
.jwn-food-fnum {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  opacity: .68;
}
/* On the gold-filled active chip the count has to stay legible, so it goes
   full opacity there and separates by size alone. */
.jwn-food-fbtn[aria-pressed="true"] .jwn-food-fnum { opacity: 1; }

.jwn-food-count {
  margin: 0;
  font-size: 12.5px;
  color: var(--jwn-ink-3);
}
.jwn-food-count b { color: var(--jwn-ink); font-weight: 700; }

/* -------------------------------------------------------- menu spread --- */

.jwn-food-menus { column-gap: clamp(28px, 4.4vw, 56px); }
.jwn-food-menus [hidden] { display: none !important; }

@media (min-width: 760px) {
  .jwn-food-menus {
    column-count: 2;
    column-rule: 1px solid var(--jwn-hair-soft);
  }
}

.jwn-food-menu {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(30px, 3.6vw, 44px);
}
.jwn-food-menu:last-child { margin-bottom: 0; }

.jwn-food-venue {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(20px, 2.1vw, 23px); line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--jwn-ink);
  margin: 0;
}
.jwn-food-where {
  display: flex; align-items: baseline;
  margin: 7px 0 0;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-brass);
}
.jwn-food-blurb {
  margin: 10px 0 0;
  font-size: 14px; line-height: 1.58;
  color: var(--jwn-ink-3);
  max-width: 46ch;
}

.jwn-food-course { margin-top: 20px; }

/* The footnote qualifies every price in the spread, so it closes both columns
   rather than hanging off the left one like a note about the last venue. */
.jwn-food-menu-foot {
  display: block;
  max-width: none;
  margin-top: clamp(26px, 3.2vw, 36px);
  padding: 16px 0 0;
  border-left: 0;
  border-top: 1px solid var(--jwn-hair-soft);
  color: var(--jwn-ink-3);
}
.jwn-food-menu-foot > span {
  display: block;
  max-width: 82ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------- Jazzy --- */

.jwn-food-jazzy {
  padding: clamp(26px, 4vw, 52px) clamp(20px, 3.4vw, 46px);
  border: 1px solid oklch(50% 0.10 22 / 0.55);
  border-radius: var(--jwn-r-lg);
  /* A woven brass pinstripe over the velvet, so the panel has a surface
     rather than a flat two-stop wash. */
  background:
    repeating-linear-gradient(135deg, oklch(86% 0.128 88 / 0.032) 0 1px, transparent 1px 8px),
    radial-gradient(120% 70% at 50% 0%, oklch(86% 0.128 88 / 0.10), transparent 60%),
    radial-gradient(110% 60% at 50% 100%, oklch(6% 0.02 258 / 0.34), transparent 72%),
    linear-gradient(180deg, var(--jwn-velvet), var(--jwn-velvet-2));
  box-shadow: var(--jwn-sh);
}

/* On a panel this size an 18px bracket reads as a clipped corner, and two of
   them read as an accident, so this instance gets four full-size corners. */
.jwn-food-jazzy.jwn-bracket::before,
.jwn-food-jazzy.jwn-bracket::after { width: 40px; height: 40px; }
.jwn-food-jazzy-head::before,
.jwn-food-jazzy-foot::after {
  content: "";
  position: absolute;
  width: 40px; height: 40px;
  border: 1px solid var(--jwn-hair);
  pointer-events: none;
}
.jwn-food-jazzy-head::before { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
.jwn-food-jazzy-foot::after { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }

.jwn-food-jazzy-head { text-align: center; max-width: 68ch; margin: 0 auto; }
.jwn-food-jazzy-title {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--jwn-ink);
  margin: 0;
  text-wrap: balance;
}
/* Marquee bulbs at 6px and half opacity are invisible at arm's length. */
.jwn-food-jazzy-bulbs { margin: 18px 0 0; gap: 14px; }
.jwn-food-jazzy-bulbs .jwn-bulb {
  width: 9px; height: 9px;
  opacity: .85;
  box-shadow: 0 0 12px oklch(86% 0.128 88 / 0.75);
}
.jwn-food-jazzy-lede {
  margin: 16px auto 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.62;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

.jwn-food-jazzy-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 44px);
  margin-top: clamp(28px, 3.6vw, 44px);
}
@media (min-width: 960px) {
  .jwn-food-jazzy-body {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    align-items: start;
  }
  .jwn-food-jazzy-side {
    border-left: 1px solid oklch(66% 0.098 80 / 0.26);
    padding-left: clamp(26px, 3vw, 40px);
  }
}

.jwn-food-jazzy-menus { min-width: 0; }
.jwn-food-jazzy-side { min-width: 0; }

.jwn-food-jazzy-menucap {
  margin: 0 0 16px;
  font-family: var(--jwn-ui); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-food-jazzy-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px clamp(24px, 3vw, 40px); }
@media (min-width: 620px) {
  .jwn-food-jazzy-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jwn-food-jazzy-col { min-width: 0; }
.jwn-food-jazzy-col .jwn-food-course-h:not(:first-child) { margin-top: 24px; }
.jwn-food-jazzy .jwn-food-item + .jwn-food-item { border-top-color: oklch(70% 0.06 22 / 0.22); }

.jwn-food-jazzy-sideh { margin-bottom: 14px; color: var(--jwn-ink-2); }

/* Term rows. The dotted leader is a flex pseudo ordered between dt and dd,
   which keeps the dl markup strictly valid. */
.jwn-food-terms { margin: 0; padding: 0; }
.jwn-food-term {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 0;
  border-top: 1px solid oklch(70% 0.06 22 / 0.22);
}
.jwn-food-term:first-child { border-top: 0; padding-top: 0; }
.jwn-food-term::before {
  content: ""; order: 2; flex: 1 1 20px; min-width: 20px;
  height: 1px; align-self: flex-end; margin-bottom: 5px;
  background-image: radial-gradient(circle, var(--jwn-hair) 0.5px, transparent 0.5px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.jwn-food-term dt {
  order: 1;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--jwn-ink-2);
}
.jwn-food-term dd {
  order: 3; margin: 0; flex: none;
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: 13.5px; line-height: 1.35;
  color: var(--jwn-gold);
  text-align: right;
}

.jwn-food-jazzy-stat {
  margin: 24px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid oklch(66% 0.098 80 / 0.3);
}
/* The one number on this panel that summarises the list beside it, so it is
   set in the same face and the same figures as every price in that list. */
.jwn-food-jazzy-stat .jwn-stat-v {
  font-family: var(--jwn-ui); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -0.015em;
  color: var(--jwn-gold);
}
.jwn-food-jazzy-stat .jwn-stat-k,
.jwn-food-jazzy-stat .jwn-stat-note { color: var(--jwn-ink-3); }
.jwn-food-jazzy-note {
  margin: 18px 0 0;
  border-left-color: oklch(66% 0.098 80 / 0.45);
  color: var(--jwn-ink-2);
}
.jwn-food-jazzy-note strong { color: var(--jwn-ink); }

.jwn-food-jazzy-foot {
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding-top: 16px;
  border-top: 1px solid oklch(70% 0.06 22 / 0.22);
  font-size: 12.5px; line-height: 1.55;
  color: var(--jwn-ink-3);
  text-align: center;
}

/* ------------------------------------------------------ nothing free --- */

.jwn-food-free {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 38px);
  margin-top: clamp(30px, 4vw, 46px);
  padding: clamp(22px, 2.8vw, 32px);
}
.jwn-food-free-main { min-width: 0; }
.jwn-food-free .jwn-h3 { margin-bottom: 12px; }
.jwn-food-free .jwn-p { max-width: 62ch; }
.jwn-food-free-terms { min-width: 0; }
.jwn-food-free-terms .jwn-food-term { border-top-color: oklch(70% 0.06 22 / 0.26); }

/* The card is wider than its own text, so the ledger of what the event does
   not sell takes the right hand third rather than leaving it empty. */
@media (min-width: 860px) {
  .jwn-food-free {
    grid-template-columns: minmax(0, 1.12fr) minmax(250px, 0.88fr);
    align-items: start;
  }
  .jwn-food-free-terms {
    border-left: 1px solid oklch(66% 0.098 80 / 0.26);
    padding-left: clamp(24px, 2.6vw, 38px);
  }
}

/* ------------------------------------------------------------ mobile --- */

@media (max-width: 620px) {
  /* The sticky bar is borrowed viewport, so it stays as short as it can. */
  .jwn-food-toolbar { gap: 8px; padding: 8px 10px; }
  .jwn-food-count { font-size: 11.5px; }
  .jwn-food-calc-lab { letter-spacing: 0.1em; }
  .jwn-food-item.is-pick { margin-inline: -10px; padding-inline: 10px; }
  .jwn-food-jazzy-head { text-align: left; }
  .jwn-food-jazzy-head .jwn-eyebrow.is-centered { justify-content: flex-start; }
  .jwn-food-jazzy-head .jwn-eyebrow.is-centered::before { display: none; }
  .jwn-food-jazzy-bulbs { justify-content: flex-start; }
  .jwn-food-jazzy-lede { margin-inline: 0; }
  .jwn-food-jazzy-foot { text-align: left; }
  .jwn-food-jazzy.jwn-bracket::before,
  .jwn-food-jazzy.jwn-bracket::after,
  .jwn-food-jazzy-head::before,
  .jwn-food-jazzy-foot::after { width: 22px; height: 22px; }
  .jwn-food-menu-foot > span { margin-inline: 0; }
}

/* On a phone the estimator stops being a row of three and becomes a proper
   stacked form, label left and control right, with full-width tap targets. */
@media (max-width: 470px) {
  .jwn-food-calc-ctl { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .jwn-food-calc-field {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--jwn-line);
  }
  .jwn-food-calc-field:last-child { padding-bottom: 0; border-bottom: 0; }
  .jwn-food-calc-lab { font-size: 11px; letter-spacing: 0.12em; }
  .jwn-food-calc-in { width: 104px; flex: none; }
}

/* ==== 80-rides.css ==== */
/* ====================================================== rides + waits ===
   The quantitative centrepiece. A paired-bar chart, peak December standby
   against the party waits, drawn from inline --w custom properties so the
   whole thing is correct with JavaScript disabled. The bars only animate
   when the base reveal layer is armed (.jwn-anim), and they sit at full
   width instantly for anyone who asked for less motion.

   Three rules hold this section together:
     - one body size (16px), one annotation size (13.5px), two micro sizes
       (10.5px caps, 12px pills and multiples);
     - one numeric voice. Playfair has no tabular figures, so every figure
       that has to line up vertically is set in the UI face instead;
     - one anchor line. Rows start their bars and their saved figure at a
       fixed offset from the row top, however the ride name wraps.
   ======================================================================== */

/* ------------------------------------------------------------ section --- */

.jwn-rides-sec .jwn-lede { max-width: 560px; }
.jwn-rides-sec .jwn-p { font-size: 16px; max-width: 545px; }
.jwn-rides-sec .jwn-stat-note { max-width: 250px; }
.jwn-rides-sec .jwn-pill { font-size: 12px; }

/* One numeric voice. The UI face is genuinely tabular, so stacked figures and
   the rank column stop jittering from row to row. */
.jwn-rides-sec .jwn-stat-v,
.jwn-rides-saved-v,
.jwn-rides-rank {
  font-family: var(--jwn-ui);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.jwn-rides-nb { white-space: nowrap; }

/* ------------------------------------------------------------- thesis --- */

.jwn-rides-thesis {
  flex: 0 1 262px;
  align-self: flex-end;
  padding: 17px 20px 19px;
  border: 1px solid var(--jwn-hair);
  border-radius: var(--jwn-r);
  background:
    linear-gradient(180deg, var(--jwn-gold-wash), transparent 62%),
    oklch(12% 0.03 258 / 0.55);
}
.jwn-rides-thesis .jwn-stat-k { color: var(--jwn-ink-3); }
/* Supporting figure, not a rival headline. The section's one hero number is
   the time handed back, down in the totals panel. */
.jwn-rides-thesis .jwn-stat-v {
  font-size: clamp(26px, 3vw, 32px);
  color: var(--jwn-gold);
}
.jwn-rides-thesis .jwn-stat-note { max-width: 210px; }

/* ------------------------------------------------- lightning lane plate --- */

.jwn-rides-ll {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 46px);
  border-radius: var(--jwn-r-lg);
}
.jwn-rides-ll-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  color: var(--jwn-gold);
  border: 1px solid oklch(66% 0.098 80 / 0.45);
  background: oklch(12% 0.03 258 / 0.45);
}
.jwn-rides-ll-body .jwn-h3 { margin-bottom: 12px; }

/* -------------------------------------------------------------- figure --- */

.jwn-rides-figure {
  /* Shared column geometry. The axis, every row and the gridlines are all
     built from these, which is what keeps the scale honest. */
  --idcol: 238px;
  --savedcol: 128px;
  --rowgap: clamp(14px, 2vw, 28px);
  --barlabel: 72px;
  --barval: 58px;
  --bargap: 10px;
  --cols: var(--idcol) minmax(0, 1fr) var(--savedcol);
  --barcols: var(--barlabel) minmax(0, 1fr) var(--barval);
  --pad: 10px;
  --grid-ink: oklch(72% 0.05 258 / 0.15);

  position: relative;
  margin: clamp(34px, 4.6vw, 56px) 0 0;
  padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2.4vw, 28px) clamp(14px, 1.8vw, 20px);
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r-lg);
  /* The brass top light is a background layer rather than a pseudo element, so
     both pseudos stay free for the deco corner brackets. */
  background:
    linear-gradient(90deg, transparent, var(--jwn-hair) 20%, var(--jwn-hair) 80%, transparent) left top / 100% 1px no-repeat,
    radial-gradient(120% 80% at 82% 0%, oklch(30% 0.075 22 / 0.13), transparent 62%),
    linear-gradient(180deg, oklch(22% 0.045 258 / 0.85), oklch(17% 0.04 258 / 0.6));
  box-shadow: var(--jwn-sh-sm);
}

.jwn-rides-cap {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 28px;
  padding-bottom: clamp(16px, 2vw, 22px);
}
.jwn-rides-cap-text { flex: 1 1 min(460px, 100%); }
.jwn-rides-cap-p {
  margin: 10px 0 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--jwn-ink-3);
  max-width: 460px;
  text-wrap: pretty;
}
.jwn-rides-cap-tools {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px;
}

.jwn-rides-key {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 0; padding: 0; list-style: none;
}
.jwn-rides-key li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  white-space: nowrap;
}
.jwn-rides-key-sw {
  width: 26px; height: 9px; border-radius: 999px; flex: none;
}
.jwn-rides-key-sw.is-peak { background: linear-gradient(90deg, oklch(54% 0.15 22), oklch(64% 0.17 22)); }
.jwn-rides-key-sw.is-party { background: linear-gradient(90deg, var(--jwn-gold-2), var(--jwn-gold)); }

/* ----------------------------------------------------------- sort ------- */
/* Enhancement only. Ships hidden, revealed by 80-rides.js. */

.jwn-rides-sort { display: flex; flex-direction: column; gap: 8px; }
.jwn-rides-sort[hidden] { display: none; }
.jwn-rides-sort-k {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}

/* ---------------------------------------------------------------- axis --- */

.jwn-rides-axis {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--rowgap);
  align-items: end;
  padding: 0 var(--pad) 6px;
  margin: 0 calc(var(--pad) * -1);
  border-bottom: 1px solid var(--jwn-hair-soft);
}
.jwn-rides-axis-k {
  margin: 0;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-rides-axis-in {
  display: grid;
  grid-template-columns: var(--barcols);
  column-gap: var(--bargap);
}
.jwn-rides-scale { grid-column: 2 / 3; position: relative; height: 17px; }
.jwn-rides-tick {
  position: absolute; bottom: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.jwn-rides-tick::after {
  content: ""; width: 1px; height: 5px;
  background: var(--jwn-hair);
}
.jwn-rides-tick-n {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--jwn-ink-3); line-height: 1;
}

/* --------------------------------------------------------------- chart --- */

.jwn-rides-plot { position: relative; }

/* The ticks carried down the whole column, at the same interval as the axis,
   so a reader can measure a bar anywhere in the chart and not just at the top. */
.jwn-rides-grid {
  position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0;
  left: calc(var(--idcol) + var(--rowgap) + var(--barlabel) + var(--bargap));
  right: calc(var(--savedcol) + var(--rowgap) + var(--barval) + var(--bargap));
  background-image: repeating-linear-gradient(
    90deg,
    var(--grid-ink) 0 1px,
    transparent 1px var(--jwn-tick, 20%));
  box-shadow: inset -1px 0 0 var(--grid-ink);
}

.jwn-rides-chart { list-style: none; margin: 0; padding: 0; }

.jwn-rides-row {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-areas: "id bars saved";
  column-gap: var(--rowgap);
  align-items: start;
  padding: 15px var(--pad);
  margin: 0 calc(var(--pad) * -1);
  border-bottom: 1px solid var(--jwn-line);
  border-radius: 9px;
  transition: background .2s ease;
}
.jwn-rides-row:last-child { border-bottom: 0; }

@media (hover: hover) {
  .jwn-rides-row:hover { background: oklch(86% 0.128 88 / 0.045); }
  .jwn-rides-row:hover .jwn-rides-fill.is-party { box-shadow: 0 0 16px oklch(86% 0.128 88 / 0.4); }
}
.jwn-rides-row:focus-within { background: oklch(86% 0.128 88 / 0.045); }

/* ------------------------------------------------------------ identity --- */

.jwn-rides-id { grid-area: id; min-width: 0; }

.jwn-rides-namewrap {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0;
}
.jwn-rides-rank {
  flex: none;
  font-size: 12px;
  color: var(--jwn-brass);
  letter-spacing: 0.04em;
}
.jwn-rides-name {
  font-family: var(--jwn-display); font-weight: 700;
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.2;
  color: var(--jwn-ink);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-color: oklch(66% 0.098 80 / 0.42);
  text-decoration-thickness: 1px;
  transition: color .18s ease, text-decoration-color .18s ease;
  text-wrap: balance;
}
/* The whole row is the target, which is what the row hover has always implied. */
.jwn-rides-name::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: 9px;
}
@media (hover: hover) {
  .jwn-rides-row:hover .jwn-rides-name { color: var(--jwn-gold); }
  .jwn-rides-name:hover { color: var(--jwn-gold); text-decoration: underline; text-decoration-color: currentColor; }
}
.jwn-rides-name:focus-visible { text-decoration: none; }

.jwn-rides-land {
  margin: 5px 0 0 22px;
  font-size: 13px; line-height: 1.4;
  color: var(--jwn-ink-3);
}
.jwn-rides-flagline { margin: 9px 0 0 22px; }

/* ---------------------------------------------------------------- bars --- */

.jwn-rides-bars {
  grid-area: bars; min-width: 0;
  display: grid; row-gap: 7px;
  /* Fixed offset from the row top, so the bars never move as names wrap. */
  padding-top: 3px;
}

.jwn-rides-bar {
  display: grid;
  grid-template-columns: var(--barcols);
  column-gap: var(--bargap);
  align-items: center;
}
.jwn-rides-bar-k {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--jwn-ink-3);
  text-align: right;
  white-space: nowrap;
}
.jwn-rides-bar.is-party .jwn-rides-bar-k { color: var(--jwn-gold); }

.jwn-rides-track {
  position: relative;
  display: block;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  background-color: oklch(12% 0.03 258 / 0.66);
  box-shadow: inset 0 0 0 1px oklch(44% 0.04 258 / 0.3);
}
.jwn-rides-fill {
  position: absolute; inset: 0 auto 0 0;
  display: block;
  width: var(--w, 0%);
  min-width: 5px;
  border-radius: 999px;
}
/* The dark end of this gradient is the origin every reader anchors on, so it
   has to clear 3:1 against the track on its own, not only at its light end. */
.jwn-rides-fill.is-peak {
  background: linear-gradient(90deg, oklch(54% 0.15 22), oklch(64% 0.17 22));
  box-shadow: inset 0 1px 0 oklch(78% 0.17 22 / 0.3);
}
.jwn-rides-fill.is-party {
  background: linear-gradient(90deg, var(--jwn-gold-2), var(--jwn-gold));
  box-shadow: 0 0 10px oklch(86% 0.128 88 / 0.22);
  transition: box-shadow .2s ease;
}

.jwn-rides-bar-v {
  display: grid;
  grid-template-columns: 2ch auto;
  column-gap: 4px;
  align-items: baseline;
  font-size: 13px;
}
.jwn-rides-num { text-align: right; font-weight: 700; color: var(--jwn-ink); }
.jwn-rides-bar.is-party .jwn-rides-num { color: var(--jwn-gold); }
.jwn-rides-u {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}

/* --------------------------------------------------------------- saved --- */

.jwn-rides-saved {
  grid-area: saved;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; margin: 0;
  padding-top: 1px;
  text-align: right;
}
.jwn-rides-saved-v {
  font-size: clamp(19px, 2vw, 22px); line-height: 1;
  color: var(--jwn-ink);
}
.jwn-rides-saved-k {
  font-family: var(--jwn-ui); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jwn-ink-3);
}
.jwn-rides-saved-x {
  margin-top: 5px;
  font-family: var(--jwn-ui); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jwn-gold);
  white-space: nowrap;
}

/* ----------------------------------------------------------- footnotes --- */
/* Rows carry no prose, so the chart stays uniform top to bottom. The handful
   of rides that need saying something sit here instead. */

.jwn-rides-fn {
  list-style: none;
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  padding: clamp(14px, 1.8vw, 18px) 0 0;
  border-top: 1px solid var(--jwn-hair-soft);
  display: grid; gap: 9px;
}
.jwn-rides-fn-i { display: flex; align-items: flex-start; gap: 11px; }
.jwn-rides-fn-m {
  flex: none; width: 14px; height: 1px; margin-top: 10px;
  background: var(--jwn-brass);
}
.jwn-rides-fn-p {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--jwn-ink-3);
  max-width: 560px;
  text-wrap: pretty;
}
.jwn-rides-fn-p strong { color: var(--jwn-ink-2); font-weight: 700; }

/* ------------------------------------------------------ bar animation --- */
/* Only armed when the base reveal layer is on. Without JS the bars are
   already at their inline width, which is the whole point. */
.jwn-anim .jwn-rides-fill {
  width: 0;
  transition: width .95s cubic-bezier(.22, .75, .28, 1);
}
.jwn-anim .jwn-rides-fill.is-peak { transition-delay: .05s; }
.jwn-anim .jwn-rides-fill.is-party { transition-delay: .24s; }
.jwn-anim .jwn-rides-row.is-in .jwn-rides-fill { width: var(--w, 0%); }

@media (prefers-reduced-motion: reduce) {
  .jwn-anim .jwn-rides-fill { width: var(--w, 0%); transition: none; }
}

/* --------------------------------------------------------------- total --- */

.jwn-rides-total {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: start;
  margin-top: clamp(28px, 3.6vw, 44px);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r-lg);
  background: linear-gradient(150deg, oklch(25% 0.05 258 / 0.72), oklch(18% 0.042 258 / 0.5));
}

.jwn-rides-total-stats { margin: 0; }
.jwn-rides-total-stat { padding: 14px 0; border-bottom: 1px solid var(--jwn-line); }
.jwn-rides-total-stat:first-child { padding-top: 0; }
.jwn-rides-total-stat:last-child { padding-bottom: 0; border-bottom: 0; }
.jwn-rides-total-stat dd { margin: 0; }
.jwn-rides-total-stat .jwn-stat-v { font-size: clamp(22px, 2.4vw, 26px); }
/* The one hero figure in the section. Everything else is evidence for it. */
.jwn-rides-total-stat.is-lead .jwn-stat-v { color: var(--jwn-gold); font-size: clamp(34px, 4.4vw, 46px); }
.jwn-rides-total-stat.is-lead .jwn-stat-k { color: var(--jwn-gold-2); }

.jwn-rides-total-body .jwn-eyebrow { margin-bottom: 12px; }

/* -------------------------------------------------------------- cards --- */

.jwn-rides-cards {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: var(--jwn-gap);
  /* Same air as every other block boundary in this section. */
  margin-top: clamp(28px, 3.6vw, 44px);
}
.jwn-rides-card { border-radius: var(--jwn-r-lg); }
.jwn-rides-card .jwn-h3 { margin: 4px 0 12px; }
.jwn-rides-card.is-lead .jwn-eyebrow { color: var(--jwn-gold); }
.jwn-rides-bulbs { justify-content: flex-start; gap: 11px; margin-bottom: 14px; }

/* ------------------------------------------------------------- closed --- */

.jwn-rides-closed {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}
.jwn-rides-closed-head .jwn-h3 { margin-bottom: 12px; }

.jwn-rides-closed-groups { display: grid; gap: clamp(18px, 2.4vw, 26px); }

/* A playbill, not a table. Group heading with a stepped brass diamond, then
   the names with dotted brass leaders running out to their reason. */
.jwn-rides-closed-k {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px;
  font-family: var(--jwn-ui); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jwn-gold-2);
}
.jwn-rides-closed-k::before {
  content: ""; flex: none; width: 7px; height: 7px;
  background: var(--jwn-brass);
  transform: rotate(45deg);
}
.jwn-rides-closed-k::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--jwn-hair), transparent);
}

.jwn-rides-closed-list { list-style: none; margin: 0; padding: 0; }
.jwn-rides-closed-item {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jwn-line);
}
.jwn-rides-closed-item:last-child { border-bottom: 0; }
.jwn-rides-closed-name {
  flex: 0 1 auto; min-width: 0;
  font-family: var(--jwn-display); font-weight: 700; font-size: 16px;
  line-height: 1.3;
  color: var(--jwn-ink);
}
/* The dotted brass leader, sitting on the name's own baseline. */
.jwn-rides-closed-lead {
  flex: 1 1 28px; min-width: 20px; height: 1px;
  margin-bottom: -3px;
  background-image: radial-gradient(circle, var(--jwn-hair) 0.5px, transparent 0.5px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.jwn-rides-closed-why {
  /* Narrow enough that the longest name still keeps its reason on the same
     line, so every reason in the block starts at the same edge. */
  flex: 0 1 340px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--jwn-ink-3);
  text-wrap: pretty;
}

/* ===================================================== 1080 and under === */

@media (max-width: 1080px) {
  .jwn-rides-figure {
    --idcol: 200px;
    --savedcol: 112px;
    --barlabel: 64px;
    --barval: 54px;
  }
}

/* ====================================================== 920 and under === */
/* Mobile is its own layout: the identity block and the saving share a line,
   the bars run the full width underneath. */

@media (max-width: 920px) {
  .jwn-rides-figure { --barlabel: 58px; --barval: 52px; }

  .jwn-rides-axis {
    display: block;
    padding-bottom: 8px;
  }
  .jwn-rides-axis-k { margin-bottom: 7px; }

  /* Bars are full width now, so the gridlines only clear the label and value. */
  .jwn-rides-grid {
    left: calc(var(--barlabel) + var(--bargap));
    right: calc(var(--barval) + var(--bargap));
  }

  .jwn-rides-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id saved"
      "bars bars";
    padding-block: 18px;
  }
  .jwn-rides-bars { margin-top: 14px; padding-top: 0; }
  .jwn-rides-saved { padding-left: 14px; }
  .jwn-rides-saved-v { font-size: 20px; }

  .jwn-rides-total { grid-template-columns: minmax(0, 1fr); }
  .jwn-rides-cards { grid-template-columns: minmax(0, 1fr); }
  .jwn-rides-closed { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================== 640 and under === */

@media (max-width: 640px) {
  .jwn-rides-thesis { flex: 1 1 100%; align-self: stretch; }
  .jwn-rides-thesis .jwn-stat-note { max-width: none; }

  .jwn-rides-ll { grid-template-columns: minmax(0, 1fr); }
  .jwn-rides-ll-ico { width: 42px; height: 42px; }

  .jwn-rides-figure {
    /* Wider label column so "PEAK DAY" and "PARTY" can hold a legible size. */
    --barlabel: 62px;
    --barval: 50px;
    --pad: 6px;
    padding-inline: 14px;
  }
  .jwn-rides-cap { padding-bottom: 16px; }
  .jwn-rides-key { gap: 6px 16px; }
  .jwn-rides-cap-tools { gap: 12px; }

  .jwn-rides-name { display: inline-block; padding: 13px 0; font-size: 17px; }
  .jwn-rides-namewrap { align-items: center; }
  .jwn-rides-land { margin-top: 0; margin-left: 20px; }
  .jwn-rides-flagline { margin-left: 20px; }

  .jwn-rides-row { padding-block: 14px; }
  /* The two words that make the comparison legible stop being the smallest
     type on the page. */
  .jwn-rides-bar-k { font-size: 11px; letter-spacing: 0.08em; }
  .jwn-rides-track { height: 13px; }
  .jwn-rides-bar-v { font-size: 12.5px; }
  .jwn-rides-saved-v { font-size: 19px; }
  .jwn-rides-saved-k { font-size: 11px; }

  .jwn-rides-sec .jwn-stat-note { font-size: 13px; }

  /* The reason takes its own line, so the leader closes off the name line. */
  .jwn-rides-closed-why { flex: 1 1 100%; }
}

/* ==== 90-map.css ==== */
/* ============================================================== map ===
   Where everything happens. A drafted Art Deco plan of the park (inline SVG)
   with the nine lands laid over it as gold medallions, and a dossier below.

   Two layouts, not one squeezed:
     >= 940px  the plate. SVG plan, medallions absolutely placed on it.
     <  940px  the index. Plan dropped, the same links become a Deco list
               split into the same three groups the plate draws.

   One type scale for the whole section, three steps and nothing between:
     12px   labels, legend keys, category heads, counts
     13px   secondary copy, the cue, the legend note
     15px   list copy
   Nothing here goes below 12px, and the SVG type is sized so it still clears
   11px at the narrowest width that keeps the plate.
   ====================================================================== */

.jwn-map {
  margin-top: clamp(6px, 1vw, 10px);
}

/* the one instruction, above the control it describes */
.jwn-map-cue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(10px, 1.4vw, 14px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--jwn-ink-2);
}
.jwn-map-cue-mark {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--jwn-brass);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------- plate --- */

.jwn-map-figure {
  margin: 0;
  background:
    radial-gradient(120% 90% at 76% 88%, oklch(24% 0.05 262 / 0.75), transparent 62%),
    linear-gradient(180deg, oklch(17% 0.038 258), oklch(13.5% 0.034 257));
  border: 1px solid var(--jwn-line);
  border-radius: var(--jwn-r) var(--jwn-r) 0 0;
  box-shadow: var(--jwn-sh);
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px) 0;
  overflow: hidden;
}

.jwn-map-stage {
  position: relative;
}

.jwn-map-plan {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------- svg lines --- */

.jwn-map-frame {
  fill: none;
  stroke: oklch(66% 0.098 80 / 0.30);
  stroke-width: 1;
}
.jwn-map-frame-2 {
  fill: none;
  stroke: oklch(66% 0.098 80 / 0.14);
  stroke-width: 1;
}
/* true Deco corner brackets, not four floating squares */
.jwn-map-frame-mark path {
  fill: none;
  stroke: oklch(66% 0.098 80 / 0.42);
  stroke-width: 1;
}
.jwn-map-frame-mark path:nth-child(even) { stroke: oklch(66% 0.098 80 / 0.20); }

/* the two halves of the park, each a zone with a real edge */
.jwn-map-zone-edge {
  fill: none;
  stroke-width: 1;
}
.jwn-map-zone.is-front .jwn-map-zone-edge { stroke: oklch(86% 0.128 88 / 0.42); }
.jwn-map-zone.is-back .jwn-map-zone-edge { stroke: oklch(72% 0.055 230 / 0.40); }

.jwn-map-mark {
  fill: none;
  stroke: oklch(66% 0.098 80 / 0.34);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Route weight carries the argument: the lanes off the hub are broad and lit,
   everything past them is a thin quiet path. */
.jwn-map-route-bed,
.jwn-map-route-line { fill: none; }

.jwn-map-route.is-main .jwn-map-route-bed {
  stroke: oklch(86% 0.128 88 / 0.16);
  stroke-width: 14;
  stroke-linecap: round;
}
.jwn-map-route.is-main .jwn-map-route-line {
  stroke: oklch(86% 0.128 88 / 0.58);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke .28s ease, stroke-width .28s ease;
}
.jwn-map-route.is-quiet .jwn-map-route-bed {
  stroke: oklch(66% 0.098 80 / 0.07);
  stroke-width: 5;
  stroke-linecap: round;
}
.jwn-map-route.is-quiet .jwn-map-route-line {
  stroke: oklch(66% 0.098 80 / 0.42);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  transition: stroke .28s ease, stroke-width .28s ease;
}

.jwn-map-route.is-lit .jwn-map-route-bed { stroke: oklch(86% 0.128 88 / 0.24); }
.jwn-map-route.is-lit .jwn-map-route-line {
  stroke: var(--jwn-gold);
  stroke-dasharray: none;
  stroke-width: 1.5;
}

.jwn-map-entrance line,
.jwn-map-entrance path {
  fill: none;
  stroke: oklch(66% 0.098 80 / 0.55);
  stroke-width: 1;
}
.jwn-map-entrance rect {
  fill: var(--jwn-brass);
  stroke: none;
}
.jwn-map-cartouche line {
  stroke: oklch(66% 0.098 80 / 0.5);
  stroke-width: 1;
}

/* SVG type is sized in viewBox units, so it is set large enough to still
   clear 11px at 940px, the narrowest width that keeps the plate. */
.jwn-map-svg-label,
.jwn-map-svg-sub,
.jwn-map-svg-band,
.jwn-map-svg-band-2 {
  fill: var(--jwn-ink-3);
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.jwn-map-svg-title {
  fill: var(--jwn-gold);
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.jwn-map-svg-sub { letter-spacing: 0.15em; }
.jwn-map-zone.is-front .jwn-map-svg-band { fill: oklch(88% 0.09 88); }
.jwn-map-zone.is-back .jwn-map-svg-band { fill: oklch(86% 0.045 228); }
.jwn-map-svg-band-2 {
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: oklch(74% 0.038 228);
}

/* --------------------------------------------------------- medallions --- */

.jwn-map-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.jwn-map-node {
  position: absolute;
  pointer-events: auto;
  left: var(--jwn-map-x);
  top: var(--jwn-map-y);
  width: var(--jwn-map-d);
  transform: translate(-50%, -50%);
  display: block;
  text-decoration: none;
  color: var(--jwn-ink-2);
  -webkit-tap-highlight-color: transparent;
}
.jwn-map-node:hover { text-decoration: none; }

/* the little pointer that marks the chosen land without relying on colour */
.jwn-map-node::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--jwn-gold);
  transform: rotate(45deg) scale(0.2);
  opacity: 0;
  transition: opacity .24s ease, transform .24s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.jwn-map-node.is-on::before { opacity: 1; transform: rotate(45deg) scale(1); }
/* the chosen marker moves with the label so the two never stack */
.jwn-map-node.is-lbl-above::before { bottom: auto; top: calc(100% + 12px); }

.jwn-map-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 50% 8%, oklch(30% 0.05 258), oklch(20% 0.042 258));
  border: 1px solid oklch(66% 0.098 80 / 0.45);
  box-shadow:
    inset 0 0 0 4px oklch(12% 0.03 258 / 0.55),
    inset 0 0 0 5px oklch(66% 0.098 80 / 0.22),
    0 8px 22px oklch(6% 0.02 258 / 0.5);
  transition: transform .24s cubic-bezier(.2,.7,.3,1), border-color .24s ease,
              box-shadow .24s ease, background .24s ease;
}
/* a resting tap ring, so a medallion reads as a control before anyone hovers */
.jwn-map-disc::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid oklch(66% 0.098 80 / 0.26);
  transition: border-color .24s ease;
  pointer-events: none;
}
.jwn-map-disc-num {
  font-family: var(--jwn-display);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 19px);
  line-height: 1;
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
  transition: color .24s ease;
}

.jwn-map-node-name {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 132px;
  text-align: center;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 12.5px);
  line-height: 1.28;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jwn-ink-3);
  text-shadow: 0 1px 3px oklch(8% 0.02 258 / 0.9);
  transition: color .24s ease;
  pointer-events: none;
}

/* Four label positions, because a plan has to route around its own roads. */
.jwn-map-node.is-lbl-above .jwn-map-node-name { top: auto; bottom: calc(100% + 14px); }
.jwn-map-node.is-lbl-left .jwn-map-node-name {
  top: 50%;
  left: auto;
  right: calc(100% + 12px);
  transform: translateY(-50%);
  text-align: right;
}
.jwn-map-node.is-lbl-right .jwn-map-node-name {
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  text-align: left;
}

/* the count in the index layout, read out but not shown on the plate */
.jwn-map-node-stops {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* chosen */
.jwn-map-node.is-on .jwn-map-disc {
  background: linear-gradient(180deg, var(--jwn-gold), var(--jwn-gold-2));
  border-color: oklch(92% 0.10 90);
  box-shadow:
    inset 0 0 0 4px oklch(21% 0.045 70 / 0.28),
    inset 0 0 0 5px oklch(96% 0.06 90 / 0.5),
    0 0 34px oklch(86% 0.128 88 / 0.35),
    0 10px 26px oklch(6% 0.02 258 / 0.55);
}
.jwn-map-node.is-on .jwn-map-disc::after { border-color: oklch(86% 0.128 88 / 0.5); }
.jwn-map-node.is-on .jwn-map-disc-num { color: var(--jwn-gold-ink); }
.jwn-map-node.is-on .jwn-map-node-name { color: var(--jwn-gold); }

@media (hover: hover) {
  .jwn-map-node:hover .jwn-map-disc {
    transform: translateY(-2px);
    border-color: var(--jwn-gold);
    box-shadow:
      inset 0 0 0 4px oklch(12% 0.03 258 / 0.55),
      inset 0 0 0 5px oklch(86% 0.128 88 / 0.4),
      0 0 26px oklch(86% 0.128 88 / 0.22),
      0 12px 26px oklch(6% 0.02 258 / 0.5);
  }
  .jwn-map-node:hover .jwn-map-disc::after { border-color: oklch(86% 0.128 88 / 0.55); }
  .jwn-map-node:hover .jwn-map-node-name { color: var(--jwn-ink); }
  .jwn-map-node.is-on:hover .jwn-map-disc { transform: translateY(-2px); }

  /* preview highlight: the hovered land steps forward, the rest step back */
  .jwn-map-stage:has(.jwn-map-node:hover) .jwn-map-node:not(:hover) { opacity: 0.62; }
  .jwn-map-stage:has(.jwn-map-node:hover) .jwn-map-node { transition: opacity .22s ease; }
}

.jwn-map-node:focus-visible { outline-offset: 6px; border-radius: 50%; }

/* the group heads only exist in the index layout */
.jwn-map-index-h { display: none; }

/* ------------------------------------------------------------ legend --- */

.jwn-map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  margin-top: clamp(12px, 1.6vw, 18px);
  padding: 14px 2px 16px;
  border-top: 1px solid var(--jwn-hair-soft);
}
.jwn-map-legend-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jwn-map-legend-key {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jwn-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--jwn-ink-3);
}
.jwn-map-swatch {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--jwn-hair);
}
.jwn-map-legend-key.is-front .jwn-map-swatch { background: oklch(86% 0.128 88 / 0.42); }
.jwn-map-legend-key.is-back .jwn-map-swatch { background: oklch(72% 0.055 230 / 0.42); }
.jwn-map-legend-note {
  margin: 0;
  flex: 1 1 320px;
  max-width: 64ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--jwn-ink-3);
}

/* ---------------------------------------------------------- dossiers --- */

.jwn-map-panels {
  border: 1px solid var(--jwn-line);
  border-top: 0;
  border-radius: 0 0 var(--jwn-r) var(--jwn-r);
  background: linear-gradient(180deg, var(--jwn-panel-2), var(--jwn-panel));
  box-shadow: var(--jwn-sh-sm);
  overflow: hidden;
}

.jwn-map-panel {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 32px);
  scroll-margin-top: 92px;
}
.jwn-map-panel + .jwn-map-panel { border-top: 1px solid var(--jwn-line); }
.jwn-map-panel:focus-visible { outline-offset: -4px; }

/* Enhanced only. Without JS every panel stays on the page. */
.jwn-map.is-enhanced .jwn-map-panel[hidden] { display: none; }
.jwn-map.is-enhanced .jwn-map-panel + .jwn-map-panel { border-top: 0; }

.jwn-map-standfirst {
  margin: 12px 0 0;
  font-family: var(--jwn-display);
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 18.5px);
  line-height: 1.5;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}

/* The left rail carries the one thing the lists cannot: what the land
   actually cost in queue time on a measured night. */
.jwn-map-lines {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  background: var(--jwn-hair-soft);
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r-sm);
  overflow: hidden;
}
.jwn-map-line {
  background: oklch(13% 0.032 258 / 0.72);
  padding: 14px 14px 15px;
}
.jwn-map-lines dd { margin: 0; }
.jwn-map-lines-none {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  padding: 13px 14px;
  border: 1px solid var(--jwn-hair-soft);
  border-radius: var(--jwn-r-sm);
  background: oklch(13% 0.032 258 / 0.72);
  font-size: 13px;
  line-height: 1.5;
  color: var(--jwn-ink-3);
}

/* Four categories flow down two columns rather than sitting in a 2x2 with
   holes in it, so an empty land never reserves a quadrant to say nothing. */
.jwn-map-panel-lists {
  columns: 2;
  column-gap: clamp(20px, 2.6vw, 34px);
}

.jwn-map-cat {
  break-inside: avoid;
  min-width: 0;
  margin: 0 0 clamp(18px, 2.2vw, 26px);
}
.jwn-map-cat:last-child { margin-bottom: 0; }

.jwn-map-cat-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--jwn-hair-soft);
}
/* An empty category is one row, not an empty box. */
.jwn-map-cat.is-empty .jwn-map-cat-h { margin-bottom: 0; }
.jwn-map-cat-t { flex: 1 1 auto; min-width: 0; }
.jwn-map-cat-ico {
  display: inline-flex;
  flex: none;
  color: var(--jwn-brass);
}
.jwn-map-cat-ico svg { width: 15px; height: 15px; display: block; }
.jwn-map-cat-n {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--jwn-gold);
  font-variant-numeric: tabular-nums;
}
.jwn-map-cat.is-empty .jwn-map-cat-ico,
.jwn-map-cat.is-empty .jwn-map-cat-n { color: var(--jwn-ink-4); }

.jwn-map-cat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jwn-map-cat-list li {
  position: relative;
  padding: 5px 0 5px 17px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--jwn-ink-2);
  text-wrap: pretty;
}
.jwn-map-cat-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 12px;
  width: 5px;
  height: 5px;
  background: var(--jwn-brass);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------- reads --- */

.jwn-map-reads {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--jwn-gap);
  margin-top: clamp(22px, 3vw, 34px);
}
.jwn-map-read .jwn-h3 { margin-bottom: 12px; }
.jwn-map-read .jwn-note { margin-top: 16px; }

/* ============================================================ tablet === */

@media (min-width: 940px) {
  /* One height for the dossier so the reads below stop moving on every pick. */
  .jwn-map.is-enhanced .jwn-map-panels { min-height: 380px; }
}

@media (max-width: 1120px) {
  .jwn-map-node-name { max-width: 116px; letter-spacing: 0.08em; }
}

@media (max-width: 1040px) {
  .jwn-map-panel { grid-template-columns: 1fr; }
  .jwn-map-panel-lead { max-width: 60ch; }
}

@media (max-width: 880px) {
  .jwn-map-reads { grid-template-columns: 1fr; }
}

/* ========================================================= the index === */
/* Below 940px the plan's own type would fall under 11px, so the plan goes and
   the same links become a typographic index of the park, carrying the front,
   middle and back split in words instead of colour. */

@media (max-width: 939px) {
  .jwn-map-plan { display: none; }

  .jwn-map-figure {
    padding: clamp(14px, 3vw, 18px);
    border-radius: var(--jwn-r) var(--jwn-r) 0 0;
  }

  .jwn-map-nodes {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 8px;
    pointer-events: auto;
  }

  .jwn-map-index-h {
    display: block;
    grid-column: 1 / -1;
    margin: 18px 0 4px;
    font-family: var(--jwn-ui);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jwn-gold);
  }
  .jwn-map-index-h:first-child { margin-top: 2px; }

  .jwn-map-node {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 9px 40px 10px 14px;
    border: 1px solid var(--jwn-line);
    border-radius: 999px;
    background: oklch(12% 0.03 258 / 0.5);
  }
  .jwn-map-node::before {
    left: auto;
    right: 16px;
    bottom: auto;
    top: 50%;
    margin: -4px 0 0;
  }
  .jwn-map-node.is-lbl-above::before { top: 50%; }

  /* The medallion carries a number the index explains in words instead. */
  .jwn-map-disc { display: none; }

  .jwn-map-node-name,
  .jwn-map-node.is-lbl-above .jwn-map-node-name,
  .jwn-map-node.is-lbl-left .jwn-map-node-name,
  .jwn-map-node.is-lbl-right .jwn-map-node-name {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    text-align: left;
    pointer-events: auto;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-transform: none;
    color: var(--jwn-ink);
    text-shadow: none;
  }

  .jwn-map-node-stops {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-family: var(--jwn-ui);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--jwn-ink-4);
  }

  .jwn-map-node.is-on {
    border-color: oklch(66% 0.098 80 / 0.55);
    background: var(--jwn-gold-wash);
  }
  .jwn-map-node.is-on .jwn-map-node-name { color: var(--jwn-gold); }
  .jwn-map-node.is-on .jwn-map-node-stops { color: var(--jwn-ink-3); }
  .jwn-map-node:focus-visible { border-radius: 999px; outline-offset: 2px; }

  /* The keys describe washes on a plan that is not on screen at this width. */
  .jwn-map-legend { padding-bottom: 4px; }
  .jwn-map-legend-keys { display: none; }
  .jwn-map-legend-note { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 560px) {
  .jwn-map-panel { padding: 20px 16px 24px; }
  .jwn-map-panel-lists { columns: 1; }
  .jwn-map-lines { grid-auto-flow: row; }
  .jwn-map-nodes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .jwn-map-node::before,
  .jwn-map-disc,
  .jwn-map-disc::after,
  .jwn-map-route-line { transition: none; }
}