/** Shopify CDN: Minification failed

Line 712:19 Unexpected "{"
Line 712:28 Expected ":"
Line 720:19 Unexpected "{"
Line 720:28 Expected ":"
Line 728:19 Unexpected "{"
Line 728:28 Expected ":"
Line 737:19 Unexpected "{"
Line 737:28 Expected ":"
Line 743:19 Unexpected "{"
Line 743:28 Expected ":"
... and 92 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:footer (INDEX:11) */
/* ---- payment marks ------------------------------------------------------
   Centred in the band between the menu columns and the wordmark. Card marks
   keep their own colours - the networks' guidelines do not allow
   recolouring or desaturating them, so only scale and a resting opacity are
   ours to set. */
.sh-ftr__pay { display: flex; justify-content: center; }

.sh-ftr__pay .payment-icon-list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; list-style: none; margin: 0; padding: 0;
}
.sh-ftr__pay .payment-icon-list li { margin: 0; line-height: 0; }
.sh-ftr__pay .payment-icon {
  display: block; height: 24px; width: auto; opacity: .66;
  transition: opacity .4s var(--sh-ease, ease);
}
.sh-ftr__pay .payment-icon-list li:hover .payment-icon { opacity: 1; }

/* ---- oversized wordmark ------------------------------------------------
   Full size, at the merchant's opacity. Static: no clip-path, no transform,
   no script, so it can never reserve height it then fails to fill. */
.sh-ftr__wordmark { opacity: var(--sh-ftr-wm-o, .26); }
.sh-ftr__wordmark img {
  display: block; width: 100%;
  height: auto;   /* real artwork at its own 3065:369 ratio - never distorted */
}

/* ==========================================================================
   HEIGHT COMPACTION
   Vertical spacing only. Original in assets/spicy-footer.css, then each pass:

     footer top padding      180 -> 112 -> 74 -> 54
     above the menu columns  140 ->  88 -> 58 -> 37
     brand col: contact       32 ->  32 -> 18 -> 13
     brand col: newsletter    44 ->  44 -> 22 -> 15
     brand col: social        44 ->  44 -> 20 -> 13
     above the payment row    84 ->  52 -> 36 -> 26
     above the wordmark       84 ->  52 -> 36 -> 26
     above the copyright     150 ->  26 -> 18 -> 13
     footer bottom padding    52 ->  34 -> 24 -> 17

   Deliberately NOT touched, because each would cross from spacing into
   design or brand:
     - .sh-ftr__mark's bottom margin: the brand book's clear zone (half the
       mark's width). It is a minimum, not slack.
     - the wordmark artwork's height: fixed at 12% of container width by the
       3065x369 logotype ratio, so shrinking it means rescaling the logo.
     - .sh-ftr__statement: type size.

   assets/spicy-footer.css is shared and read-only, so every override below
   is written to outrank its original on SPECIFICITY rather than load order
   (section stylesheets and theme assets are separate files and their order
   is not something this section can depend on):
     footer.sh-ftr        - element + class beats the bare .sh-ftr
     .sh-ftr__inner > ... - two classes beat one
   ========================================================================== */

/* Left/right padding stays on the original shorthand's var(--sh-gutter),
   which is why only the block sides are named here. */
footer.sh-ftr {
  padding-top: clamp(34px, 4.2vw, 56px);
  padding-bottom: clamp(12px, 1.3vw, 18px);
}

.sh-ftr__inner > .sh-ftr__grid { margin-top: clamp(24px, 2.9vw, 40px); }

/* Column gap only - the desktop track definition is untouched, so the number
   and arrangement of columns is exactly as before. */
@media (min-width: 1040px) {
  .sh-ftr__inner > .sh-ftr__grid--mega { gap: clamp(28px, 2.6vw, 44px); }
}

/* The brand column is the tallest, so it sets the grid's height - but only
   down to ~314px, where the Customer Service column takes over as the floor.
   These are already close to that floor; trimming them further buys nothing. */
.sh-ftr__inner .sh-ftr__col--brand .sh-ftr__contact { margin-top: clamp(10px, 1.1vw, 14px); }
.sh-ftr__inner .sh-ftr__form { margin-top: clamp(11px, 1.2vw, 16px); }
.sh-ftr__inner .sh-ftr__social { margin-top: clamp(10px, 1.1vw, 14px); }

.sh-ftr__inner > .sh-ftr__pay,
.sh-ftr__inner > .sh-ftr__wordmark { margin-top: clamp(17px, 2vw, 27px); }

/* .sh-ftr__bottom carries margin-top: clamp(80px, 10vw, 150px) from
   spicy-footer.css, sized for when the copyright sat directly under the menu
   columns. With the wordmark now between them that gap stranded the wordmark
   in an empty band. Closed up here, but ONLY when a wordmark actually
   precedes the rule, so the original spacing still applies if it is off. */
.sh-ftr__wordmark + .sh-ftr__bottom { margin-top: clamp(8px, 1vw, 13px); }

/* Mobile: same stacking order, same breakpoint, same elements - these are
   the identical spacers scaled by the same proportion as desktop. */
@media (max-width: 620px) {
  .sh-ftr__pay .payment-icon { height: 20px; }
  .sh-ftr__inner > .sh-ftr__pay,
  .sh-ftr__inner > .sh-ftr__wordmark { margin-top: clamp(16px, 4vw, 24px); }
  .sh-ftr__wordmark + .sh-ftr__bottom { margin-top: clamp(8px, 2.4vw, 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .sh-ftr__pay .payment-icon { transition: none; }
}
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:12) */
/* The WhatsApp control. Sized in em throughout so it inherits whatever
   font-size and colour the strip already sets - nothing here needs to know
   the values in assets/spicy-header.css, and it cannot drift from them. */
.sh-hdr__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.sh-hdr__wa svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

/* Narrow screens: the glyph alone. The label is clipped rather than removed,
   so it is still the link's accessible name - display:none would strip it
   from the accessibility tree and leave an unlabelled link. */
@media (max-width: 600px) {
  .sh-hdr__wa-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}
/* END_SECTION:header */

/* START_SECTION:luxury-tv-units (INDEX:14) */
.sh-tv-luxury {
  --tv-ground: #f2eee6;
  --tv-ink: #1d1915;
  --tv-muted: #776f66;
  --tv-line: rgba(29, 25, 21, .16);
  --tv-brass: #9d7a41;
  --tv-dark: #17120e;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 30%),
    var(--tv-ground);
  color: var(--tv-ink);
  overflow: hidden;
}

.sh-tv-luxury__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(34px, 5vw, 86px);
  max-width: var(--sh-maxw, 1600px);
  margin: 0 auto;
  padding: clamp(68px, 8vw, 132px) var(--sh-gutter, clamp(20px, 4vw, 72px)) clamp(36px, 5vw, 72px);
}

.sh-tv-luxury__copy {
  max-width: 690px;
}

.sh-tv-luxury__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--tv-muted);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
}

.sh-tv-luxury__kicker span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tv-brass);
}

.sh-tv-luxury__heading {
  max-width: 12ch;
  margin: 0;
  color: var(--tv-ink);
  font-family: var(--sh-font-display, serif);
  font-size: clamp(2.55rem, 5.6vw, 6.8rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: .92;
}

.sh-tv-luxury__lede {
  max-width: 58ch;
  margin-top: clamp(22px, 3vw, 34px);
  color: var(--tv-muted);
  font-family: var(--sh-font-body, sans-serif);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 400;
  line-height: 1.72;
}

.sh-tv-luxury__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.sh-tv-luxury__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--tv-ink);
  color: var(--tv-ink);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 220ms ease, background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.sh-tv-luxury__button--primary {
  background: var(--tv-ink);
  color: #f7f1e8;
}

.sh-tv-luxury__button:hover,
.sh-tv-luxury__button:focus-visible {
  transform: translateY(-2px);
}

.sh-tv-luxury__button--primary:hover,
.sh-tv-luxury__button--primary:focus-visible {
  background: var(--tv-brass);
  border-color: var(--tv-brass);
}

.sh-tv-luxury__button--secondary:hover,
.sh-tv-luxury__button--secondary:focus-visible {
  background: var(--tv-ink);
  color: #f7f1e8;
}

.sh-tv-luxury__process {
  display: grid;
  gap: 0;
  margin: clamp(34px, 4.5vw, 58px) 0 0;
  padding: 0;
  border-top: 1px solid var(--tv-line);
  list-style: none;
}

.sh-tv-luxury__step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 19px 0;
  border-bottom: 1px solid var(--tv-line);
}

.sh-tv-luxury__number {
  grid-row: 1 / span 2;
  color: var(--tv-brass);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .7rem;
  letter-spacing: .16em;
  line-height: 1.35;
}

.sh-tv-luxury__step strong {
  color: var(--tv-ink);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sh-tv-luxury__step p {
  margin: 0;
  color: var(--tv-muted);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .93rem;
  line-height: 1.62;
}

.sh-tv-luxury__visual {
  min-width: 0;
}

.sh-tv-luxury__figure {
  position: relative;
  min-height: clamp(560px, 70svh, 790px);
  margin: 0;
  overflow: hidden;
  background: var(--tv-dark);
  isolation: isolate;
}

.sh-tv-luxury__image,
.sh-tv-luxury__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sh-tv-luxury__image {
  object-fit: cover;
  transform: scale(1.015);
}

.sh-tv-luxury__placeholder {
  background:
    linear-gradient(135deg, rgba(157, 122, 65, .24), rgba(23, 18, 14, 0) 46%),
    #2b241e;
}

.sh-tv-luxury__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 14, 10, .58), rgba(18, 14, 10, .16) 46%, rgba(18, 14, 10, .52)),
    linear-gradient(180deg, rgba(18, 14, 10, .12), rgba(18, 14, 10, .54));
  pointer-events: none;
}

.sh-tv-luxury__note {
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 42px);
  z-index: 2;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100% - 36px));
  padding: 22px;
  border: 1px solid rgba(247, 241, 232, .28);
  background: rgba(23, 18, 14, .62);
  color: #f7f1e8;
  backdrop-filter: blur(12px);
}

.sh-tv-luxury__note strong {
  font-family: var(--sh-font-display, serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
}

.sh-tv-luxury__note span {
  color: rgba(247, 241, 232, .78);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .88rem;
  line-height: 1.55;
}

.sh-tv-luxury__hotspot {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f7f1e8;
  cursor: pointer;
}

.sh-tv-luxury__hotspot--one {
  left: 30%;
  top: 54%;
}

.sh-tv-luxury__hotspot--two {
  left: 62%;
  top: 31%;
}

.sh-tv-luxury__hotspot--three {
  left: 72%;
  top: 68%;
}

.sh-tv-luxury__pin {
  position: absolute;
  inset: 5px;
  display: block;
  border: 1px solid rgba(247, 241, 232, .92);
  border-radius: 50%;
  background: var(--tv-brass);
  box-shadow: 0 0 0 8px rgba(157, 122, 65, .16);
}

.sh-tv-luxury__pin::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(247, 241, 232, .55);
  border-radius: 50%;
  transform: scale(.72);
  opacity: .7;
  animation: sh-tv-pulse 2.8s ease-out infinite;
}

.sh-tv-luxury__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: min(230px, 52vw);
  padding: 9px 12px;
  background: rgba(247, 241, 232, .95);
  color: var(--tv-ink);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .72rem;
  line-height: 1.35;
  text-align: left;
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.sh-tv-luxury__hotspot:hover .sh-tv-luxury__tooltip,
.sh-tv-luxury__hotspot:focus-visible .sh-tv-luxury__tooltip {
  transform: translate(-50%, 0);
  opacity: 1;
}

.sh-tv-luxury__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(29, 25, 21, .14);
  border-top: 0;
  list-style: none;
}

.sh-tv-luxury__features li {
  min-width: 0;
  padding: 14px 16px;
  color: var(--tv-muted);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .72rem;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.sh-tv-luxury__features li + li {
  border-left: 1px solid rgba(29, 25, 21, .14);
}

.sh-tv-luxury__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: var(--sh-maxw, 1600px);
  margin: 0 auto;
  padding: 0 var(--sh-gutter, clamp(20px, 4vw, 72px)) clamp(68px, 8vw, 132px);
}

.sh-tv-luxury__card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 220px;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid var(--tv-line);
  background: rgba(255, 252, 247, .38);
  transition: transform 220ms ease, background-color 220ms ease;
}

.sh-tv-luxury__card span {
  color: var(--tv-brass);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .68rem;
  letter-spacing: .16em;
}

.sh-tv-luxury__card h3 {
  margin: 0;
  color: var(--tv-ink);
  font-family: var(--sh-font-display, serif);
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
}

.sh-tv-luxury__card p {
  max-width: 34ch;
  margin: 0;
  color: var(--tv-muted);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .94rem;
  line-height: 1.62;
}

.sh-tv-luxury__card:hover {
  transform: translateY(-4px);
  background: rgba(255, 252, 247, .7);
}

.sh-tv-luxury--motion .sh-tv-luxury__copy,
.sh-tv-luxury--motion .sh-tv-luxury__visual,
.sh-tv-luxury--motion .sh-tv-luxury__card {
  animation: sh-tv-rise 700ms cubic-bezier(.22, .61, .36, 1) both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

.sh-tv-luxury--motion .sh-tv-luxury__visual {
  animation-delay: 90ms;
}

.sh-tv-luxury--motion .sh-tv-luxury__card:nth-child(2) {
  animation-delay: 80ms;
}

.sh-tv-luxury--motion .sh-tv-luxury__card:nth-child(3) {
  animation-delay: 160ms;
}

.sh-tv-luxury--motion .sh-tv-luxury__image {
  animation: sh-tv-breathe 18s ease-in-out infinite alternate;
}

@keyframes sh-tv-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sh-tv-breathe {
  from {
    transform: scale(1.015);
  }
  to {
    transform: scale(1.055);
  }
}

@keyframes sh-tv-pulse {
  0% {
    opacity: .8;
    transform: scale(.72);
  }
  70% {
    opacity: 0;
    transform: scale(1.75);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@media (hover: none) {
  .sh-tv-luxury__tooltip {
    display: none;
  }
}

@media (max-width: 989px) {
  .sh-tv-luxury__inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: clamp(44px, 9vw, 76px);
  }

  .sh-tv-luxury__visual {
    order: -1;
  }

  .sh-tv-luxury__copy {
    max-width: none;
  }

  .sh-tv-luxury__heading {
    max-width: 11ch;
  }

  .sh-tv-luxury__figure {
    min-height: clamp(430px, 72svh, 650px);
  }

  .sh-tv-luxury__cards {
    grid-template-columns: 1fr;
  }

  .sh-tv-luxury__card {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .sh-tv-luxury__inner {
    padding-inline: clamp(16px, 5vw, 24px);
  }

  .sh-tv-luxury__heading {
    font-size: clamp(2.45rem, 15vw, 4rem);
  }

  .sh-tv-luxury__actions {
    align-items: stretch;
  }

  .sh-tv-luxury__button {
    flex: 1 1 210px;
    padding-inline: 18px;
  }

  .sh-tv-luxury__figure {
    min-height: 460px;
  }

  .sh-tv-luxury__note {
    right: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
    padding: 17px;
  }

  .sh-tv-luxury__features {
    grid-template-columns: 1fr;
  }

  .sh-tv-luxury__features li + li {
    border-top: 1px solid rgba(29, 25, 21, .14);
    border-left: 0;
  }

  .sh-tv-luxury__hotspot {
    width: 20px;
    height: 20px;
  }

  .sh-tv-luxury__cards {
    padding-inline: clamp(16px, 5vw, 24px);
  }
}

@media (max-width: 380px) {
  .sh-tv-luxury__note span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-tv-luxury *,
  .sh-tv-luxury *::before {
    animation: none !important;
    transition: none !important;
  }

  .sh-tv-luxury__button:hover,
  .sh-tv-luxury__button:focus-visible,
  .sh-tv-luxury__card:hover {
    transform: none;
  }
}
/* END_SECTION:luxury-tv-units */

/* START_SECTION:product (INDEX:18) */
#ProductTemplate--{{ section.id }}.sh-pdp {
  --pdp-maxw: 1520px;
  background-color: var(--sh-ground);
  /* padding-BOTTOM only. Top padding is the theme's business: it is what
     clears the header, and this ID selector would override it outright. */
  padding-bottom: var(--sh-section-y);
}

#ProductTemplate--{{ section.id }}.sh-pdp .wrapper {
  max-width: var(--pdp-maxw);
}

/* ---- the two-column stage -----------------------------------------------
   The theme's own grid (.product-single__wrapper), re-cut to an asymmetric
   split with real air between the columns, and the gallery held in place
   while the details column scrolls past it. */
#ProductTemplate--{{ section.id }} .product-single__wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

/* Sticky offset is generous enough to clear the header when the gallery
   pins, for the same reason as above. */
#ProductTemplate--{{ section.id }} .product-single__gallery {
  position: sticky;
  top: clamp(90px, 12vh, 150px);
}

/* the media frame: no border, no shadow - the photograph is the ornament */
#ProductTemplate--{{ section.id }} .product-single__media,
#ProductTemplate--{{ section.id }} .product-single__media-slide {
  background-color: var(--sh-ground-alt);
  border-radius: 0;
}

#ProductTemplate--{{ section.id }} .product-single__thumbnails {
  margin-top: clamp(14px, 1.6vw, 22px);
  gap: 8px;
}

#ProductTemplate--{{ section.id }} .product-single__thumbnails .product-single__thumbnail {
  border-radius: 0;
  border-color: var(--sh-line);
  opacity: 0.55;
  transition: opacity 0.4s var(--sh-ease), border-color 0.4s var(--sh-ease);
}

#ProductTemplate--{{ section.id }} .product-single__thumbnails .product-single__thumbnail:hover,
#ProductTemplate--{{ section.id }} .product-single__thumbnails .product-single__thumbnail.is-active,
#ProductTemplate--{{ section.id }} .product-single__thumbnails [aria-current="true"] {
  opacity: 1;
  border-color: var(--sh-ink);
}

/* ---- the details column ------------------------------------------------ */
#ProductTemplate--{{ section.id }} .product-single__details {
  max-width: 44rem;
}

#ProductTemplate--{{ section.id }} .product__subheading,
#ProductTemplate--{{ section.id }} .product-single__details .breadcrumbs {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-eyebrow);
  font-weight: var(--sh-fw-medium);
  letter-spacing: var(--sh-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sh-ink-muted);
  margin-bottom: var(--sh-s-4);
}

#ProductTemplate--{{ section.id }} .product__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--sh-ink);
  max-width: 20ch;
}

#ProductTemplate--{{ section.id }} .product__title-and-price {
  padding-bottom: clamp(20px, 2.4vw, 30px);
  margin-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--sh-line);
}

/* Price: quiet by design. The enquire state's colour is left completely
   alone - that rule lives in spicy-product.css and must keep deciding it. */
#ProductTemplate--{{ section.id }} .product__price-and-badge {
  margin-top: var(--sh-s-4);
}

#ProductTemplate--{{ section.id }} [data-product-price] {
  font-family: var(--sh-font-body);
  font-size: 1.15rem;
  font-weight: var(--sh-fw-regular);
  letter-spacing: 0.01em;
}

#ProductTemplate--{{ section.id }} .product__price--compare {
  color: var(--sh-ink-faint);
  font-weight: var(--sh-fw-regular);
}

/* ---- variant selectors --------------------------------------------------
   Both control shapes the theme can render - inline swatches/boxes, or the
   popout dropdown - moved to the same hairline register. */
#ProductTemplate--{{ section.id }} .product__selectors,
#ProductTemplate--{{ section.id }} .product__form > .selector-wrapper {
  margin-bottom: clamp(18px, 2vw, 26px);
}

#ProductTemplate--{{ section.id }} .selector-wrapper label,
#ProductTemplate--{{ section.id }} .product__selectors label {
  font-family: var(--sh-font-body);
  font-size: 0.68rem;
  font-weight: var(--sh-fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sh-ink-muted);
}

#ProductTemplate--{{ section.id }} .swatch__input + label,
#ProductTemplate--{{ section.id }} .radio__input + label {
  border-radius: 0;
  border-color: var(--sh-line-strong);
  color: var(--sh-ink);
}

#ProductTemplate--{{ section.id }} .swatch__input:checked + label,
#ProductTemplate--{{ section.id }} .radio__input:checked + label {
  border-color: var(--sh-ink);
  background-color: var(--sh-ink);
  color: var(--sh-ground);
}

#ProductTemplate--{{ section.id }} .select-popout {
  border-radius: 0;
}

#ProductTemplate--{{ section.id }} .select-popout__toggle,
#ProductTemplate--{{ section.id }} [data-popout-toggle] {
  border-radius: 0;
  border-color: var(--sh-line-strong);
  font-family: var(--sh-font-body);
  letter-spacing: 0.02em;
}

/* ---- quantity ----------------------------------------------------------- */
#ProductTemplate--{{ section.id }} .quantity-selector {
  border-radius: 0;
  border-color: var(--sh-line-strong);
}

/* ---- the buy button -----------------------------------------------------
   Full width, no radius, wide tracking. The enquire variant's rouge fill
   (product__submit__enquire) is untouched; only shape and type are shared. */
#ProductTemplate--{{ section.id }} .product__form .btn--submit {
  width: 100%;
  min-height: 3.4rem;
  border-radius: 0;
  font-family: var(--sh-font-body);
  font-size: 0.78rem;
  font-weight: var(--sh-fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#ProductTemplate--{{ section.id }} .product__form .btn--submit.product__submit__add:not(.product__submit__enquire) {
  background-color: var(--sh-ink);
  border-color: var(--sh-ink);
  color: var(--sh-ground);
  transition: background-color 0.4s var(--sh-ease), border-color 0.4s var(--sh-ease);
}

#ProductTemplate--{{ section.id }} .product__form .btn--submit.product__submit__add:not(.product__submit__enquire):hover {
  background-color: var(--sh-accent);
  border-color: var(--sh-accent);
}

/* ---- description -------------------------------------------------------- */
#ProductTemplate--{{ section.id }} .product__description {
  margin-top: clamp(28px, 3vw, 44px);
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-fw-light);
  line-height: 1.75;
  color: var(--sh-ink-muted);
  max-width: 42ch;
}

/* ---- accordions ---------------------------------------------------------
   The hairline-divided register used across the rest of the site. */
#ProductTemplate--{{ section.id }} .product__accordions {
  margin-top: clamp(32px, 3.4vw, 52px);
  border-top: 1px solid var(--sh-line);
}

#ProductTemplate--{{ section.id }} .product__accordion {
  border-bottom: 1px solid var(--sh-line);
}

#ProductTemplate--{{ section.id }} .product__accordion .product__accordion-title,
#ProductTemplate--{{ section.id }} .product__accordion summary {
  font-family: var(--sh-font-body);
  font-size: 0.72rem;
  font-weight: var(--sh-fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sh-ink);
  padding-block: clamp(16px, 1.8vw, 22px);
}

#ProductTemplate--{{ section.id }} .product__accordion-content,
#ProductTemplate--{{ section.id }} .product__accordion .rte {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  color: var(--sh-ink-muted);
  line-height: 1.7;
  padding-bottom: clamp(16px, 1.8vw, 22px);
}

/* ---- responsive ---------------------------------------------------------
   Below the point the two columns can breathe, the gallery stops sticking
   and stacks above the details, in document order. */
@media (max-width: 899px) {
  #ProductTemplate--{{ section.id }} .product-single__wrapper {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 44px);
  }

  #ProductTemplate--{{ section.id }} .product-single__gallery {
    position: static;
  }

  #ProductTemplate--{{ section.id }} .product-single__details {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ProductTemplate--{{ section.id }} * { transition: none !important; }
}
/* END_SECTION:product */

/* START_SECTION:related-products (INDEX:19) */
#RelatedProducts--{{ section.id }}.sh-related {
  padding-block: var(--sh-section-y);
  border-top: 1px solid var(--sh-line);
}

#RelatedProducts--{{ section.id }} .featured-collection__title {
  margin-bottom: clamp(32px, 4.4vw, 56px);
}

#RelatedProducts--{{ section.id }} .featured-collection__title hr {
  display: none;
}

#RelatedProducts--{{ section.id }} .sh-related__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 var(--sh-s-4);
}

#RelatedProducts--{{ section.id }} .featured-collection__heading {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: -0.012em;
  color: var(--sh-ink);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  #RelatedProducts--{{ section.id }} * { transition: none !important; }
}
/* END_SECTION:related-products */

/* START_SECTION:spicy-assurances (INDEX:56) */
/* ==========================================================================
   ASSURANCES
   Type-led, hairline-divided, generously spaced. No fills, no pills, no
   rounded containers - the restraint is the design. Motion is confined to
   three things: a numeral that counts and warms, a rule that draws itself,
   and a glow that follows the pointer - each one earns its keep instead of
   decorating.
   ========================================================================== */
.sh-marks {
  position: relative;
  isolation: isolate; /* keeps the z-index:-1 photo/scrim inside this section, not sunk behind the previous one */
  background-color: var(--sh-ground);
  padding-block: var(--sh-section-y);
}

/* The photograph and its scrim sit behind the section's own ::before-based
   grid glow (z-index 0 there), so both are pinned to z-index -1 and stack
   in document order: photo first, scrim on top of it. */
.sh-marks__bg {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
}
.sh-marks__bg img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.sh-marks__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(6, 5, 4, var(--sh-marks-dim, 0.65));
}

/* With a photograph behind it, the hairline grid's own cell backgrounds
   would otherwise paint over it - so each cell drops its ground fill and
   picks up a faint frosted line instead, keeping the divider legible
   without hiding the room. */
.sh-marks--photo .sh-marks__grid { background-color: rgba(242, 241, 237, 0.16); }
.sh-marks--photo .sh-marks__item { background-color: transparent; }
.sh-marks--photo .sh-marks__bar { background: rgba(242, 241, 237, 0.22); }

.sh-marks__head { margin-bottom: clamp(36px, 5vw, 64px); }

.sh-marks__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 var(--sh-s-4);
}

.sh-marks__heading { margin: 0; max-width: 22ch; }

/* The hairline grid: the container paints the rule colour, each cell paints
   its own ground on top, so a 1px gap becomes a divider that only ever
   appears BETWEEN cells - and reflows correctly at every breakpoint with no
   extra elements and no border bookkeeping. */
.sh-marks__grid {
  display: grid;
  grid-template-columns: repeat(var(--sh-marks-cols, 4), minmax(0, 1fr));
  gap: 1px;
  background-color: var(--sh-line);
  border-block: 1px solid var(--sh-line);
}

.sh-marks__item {
  position: relative;
  overflow: hidden;
  background-color: var(--sh-ground);
  padding: clamp(28px, 3.4vw, 52px) clamp(20px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
}

/* The spotlight: a soft glow that tracks the pointer inside the column it's
   in, set by JS via --mx/--my as plain percentages. Felt, not seen - it
   never reaches full opacity, and never leaves its own column. */
.sh-marks__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    var(--sh-accent-glow, rgba(133, 23, 25, 0.10)),
    transparent 70%
  );
  transition: opacity 0.5s var(--sh-ease);
  pointer-events: none;
}
.sh-inverse .sh-marks__item::before { --sh-accent-glow: rgba(179, 68, 72, 0.16); }
.sh-marks__item:hover::before,
.sh-marks__item:focus-within::before { opacity: 1; }

.sh-marks__item > * { position: relative; z-index: 1; }

/* The oversized index numeral: watermark-faint at rest, so it reads as
   texture rather than a number until a visitor's attention actually lands
   on the column. */
.sh-marks__num {
  display: block;
  font-family: var(--sh-font-display);
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
  opacity: 0.09;
  margin-bottom: clamp(10px, 1.4vw, 18px);
  transition: opacity 0.5s var(--sh-ease), color 0.5s var(--sh-ease), transform 0.5s var(--sh-ease);
}
.sh-marks__item:hover .sh-marks__num,
.sh-marks__item:focus-within .sh-marks__num {
  opacity: 0.9;
  color: var(--sh-accent);
  transform: translateY(-2px);
}

/* the brand's signature device, doing the work an icon would otherwise do */
.sh-marks__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--sh-accent);
  margin-bottom: clamp(18px, 2vw, 28px);
  flex: 0 0 auto;
}

.sh-marks__icon {
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  color: var(--sh-ink-faint);
}

/* height-driven so the theme's mixed icon viewBoxes keep their proportions */
.sh-marks__icon svg {
  display: block;
  height: 19px;
  width: auto;
  fill: currentColor;
}

.sh-marks__label {
  margin: 0;
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-eyebrow);
  font-weight: var(--sh-fw-medium);
  letter-spacing: var(--sh-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sh-ink);
  transition: transform 0.4s var(--sh-ease);
}
.sh-marks__item:hover .sh-marks__label,
.sh-marks__item:focus-within .sh-marks__label { transform: translateX(3px); }

/* The rule that draws itself: 0 width until the column reveals, then grows
   to full - the same "progress rule" language as the Vispring chapter,
   reused rather than reinvented. */
.sh-marks__bar {
  display: block;
  width: 100%;
  height: 1px;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  background: var(--sh-line-strong);
  position: relative;
  overflow: hidden;
}
.sh-marks__bar::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--sh-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--sh-ease);
}
[data-sh-reveal].is-inview .sh-marks__bar::after { transform: scaleX(1); }

.sh-marks__text {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-fw-light);
  line-height: 1.65;
  color: var(--sh-ink-muted);
  max-width: 28ch;
  text-wrap: pretty;
}

/* ---- responsive ---------------------------------------------------------
   Columns collapse rather than squeeze: four marks at desktop, two on a
   tablet, one on a phone. The hairline grid follows automatically. */
@media (max-width: 1023px) {
  .sh-marks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .sh-marks__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-marks__item { padding-inline: 0; }
  .sh-marks__text { max-width: none; }
  /* No pointer on touch: skip the spotlight and simply show the numeral in
     its warm state once the column has revealed, so mobile still reads as
     considered rather than as "the hover effect that never fires". */
  .sh-marks__item::before { display: none; }
  [data-sh-reveal].is-inview .sh-marks__num { opacity: 0.9; color: var(--sh-accent); }
}

/* Reduced motion is already handled globally for [data-sh-reveal]; this
   clears the stagger and the bar/numeral transitions, which would otherwise
   still be honoured, and shows every column in its finished state at once. */
@media (prefers-reduced-motion: reduce) {
  .sh-marks__item { transition-delay: 0ms !important; }
  .sh-marks__bar::after { transition: none !important; transform: scaleX(1) !important; }
  .sh-marks__num { transition: none !important; }
}
/* END_SECTION:spicy-assurances */

/* START_SECTION:spicy-brand-marquee (INDEX:57) */
.sh-marquee {
  padding-block: clamp(30px, 4.4vw, 62px);
  background-color: var(--sh-ground);
  overflow: hidden;
}

.mq__head { margin-bottom: clamp(18px, 2.4vw, 32px); }
.mq__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; }

/* The window fades the line out at both edges instead of letting it hit a
   hard vertical cut, which is what separates a marquee from a ticker. */
.mq__window {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.mq__track {
  display: flex;
  width: max-content;
  animation: mq-run var(--mq-dur, 48s) linear infinite;
  will-change: transform;
}

/* Pausing on hover is not decoration: the line is the only place these names
   appear, and a visitor who wants to read one should be able to stop it. */
.mq__window:hover .mq__track,
.mq__window:focus-within .mq__track { animation-play-state: paused; }

@keyframes mq-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.mq__copy {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.mq__item { display: inline-flex; align-items: center; flex: 0 0 auto; }

.mq__name {
  font-family: var(--sh-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  font-weight: var(--sh-fw-semi);
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--sh-ink);
  white-space: nowrap;
}

.mq__sep {
  width: 7px;
  height: 7px;
  margin-inline: clamp(20px, 2.6vw, 46px);
}

/* Reduced motion: the names still have to be readable, so the line stops
   running and wraps into a plain centred list rather than sitting frozen
   mid-scroll with half of it cut off. */
@media (prefers-reduced-motion: reduce) {
  .mq__window { -webkit-mask-image: none; mask-image: none; }
  .mq__track { animation: none; width: 100%; }
  .mq__copy:last-child { display: none; }
  .mq__copy {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--sh-s-3);
    padding-inline: var(--sh-gutter);
  }
  .mq__name { font-size: clamp(1.1rem, 2.2vw, 1.6rem); }
}
/* END_SECTION:spicy-brand-marquee */

/* START_SECTION:spicy-brands (INDEX:58) */
.sh-brands__rail { scroll-padding-inline: var(--sh-gutter); }

.sh-chapter { width: clamp(240px, 30vw, 400px); }

.sh-chapter__link { display: block; text-decoration: none; color: inherit; }

.sh-chapter__foot { padding-top: var(--sh-s-5); }

.sh-chapter__foot .sh-index { display: block; margin-bottom: var(--sh-s-4); }

/* One tone, always. The filter flattens whatever the manufacturer supplied
   to a single value so the rail reads as one editorial system. */
.sh-chapter__logo-img {
  display: block;
  width: auto;
  max-width: 160px;
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}

.sh-chapter__logo--ink .sh-chapter__logo-img { filter: brightness(0) saturate(100%); opacity: .78; }
.sh-chapter__logo--light .sh-chapter__logo-img { filter: brightness(0) invert(1); opacity: .82; }

.sh-chapter__name {
  font-family: var(--sh-font-display);
  font-size: var(--sh-fs-h3);
  font-weight: var(--sh-fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-ink);
  margin: 0;
}

.sh-chapter__note { margin: var(--sh-s-3) 0 0; max-width: 28ch; }

.sh-brands__hint { margin-top: var(--sh-s-6); color: var(--sh-ink-faint); }

/* The rail is focusable so it can be scrolled from the keyboard; give that
   focus a visible home rather than an outline around the whole viewport. */
.sh-brands__rail:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -4px; }

/* --------------------------------------------------------------------------
   DESKTOP — the four sit together

   Below this width the rail is the right answer: four cards cannot be read
   side by side on a phone without shrinking each one to a thumbnail, and a
   thumb swipe is the natural gesture there. Above it, a rail is the wrong
   answer for exactly four items — the fourth hides off the edge and the set
   stops reading as a considered shortlist.

   Matched to the header's own 1000px breakpoint so the page changes
   behaviour once, not twice. The max-width and gutter mirror .sh-wrap so the
   first card's left edge lands on the same line as the heading above it.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .sh-brands__rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 36px);
    overflow: visible;
    scroll-snap-type: none;
    max-width: var(--sh-maxw, 1280px);
    margin-inline: auto;
    padding-inline: var(--sh-gutter);
    padding-bottom: 0;
  }

  /* The rail sized each card; the grid tracks do it now. */
  .sh-chapter { width: auto; }

  /* Nothing scrolls here any more, so the invitation to scroll would be a
     lie. */
  .sh-brands__hint { display: none; }
}
/* END_SECTION:spicy-brands */

/* START_SECTION:spicy-collection-hero (INDEX:59) */
.shc { background-color: var(--sh-ground, #f7f5f1); color: var(--sh-ink, #292421); }

.shc__inner {
  max-width: var(--sh-maxw, 1280px);
  margin-inline: auto;
  padding-inline: var(--sh-gutter, 5vw);
}

.shc--type .shc__inner { padding-block: clamp(46px, 8vh, 104px) clamp(30px, 5vh, 60px); }

@media (min-width: 900px) {
  .shc--type .shc__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: end;
  }
  .shc--type .shc__title { margin-bottom: 0; }
}

.shc--split .shc__inner,
.shc--split-left .shc__inner {
  padding-block: clamp(40px, 6vh, 84px) clamp(30px, 5vh, 60px);
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .shc--split .shc__inner      { grid-template-columns: minmax(0, .54fr) minmax(0, .46fr); }
  .shc--split-left .shc__inner { grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); }
  .shc--split-left .shc__media { order: 1; }
  .shc--split-left .shc__words { order: 2; }

    .shc--split .shc__fig,
  .shc--split-left .shc__fig { max-height: 78svh; }
}

.shc--duo .shc__inner {
  padding-block: clamp(40px, 6vh, 84px) clamp(30px, 5vh, 60px);
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .shc--duo .shc__inner { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); }
  .shc--duo .shc__media {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(14px, 1.6vw, 26px);
    align-items: end;
  }
  .shc--duo .shc__fig { max-height: 74svh; }
  .shc--duo .shc__fig--second { margin-bottom: clamp(20px, 4vw, 56px); }
}

@media (max-width: 899px) {
  .shc--duo .shc__media { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; align-items: end; }
}

.shc--frame .shc__inner {
  padding-block: clamp(44px, 7vh, 96px) clamp(30px, 5vh, 60px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.shc--frame .shc__lede { margin-inline: auto; }
.shc--frame .shc__media { width: min(100%, 720px); }
.shc--frame .shc__fig { max-height: 76svh; }

.shc--cinematic .shc__inner {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
  position: relative;
}
.shc__fig--bleed { min-height: 46svh; }

.shc__video-frame {
  aspect-ratio: 21 / 9;
}

.shc__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 899px) {
  .shc__fig--bleed { aspect-ratio: 4 / 5 !important; min-height: 0; }
}

.shc__fig--bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8,7,6,.78) 0%, rgba(8,7,6,.44) 46%, rgba(8,7,6,.08) 78%),
    linear-gradient(to top, rgba(8,7,6,.58) 0%, rgba(8,7,6,.08) 52%);
}

.shc--cinematic .shc__words {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  max-width: var(--sh-maxw, 1280px);
  margin-inline: auto;
  padding: clamp(24px, 4vw, 64px) var(--sh-gutter, 5vw);
  color: #f4efe9;
}
.shc--cinematic .shc__eyebrow { color: rgba(244,239,233,.72); }
.shc--cinematic .shc__title {
  color: #f4efe9;
  letter-spacing: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.shc--cinematic .shc__lede    { color: rgba(244,239,233,.88); }
.shc--cinematic .shc__count   { color: rgba(244,239,233,.62); }

.shc__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .62rem; font-weight: 400; letter-spacing: .26em;
  text-transform: uppercase; color: var(--sh-ink-faint, #9a9088);
}
.shc__dot { width: 4px; height: 4px; border-radius: 50%; background-color: var(--sh-accent, #851719); flex: none; }

.shc__title {
  font-family: var(--sh-font-display, serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  line-height: 1.04; letter-spacing: -.014em;
  margin: 0 0 clamp(16px, 2vw, 26px);
}

.shc__lede {
  max-width: 52ch;
  font-family: var(--sh-font-body, sans-serif);
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
  font-weight: 300; line-height: 1.68;
  color: var(--sh-ink-muted, #6b625b);
}
.shc__lede p { margin: 0 0 .8em; }
.shc__lede p:last-child { margin-bottom: 0; }

.shc__count {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  font-family: var(--sh-font-body, sans-serif);
  font-size: .62rem; font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sh-ink-faint, #9a9088);
  font-variant-numeric: tabular-nums;
}

.shc__fig {
  position: relative; margin: 0; overflow: hidden;
  background-color: var(--sh-ground-alt, #efe9e2);
}
.shc__img { display: block; width: 100%; height: 100%; object-fit: cover; }

@keyframes shc-rise    { from { opacity: 0; transform: translateY(14px); } }
@keyframes shc-uncover { from { clip-path: inset(0 0 100% 0); } }
@keyframes shc-settle  { from { transform: scale(1.04); } }

.shc__eyebrow { animation: shc-rise 800ms cubic-bezier(.22,.61,.36,1) both; }
.shc__title   { animation: shc-rise 800ms cubic-bezier(.22,.61,.36,1) 80ms both; }
.shc__lede    { animation: shc-rise 800ms cubic-bezier(.22,.61,.36,1) 160ms both; }
.shc__count   { animation: shc-rise 800ms cubic-bezier(.22,.61,.36,1) 240ms both; }

.shc__fig         { animation: shc-uncover 1000ms cubic-bezier(.22,.61,.36,1) 120ms both; }
.shc__fig--second { animation-delay: 300ms; }
.shc__img         { animation: shc-settle 1600ms cubic-bezier(.22,.61,.36,1) 120ms both; }

@media (prefers-reduced-motion: reduce) {
  .shc__eyebrow, .shc__title, .shc__lede, .shc__count,
  .shc__fig, .shc__fig--second, .shc__img { animation: none; }
}

@media (max-width: 899px) {
  .shc--split .shc__media, .shc--split-left .shc__media { order: 2; }
  .shc--split .shc__words, .shc--split-left .shc__words { order: 1; }
  .shc--split .shc__fig, .shc--split-left .shc__fig,
  .shc--frame .shc__fig, .shc--duo .shc__fig { max-height: 62svh; }
  .shc--cinematic .shc__words { position: static; color: inherit; padding-inline: var(--sh-gutter, 5vw); padding-block: clamp(22px, 4vh, 40px); }
  .shc--cinematic .shc__eyebrow { color: var(--sh-ink-faint, #9a9088); }
  .shc--cinematic .shc__lede { color: var(--sh-ink-muted, #6b625b); }
  .shc--cinematic .shc__count { color: var(--sh-ink-faint, #9a9088); }
  .shc__fig--bleed::after { display: none; }
}
/* END_SECTION:spicy-collection-hero */

/* START_SECTION:spicy-collections-bento (INDEX:60) */
.sh-cb__groups { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 40px); }

.sh-cb__unit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(230px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.sh-cb__tile--big { grid-column: 1 / 3; grid-row: 1 / 3; }
.sh-cb__tile--a    { grid-column: 3 / 4; grid-row: 1; }
.sh-cb__tile--b    { grid-column: 4 / 5; grid-row: 1; }
.sh-cb__tile--c    { grid-column: 3 / 5; grid-row: 2; }

.sh-cb__row { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.sh-cb__row--1 { grid-template-columns: 1fr; }
.sh-cb__row--2 { grid-template-columns: repeat(2, 1fr); }
.sh-cb__row--3 { grid-template-columns: repeat(3, 1fr); }
.sh-cb__row .sh-cb__tile--equal { aspect-ratio: 4 / 3; }

@media (max-width: 900px) {
  .sh-cb__unit { grid-template-columns: 1fr; grid-template-rows: none; }
  .sh-cb__unit .sh-cb__tile { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .sh-cb__row--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sh-cb__row--2, .sh-cb__row--3 { grid-template-columns: 1fr; }
}

.sh-cb__tile { position: relative; min-height: 0; }
.sh-cb__card { display: block; position: relative; height: 100%; text-decoration: none; }

.sh-cb__frame {
  position: relative;
  width: 100%; height: 100%;
  background: var(--sh-ground-alt);
  overflow: hidden;
  border-radius: var(--sh-radius);
}
.sh-cb__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--sh-ease);
}
@media (hover: hover) {
  .sh-cb__card:hover .sh-cb__img { transform: scale(1.045); }
}

/* The pill label + circular arrow — the reference's exact device, built on
   real brand tokens rather than hardcoded so it still tracks a palette
   change. Deliberately monochrome (white pill, black circle) regardless of
   sh-inverse: it sits on a photograph, not the section background. */
.sh-cb__pill {
  position: absolute;
  left: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 6px 6px clamp(16px, 2vw, 22px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.sh-cb__pill-label {
  font-family: var(--sh-font-body);
  font-weight: var(--sh-fw-medium);
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  color: var(--sh-c-espresso);
  padding-right: clamp(12px, 1.4vw, 16px);
  white-space: nowrap;
}
.sh-cb__pill-arrow {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sh-c-black);
  transition: background var(--sh-dur-hover) var(--sh-ease);
}
.sh-cb__pill-arrow .icon { width: 13px; height: 13px; fill: var(--sh-c-white); }

@media (hover: hover) {
  .sh-cb__card:hover .sh-cb__pill-arrow { background: var(--sh-c-rouge); }
}
/* END_SECTION:spicy-collections-bento */

/* START_SECTION:spicy-collections-objects (INDEX:61) */
/* The doubled class is deliberate, not a typo.

   Palo Alto's theme.css applies `display:flex; overflow-x:auto` to this
   element (it is served cross-origin, so the exact selector cannot be read
   back from the page — only its effect). Under that rule .sh-rail__body
   became a flex item with min-width:auto and blew out to its content width:
   measured 2992px inside a 1521px section, which killed the rail's own
   horizontal scroll entirely because there was nothing left to overflow.

   .sh-rail.sh-rail scores (0,2,0) and so beats any single-class or element
   selector regardless of load order, without reaching for !important. */
.sh-rail.sh-rail {
  display: block;
  overflow: visible;
  background-color: var(--rail-ground);
  position: relative;
}

/* -- banner ---------------------------------------------------------------
   Full-bleed: this is the one place in the section where the photograph is
   the whole stage. */
.sh-rail__banner {
  position: relative;
  height: var(--banner-h, 62svh);
  min-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sh-rail__banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* The translucent panel from the reference. backdrop-filter is progressive:
   where it is unsupported the panel is still legible, because the tint
   alone already carries the contrast. */
.sh-rail__panel {
  position: relative;
  z-index: 1;
  width: min(46ch, 78%);
  margin: 0 clamp(16px, 5vw, 92px);
  padding: clamp(28px, 4vw, 56px);
  background: rgba(18, 15, 13, var(--panel-tint, 28%));
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
.sh-rail__panel--right { margin-left: auto; }
.sh-rail__panel--center { margin-inline: auto; text-align: center; }

.sh-rail__banner-h {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: var(--sh-ls-display);
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.sh-rail__banner-sub {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: var(--sh-s-4) 0 0;
  max-width: 40ch;
}
.sh-rail__panel--center .sh-rail__banner-sub { margin-inline: auto; }
.sh-rail__banner-btn {
  margin-top: clamp(20px, 3vw, 34px);
  background: var(--sh-c-black);
  border-color: var(--sh-c-black);
  color: #fff;
}
.sh-rail__banner-btn:hover,
.sh-rail__banner-btn:focus-visible {
  background: var(--sh-c-rouge);
  border-color: var(--sh-c-rouge);
  color: #fff;
}

@media (max-width: 700px) {
  .sh-rail__panel { width: auto; margin-inline: clamp(16px, 5vw, 32px); }
}

/* -- rail -----------------------------------------------------------------
   min-width:0 so that if this ever does end up a flex item again, it can
   shrink below its content instead of blowing the layout out. */
.sh-rail__body { padding-block: clamp(48px, 7vw, 96px); min-width: 0; width: 100%; }

.sh-rail__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sh-s-5); margin-bottom: clamp(24px, 3.6vw, 44px);
}
.sh-rail__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; }
.sh-rail__h { margin-top: var(--sh-s-3); }

.sh-rail__nav { display: flex; gap: 10px; flex: 0 0 auto; }
.sh-rail__arrow {
  /* 44px: the minimum comfortable target, per Apple HIG / Material. */
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sh-line-strong);
  background: transparent;
  color: var(--sh-ink);
  cursor: pointer;
  transition: background var(--sh-dur-hover) var(--sh-ease),
              border-color var(--sh-dur-hover) var(--sh-ease),
              opacity var(--sh-dur-hover) var(--sh-ease);
}
.sh-rail__arrow:hover:not(:disabled) { background: var(--sh-ink); color: var(--sh-ground); border-color: var(--sh-ink); }
.sh-rail__arrow:disabled { opacity: 0.32; cursor: default; }
.sh-rail__arrow-i { display: inline-flex; }
.sh-rail__arrow-i .icon { width: 13px; height: 13px; fill: currentColor; }
.sh-rail__arrow-i--back { transform: rotate(180deg); }

/* The track. scroll-padding keeps the first card off the very edge when
   snapped, and the gutters are matched to .sh-wrap so the rail lines up with
   the heading above it while still bleeding off the right. */
.sh-rail__track {
  display: flex;
  max-width: 100%;
  gap: clamp(14px, 1.8vw, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sh-gutter);
  padding-inline: var(--sh-gutter);
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sh-rail__track::-webkit-scrollbar { display: none; }
.sh-rail__track:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 4px; }

.sh-rail__card {
  flex: 0 0 auto;
  width: clamp(240px, 32vw, 460px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 700px) { .sh-rail__card { width: 78vw; } }

/* The frame crops; the image inside is oversized and translated by the
   script. overflow:hidden is safe here — nothing inside this section uses
   position:sticky. */
.sh-rail__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sh-ground-alt);
}
.sh-rail__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* scale matches the script's resting transform so there is no jump on the
     first frame, and gives the parallax room to move without exposing an
     edge. */
  transform: scale(1.18);
  will-change: transform;
}
.sh-rail__img--empty { background: var(--sh-ground-warm); }

.sh-rail__meta { padding-top: var(--sh-s-4); }
.sh-rail__name {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  color: var(--sh-ink);
  margin: 0;
}
.sh-rail__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--sh-s-2);
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  color: var(--sh-ink-muted);
  transition: color var(--sh-dur-hover) var(--sh-ease);
}
.sh-rail__cta-i { display: inline-flex; transition: transform var(--sh-dur-hover) var(--sh-ease); }
.sh-rail__cta-i .icon { width: 11px; height: 11px; fill: currentColor; }

@media (hover: hover) {
  .sh-rail__card:hover .sh-rail__cta { color: var(--sh-ink); }
  .sh-rail__card:hover .sh-rail__cta-i { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sh-rail__img { transform: none !important; }
  .sh-rail__cta-i { transition: none; }
  .sh-rail__track { scroll-behavior: auto; }
}
/* END_SECTION:spicy-collections-objects */

/* START_SECTION:spicy-collections (INDEX:62) */
.sh-colls__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px) var(--sh-gutter);
}

@media (min-width: 700px) {
  .sh-colls__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .sh-colls__grid { grid-template-columns: repeat(3, 1fr); }
  /* The centre column drops. One offset, applied consistently, gives the
     grid a rhythm without any card needing to be a special case. */
  .sh-colls__grid > *:nth-child(3n + 2) { margin-top: clamp(32px, 6vw, 104px); }
}

.sh-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.sh-card__veil { opacity: 0; transition: opacity var(--sh-dur-hover) var(--sh-ease); }

.sh-card__foot {
  display: flex;
  align-items: baseline;
  gap: var(--sh-s-4);
  padding-top: var(--sh-s-5);
}

.sh-card__index { flex: 0 0 auto; }

.sh-card__title {
  flex: 1 1 auto;
  margin: 0;
  transition: transform var(--sh-dur-hover) var(--sh-ease);
}

/* The rouge dot as the hover state. It is the same device as the scroll
   indicator and the logo — one mark, used consistently, rather than a new
   arrow or underline invented for this component. */
.sh-card__dot {
  flex: 0 0 auto;
  align-self: center;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--sh-dur-hover) var(--sh-ease),
    transform var(--sh-dur-hover) var(--sh-ease);
}

.sh-card__rule {
  display: block;
  height: 1px;
  margin-top: var(--sh-s-4);
  background-color: var(--sh-line);
  position: relative;
}

.sh-card__rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sh-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--sh-ease);
}

.sh-card__note { margin: var(--sh-s-4) 0 0; max-width: 30ch; }

@media (hover: hover) {
  .sh-card:hover .sh-card__title,
  .sh-card:focus-visible .sh-card__title { transform: translateX(6px); }

  .sh-card:hover .sh-card__dot,
  .sh-card:focus-visible .sh-card__dot { opacity: 1; transform: translateX(0); }

  .sh-card:hover .sh-card__rule::after,
  .sh-card:focus-visible .sh-card__rule::after { transform: scaleX(1); }

  .sh-card:hover .sh-card__veil,
  .sh-card:focus-visible .sh-card__veil { opacity: 1; }
}
/* END_SECTION:spicy-collections */

/* START_SECTION:spicy-contact (INDEX:63) */
.sh-contact {
  --contact-ink: #17120f;
  --contact-muted: rgba(23, 18, 15, .64);
  --contact-line: rgba(23, 18, 15, .16);
  --contact-paper: #f5f1eb;
  --contact-red: #c42121;
  position: relative;
  background: var(--contact-paper);
  color: var(--contact-ink);
}

.sh-contact__hero {
  position: relative;
  min-height: 92svh;
  overflow: hidden;
  background: #080706;
  color: #fff7ed;
}

.sh-contact__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .68;
}

.sh-contact__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,4,3,.9) 0%, rgba(5,4,3,.42) 34%, rgba(5,4,3,.64) 100%),
    linear-gradient(to right, rgba(5,4,3,.9) 0%, rgba(5,4,3,.62) 42%, rgba(5,4,3,.2) 78%);
}

.sh-contact__hero-inner {
  position: relative;
  z-index: 1;
  min-height: 92svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(36px, 7vw, 110px);
  align-items: center;
  padding: clamp(210px, 27vh, 320px) var(--sh-gutter, clamp(22px, 5vw, 76px)) clamp(72px, 10vh, 120px);
}

.sh-contact__intro,
.sh-contact__actions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.sh-contact__intro {
  max-width: 720px;
  padding: clamp(24px, 3vw, 42px) 0;
}

.sh-contact__eyebrow,
.sh-contact__kicker,
.sh-contact__form-eyebrow {
  margin: 0;
  font-family: var(--sh-font-body, sans-serif);
  font-size: clamp(10px, .74vw, 12px);
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.sh-contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,247,237,.9);
}

.sh-contact__eyebrow span {
  width: 22px;
  height: 1px;
  background: var(--contact-red);
}

.sh-contact__heading {
  max-width: 10ch;
  margin: clamp(18px, 2.5vw, 32px) 0 0;
  font-family: var(--sh-font-heading, 'Harmonia Sans', sans-serif);
  font-size: clamp(42px, 6.4vw, 96px);
  line-height: .96;
  letter-spacing: 0;
  font-weight: 400;
  color: #fff7ed;
}

.sh-contact__lede {
  max-width: 48ch;
  margin: clamp(22px, 3vw, 36px) 0 0;
  font-family: var(--sh-font-body, sans-serif);
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.72;
  font-weight: 300;
  color: rgba(255,247,237,.88);
}

.sh-contact__dot { color: var(--contact-red); }

.sh-contact__actions {
  display: grid;
  gap: 1px;
  border: 1px solid rgba(255,247,237,.18);
  background: rgba(255,247,237,.18);
}

.sh-contact__action {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2.3vw, 26px);
  color: #fff7ed;
  text-decoration: none;
  background: rgba(7,6,5,.64);
  transition: background 260ms ease, color 260ms ease;
}

.sh-contact__action:hover,
.sh-contact__action:focus-visible {
  background: #fff7ed;
  color: #17120f;
}

.sh-contact__action span {
  font-family: var(--sh-font-body, sans-serif);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .7;
}

.sh-contact__action strong {
  font-family: var(--sh-font-heading, sans-serif);
  font-size: clamp(17px, 1.35vw, 24px);
  line-height: 1.2;
  font-weight: 400;
}

.sh-contact__body {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, 560px);
  gap: clamp(38px, 7vw, 110px);
  padding: clamp(70px, 10vw, 140px) var(--sh-gutter, clamp(22px, 5vw, 76px));
}

.sh-contact__details {
  max-width: 620px;
}

.sh-contact__kicker,
.sh-contact__form-eyebrow {
  color: var(--contact-red);
}

.sh-contact__notes {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(26px, 4vw, 48px);
  max-width: 52ch;
}

.sh-contact__notes p,
.sh-contact__form-lede {
  margin: 0;
  font-family: var(--sh-font-heading, sans-serif);
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
}

.sh-contact__list {
  margin: clamp(42px, 6vw, 70px) 0 0;
  border-top: 1px solid var(--contact-line);
}

.sh-contact__list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  padding: 22px 0;
  border-bottom: 1px solid var(--contact-line);
}

.sh-contact__list dt {
  font-family: var(--sh-font-body, sans-serif);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--contact-muted);
}

.sh-contact__list dd {
  margin: 0;
  font-family: var(--sh-font-body, sans-serif);
  font-size: 15px;
  line-height: 1.5;
}

.sh-contact__list a {
  color: inherit;
  text-decoration-color: rgba(196, 33, 33, .55);
  text-underline-offset: 4px;
}

.sh-contact__form-panel {
  align-self: start;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--contact-line);
  background: rgba(255,255,255,.28);
}

.sh-contact__form-lede {
  margin-top: 16px;
  max-width: 13ch;
  font-size: clamp(28px, 3vw, 44px);
}

.sh-contact__form {
  margin-top: clamp(32px, 4.5vw, 52px);
}

.sh-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 2.6vw, 34px);
}

.sh-contact__field {
  display: block;
  margin-top: 24px;
}

.sh-contact__field span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sh-font-body, sans-serif);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--contact-muted);
}

.sh-contact__field input,
.sh-contact__field textarea,
.sh-contact__field select {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(23,18,15,.34);
  border-radius: 0;
  padding: 10px 0 12px;
  background: transparent;
  color: var(--contact-ink);
  font-family: var(--sh-font-body, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  box-shadow: none;
  transition: border-color 220ms ease;
}

/* The select wrapper. Without this a select styled down to a bare underline
   is indistinguishable from the text inputs above it and nobody realises it
   opens - which is exactly what was reported. The caret is a rotated border,
   so it needs no asset and inherits the focus colour. The wrapper resets the
   label's own `span` rules, which would otherwise make it a block caption. */
.sh-contact__field .sh-contact__select {
  position: relative;
  display: block;
  margin-bottom: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

.sh-contact__field .sh-contact__select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  cursor: pointer;
}

.sh-contact__field .sh-contact__select::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -8px;
  border-right: 1px solid rgba(23,18,15,.7);
  border-bottom: 1px solid rgba(23,18,15,.7);
  transform: rotate(45deg);
  pointer-events: none;
  transition: border-color 220ms ease;
}

.sh-contact__field .sh-contact__select:focus-within::after {
  border-right-color: var(--contact-red);
  border-bottom-color: var(--contact-red);
}

.sh-contact__field textarea {
  min-height: 110px;
  resize: vertical;
}

.sh-contact__field input:focus,
.sh-contact__field textarea:focus,
.sh-contact__field select:focus {
  outline: none;
  border-bottom-color: var(--contact-red);
}

.sh-contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  margin-top: clamp(30px, 4vw, 46px);
  padding: 15px 24px;
  border: 1px solid var(--contact-ink);
  border-radius: 0;
  background: var(--contact-ink);
  color: #fff7ed;
  font-family: var(--sh-font-body, sans-serif);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}

.sh-contact__submit:hover,
.sh-contact__submit:focus-visible {
  background: transparent;
  color: var(--contact-ink);
  border-color: var(--contact-red);
}

.sh-contact__notice {
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid var(--contact-line);
  font-family: var(--sh-font-body, sans-serif);
  font-size: 14px;
  line-height: 1.5;
}

.sh-contact__notice--success { border-color: rgba(196, 33, 33, .55); }
.sh-contact__notice--error { border-color: rgba(196, 33, 33, .85); }

@media (max-width: 980px) {
  .sh-contact__hero,
  .sh-contact__hero-inner { min-height: 88svh; }
  .sh-contact__hero-inner,
  .sh-contact__body { grid-template-columns: 1fr; }
  .sh-contact__actions { max-width: 560px; }
  .sh-contact__body { gap: 56px; }
}

@media (max-width: 620px) {
  .sh-contact__hero,
  .sh-contact__hero-inner { min-height: auto; }
  .sh-contact__hero-inner {
    padding-top: clamp(170px, 24vh, 240px);
    padding-bottom: 44px;
  }
  .sh-contact__heading { font-size: clamp(38px, 12vw, 62px); }
  .sh-contact__lede { font-size: 14px; }
  .sh-contact__body { padding-top: 58px; padding-bottom: 72px; }
  .sh-contact__notes p,
  .sh-contact__form-lede { font-size: clamp(24px, 8vw, 34px); }
  .sh-contact__list div,
  .sh-contact__row { grid-template-columns: 1fr; }
  .sh-contact__list div { gap: 10px; }
  .sh-contact__form-panel { padding: 26px 20px; }
  .sh-contact__submit { width: 100%; }
}
/* END_SECTION:spicy-contact */

/* START_SECTION:spicy-featured-brands (INDEX:64) */
.sh-brands-four {
  background: var(--sbf-ground, #f4f0e9);
  color: var(--sbf-ink, #171513);
}

.sh-brands-four__inner {
  padding: clamp(56px, 7vw, 104px) var(--sh-gutter, clamp(20px, 4vw, 72px));
}

.sh-brands-four__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 36px;
  max-width: var(--sh-maxw, 1600px);
  margin: 0 auto clamp(28px, 4vw, 52px);
}

.sh-brands-four__eyebrow {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--sbf-muted, #746d65);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
}

.sh-brands-four__eyebrow span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sbf-accent, #8e2f32);
}

.sh-brands-four__heading {
  max-width: 17ch;
  margin: 0;
  color: var(--sbf-ink, #171513);
  font-family: var(--sh-font-display, serif);
  font-size: clamp(2rem, 3.2vw, 4rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.sh-brands-four__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: clamp(500px, 68svh, 760px);
  max-width: var(--sh-maxw, 1600px);
  margin-inline: auto;
  overflow: hidden;
  background: #191715;
}

.sh-brands-four__panel {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .24);
  color: #f6f1eb;
  text-decoration: none;
  isolation: isolate;
}

.sh-brands-four__panel:last-child {
  border-right: 0;
}

.sh-brands-four__media,
.sh-brands-four__veil,
.sh-brands-four__placeholder {
  position: absolute;
  inset: 0;
  display: block;
}

.sh-brands-four__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sbf-position, center);
  transition: transform 700ms cubic-bezier(.22, .61, .36, 1), filter 350ms ease;
}

.sh-brands-four__placeholder {
  background: #2a2724;
}

.sh-brands-four__veil {
  z-index: 1;
  background:
    linear-gradient(to top, rgba(9, 8, 7, .88) 0%, rgba(9, 8, 7, .36) 48%, rgba(9, 8, 7, .12) 75%),
    linear-gradient(to right, rgba(9, 8, 7, .26), transparent 62%);
  transition: background-color 300ms ease;
}

.sh-brands-four__panel::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--sbf-accent, #8e2f32);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms cubic-bezier(.22, .61, .36, 1);
}

.sh-brands-four__topline {
  position: absolute;
  z-index: 2;
  top: clamp(18px, 2vw, 28px);
  right: clamp(16px, 2vw, 26px);
  left: clamp(16px, 2vw, 26px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(246, 241, 235, .76);
  font-family: var(--sh-font-body, sans-serif);
  font-size: .58rem;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.sh-brands-four__copy {
  position: absolute;
  z-index: 2;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(22px, 3vw, 42px);
  left: clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sh-brands-four__name {
  color: #f6f1eb;
  font-family: var(--sh-font-display, serif);
  font-size: clamp(1.45rem, 2.1vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.sh-brands-four__description {
  max-width: 27ch;
  margin-top: 13px;
  color: rgba(246, 241, 235, .78);
  font-family: var(--sh-font-body, sans-serif);
  font-size: clamp(.74rem, .85vw, .9rem);
  font-weight: 300;
  line-height: 1.5;
}

.sh-brands-four__cta {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  margin-top: clamp(17px, 2vw, 27px);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(246, 241, 235, .7);
  color: #f6f1eb;
  font-family: var(--sh-font-body, sans-serif);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.sh-brands-four__arrow {
  display: inline-flex;
  transition: transform 240ms cubic-bezier(.22, .61, .36, 1);
}

.sh-brands-four__arrow .icon {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .sh-brands-four__panel:hover .sh-brands-four__image,
  .sh-brands-four__panel:focus-visible .sh-brands-four__image {
    transform: scale(1.035);
    filter: saturate(1.05);
  }

  .sh-brands-four__panel:hover::after,
  .sh-brands-four__panel:focus-visible::after {
    transform: scaleX(1);
  }

  .sh-brands-four__panel:hover .sh-brands-four__arrow,
  .sh-brands-four__panel:focus-visible .sh-brands-four__arrow {
    transform: translateX(4px);
  }
}

@media (max-width: 989px) {
  .sh-brands-four__inner {
    padding-inline: 16px;
  }

  .sh-brands-four__grid {
    height: min(72svh, 680px);
  }

  .sh-brands-four__description {
    display: none;
  }
}

@media (max-width: 749px) {
  .sh-brands-four__inner {
    padding-block: 52px;
    padding-inline: 12px;
  }

  .sh-brands-four__header {
    grid-template-columns: 1fr;
    margin-bottom: 26px;
  }

  .sh-brands-four__heading {
    font-size: clamp(2rem, 10vw, 3.25rem);
  }

  .sh-brands-four__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: min(72svh, 620px);
  }

  .sh-brands-four__panel {
    border-right: 1px solid rgba(255, 255, 255, .24);
    border-bottom: 1px solid rgba(255, 255, 255, .24);
  }

  .sh-brands-four__panel:nth-child(2n) {
    border-right: 0;
  }

  .sh-brands-four__panel:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .sh-brands-four__topline {
    top: 14px;
    right: 13px;
    left: 13px;
  }

  .sh-brands-four__topline > :last-child {
    display: none;
  }

  .sh-brands-four__copy {
    right: 13px;
    bottom: 14px;
    left: 13px;
  }

  .sh-brands-four__name {
    font-size: clamp(1rem, 5vw, 1.35rem);
  }

  .sh-brands-four__cta {
    gap: 8px;
    min-height: 36px;
    margin-top: 7px;
    border-bottom: 0;
    font-size: .5rem;
    letter-spacing: .1em;
  }

  .sh-brands-four__cta > :first-child {
    max-width: 12ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-brands-four__image,
  .sh-brands-four__panel::after,
  .sh-brands-four__arrow {
    transition: none;
  }
}
/* END_SECTION:spicy-featured-brands */

/* START_SECTION:spicy-hero (INDEX:65) */
.sh-hero {
  position: relative;
  min-height: var(--sh-hero-h, 90vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--sh-c-black);
}

.sh-hero--centre { text-align: center; }

/* Two nested layers: the outer one is moved by the parallax system, the
   inner one holds the slow drift. Combining both on one element would mean
   two systems fighting over the same transform. */
.sh-hero__media { position: absolute; inset: -8% 0; z-index: 0; }
.sh-hero__drift { width: 100%; height: 100%; }
.sh-hero__media .sh-media { width: 100%; height: 100%; }

.sh-hero__veil { z-index: 1; opacity: var(--sh-veil-o, 1); }

.sh-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(96px, 20vh, 200px);
  padding-bottom: clamp(64px, 10vh, 128px);
}

.sh-hero__seq { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sh-s-5); }
.sh-hero--centre .sh-hero__seq { align-items: center; }

.sh-hero__symbol-img,
.sh-hero__wordmark-img { display: block; width: var(--sh-w); height: auto; }

.sh-hero__symbol { margin-bottom: var(--sh-s-2); }
.sh-hero__wordmark { margin-bottom: var(--sh-s-3); }

.sh-hero__eyebrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--sh-c-ivory); }
.sh-hero__eyebrow .sh-dot { background-color: var(--sh-c-rouge-light); }

.sh-hero__heading { color: var(--sh-c-white); max-width: 17ch; }
.sh-hero--centre .sh-hero__heading { margin-inline: auto; }

.sh-hero__text { color: rgba(242, 241, 237, .78); max-width: 46ch; margin: 0; }
.sh-hero--centre .sh-hero__text { margin-inline: auto; }

.sh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sh-s-6);
  margin-top: var(--sh-s-2);
}

.sh-hero__btn { color: var(--sh-c-ivory); border-color: rgba(242, 241, 237, .45); }
.sh-hero__btn:hover,
.sh-hero__btn:focus-visible { border-color: var(--sh-c-ivory); background-color: transparent; color: var(--sh-c-white); }
.sh-hero__link { color: rgba(242, 241, 237, .82); font-size: var(--sh-fs-small); }
.sh-hero__link:hover { color: var(--sh-c-white); }

/* --------------------------------------------------------------------------
   THE ARRIVAL
   Held at rest, then released one element at a time. Each element carries its
   own --sh-t delay from the template, so the rhythm is editable without
   touching this file.
   -------------------------------------------------------------------------- */

.sh-hero--seq .sh-hero__seq > *,
.sh-hero--seq .sh-hero__cue { opacity: 0; }

.sh-hero--seq .sh-hero__seq > * { transform: translateY(20px); }
.sh-hero--seq .sh-hero__symbol { filter: blur(8px); }

.sh-hero--seq.is-sequenced .sh-hero__seq > * {
  animation: sh-hero-rise 1.5s var(--sh-ease) var(--sh-t, 0s) forwards;
}

.sh-hero--seq.is-sequenced .sh-hero__symbol {
  animation: sh-hero-focus 1.8s var(--sh-ease) var(--sh-t, 0s) forwards;
}

/* The headline wipes up through a mask instead of fading. It is the one
   moment in the hero that behaves differently, which is what makes it read
   as the headline. */
.sh-hero--seq .sh-hero__heading { clip-path: inset(0 0 108% 0); transform: none; }
.sh-hero--seq.is-sequenced .sh-hero__heading {
  animation: sh-hero-wipe 1.7s var(--sh-ease-inout) var(--sh-t, 0s) forwards;
}

.sh-hero--seq.is-sequenced .sh-hero__cue {
  animation: sh-hero-fade 1.2s var(--sh-ease) var(--sh-t, 0s) forwards;
}

.sh-hero--seq.is-sequenced .sh-hero__drift {
  animation: sh-hero-drift 22s var(--sh-ease-inout) forwards;
}

/* No JavaScript, theme editor, or reduced motion: everything already placed. */
html:not(.sh-js) .sh-hero--seq .sh-hero__seq > *,
html:not(.sh-js) .sh-hero--seq .sh-hero__cue,
.sh-hero--seq.is-instant .sh-hero__seq > *,
.sh-hero--seq.is-instant .sh-hero__cue {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
  animation: none;
}

@keyframes sh-hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sh-hero-focus {
  from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes sh-hero-wipe {
  from { opacity: 1; clip-path: inset(0 0 108% 0); }
  to   { opacity: 1; clip-path: inset(0 0 -12% 0); }
}

@keyframes sh-hero-fade {
  to { opacity: 1; }
}

/* A very slow settle on the film. 1.06 to 1 across 22 seconds is barely
   perceptible, which is the intention - it reads as depth, not as an effect. */
@keyframes sh-hero-drift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   SCROLL CUE - a slow rouge line. The only repeating motion in the hero.
   -------------------------------------------------------------------------- */

.sh-hero__cue {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: clamp(48px, 7vh, 84px);
  background-color: rgba(242, 241, 237, .22);
  overflow: hidden;
}

.sh-hero__cue-line {
  position: absolute;
  inset: 0;
  background-color: var(--sh-c-rouge-light);
  animation: sh-cue 3.2s var(--sh-ease-inout) infinite;
}

@keyframes sh-cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 768px) {
  .sh-hero { min-height: var(--sh-hero-h-sm, 80vh); align-items: flex-end; }
  .sh-hero__media { inset: 0; }
  .sh-hero__inner { padding-top: clamp(80px, 16vh, 140px); }
  .sh-hero__actions { gap: var(--sh-s-4); }
  .sh-hero__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-hero--seq .sh-hero__seq > *,
  .sh-hero--seq .sh-hero__cue {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    animation: none;
  }
  .sh-hero__drift { animation: none; }
  .sh-hero__cue-line { animation: none; transform: none; }
}
/* END_SECTION:spicy-hero */

/* START_SECTION:spicy-home-immersive-footer (INDEX:66) */
/* ==========================================================================
   SPICY HOME — IMMERSIVE BRAND FOOTER
   Every rule below is scoped to .spicy-home-immersive-footer. Nothing here
   selects an element type, a shared class, or anything outside this block.
   ========================================================================== */
.spicy-home-immersive-footer {
  --spicy-footer-ground: #000000;
  --spicy-footer-ink: #f2f1ed;
  --spicy-footer-accent: #851719;
  --spicy-footer-height: 88svh;
  --spicy-footer-font-display: 'Afacad', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --spicy-footer-font-body: 'Jost', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --spicy-footer-gutter: clamp(20px, 4vw, 56px);

  /* progress (0-1) and drift (-1..1) are written by the script each frame */
  --spicy-footer-p: 1;
  --spicy-footer-drift: 0;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spicy-footer-height);
  padding: clamp(72px, 12vh, 150px) var(--spicy-footer-gutter) clamp(48px, 8vh, 96px);
  background-color: var(--spicy-footer-ground);
  color: var(--spicy-footer-ink);
  /* the wordmark and ring are deliberately oversized; this is what
     guarantees they can never produce a horizontal scrollbar */
  overflow: hidden;
  isolation: isolate;
}

/* -- layer 1 · atmosphere -------------------------------------------------- */
.spicy-home-immersive-footer .spicy-home-immersive-footer__background {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 44% at 50% 58%, rgba(133, 23, 25, 0.14), transparent 68%),
    radial-gradient(60% 52% at 22% 22%, rgba(184, 164, 145, 0.09), transparent 72%);
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__ring {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(128vw, 1500px);
  aspect-ratio: 1;
  margin-left: min(-64vw, -750px);
  margin-top: min(-64vw, -750px);
  border: 1px solid rgba(242, 241, 237, 0.055);
  border-radius: 50%;
}

/* -- layout ---------------------------------------------------------------- */
.spicy-home-immersive-footer .spicy-home-immersive-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* -- eyebrow --------------------------------------------------------------- */
.spicy-home-immersive-footer .spicy-home-immersive-footer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 clamp(20px, 3vh, 36px);
  font-family: var(--spicy-footer-font-body);
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.42);
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__eyebrow-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--spicy-footer-accent);
  flex: 0 0 auto;
}

/* -- layer 2 · the wordmark ------------------------------------------------
   Sized so the lockup spans most of the viewport width at every breakpoint,
   which is what makes it read as a brand statement rather than a heading. */
.spicy-home-immersive-footer .spicy-home-immersive-footer__wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.22em;
  margin: 0;
  font-family: var(--spicy-footer-font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 18.4vw, 22rem);
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--spicy-footer-ink);
  white-space: nowrap;
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__word { display: inline-block; }

.spicy-home-immersive-footer .spicy-home-immersive-footer__dot {
  display: inline-block;
  width: 0.1em;
  height: 0.1em;
  margin-left: 0.05em;
  border-radius: 50%;
  background: var(--spicy-footer-accent);
  vertical-align: baseline;
}

/* -- layer 3 · supporting line --------------------------------------------- */
.spicy-home-immersive-footer .spicy-home-immersive-footer__content {
  margin-top: clamp(26px, 4.5vh, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vh, 26px);
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__tagline {
  margin: 0;
  max-width: 34ch;
  font-family: var(--spicy-footer-font-body);
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(242, 241, 237, 0.58);
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 34px);
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__links-item { margin: 0; }

.spicy-home-immersive-footer .spicy-home-immersive-footer__link {
  position: relative;
  display: inline-block;
  /* comfortably tappable without changing the visual rhythm */
  padding: 6px 2px;
  font-family: var(--spicy-footer-font-body);
  font-size: clamp(0.68rem, 0.78vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(242, 241, 237, 0.72);
  transition: color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__link::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  background: var(--spicy-footer-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__link:hover,
.spicy-home-immersive-footer .spicy-home-immersive-footer__link:focus-visible { color: var(--spicy-footer-ink); }

.spicy-home-immersive-footer .spicy-home-immersive-footer__link:hover::after,
.spicy-home-immersive-footer .spicy-home-immersive-footer__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.spicy-home-immersive-footer .spicy-home-immersive-footer__note {
  margin: 0;
  font-family: var(--spicy-footer-font-body);
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.3);
}

/* ==========================================================================
   THE SCROLL-DRIVEN STATE
   Applied only once the script has taken over, so the default rendering above
   is already the finished composition. No JS, no motion — but never a blank
   or half-built footer.
   ========================================================================== */
.spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__wordmark {
  opacity: var(--spicy-footer-p);
  transform:
    translate3d(0, calc((1 - var(--spicy-footer-p)) * 72px + var(--spicy-footer-drift) * 10px), 0)
    scale(calc(0.93 + var(--spicy-footer-p) * 0.07));
  /* resolves to exactly 0 at rest, so the finished wordmark is perfectly sharp */
  filter: blur(calc((1 - var(--spicy-footer-p)) * 5px));
  will-change: opacity, transform, filter;
}

/* the layers move at different rates — this is what reads as depth */
.spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__background {
  transform: translate3d(0, calc(var(--spicy-footer-drift) * -34px), 0);
  will-change: transform;
}

.spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__eyebrow {
  opacity: var(--spicy-footer-p);
  transform: translate3d(0, calc((1 - var(--spicy-footer-p)) * 26px), 0);
  will-change: opacity, transform;
}

.spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__content {
  /* trails the wordmark slightly, so the statement lands first */
  opacity: clamp(0, calc(var(--spicy-footer-p) * 1.5 - 0.5), 1);
  transform: translate3d(0, calc((1 - var(--spicy-footer-p)) * 40px + var(--spicy-footer-drift) * 18px), 0);
  will-change: opacity, transform;
}

/* ==========================================================================
   RESPONSIVE
   Mobile is not a smaller desktop: the lockup stacks to keep its scale, and
   the parallax distances come down so nothing feels loose on a small screen.
   ========================================================================== */
@media (max-width: 640px) {
  .spicy-home-immersive-footer {
    --spicy-footer-height: 76svh;
    padding-top: clamp(60px, 10vh, 110px);
  }

  .spicy-home-immersive-footer .spicy-home-immersive-footer__wordmark {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: clamp(3.4rem, 34vw, 9rem);
    line-height: 0.92;
  }

  .spicy-home-immersive-footer .spicy-home-immersive-footer__ring {
    width: 150vw;
    margin-left: -75vw;
    margin-top: -75vw;
  }

  /* shorter travel, no blur cost on mobile GPUs */
  .spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__wordmark {
    transform:
      translate3d(0, calc((1 - var(--spicy-footer-p)) * 40px), 0)
      scale(calc(0.96 + var(--spicy-footer-p) * 0.04));
    filter: none;
  }

  .spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__background {
    transform: translate3d(0, calc(var(--spicy-footer-drift) * -14px), 0);
  }

  .spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__content {
    transform: translate3d(0, calc((1 - var(--spicy-footer-p)) * 22px), 0);
  }
}

/* ==========================================================================
   REDUCED MOTION
   No parallax, no travel, no blur, no stagger. The composition still arrives,
   and remains completely functional.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__wordmark,
  .spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__eyebrow,
  .spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__content,
  .spicy-home-immersive-footer[data-spicy-footer-state='live'] .spicy-home-immersive-footer__background {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }

  .spicy-home-immersive-footer .spicy-home-immersive-footer__link,
  .spicy-home-immersive-footer .spicy-home-immersive-footer__link::after { transition: none; }
}
/* END_SECTION:spicy-home-immersive-footer */

/* START_SECTION:spicy-journal (INDEX:67) */
.sh-lead {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  text-decoration: none;
  color: inherit;
  align-items: center;
}

@media (min-width: 900px) {
  .sh-lead { grid-template-columns: 1.5fr 1fr; gap: clamp(48px, 6vw, 96px); }
}

.sh-lead__figure { margin: 0; }
.sh-lead__date { margin: 0 0 var(--sh-s-4); color: var(--sh-ink-faint); }
.sh-lead__title { margin: 0; }
.sh-lead__excerpt { margin: var(--sh-s-5) 0 0; color: var(--sh-ink-muted); max-width: 42ch; }
.sh-lead__cue { display: inline-block; margin-top: var(--sh-s-6); font-size: var(--sh-fs-small); }

@media (hover: hover) {
  .sh-lead:hover .sh-lead__cue::after,
  .sh-lead:focus-visible .sh-lead__cue::after { transform: scaleX(1); transform-origin: left center; }
}

/* --------------------------------------------------------------------------
   THE LIST — hairlines only. Date, title, and the rouge dot on hover.
   -------------------------------------------------------------------------- */

.sh-journal__list {
  list-style: none;
  margin: clamp(48px, 7vw, 104px) 0 0;
  padding: 0;
  border-top: 1px solid var(--sh-line);
}

.sh-entry { border-bottom: 1px solid var(--sh-line); }

.sh-entry__link {
  display: flex;
  align-items: baseline;
  gap: var(--sh-s-5);
  padding: var(--sh-s-6) 0;
  text-decoration: none;
  color: inherit;
}

.sh-entry__date { flex: 0 0 auto; min-width: 10ch; color: var(--sh-ink-faint); }

.sh-entry__title {
  flex: 1 1 auto;
  transition: transform var(--sh-dur-hover) var(--sh-ease);
}

.sh-entry__dot {
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity var(--sh-dur-hover) var(--sh-ease),
    transform var(--sh-dur-hover) var(--sh-ease);
}

@media (hover: hover) {
  .sh-entry__link:hover .sh-entry__title,
  .sh-entry__link:focus-visible .sh-entry__title { transform: translateX(8px); }
  .sh-entry__link:hover .sh-entry__dot,
  .sh-entry__link:focus-visible .sh-entry__dot { opacity: 1; transform: translateX(0); }
}

@media (max-width: 620px) {
  .sh-entry__link { flex-wrap: wrap; gap: var(--sh-s-2); }
  .sh-entry__date { min-width: 0; flex: 1 0 100%; }
}

.sh-journal__empty { color: var(--sh-ink-faint); }
/* END_SECTION:spicy-journal */

/* START_SECTION:spicy-media-wall (INDEX:68) */
/* ==========================================================================
   MEDIA WALL - full-bleed hero + always-visible hotspot labels
   ========================================================================== */
.mw { position: relative; background: #0b0908; color: #f4efe8; }

.mw__hero { position: relative; width: 100%; aspect-ratio: var(--mw-ar, 1.75); overflow: hidden; background: #0d0b0a; }
.mw__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mw__img--empty { background: linear-gradient(135deg, #1c1815, #0d0b0a); }
.mw__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6,4,3,0.82) 0%, rgba(6,4,3,0.42) 26%, rgba(6,4,3,0.05) 52%, transparent 66%),
    linear-gradient(to right, rgba(6,4,3,0.7) 0%, rgba(6,4,3,0.28) 38%, transparent 60%);
}

/* ---- copy on the image ------------------------------------------------- */
.mw__content { position: absolute; z-index: 5; left: clamp(24px, 4vw, 76px); bottom: clamp(28px, 4.5vw, 68px); max-width: min(560px, 46%); }
.mw__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 var(--sh-s-4, 1rem);
  font-family: var(--sh-font-body); font-size: var(--sh-fs-eyebrow, 0.72rem); font-weight: var(--sh-fw-medium, 500);
  letter-spacing: var(--sh-ls-eyebrow, 0.24em); text-transform: uppercase; color: rgba(244,239,232,0.86);
}
.mw__eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sh-c-rouge-light, #b34448); flex: 0 0 auto; }
.mw__h {
  font-family: var(--sh-font-display); font-weight: var(--sh-fw-light, 300);
  font-size: clamp(30px, 3.6vw, 60px); line-height: 1.02; letter-spacing: -0.02em;
  color: #fff; margin: 0; max-width: 15ch; text-wrap: balance; text-shadow: 0 1px 30px rgba(0,0,0,0.5);
}
.mw__lede {
  font-family: var(--sh-font-body); font-size: clamp(13px, 1vw, 16px); line-height: 1.6;
  color: rgba(244,239,232,0.9); margin: clamp(14px, 1.6vw, 20px) 0 0; max-width: 44ch;
  font-weight: var(--sh-fw-light, 300); text-shadow: 0 1px 20px rgba(0,0,0,0.5);
}
.mw__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.4vw, 30px); }
.mw__btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sh-font-body); font-size: 0.82rem; font-weight: var(--sh-fw-medium, 500);
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 0.9rem 1.9rem; border: 1px solid;
  transition: background 0.3s var(--sh-ease), color 0.3s var(--sh-ease), border-color 0.3s var(--sh-ease);
}
.mw__btn--solid { background: #f4efe8; border-color: #f4efe8; color: #17120f; }
.mw__btn--solid:hover, .mw__btn--solid:focus-visible { background: transparent; color: #f4efe8; }
.mw__btn--ghost { background: transparent; border-color: rgba(244,239,232,0.5); color: #f4efe8; }
.mw__btn--ghost:hover, .mw__btn--ghost:focus-visible { border-color: #f4efe8; }
.mw__hint { margin: clamp(16px, 2vw, 22px) 0 0; font-family: var(--sh-font-body); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244,239,232,0.62); }

/* ---- hotspots: dot + always-visible title, expands on click ------------ */
.mw__spot { position: absolute; left: var(--x); top: var(--y); z-index: 3; }
.mw__spot.is-open { z-index: 4; }
.mw__dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(200,171,114,0.95); background: rgba(200,171,114,0.2); color: #f3e4c4;
  display: grid; place-items: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: background 0.3s var(--sh-ease), transform 0.3s var(--sh-ease);
}
.mw__dot::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(200,171,114,0.5); animation: mw-pulse 2.8s var(--sh-ease) infinite; }
@keyframes mw-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
.mw__dot-n { font-family: var(--sh-font-body); font-size: 10px; font-weight: var(--sh-fw-medium, 500); line-height: 1; }
.mw__dot:hover, .mw__spot.is-open .mw__dot { background: #c8ab72; color: #1a1206; }
.mw__spot.is-open .mw__dot { transform: translate(-50%, -50%) scale(1.08); }
.mw__spot.is-open .mw__dot::before { animation: none; opacity: 0; }

/* the label - title always visible, tethered to the dot by a gold hairline */
.mw__label {
  position: absolute; top: 0; display: grid; gap: 0; padding: 9px 14px;
  background: rgba(9,7,4,0.42); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border-left: 2px solid #c8ab72; transition: background 0.3s var(--sh-ease), box-shadow 0.3s var(--sh-ease);
}
.mw__spot--right .mw__label { left: 22px; transform: translateY(-50%); }
.mw__spot--left  .mw__label { right: 22px; transform: translateY(-50%); border-left: 0; border-right: 2px solid #c8ab72; text-align: right; }
.mw__label::before { content: ''; position: absolute; top: 50%; width: 16px; height: 1px; }
.mw__spot--right .mw__label::before { left: -16px; background: linear-gradient(to right, rgba(200,171,114,0.9), rgba(200,171,114,0.3)); }
.mw__spot--left  .mw__label::before { right: -16px; background: linear-gradient(to left, rgba(200,171,114,0.9), rgba(200,171,114,0.3)); }
.mw__label-t { font-family: var(--sh-font-body); font-size: 10px; font-weight: var(--sh-fw-medium, 500); letter-spacing: 0.2em; text-transform: uppercase; color: #f0e6d0; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.mw__label-x {
  font-family: var(--sh-font-body); font-size: 12.5px; line-height: 1.5; color: rgba(244,239,232,0.88); max-width: 210px;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s var(--sh-ease), opacity 0.3s var(--sh-ease), margin-top 0.4s var(--sh-ease);
}
.mw__spot.is-open .mw__label { background: rgba(9,7,4,0.9); box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
.mw__spot.is-open .mw__label-x { max-height: 90px; opacity: 1; margin-top: 6px; }

/* ---- mobile list ------------------------------------------------------- */
.mw__list { list-style: none; margin: 0; padding: clamp(20px, 6vw, 32px) clamp(20px, 6vw, 40px) clamp(28px, 8vw, 44px); display: none; }
.mw__list-item { display: flex; gap: 14px; align-items: baseline; padding: clamp(13px, 3.4vw, 18px) 0; border-bottom: 1px solid rgba(244,239,232,0.14); }
.mw__list-item:first-child { border-top: 1px solid rgba(244,239,232,0.14); }
.mw__list-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(200,171,114,0.6); display: grid; place-items: center; font-family: var(--sh-font-body); font-size: 11px; font-weight: var(--sh-fw-medium, 500); color: #c8ab72; }
.mw__list-b { display: grid; gap: 3px; }
.mw__list-t { font-family: var(--sh-font-body); font-size: 10px; font-weight: var(--sh-fw-medium, 500); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,239,232,0.92); }
.mw__list-x { font-family: var(--sh-font-body); font-size: 14px; line-height: 1.55; color: rgba(244,239,232,0.66); }

@media (max-width: 760px) {
  .mw__hero { aspect-ratio: 3 / 4; }
  .mw__content { max-width: none; right: clamp(24px, 6vw, 40px); }
  .mw__spot { display: none; }
  .mw__list { display: block; }
  .mw__scrim { background: linear-gradient(to top, rgba(6,4,3,0.9) 0%, rgba(6,4,3,0.5) 34%, rgba(6,4,3,0.08) 66%, transparent 100%); }
}

/* No JS: reveal every description so nothing hides behind a dead control. */
html:not(.sh-js) .mw__label-x { max-height: none; opacity: 1; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .mw__dot::before { animation: none; } }
/* END_SECTION:spicy-media-wall */

/* START_SECTION:spicy-philosophy (INDEX:69) */
.sh-philos__spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

@media (min-width: 900px) {
  .sh-philos__spread {
    grid-template-columns: 1fr 0.86fr;
    gap: clamp(56px, 8vw, 140px);
  }
  /* The photograph sits lower than the type it accompanies. The mismatch is
     what stops the spread reading as a two-column template. */
  .sh-philos__figure { margin-top: clamp(40px, 7vw, 120px); }
}

.sh-philos__eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: var(--sh-s-6); }

.sh-philos__heading { max-width: 15ch; }

.sh-philos__body {
  margin-top: var(--sh-s-6);
  color: var(--sh-ink-muted);
  max-width: 48ch;
}

.sh-philos__body > * + * { margin-top: var(--sh-s-4); }
.sh-philos__body p { margin: 0; }

.sh-philos__link { display: inline-block; margin-top: var(--sh-s-6); }

.sh-philos__figure { margin: 0; }
.sh-philos__caption { margin-top: var(--sh-s-4); max-width: 34ch; }

/* --------------------------------------------------------------------------
   PRINCIPLES — a ruled list, not a row of cards.
   Hairlines only. Cards would add borders, shadows and corners the brand
   does not use.
   -------------------------------------------------------------------------- */

.sh-philos__principles {
  list-style: none;
  margin: clamp(56px, 9vw, 130px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--sh-line);
}

.sh-philos__principle {
  padding: var(--sh-s-6) 0;
  border-bottom: 1px solid var(--sh-line);
}

@media (min-width: 760px) {
  .sh-philos__principles {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 clamp(28px, 4vw, 72px);
  }
  .sh-philos__principle { padding: var(--sh-s-7) 0; }
}

.sh-philos__label { margin-bottom: var(--sh-s-4); color: var(--sh-ink-faint); }

.sh-philos__text {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-body);
  line-height: var(--sh-lh-body);
  color: var(--sh-ink);
  margin: 0;
  max-width: 34ch;
}
/* END_SECTION:spicy-philosophy */

/* START_SECTION:spicy-projects (INDEX:70) */
.sh-projects { padding-block: var(--sh-section-y); background-color: var(--sh-ground); }

.sh-projects__head { margin-bottom: clamp(40px, 6vw, 88px); }
.sh-projects__heading { max-width: 18ch; }

.sh-panel + .sh-panel { margin-top: clamp(48px, 8vw, 128px); }

.sh-panel__media {
  position: relative;
  height: var(--sh-panel-h, 78vh);
  overflow: hidden;
  background-color: var(--sh-c-espresso);
}

.sh-panel__media .sh-media { position: absolute; inset: -6% 0; height: 112%; }

.sh-panel__captionwrap { margin-top: var(--sh-s-6); }

.sh-panel__caption {
  display: grid;
  gap: var(--sh-s-3);
  max-width: 42ch;
}

/* The caption sits under the image rather than on it. Type over photography
   needs a scrim, and a scrim over good photography is a compromise. */
.sh-panel--right .sh-panel__caption { margin-left: auto; text-align: left; }
.sh-panel--centre .sh-panel__caption { margin-inline: auto; text-align: center; }

.sh-panel__title { margin: 0; }
.sh-panel__note { margin: 0; }
.sh-panel__link { justify-self: start; margin-top: var(--sh-s-2); }
.sh-panel--centre .sh-panel__link { justify-self: center; }
.sh-panel--right .sh-panel__link { justify-self: start; }

@media (max-width: 768px) {
  .sh-panel__media { height: 62vh; }
  .sh-panel--right .sh-panel__caption,
  .sh-panel--centre .sh-panel__caption { margin-left: 0; margin-inline: 0; text-align: left; }
}
/* END_SECTION:spicy-projects */

/* START_SECTION:spicy-rooms-chapters (INDEX:71) */
/* Doubled class: Palo Alto's theme.css puts `display:flex; overflow-x:auto`
   on section elements. Both are fatal here. (0,2,0) wins regardless of order. */
.sh-chapters.sh-chapters {
  display: block;
  overflow: visible;
  background-color: var(--ch-ground, var(--sh-ground));
  color: var(--sh-ink);
}

.sh-chapters__head { padding: var(--sh-section-y) var(--sh-gutter) var(--sh-s-5); }
.sh-chapters__lede {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-fs-h2);
  line-height: var(--sh-lh-heading);
  letter-spacing: var(--sh-ls-heading);
  margin: var(--sh-s-3) 0 0;
  max-width: 16ch;
  text-wrap: balance;
}

.sh-chapter {
  position: relative;
  display: block;
  height: var(--ch-h, 100svh);
  min-height: 460px;
  overflow: hidden;
}

.sh-chapter__media { position: absolute; inset: 0; }
.sh-chapter__img {
  width: 100%;
  height: 100%;
  object-fit: var(--ch-fit, cover);
  object-position: center;
  display: block;
}
.sh-chapter__img--empty { background: var(--sh-ground-warm); }

/* Reaches ~0.62 alpha at the copy baseline — enough for AA on ivory type over
   a bright photograph, while the top two-thirds stay untouched. */
.sh-chapter__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.34) 26%,
    rgba(0,0,0,0.06) 58%,
    rgba(0,0,0,0) 100%);
}

.sh-chapter__copy {
  position: absolute;
  left: var(--sh-gutter);
  right: var(--sh-gutter);
  bottom: clamp(32px, 7vh, 88px);
  max-width: 34ch;
  z-index: 2;
}

.sh-chapters__num {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-eyebrow);
  letter-spacing: var(--sh-ls-eyebrow);
  color: var(--sh-accent);
  margin: 0 0 var(--sh-s-3);
}
.sh-chapters__num-of { color: rgba(242, 241, 237, 0.55); }

.sh-chapter__name {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  font-size: clamp(2.2rem, 5.5vw, var(--ch-title, 4rem));
  line-height: 1.02;
  letter-spacing: var(--sh-ls-display);
  color: var(--sh-c-ivory);
  margin: 0;
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.30);
}

.sh-chapter__note {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-body);
  line-height: 1.55;
  color: rgba(242, 241, 237, 0.86);
  margin: var(--sh-s-4) 0 0;
  max-width: 30ch;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.40);
}

.sh-chapter__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--sh-s-5);
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sh-c-ivory);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(242, 241, 237, 0.4);
  transition: border-color var(--sh-dur-hover) var(--sh-ease);
}
.sh-chapter__cta:hover { border-color: var(--sh-c-ivory); }
.sh-chapter__cta-i { display: inline-flex; transition: transform var(--sh-dur-hover) var(--sh-ease); }
.sh-chapter__cta-i .icon { width: 11px; height: 11px; fill: currentColor; }
.sh-chapter__cta:hover .sh-chapter__cta-i { transform: translateX(5px); }

/* Scroll-driven, no JS. The copy arrives a beat after the room; the image
   settles from 1.04 to 1.00 across its travel. Both are opt-in via @supports
   so unsupporting browsers get the static chapters, which are complete. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
    .sh-chapter__copy {
      animation: sh-ch-rise linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 80%;
    }
    @keyframes sh-ch-rise {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
    .sh-chapter__img {
      animation: sh-ch-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes sh-ch-settle {
      from { transform: scale(1.04); }
      to   { transform: scale(1); }
    }
  }
}
/* END_SECTION:spicy-rooms-chapters */

/* START_SECTION:spicy-rooms-spreads (INDEX:72) */
/* Doubled class: Palo Alto's theme.css puts `display:flex; overflow-x:auto`
   on section elements. Both are fatal here. (0,2,0) wins regardless of order. */
.sh-spreads.sh-spreads {
  display: block;
  overflow: visible;
  background-color: var(--sp-ground, var(--sh-ground));
  color: var(--sh-ink);
  padding-bottom: var(--sh-section-y);
}

.sh-spreads__head { padding: var(--sh-section-y) var(--sh-gutter) 0; }
.sh-spreads__lede {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-fs-h2);
  line-height: var(--sh-lh-heading);
  letter-spacing: var(--sh-ls-heading);
  margin: var(--sh-s-3) 0 0;
  max-width: 16ch;
  text-wrap: balance;
}

.sh-spreads__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap, 14vh);
  padding: clamp(48px, 10vh, 140px) var(--sh-gutter) 0;
}

.sh-spread { display: grid; grid-template-columns: 1fr; gap: var(--sh-s-5); }

/* No aspect-ratio box and no object-fit anywhere: the photograph keeps its
   own proportions, so nothing is ever cropped. */
.sh-spread__media-link { display: block; }
.sh-spread__img { width: 100%; height: auto; display: block; }
.sh-spread__img--empty { aspect-ratio: 4 / 3; background: var(--sh-ground-warm); }

.sh-spreads__num {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-eyebrow);
  letter-spacing: var(--sh-ls-eyebrow);
  color: var(--sh-accent);
  margin: 0 0 var(--sh-s-3);
}
.sh-spreads__num-of { color: var(--sh-ink-faint); }

.sh-spread__name {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  font-size: clamp(2rem, 5vw, var(--sp-title, 4rem));
  line-height: 1.04;
  letter-spacing: var(--sh-ls-display);
  color: var(--sh-ink);
  margin: 0;
}

.sh-spread__note {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-body);
  line-height: 1.6;
  color: var(--sh-ink-muted);
  margin: var(--sh-s-4) 0 0;
  max-width: 32ch;
}

.sh-spread__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--sh-s-5);
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sh-ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sh-line);
  transition: border-color var(--sh-dur-hover) var(--sh-ease);
}
.sh-spread__cta:hover { border-color: var(--sh-ink); }
.sh-spread__cta-i { display: inline-flex; transition: transform var(--sh-dur-hover) var(--sh-ease); }
.sh-spread__cta-i .icon { width: 11px; height: 11px; fill: currentColor; }
.sh-spread__cta:hover .sh-spread__cta-i { transform: translateX(5px); }

@media (min-width: 900px) {
  .sh-spread {
    grid-template-columns: var(--sp-media, 58%) 1fr;
    column-gap: clamp(40px, 6vw, 120px);
    align-items: start;
  }
  /* Alternate the sides without reordering the DOM, so reading order and tab
     order stay image-then-copy on every row. */
  .sh-spread.is-flip .sh-spread__media { grid-column: 2; grid-row: 1; }
  .sh-spread.is-flip .sh-spread__copy  { grid-column: 1; grid-row: 1; }
  .sh-spread.is-flip { grid-template-columns: 1fr var(--sp-media, 58%); }

  /* The copy sits a little into the row rather than at its very top — the
     offset is what makes it read as a spread instead of a two-column table. */
  .sh-spread__copy { padding-top: clamp(24px, 6vh, 88px); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
    .sh-spread__media, .sh-spread__copy {
      animation: sh-sp-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    .sh-spread__copy { animation-range: entry 18% entry 70%; }
    @keyframes sh-sp-rise {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: none; }
    }
  }
}
/* END_SECTION:spicy-rooms-spreads */

/* START_SECTION:spicy-rooms (INDEX:73) */
/* The doubled class is deliberate. Palo Alto's theme.css (served cross-origin,
   so the selector cannot be read back — only its effect) applies
   `display:flex; overflow-x:auto` to this element. Both are fatal: flex
   reflows the stage, and non-visible overflow on an ancestor kills sticky.
   (0,2,0) beats any single-class or element rule regardless of load order. */
.sh-rooms.sh-rooms {
  display: block;
  overflow: visible;
  background-color: var(--rooms-ground, var(--sh-ground));
  color: var(--sh-ink);
}

.sh-rooms__track { position: relative; overflow: visible; }

/* ==========================================================================
   TYPOGRAPHY + CHROME — shared by both layouts.
   ========================================================================== */
.sh-rooms__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; }

.sh-rooms__lede {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  font-size: var(--sh-fs-h2);
  line-height: var(--sh-lh-heading);
  letter-spacing: var(--sh-ls-heading);
  margin: var(--sh-s-3) 0 0;
  max-width: 14ch;
  text-wrap: balance;
}

.sh-rooms__count {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  color: var(--sh-ink-muted);
  margin: 0;
  letter-spacing: 0.08em;
}
.sh-rooms__count [data-room-counter] { color: var(--sh-ink); }
.sh-rooms__count-of { opacity: 0.55; }

.sh-rooms__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.sh-rooms__nav-item {
  /* 44px min target (Apple HIG / Material) via padding, so the type can stay
     small and editorial without shrinking the hit area. */
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sh-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-ink-faint);
  transition: color var(--sh-dur-hover) var(--sh-ease);
}
.sh-rooms__nav-item:hover { color: var(--sh-ink-muted); }
.sh-rooms__nav-item.is-active { color: var(--sh-ink); }
.sh-rooms__nav-dash { opacity: 0.4; }
.sh-rooms__nav-n { font-size: 0.68rem; opacity: 0.75; }

/* The rule fills as you move through the active room — progress, not a tab. */
.sh-rooms__nav-rule {
  position: absolute;
  left: 0; bottom: 0.35rem;
  height: 1px; width: 100%;
  background: var(--sh-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sh-dur-hover) var(--sh-ease);
}
.sh-rooms__nav-item.is-active .sh-rooms__nav-rule {
  background: var(--sh-accent);
  transform: scaleX(calc(0.25 + 0.75 * var(--rule, 0)));
  transition: none;   /* scrub-driven; a transition would lag the scroll */
}

.sh-rooms__num {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-eyebrow);
  letter-spacing: var(--sh-ls-eyebrow);
  color: var(--sh-accent);
  margin: 0 0 var(--sh-s-3);
}

.sh-room__name {
  font-family: var(--sh-font-display);
  font-weight: var(--sh-fw-regular);
  /* Brand rule: "headings stay small — confidence comes from space, not size."
     Default sits at the display token's ceiling; the setting can push it. */
  font-size: clamp(2.2rem, 5vw, var(--room-title, 4rem));
  line-height: 1.02;
  letter-spacing: var(--sh-ls-display);
  color: var(--sh-c-ivory);
  margin: 0;
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.30);   /* legibility without a scrim */
}

.sh-room__note {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-body);
  line-height: 1.55;
  color: rgba(242, 241, 237, 0.86);
  margin: var(--sh-s-4) 0 0;
  max-width: 30ch;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.40);
}

.sh-room__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--sh-s-5);
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sh-c-ivory);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(242, 241, 237, 0.4);
  transition: border-color var(--sh-dur-hover) var(--sh-ease);
}
.sh-room__cta:hover { border-color: var(--sh-c-ivory); }
.sh-room__cta-i { display: inline-flex; transition: transform var(--sh-dur-hover) var(--sh-ease); }
.sh-room__cta-i .icon { width: 11px; height: 11px; fill: currentColor; }
.sh-room__cta:hover .sh-room__cta-i { transform: translateX(5px); }

.sh-room__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-room__img--empty { background: var(--sh-ground-warm); }

/* ==========================================================================
   DEFAULT LAYOUT — the editorial rail. No JS required.
   ========================================================================== */
.sh-rooms__stage { padding: var(--sh-section-y) 0; }
.sh-rooms__head, .sh-rooms__count { padding-inline: var(--sh-gutter); }
.sh-rooms__count, .sh-rooms__nav { display: none; }

.sh-rooms__frames {
  display: flex;
  gap: var(--sh-s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sh-gutter);
  padding: var(--sh-s-6) var(--sh-gutter) var(--sh-s-4);
  max-width: 100%;
  scrollbar-width: none;
}
.sh-rooms__frames::-webkit-scrollbar { display: none; }

.sh-room { flex: 0 0 86vw; scroll-snap-align: start; position: relative; }
.sh-room__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.sh-room__copy { position: absolute; left: var(--sh-s-5); right: var(--sh-s-5); bottom: var(--sh-s-5); }
.sh-room__name { font-size: clamp(1.9rem, 9vw, 2.6rem); }
.sh-room__note { font-size: var(--sh-fs-small); max-width: 26ch; }

@media (min-width: 700px) {
  .sh-room { flex: 0 0 46vw; }
}

.sh-rooms__cursor { display: none; }

/* ==========================================================================
   STAGE — the pinned sequence. Only when spicy-rooms.js has confirmed it can
   pin (desktop, motion allowed, `overflow: clip` supported).
   ========================================================================== */
@media (min-width: 900px) {
  [data-rooms-mode="stage"] .sh-rooms__track { height: var(--track-h); }

  [data-rooms-mode="stage"] .sh-rooms__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(180px, 17vw) 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(24px, 3vw, 56px);
    padding: clamp(28px, 4vh, 64px) var(--sh-gutter);
    align-items: start;
  }

  [data-rooms-mode="stage"] .sh-rooms__head  { grid-column: 1 / 2; grid-row: 1; z-index: 3; padding-inline: 0; }
  [data-rooms-mode="stage"] .sh-rooms__count { grid-column: 2 / 3; grid-row: 1; z-index: 3; justify-self: end; display: block; padding-inline: 0; }
  [data-rooms-mode="stage"] .sh-rooms__nav   { grid-column: 1 / 2; grid-row: 2; z-index: 3; align-self: center; display: block; }

  /* The photograph bleeds off the right edge — the asymmetry is the point.
     align-self:stretch is REQUIRED: the grid sets align-items:start for the
     header and nav, which would otherwise size this track to its content —
     and its content is entirely absolutely positioned, so it collapses to
     zero height and nothing renders at all. Measured before the fix:
     frames height 0, media height 0, copy pushed to y -130. */
  [data-rooms-mode="stage"] .sh-rooms__frames {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    align-self: stretch;
    position: relative;
    display: block;
    overflow: visible;
    padding: 0;
    margin-right: calc(var(--sh-gutter) * -1);
    margin-top: clamp(40px, 7vh, 96px);
    margin-bottom: clamp(28px, 5vh, 64px);
  }

  [data-rooms-mode="stage"] .sh-room {
    position: absolute;
    inset: 0;
    flex: none;
    /* Only the settled room may take a click; the stack behind it must not
       swallow the pointer even while it is still fading. JS narrows this
       further to the room actually in front. */
    pointer-events: none;
  }
  [data-rooms-mode="stage"] .sh-room__media {
    position: absolute; inset: 0; aspect-ratio: auto;
    overflow: hidden; will-change: transform, clip-path;
  }
  [data-rooms-mode="stage"] .sh-room__copy {
    position: absolute;
    left: clamp(-40px, -3vw, -24px);
    right: auto;
    bottom: clamp(24px, 5vh, 64px);
    z-index: 2;
    max-width: 34ch;
    will-change: transform, opacity;
  }
  [data-rooms-mode="stage"] .sh-room__cta { pointer-events: auto; }
  [data-rooms-mode="stage"] .sh-room__name { font-size: clamp(2.2rem, 5vw, var(--room-title, 4rem)); }
  [data-rooms-mode="stage"] .sh-room__note { font-size: var(--sh-fs-body); max-width: 30ch; }

  [data-rooms-mode="stage"] .sh-rooms__cursor {
    display: grid;
    position: fixed;
    top: 0; left: 0;
    z-index: 5;
    width: 62px; height: 62px;
    border-radius: 50%;
    border: 1px solid rgba(242, 241, 237, 0.55);
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    place-items: center;
    font-family: var(--sh-font-body);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sh-c-ivory);
    pointer-events: none;
    opacity: 0;
    scale: 0.85;
    transition: opacity var(--sh-dur-hover) var(--sh-ease),
                scale var(--sh-dur-hover) var(--sh-ease);
  }
  [data-rooms-mode="stage"] .sh-rooms__cursor.is-on { opacity: 1; scale: 1; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .sh-rooms__cursor { display: none !important; }
}
/* END_SECTION:spicy-rooms */

/* START_SECTION:spicy-sofas (INDEX:74) */
.sh-sofas {
  position: relative;
  background-color: var(--sh-ground);
  }

.sh-sofas__track {
  position: relative;
  height: 100svh;   }

.sh-sofas__stage {
  position: sticky;
  top: 0;
  height: 84vh;
  height: 84svh;
  overflow: hidden;            display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(34px, 5vh, 68px);
}

.sh-sofas__head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 32px;
  padding-inline: var(--sh-gutter);
  margin-bottom: clamp(18px, 3vh, 36px);
}

.sh-sofas__eyebrow {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 var(--sh-s-4);
}

.sh-sofas__heading { margin: 0; max-width: 20ch; }

.sh-sofas__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 44px;
  padding: 0 0 8px;
  border-bottom: 1px solid currentColor;
  color: var(--sh-ink);
  font-family: var(--sh-font-body);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.sh-sofas__all-icon {
  display: inline-flex;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
}

.sh-sofas__all-icon .icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.sh-sofas__all:hover,
.sh-sofas__all:focus-visible {
  color: var(--sh-accent);
}

.sh-sofas__all:hover .sh-sofas__all-icon,
.sh-sofas__all:focus-visible .sh-sofas__all-icon {
  transform: translateX(4px);
}

.sh-sofas__viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
}

.sh-sofas__rail {
  --sh-sofas-x: 0px;
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 44px);
  padding-inline: var(--sh-gutter);
  will-change: transform;
  transform: translate3d(var(--sh-sofas-x), 0, 0);
}

.sh-sofas__panel {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.sh-sofas__frame {
  position: relative;
  display: block;
  height: clamp(210px, 42svh, 500px);
  aspect-ratio: var(--sh-ar, 1);
  width: auto;
  overflow: hidden;
  background-color: transparent;
}

.sh-sofas__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sh-sofas__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: clamp(12px, 1.4vw, 22px);
  padding-top: clamp(14px, 1.8vw, 24px);
}

.sh-sofas__index {
  font-family: var(--sh-font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--sh-ink-faint);
  font-variant-numeric: tabular-nums;
}

.sh-sofas__name {
  font-family: var(--sh-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sh-ink);
  transition: color 0.4s var(--sh-ease);
}

.sh-sofas__meta {
  grid-column: 2;
  font-family: var(--sh-font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sh-ink-muted);
  margin-top: 6px;
}

.sh-sofas__panel:hover .sh-sofas__name,
.sh-sofas__panel:focus-visible .sh-sofas__name { color: var(--sh-accent); }

.sh-sofas__empty {
  font-family: var(--sh-font-body);
  color: var(--sh-ink-muted);
  padding-block: var(--sh-s-8);
}

.sh-sofas__rule {
  flex: 0 0 auto;
  margin: clamp(14px, 2.6vh, 30px) var(--sh-gutter) 0;
  height: 1px;
  background: var(--sh-line);
}

.sh-sofas__rule i {
  display: block;
  height: 100%;
  background: var(--sh-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

@media (max-width: 767px) {
  .sh-sofas__track { height: auto !important; }

  .sh-sofas__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: var(--sh-section-y);
  }

  .sh-sofas__head {
    grid-template-columns: 1fr;
  }

  .sh-sofas__all {
    justify-self: start;
  }

  .sh-sofas__viewport { display: block; }

  .sh-sofas__rail {
    transform: none !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .sh-sofas__rail::-webkit-scrollbar { display: none; }

  .sh-sofas__panel {
    width: 78vw;
    scroll-snap-align: center;
  }

    .sh-sofas__frame { height: auto; width: 100%; }

  .sh-sofas__rule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-sofas__track { height: auto !important; }

  .sh-sofas__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: var(--sh-section-y);
  }

  .sh-sofas__viewport { display: block; }

  .sh-sofas__rail {
    transform: none !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    overflow: visible;
    max-width: var(--sh-maxw);
    margin-inline: auto;
  }

  .sh-sofas__panel { width: auto; }
  .sh-sofas__frame { height: auto; width: 100%; }
  .sh-sofas__rule { display: none; }
}
/* END_SECTION:spicy-sofas */

/* START_SECTION:spicy-story (INDEX:75) */
.sh-story {
  background-color: var(--sh-ground);
  color: var(--sh-ink);
  padding-block: clamp(60px, 9vh, 130px) clamp(80px, 12vh, 180px);
  overflow-x: clip;
}

.sh-story__open {
  max-width: var(--sh-maxw);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
  padding-block: clamp(40px, 9vh, 120px) clamp(60px, 12vh, 150px);
}

.sh-story__eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 var(--sh-s-5); }

.sh-story__title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  max-width: 17ch;
  margin: 0;
}

.sh-story__lede {
  margin: clamp(24px, 3vw, 40px) 0 0;
  max-width: 52ch;
  font-family: var(--sh-font-body);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--sh-ink-muted);
}

.sh-story__ch {
  position: relative;
  max-width: var(--sh-maxw);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
  padding-block: clamp(48px, 9vh, 120px);
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

/* The year is a watermark behind the type, not a label. Decorative, so it is
   aria-hidden — the date is already in the words. */
.sh-story__year {
  display: block;
  font-family: var(--sh-font-display);
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--sh-ink);
  opacity: .09;
  margin-bottom: clamp(-30px, -2.6vw, -14px);
  pointer-events: none;
}

.sh-story__ch-eyebrow {
  font-family: var(--sh-font-body);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sh-ink-faint);
  margin: 0 0 var(--sh-s-4);
}

.sh-story__ch-title {
  font-family: var(--sh-font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0;
}

.sh-story__body {
  margin-top: clamp(16px, 1.8vw, 26px);
  max-width: 46ch;
  font-family: var(--sh-font-body);
  font-size: clamp(.95rem, 1.05vw, 1.09rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--sh-ink-muted);
}
.sh-story__body p { margin: 0 0 1em; }
.sh-story__body p:last-child { margin-bottom: 0; }

.sh-story__media { position: relative; display: grid; }

.sh-story__fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--sh-ground-alt);
}

.sh-story__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 768px) {
  .sh-story__ch--left  { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .sh-story__ch--right { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }

  .sh-story__ch--left  .sh-story__media { order: 1; }
  .sh-story__ch--left  .sh-story__words { order: 2; }
  .sh-story__ch--right .sh-story__media { order: 2; }
  .sh-story__ch--right .sh-story__words { order: 1; }

  .sh-story__ch--left .sh-story__fig,
  .sh-story__ch--right .sh-story__fig { aspect-ratio: 4 / 5; }

  /* Deliberately unequal. A matched pair reads as a gallery grid; an unequal
     one reads as art direction. */
  .sh-story__ch--pair { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .sh-story__ch--pair .sh-story__media {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: clamp(14px, 2vw, 30px);
  }
  .sh-story__ch--pair .sh-story__fig { aspect-ratio: 3 / 4; }
  .sh-story__ch--pair .sh-story__fig--second {
    aspect-ratio: 1 / 1;
    margin-bottom: clamp(24px, 5vw, 70px);
  }

  .sh-story__ch--detail { grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); }
  .sh-story__ch--detail .sh-story__fig { aspect-ratio: 1 / 1; }

  .sh-story__ch--type { grid-template-columns: minmax(0, .18fr) minmax(0, .62fr); }
  .sh-story__ch--type .sh-story__words { grid-column: 2; }
}

.sh-story__ch--full {
  max-width: none;
  padding-inline: 0;
  padding-block: clamp(60px, 10vh, 140px);
  display: block;
}

.sh-story__ch--full .sh-story__fig { aspect-ratio: 21 / 9; min-height: 62svh; }
.sh-story__ch--full .sh-story__media { position: relative; }

.sh-story__ch--full .sh-story__fig::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8,7,6,.72) 0%, rgba(8,7,6,.28) 46%, rgba(8,7,6,0) 74%),
    linear-gradient(to top, rgba(8,7,6,.44) 0%, rgba(8,7,6,0) 42%);
}

.sh-story__ch--full .sh-story__words {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  max-width: var(--sh-maxw);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 76px) var(--sh-gutter);
  color: var(--sh-c-ivory, #f4efe9);
}

.sh-story__ch--full .sh-story__year { color: #fff; opacity: .22; }
.sh-story__ch--full .sh-story__ch-eyebrow { color: rgba(244,239,233,.72); }
.sh-story__ch--full .sh-story__body { color: rgba(244,239,233,.86); max-width: 44ch; }

.sh-story__ch--type .sh-story__ch-title { font-size: clamp(1.9rem, 4.2vw, 4rem); max-width: 18ch; }
.sh-story__ch--type .sh-story__body { font-size: clamp(1rem, 1.2vw, 1.24rem); max-width: 44ch; }

.sh-story__end {
  max-width: var(--sh-maxw);
  margin-inline: auto;
  padding-inline: var(--sh-gutter);
  padding-top: clamp(30px, 5vh, 60px);
}

.sh-story__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 20px);
  padding-bottom: 7px;
  font-family: var(--sh-font-body);
  font-size: clamp(11px, .86vw, 13px);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sh-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity .3s var(--sh-ease);
}
.sh-story__cta svg { width: 28px; height: 8px; flex: none; overflow: visible; transition: transform .5s var(--sh-ease); }
.sh-story__cta:hover { opacity: .68; }
.sh-story__cta:hover svg { transform: translateX(7px); }

/* ==========================================================================
   REVEALS — armed by JS, never by CSS alone.

   Every hidden state below is scoped to `.sh-story.is-armed`, a class added
   by assets/spicy-story.js. Without that script the page is simply visible.
   This is not defensive tidiness: the first version hid everything in CSS and
   shipped a completely blank story page when the observer did not fire.
   ========================================================================== */

/* The mask uncovers the frame; the photograph settles 1.06 -> 1. No fade on
   the image itself — a photograph that fades in reads as a slow connection,
   one that is uncovered reads as intent. */
.sh-story.is-armed [data-sh-mask] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--sh-ease);
}
.sh-story.is-armed [data-sh-mask] .sh-story__img {
  transform: scale(1.06);
  transition: transform 1.8s var(--sh-ease);
}
.sh-story [data-sh-mask].is-in { clip-path: inset(0 0 0 0); }
.sh-story [data-sh-mask].is-in .sh-story__img { transform: scale(1); }

.sh-story.is-armed [data-sh-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--sh-ease), transform .9s var(--sh-ease);
}
.sh-story [data-sh-reveal].is-in { opacity: 1; transform: none; }
.sh-story .sh-story__year[data-sh-reveal].is-in { opacity: .09; }
.sh-story__ch--full .sh-story__year[data-sh-reveal].is-in { opacity: .22; }

@media (max-width: 767px) {
  .sh-story__ch { grid-template-columns: 1fr; }
  .sh-story__media { order: 1 !important; }
  .sh-story__words { order: 2 !important; }
  .sh-story__fig { aspect-ratio: 4 / 5; }
  .sh-story__ch--pair .sh-story__media { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sh-story__ch--pair .sh-story__fig--second { margin-bottom: 0; }
  .sh-story__ch--full .sh-story__fig { aspect-ratio: 4 / 5; min-height: 0; }
  .sh-story__ch--full .sh-story__words { position: static; color: inherit; padding-inline: var(--sh-gutter); }
  .sh-story__ch--full .sh-story__ch-eyebrow { color: var(--sh-ink-faint); }
  .sh-story__ch--full .sh-story__body { color: var(--sh-ink-muted); }
  .sh-story__ch--full .sh-story__year { color: var(--sh-ink); }
  .sh-story__ch--full .sh-story__year[data-sh-reveal].is-in { opacity: .09; }
  .sh-story__ch--full .sh-story__fig::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-story.is-armed [data-sh-mask],
  .sh-story.is-armed [data-sh-mask] .sh-story__img,
  .sh-story.is-armed [data-sh-reveal] {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sh-story .sh-story__year[data-sh-reveal] { opacity: .09; }
}
/* END_SECTION:spicy-story */

/* START_SECTION:spicy-testimonials (INDEX:76) */
/* Tighter than --sh-section-y: this is a proof band, not a chapter. */
.tq {
  padding-block: clamp(34px, 4.6vw, 62px);
  background-color: var(--sh-ground);
  overflow: hidden;
}

/* ---- the band ------------------------------------------------------------
   Heading, score and CTA share one row on desktop and stack on small
   screens, which is what keeps the whole section under half a screen. */
.tq__band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sh-s-5) var(--sh-s-6);
}

.tq__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; }
.tq__heading { margin-top: var(--sh-s-3); max-width: 20ch; }

.tq__score { display: flex; align-items: center; gap: var(--sh-s-4); }

.tq__score-num {
  font-family: var(--sh-font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: var(--sh-fw-regular);
  line-height: 1;
  letter-spacing: var(--sh-ls-display);
  color: var(--sh-ink);
}

.tq__score-right { display: flex; flex-direction: column; gap: 5px; }

.tq__stars { display: inline-flex; gap: 3px; }
.tq__stars svg { width: 16px; height: 16px; fill: var(--sh-accent); }
.tq__stars--sm svg { width: 13px; height: 13px; }

.tq__score-meta {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  color: var(--sh-ink-muted);
}

.tq__cta-icon {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- the rail ------------------------------------------------------------
   Native horizontal scrolling by default: keyboard, trackpad and touch all
   behave correctly and it costs no JavaScript. JS only upgrades this to the
   scroll-driven version where that is a good idea. */
.tq__viewport {
  margin-top: clamp(24px, 3.2vw, 42px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.tq__viewport::-webkit-scrollbar { display: none; }
.tq__viewport:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 4px; }

.tq__rail {
  display: flex;
  gap: var(--sh-s-6);
  list-style: none;
  margin: 0;
  padding-inline: var(--sh-gutter);
  width: max-content;
}

.tq__cell {
  flex: 0 0 auto;
  width: clamp(255px, 26vw, 340px);
  scroll-snap-align: start;
}

.tq__card {
  margin: 0;
  padding-top: var(--sh-s-4);
  border-top: 1px solid var(--sh-line);
  height: 100%;
}

/* Capped at six lines so one long review cannot set the height of the whole
   band — the reason this section came out taller than the screen. The words
   are never altered, only how many are shown before the card ends, and the
   full text is one click away on Google. Every card then occupies the same
   height and the rail reads as a row rather than a ragged skyline. */
.tq__text {
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-small);
  font-weight: var(--sh-fw-light);
  line-height: 1.62;
  letter-spacing: var(--sh-ls-body);
  color: var(--sh-ink-muted);
  margin: var(--sh-s-4) 0 0;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tq__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: var(--sh-s-4);
  font-family: var(--sh-font-body);
  font-size: var(--sh-fs-eyebrow);
  font-weight: var(--sh-fw-medium);
  letter-spacing: var(--sh-ls-eyebrow);
  text-transform: uppercase;
}

.tq__by-name { color: var(--sh-ink); }
.tq__by-sep,
.tq__by-date { color: var(--sh-ink-faint); }

.tq__foot { margin-top: clamp(22px, 2.8vw, 36px); }
.tq__read { font-size: var(--sh-fs-small); letter-spacing: 0.04em; }

/* ---- scroll-driven mode --------------------------------------------------
   Added by JS only. Native scrolling is switched off here because the two
   would fight each other for the same axis; JS owns the offset instead. */
.tq.is-driven .tq__viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.tq.is-driven .tq__rail {
  transform: translate3d(var(--tq-x, 0px), 0, 0);
  will-change: transform;
}

@media (max-width: 640px) {
  .tq__band { align-items: flex-start; }
  .tq__cta { width: 100%; }
  .tq__cell { width: min(78vw, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .tq.is-driven .tq__rail { transform: none; }
  .tq.is-driven .tq__viewport { overflow-x: auto; }
}
/* END_SECTION:spicy-testimonials */

/* START_SECTION:spicy-tv-units (INDEX:77) */
/* ==========================================================================
   BESPOKE TV UNITS
   Editorial, not boxed. One accent, hairline dividers, and a lot of air -
   the boxed card version of this section is what read as "standard".
   ========================================================================== */
.tvu { background-color: var(--sh-ground); color: var(--sh-ink); padding-block: var(--sh-section-y); }

/* ---- 1 heading --------------------------------------------------------- */
.tvu__head { max-width: 1000px; margin-bottom: clamp(30px, 4vw, 56px); }
.tvu__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 clamp(14px, 1.8vw, 22px); }
/* Colour stated deliberately - see the note at the top of the file. */
.tvu__h {
  font-family: var(--sh-font-display); font-weight: var(--sh-fw-light);
  font-size: clamp(32px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--sh-ink); margin: 0; max-width: 15ch; text-wrap: balance;
}
.tvu__lede {
  font-family: var(--sh-font-body); font-size: clamp(14px, 1vw, 17px); line-height: 1.6;
  color: var(--sh-ink-muted); margin: clamp(18px, 2.2vw, 28px) 0 0; max-width: 52ch; text-wrap: pretty;
}

/* ---- 2 the band -------------------------------------------------------- */
.tvu__stage { position: relative; width: 100%; aspect-ratio: 2.9; min-height: 300px; overflow: hidden; background: #0d0b0a; }
.tvu__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tvu__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,3,3,0.58) 0%, rgba(4,3,3,0.08) 40%, rgba(4,3,3,0) 68%);
}
.tvu__dim { position: absolute; inset: 0; pointer-events: none; }
.tvu__dim-h {
  position: absolute; height: 1px;
  left: clamp(16px, 2.6vw, 44px); right: clamp(16px, 2.6vw, 44px); bottom: clamp(20px, 3vw, 42px);
}
.tvu__dim-line {
  position: absolute; inset: 0; background: rgba(242,241,237,0.7);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--sh-ease) 0.2s;
}
.tvu__stage.is-inview .tvu__dim-line { transform: scaleX(1); }
.tvu__dim-h::before, .tvu__dim-h::after {
  content: ''; position: absolute; top: -5px; width: 1px; height: 11px; background: rgba(242,241,237,0.7);
}
.tvu__dim-h::before { left: 0; }
.tvu__dim-h::after { right: 0; }
.tvu__dim-label {
  position: absolute; right: clamp(16px, 2.6vw, 44px); bottom: clamp(20px, 3vw, 42px);
  transform: translateY(50%);
  font-family: var(--sh-font-body); font-size: clamp(9px, 0.66vw, 10.5px); font-weight: var(--sh-fw-medium);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sh-c-ivory);
  background: rgba(8,6,5,0.80); padding: 5px 12px; white-space: nowrap;
}
.tvu__mark { position: absolute; width: 12px; height: 12px; border: 0 solid rgba(242,241,237,0.42); }
.tvu__mark--tl { top: clamp(12px,2vw,28px); left: clamp(12px,2vw,28px); border-top-width: 1px; border-left-width: 1px; }
.tvu__mark--tr { top: clamp(12px,2vw,28px); right: clamp(12px,2vw,28px); border-top-width: 1px; border-right-width: 1px; }
.tvu__mark--bl { bottom: clamp(12px,2vw,28px); left: clamp(12px,2vw,28px); border-bottom-width: 1px; border-left-width: 1px; }
.tvu__mark--br { bottom: clamp(12px,2vw,28px); right: clamp(12px,2vw,28px); border-bottom-width: 1px; border-right-width: 1px; }

/* ---- 3 the process row -------------------------------------------------
   NO flex-wrap at desktop. With wrapping on, the steps claim their content
   width, the button has nowhere to sit and drops onto its own line leaving a
   large hole above it - which is exactly what shipped once. */
.tvu__meta {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px); border-bottom: 1px solid var(--sh-line);
}
.tvu__steps { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 auto; min-width: 0; }
.tvu__cta-wrap { display: flex; align-items: center; flex: 0 0 auto; padding-block: clamp(16px, 2vw, 26px); }
@media (max-width: 1099px) { .tvu__meta { flex-wrap: wrap; } }
.tvu__step {
  flex: 1 1 0; min-width: 0;
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 32px) clamp(20px, 2.4vw, 32px) 0;
  display: flex; align-items: baseline; gap: clamp(10px, 1.2vw, 18px);
}
.tvu__step + .tvu__step { border-left: 1px solid var(--sh-line); padding-left: clamp(16px, 2vw, 32px); }
.tvu__num { font-family: var(--sh-font-body); font-size: var(--sh-fs-eyebrow); letter-spacing: 0.18em; color: var(--sh-accent); flex: 0 0 auto; }
.tvu__step-b { min-width: 0; }
.tvu__step-h {
  display: block; font-family: var(--sh-font-body); font-size: var(--sh-fs-eyebrow);
  font-weight: var(--sh-fw-medium); letter-spacing: var(--sh-ls-eyebrow);
  text-transform: uppercase; color: var(--sh-ink);
}
.tvu__step-t {
  display: block; font-family: var(--sh-font-body); font-size: clamp(12px, 0.8vw, 13.5px);
  font-weight: var(--sh-fw-light); line-height: 1.5; color: var(--sh-ink-muted);
  margin-top: 6px; max-width: 30ch; text-wrap: pretty;
}

/* ---- 4 the units, by house --------------------------------------------- */
.tvu__shop { margin-top: clamp(46px, 6vw, 90px); }
.tvu__shop-head { margin-bottom: clamp(26px, 3.4vw, 46px); }
.tvu__shop-h {
  font-family: var(--sh-font-display); font-weight: var(--sh-fw-regular);
  font-size: clamp(24px, 2.4vw, 38px); line-height: 1.08; color: var(--sh-ink);
  margin: 8px 0 0; max-width: 20ch; text-wrap: balance;
}
.tvu__group { margin-top: clamp(30px, 4vw, 58px); }
/* The brand line: name, a rule that takes the slack, then the count. It is
   what makes each house read as its own chapter rather than a filter chip. */
.tvu__brand {
  display: flex; align-items: baseline; gap: clamp(12px, 1.6vw, 22px);
  padding-bottom: clamp(12px, 1.4vw, 18px); border-bottom: 1px solid var(--sh-line);
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.tvu__brand-n {
  font-family: var(--sh-font-display); font-weight: var(--sh-fw-regular);
  font-size: clamp(19px, 1.7vw, 27px); line-height: 1; color: var(--sh-ink); margin: 0;
}
.tvu__brand-rule { flex: 1 1 auto; height: 1px; background: var(--sh-line); }
.tvu__brand-c {
  font-family: var(--sh-font-body); font-size: var(--sh-fs-eyebrow);
  letter-spacing: var(--sh-ls-eyebrow); text-transform: uppercase;
  color: var(--sh-ink-faint); margin: 0; flex: 0 0 auto;
}
.tvu__rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px);
}
.tvu__card a { display: block; text-decoration: none; color: inherit; }
/* display:block matters: this is a <span>, and an inline box ignores
   aspect-ratio entirely - which is what made the cards land at different
   heights the first time. */
.tvu__card-img {
  display: block; position: relative; overflow: hidden;
  background: #e9e5df; aspect-ratio: 4 / 3;
}
.tvu__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--sh-ease); }
.tvu__card a:hover .tvu__card-img img, .tvu__card a:focus-visible .tvu__card-img img { transform: scale(1.04); }
.tvu__card-t {
  display: block; font-family: var(--sh-font-display); font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.2; color: var(--sh-ink); margin-top: clamp(12px, 1.4vw, 18px);
}
.tvu__card-r {
  display: block; width: 0; height: 1px; background: var(--sh-accent);
  margin-top: 8px; transition: width 0.5s var(--sh-ease);
}
.tvu__card a:hover .tvu__card-r, .tvu__card a:focus-visible .tvu__card-r { width: 32px; }

/* ---- 5 both ways out --------------------------------------------------- */
.tvu__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.6vw, 34px);
  margin-top: clamp(44px, 6vw, 84px); padding-top: clamp(28px, 3.4vw, 48px);
  border-top: 1px solid var(--sh-line);
}
.tvu__link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sh-font-body); font-size: var(--sh-fs-small); font-weight: var(--sh-fw-medium);
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--sh-ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--sh-line-strong);
  transition: border-color 0.35s var(--sh-ease);
}
.tvu__link:hover, .tvu__link:focus-visible { border-color: var(--sh-ink); }

@media (max-width: 899px) {
  .tvu__stage { aspect-ratio: 4 / 3; }
  .tvu__steps { flex-direction: column; }
  .tvu__step { padding-right: 0; }
  .tvu__step + .tvu__step { border-left: 0; border-top: 1px solid var(--sh-line); padding-left: 0; }
  .tvu__step-t { max-width: none; }
  .tvu__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

html:not(.sh-js) .tvu__dim-line { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .tvu__dim-line { transition: none !important; transform: scaleX(1) !important; }
  .tvu__card-img img, .tvu__card-r { transition: none; }
}
/* END_SECTION:spicy-tv-units */

/* START_SECTION:spicy-vispring-v2 (INDEX:78) */
/* Doubled class: theme.css forces display:flex + overflow-x:auto onto this
   element, and non-visible overflow on an ancestor kills sticky outright.
   (0,2,0) beats any single-class or element rule without !important. */
.vis2.vis2 {
  display: block;
  overflow: visible;
  background: var(--sh-c-black);
  color: var(--sh-c-ivory);
}

/* COLOUR IS NOT OPTIONAL ON THESE THREE — see bug 1 at the top of the file.
   theme.css sets `h1…h6 { color: var(--heading) }` = rgb(34,34,34), and an
   element rule beats the section's inherited ivory. `.vis2__h1` is (0,1,0)
   and beats that (0,0,1) rule, so simply stating the colour is enough; no
   !important is needed. The two light-ground overrides (.vis2__panel .vis2__h2
   and .vis2__tiles-h) re-flip it to espresso and MUST stay later in this
   file than this block, or the light chapters go white-on-white. */
.vis2__h1 {
  font-family: var(--sh-font-display); font-weight: var(--sh-fw-regular);
  font-size: var(--sh-fs-display); line-height: var(--sh-lh-display);
  letter-spacing: var(--sh-ls-display); margin: 0; text-wrap: balance;
  color: var(--sh-c-ivory);
}
.vis2__h2 {
  font-family: var(--sh-font-display); font-weight: var(--sh-fw-regular);
  font-size: var(--sh-fs-h1); line-height: var(--sh-lh-heading);
  letter-spacing: var(--sh-ls-heading); margin: 0; text-wrap: balance;
  color: var(--sh-c-ivory);
}
.vis2__h3 {
  font-family: var(--sh-font-display); font-weight: var(--sh-fw-regular);
  font-size: var(--sh-fs-h3); line-height: 1.25; margin: 0;
  color: var(--sh-c-ivory);
}
.vis2__sub {
  font-family: var(--sh-font-body); font-size: var(--sh-fs-h3);
  font-weight: var(--sh-fw-light); color: rgba(242,241,237,0.80);
  margin: var(--sh-s-4) 0 0;
}
.vis2__body {
  font-family: var(--sh-font-body); font-size: var(--sh-fs-body);
  line-height: var(--sh-lh-body); color: rgba(242,241,237,0.74);
  margin: var(--sh-s-5) 0 0; max-width: 56ch;
}
.vis2__small {
  font-family: var(--sh-font-body); font-size: var(--sh-fs-small);
  line-height: 1.6; color: rgba(242,241,237,0.62); margin: var(--sh-s-3) 0 0;
}
.vis2__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; color: rgba(242,241,237,0.62); }
.vis2__num {
  font-family: var(--sh-font-body); font-size: var(--sh-fs-eyebrow);
  letter-spacing: var(--sh-ls-eyebrow); color: var(--sh-c-rouge-light);
  margin: 0 0 var(--sh-s-2);
}

/* ---- 01 intro -----------------------------------------------------------
   The chapter opens on a silent looping film. spicy-vispring-v2.js injects
   the <video> element (URL from the Intro film setting, falling back to the
   one it ships with); everything visual is here, so the chapter still reads
   correctly if that script never runs — it is simply the dark ground with
   the copy on it. */
.vis2__intro {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  overflow: hidden; padding-block: 0; background: #050403;
}
.vis2__intro-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
  transform: scale(1.01);
  /* opacity 1 and filter none AT EVERY WIDTH. His note was that the film
     must get brighter without its colour being touched — so all darkening
     is done by the black scrim below, which lowers luminance without
     shifting hue. An opacity below 1 blends the picture into the near-black
     ground behind it, which desaturates it; a filter would do worse. The
     old mobile rule set opacity:.58 and was exactly the problem. */
  opacity: 1; filter: none;
}
/* The scrim is a POCKET under the copy, not a wash over the picture: full
   strength across the copy column, clearing by 90% so the right of the frame
   keeps the film's own light. --intro-dim is UNITLESS (bug 2) and comes from
   the Film dimming setting, so this is tunable without a code change. At the
   default .35 the copy sits on ~0.79 alpha, about 5:1 against the brightest
   bedding in the film. */
.vis2__intro::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(0,0,0,calc(var(--intro-dim, .35) + .44)) 0%,
      rgba(0,0,0,calc(var(--intro-dim, .35) + .34)) 40%,
      rgba(0,0,0,calc(var(--intro-dim, .35) + .22)) 56%,
      rgba(0,0,0,calc(var(--intro-dim, .35) * .20)) 76%,
      rgba(0,0,0,0) 90%),
    linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.22) 100%);
}
/* His note: move the copy further left, and take the logotype with it. Both
   share this one left edge, so widening the wrap box for this chapter alone
   slides them together. 1600 rather than the site's 1280: on a 1920 screen
   that is 160px further left, and at or below 1600 nothing moves at all. */
.vis2__intro-inner {
  position: relative; z-index: 2; max-width: 1600px;
  padding-block: clamp(104px, 12vw, 170px);
}
.vis2__intro-copy { max-width: 780px; text-shadow: 0 1px 22px rgba(0,0,0,0.5); }
/* p3: "Can you make the logo more visible" — and, second pass, "leave the
   logo as it is": the width is untouched, only its left edge moved. */
.vis2__logo { width: var(--vis2-logo-w, 280px); height: auto; display: block; margin-bottom: clamp(28px, 4vw, 56px); }
.vis2__intro .vis2__h1 { font-size: clamp(30px, 2.9vw, 50px); line-height: 1.08; max-width: 18ch; font-weight: var(--sh-fw-light); }
.vis2__intro .vis2__sub {
  font-size: clamp(13px, .9vw, 16px); letter-spacing: .18em; text-transform: uppercase;
  margin-top: clamp(20px, 2.2vw, 30px); color: rgba(242,241,237,0.86);
}
.vis2__intro .vis2__body {
  font-size: clamp(13px, .85vw, 15px); line-height: 1.6; max-width: 42ch;
  margin-top: clamp(18px, 2vw, 26px); color: rgba(242,241,237,0.86);
}
/* Held to 600px so the marks stay inside the strong part of the scrim —
   they are the smallest type on the chapter and the first to go unreadable
   if they run out past it. */
.vis2__badges {
  list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2vw, 28px); max-width: 600px;
}
.vis2__badges li {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sh-font-body); font-size: clamp(9.5px, .66vw, 11.5px);
  letter-spacing: .22em; text-transform: uppercase; color: rgba(242,241,237,0.92);
}
/* Ghost rather than solid: the solid ivory button belongs to chapter 03,
   which is the one real conversion on this page. */
.vis2__intro-cta {
  margin-top: clamp(28px, 3.4vw, 44px);
  background: transparent; border-color: rgba(242,241,237,0.55); color: var(--sh-c-ivory);
}
.vis2__intro-cta:hover, .vis2__intro-cta:focus-visible {
  background: var(--sh-c-ivory); border-color: var(--sh-c-ivory); color: var(--sh-c-black);
}
@media (max-width: 767px) {
  .vis2__intro { min-height: 92svh; }
  .vis2__intro .vis2__h1 { font-size: clamp(32px, 10vw, 44px); }
  .vis2__intro .vis2__body { max-width: 34ch; }
  /* Full-bleed copy: a horizontal ramp protects nothing, so wash vertically. */
  .vis2__intro::before {
    background: linear-gradient(to bottom,
      rgba(0,0,0,calc(var(--intro-dim, .35) + .30)) 0%,
      rgba(0,0,0,calc(var(--intro-dim, .35) + .20)) 55%,
      rgba(0,0,0,calc(var(--intro-dim, .35) + .34)) 100%);
  }
}

/* ---- 02 film ----------------------------------------------------------- */
.vis2__film-track { position: relative; overflow: visible; }
.vis2__film-stage { position: relative; height: 70svh; min-height: 420px; overflow: hidden; }
@supports (overflow: clip) {
  [data-vis2-film-mode="scrub"] .vis2__film-track { height: var(--track-h); }
  [data-vis2-film-mode="scrub"] .vis2__film-stage { position: sticky; top: 0; height: 100svh; }
}
.vis2__video, .vis2__film-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A veil only where the type sits — not a blanket wash over the photography. */
.vis2__film-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.20) 38%, rgba(0,0,0,0) 68%);
}
.vis2__film-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 72px);
  padding-inline: var(--sh-gutter); max-width: 46ch;
}
.vis2__note { font-family: var(--sh-font-body); font-size: var(--sh-fs-body); line-height: 1.6; color: rgba(242,241,237,0.80); margin: var(--sh-s-3) 0 0; }

/* ---- 03 + 04 — the split ------------------------------------------------
   His note: settle both on one screen, Vispring x Spicy Home left and
   bigger, Naturally Exceptional right. 1.62fr / 1fr is close enough to the
   golden ratio to read as deliberate rather than as an accident of content,
   and it leaves the right panel wide enough for a 42ch measure — below that
   the body copy starts hyphenating badly. */
.vis2__split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .vis2__split { grid-template-columns: 1.62fr 1fr; min-height: 100svh; align-items: stretch; }
}

/* left: the pair */
.vis2__pair {
  position: relative; display: grid; align-items: center; overflow: hidden;
  min-height: 0; background: #050403;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 3.6vw, 72px);
}
.vis2__pair-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Pushed off-centre so the bed, not the empty left wall, is what survives
     the crop once this is only 62% of the viewport wide. */
  object-fit: cover; object-position: 60% 50%;
}
/* Scoped inside the column, so it scales with the column instead of the
   viewport (bug 3). Full strength across the copy, clear by the column's
   right edge so the photograph still reads. */
.vis2__pair-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,calc(var(--dim, .45) + .37)) 0%,
      rgba(0,0,0,calc(var(--dim, .45) + .30)) 45%,
      rgba(0,0,0,calc(var(--dim, .45) * .25)) 78%,
      rgba(0,0,0,0) 100%),
    linear-gradient(to top, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 58%);
}
/* .sh-wrap centres a 1280 box; inside a 62% column that would re-indent the
   copy and fight the column's own padding. Neutralised here. */
.vis2__pair-inner { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; padding: 0; }
.vis2__pair-copy { max-width: min(640px, 80%); text-shadow: 0 1px 20px rgba(0,0,0,0.45); }
/* Deliberately absent — see the note in the markup. */
.vis2__pair-logo { display: none; }
.vis2__pair .vis2__eyebrow {
  font-size: clamp(11px, .82vw, 14px); letter-spacing: .28em;
  margin-bottom: clamp(14px, 1.8vw, 22px); color: rgba(242,241,237,0.88);
}
/* 52px against the right panel's 34px: the size gap is what makes this read
   as the primary of the two, alongside the extra width and the photograph. */
.vis2__pair .vis2__h1 { font-size: clamp(30px, 3.05vw, 52px); line-height: 1.06; max-width: 20ch; }
.vis2__pair .vis2__body {
  font-size: clamp(14px, .95vw, 16.5px); line-height: 1.58; max-width: 46ch;
  margin-top: clamp(16px, 2vw, 24px); color: rgba(242,241,237,0.85);
}
.vis2__btn { margin-top: clamp(22px, 2.6vw, 34px); background: var(--sh-c-ivory); border-color: var(--sh-c-ivory); color: var(--sh-c-black); }
.vis2__btn:hover, .vis2__btn:focus-visible { background: transparent; color: var(--sh-c-ivory); }

/* right: his off-white panel. Every token flips inside it — ink goes dark,
   the greys are re-derived from the espresso, and the white logotype is
   deliberately never rendered here. */
.vis2__panel {
  background: var(--vis2-panel, #f2efe8); color: var(--sh-c-espresso);
  min-height: 0; padding: clamp(48px, 5vw, 84px) clamp(26px, 3vw, 58px);
}
.vis2__panel-inner {
  max-width: none; margin: 0; padding-inline: 0; height: 100%; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(24px, 2.6vw, 40px);
}
.vis2__panel-text, .vis2__panel-media { width: 100%; max-width: 520px; }
.vis2__panel .vis2__h2 { color: var(--sh-c-espresso); font-size: clamp(23px, 1.95vw, 34px); line-height: 1.1; }
.vis2__panel .vis2__body {
  color: rgba(41,36,33,0.78); font-size: clamp(13.5px, .9vw, 15.5px);
  line-height: 1.56; margin-top: clamp(12px, 1.5vw, 18px); max-width: 42ch;
}
.vis2__panel .vis2__small { color: rgba(41,36,33,0.62); }
.vis2__eyebrow--dark {
  color: rgba(41,36,33,0.66); font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .3em; margin-bottom: clamp(10px, 1.3vw, 15px);
}
.vis2__panel-media { min-height: 0; }
.vis2__panel-media img {
  width: 100%; height: 100%; max-height: 42svh; object-fit: cover; display: block;
  box-shadow: 0 18px 44px rgba(41,36,33,0.14);
}

@media (max-width: 899px) {
  /* Stacked: the pair keeps enough height to be a photograph rather than a
     band, and its scrim goes vertical because the copy is now full-bleed. */
  .vis2__pair { min-height: 62svh; padding-block: clamp(44px, 10vw, 72px); }
  .vis2__pair-copy { max-width: none; }
  .vis2__pair-veil {
    background: linear-gradient(to top,
      rgba(0,0,0,calc(var(--dim, .45) + .34)) 0%,
      rgba(0,0,0,calc(var(--dim, .45) + .18)) 58%,
      rgba(0,0,0,calc(var(--dim, .45) * .70)) 100%);
  }
  .vis2__panel-text, .vis2__panel-media { max-width: none; }
  .vis2__panel-media img { max-height: 46svh; }
}

/* ---- 05 the row: three in one line, docking to icons ------------------- */
.vis2__row-track { position: relative; overflow: visible; }
.vis2__row-stage { padding-block: clamp(56px, 9vw, 120px); }
.vis2__row-head { margin-bottom: clamp(28px, 4vw, 56px); }
.vis2__row { display: grid; gap: clamp(16px, 2vw, 32px); }
@media (min-width: 900px) { .vis2__row { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.vis2__card-media { overflow: hidden; background: #0d0b0a; }
.vis2__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.vis2__card-text { padding-top: var(--sh-s-4); }

@supports (overflow: clip) {
  @media (min-width: 900px) {
    [data-vis2-row-mode="dock"] .vis2__row-track { height: var(--track-h); }
    [data-vis2-row-mode="dock"] .vis2__row-stage {
      position: sticky; top: 0; height: 100svh;
      display: flex; flex-direction: column; justify-content: center;
    }
    /* --dock 0 → 1 shrinks the three panels toward a compact icon rail and
       lifts them to the top of the stage, exactly as he sketched: "we keep
       this and the other two images on top… in a smaller icons". Only
       transform and opacity move, so this costs no layout. */
    [data-vis2-row-mode="dock"] .vis2__card {
      transform:
        translateY(calc(var(--dock, 0) * -22vh))
        scale(calc(1 - var(--dock, 0) * 0.72));
      transform-origin: center top;
      transition: none;
      will-change: transform;
    }
    [data-vis2-row-mode="dock"] .vis2__card-media img { border-radius: calc(var(--dock, 0) * 50%); }
    [data-vis2-row-mode="dock"] .vis2__card-text {
      opacity: calc(1 - var(--dock, 0) * 1.6);
      will-change: opacity;
    }
  }
}

/* ---- 06 the five tiles ------------------------------------------------- */
.vis2__tiles { background: var(--vis2-panel, #f2efe8); color: var(--sh-c-espresso); padding-block: clamp(56px, 9vw, 120px); }
.vis2__tiles-head { text-align: center; margin-bottom: clamp(28px, 4vw, 56px); }
.vis2__tiles-h { color: var(--sh-c-espresso); }
.vis2__tiles-note { color: rgba(41,36,33,0.62); margin-inline: auto; max-width: 52ch; }
.vis2__tile-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 760px) { .vis2__tile-list { grid-template-columns: repeat(5, 1fr); } }
.vis2__tile-link {
  position: relative; display: block; aspect-ratio: 3 / 4;
  overflow: hidden; text-decoration: none;
  background: #17130f;
}
.vis2__tile-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--sh-ease); }
/* Measured: white on the pale Vispring crops is 1.27:1, and the old 0.42
   veil only reached 3.72:1 — under the 4.5:1 minimum, which is why these
   labels could not be read. The label baseline sits in the bottom ~8% of the
   tile, where this ramp is ~0.74 and the label measures about 10:1. The top
   of the photograph is left almost clear so the material still reads. */
.vis2__tile-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.58) 26%,
    rgba(0,0,0,0.18) 58%,
    rgba(0,0,0,0.04) 100%);
}
.vis2__tile-label {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 28px);
  text-align: center;
  font-family: var(--sh-font-display); font-size: var(--sh-fs-h3);
  color: var(--sh-c-white);
  text-shadow: 0 2px 18px rgba(0,0,0,0.60);
}
.vis2__tile-link::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px; background: var(--sh-c-rouge-light);
  transform: translateX(-50%);
  transition: width 0.5s var(--sh-ease);
}
@media (hover: hover) {
  .vis2__tile-link:hover .vis2__tile-img { transform: scale(1.05); }
  .vis2__tile-link:hover::after, .vis2__tile-link:focus-visible::after { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vis2__card { transform: none !important; }
  .vis2__card-text { opacity: 1 !important; }
  .vis2__tile-img { transition: none; }
}
/* END_SECTION:spicy-vispring-v2 */

/* START_SECTION:spicy-vispring (INDEX:79) */
/* ==========================================================================
   SPICY HOME x VISPRING
   One dark room, eight chapters. Sizes come from the token scale rather than
   being invented here: on this brand, confidence comes from space, not size.
   ========================================================================== */
.sh-vis {
  position: relative;
  background-color: var(--sh-ground);
  /* No overflow rule here. position:sticky inside would stop working. */
}

.sh-vis__h { max-width: 18ch; margin-top: var(--sh-s-5); }
.sh-vis__prose { margin: var(--sh-s-5) 0 0; color: var(--sh-ink-muted); max-width: 46ch; }
.sh-vis__prose > * + * { margin-top: var(--sh-s-4); }
.sh-vis__prose p { margin: 0; }
.sh-vis__marker { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: var(--sh-s-5); }

/* -- 01 introduction ------------------------------------------------------ */
.sh-vis__intro { padding-block: var(--sh-section-y) clamp(32px, 5vw, 64px); }
.sh-vis__intro-logo {
  display: block;
  width: clamp(64px, 7vw, 104px);
  height: auto;
  margin-bottom: clamp(24px, 3.4vw, 40px);
  opacity: 0.92;
}
.sh-vis__heading { max-width: 16ch; }
.sh-vis__lede { margin: var(--sh-s-5) 0 0; color: var(--sh-ink-muted); max-width: 42ch; }

/* -- 02 the assembly -------------------------------------------------------
   Shots stack in document order; each arrives by the transition declared on
   it. No transform of any kind is applied to a photograph on this stage: no
   scale, no pan, no Ken Burns. Any scale would resample the image and cost
   sharpness, and a drifting room would contradict the whole idea that the
   room is locked and only the bed changes. */
.sh-vis__track { position: relative; height: var(--vis-track, 320vh); }

.sh-vis__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;          /* safe: the sticky element itself, not an ancestor */
  isolation: isolate;
  background: #0b0908;
}

.sh-vis__frame {
  position: absolute; inset: 0; z-index: 1; display: block;
  will-change: opacity, clip-path;
}
.sh-vis__frame-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --reveal is registered so the sweep interpolates as a real number rather
   than a string swap; unregistered it would step instead of glide. */
@property --reveal { syntax: '<number>'; inherits: false; initial-value: 1; }

/* The assembly sweep: a hard-edged geometric boundary, gently raked, rising
   from the foot of the bed toward the headboard so the base reads as being
   built up. At --reveal:1 the boundary has cleared the top of the frame, so
   the whole bed including the headboard always finishes fully uncovered.
   Used only between a measured locked pair, where every pixel outside the bed
   is identical and this boundary is therefore invisible wherever it crosses
   the room. Nothing is feathered, masked or blurred. */
.sh-vis__frame[data-vis-mode="wipe"] {
  clip-path: polygon(
    0    calc(100% - var(--reveal, 1) * 112%),
    100% calc(107% - var(--reveal, 1) * 112%),
    100% 100%,
    0    100%
  );
}

/* No JS: show every shot unclipped so the finished bed reads, rather than a
   half-built stack. */
html:not(.sh-js) .sh-vis__frame { opacity: 1 !important; clip-path: none !important; }

/* The warm stage light, in CSS so the GPU never pays for a post pass — and so
   nothing on this page is ever blurred to fake depth. */
.sh-vis__stage::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(58% 48% at 60% 32%, rgba(255, 198, 128, 0.08), transparent 70%),
    radial-gradient(70% 58% at 38% 82%, rgba(184, 164, 145, 0.06), transparent 72%);
}

.sh-vis__veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(116% 86% at 50% 44%, transparent 52%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(0deg, rgba(4, 3, 3, 0.80) 0%, rgba(4, 3, 3, 0.22) 28%, transparent 54%);
}

.sh-vis__beats { position: absolute; left: 0; right: 0; bottom: clamp(38px, 7vh, 88px); z-index: 4; pointer-events: none; }
.sh-vis__beat { position: absolute; bottom: 0; left: var(--sh-gutter); right: var(--sh-gutter); opacity: 0; visibility: hidden; }
.sh-vis__beat-label { color: var(--sh-accent); margin: 0; }
.sh-vis__beat-note {
  font-family: var(--sh-font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  line-height: 1.12; letter-spacing: var(--sh-ls-heading);
  color: var(--sh-ink); margin: var(--sh-s-3) 0 0; max-width: 22ch; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.sh-vis__cue {
  position: absolute; right: var(--sh-gutter); bottom: clamp(38px, 7vh, 88px); z-index: 4; margin: 0;
  font-family: var(--sh-font-body); font-size: var(--sh-fs-eyebrow);
  letter-spacing: var(--sh-ls-eyebrow); text-transform: uppercase;
  color: var(--sh-ink-faint); pointer-events: none;
}
@media (max-width: 767px) { .sh-vis__cue { display: none; } }

/* The rouge progress rule — the signature accent, marking position, nothing else. */
.sh-vis__rule { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 2px; background: rgba(242, 241, 237, 0.14); }
.sh-vis__rule i {
  display: block; height: 100%; background: var(--sh-accent);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

/* -- 03 look inside ------------------------------------------------------- */
.sh-vis__inside { padding-block: clamp(80px, 13vw, 170px); }
.sh-vis__inside-grid {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px); align-items: center;
}
@media (max-width: 900px) { .sh-vis__inside-grid { grid-template-columns: 1fr; } }

.sh-vis__xsec { position: relative; margin: 0; }
.sh-vis__xsec img { display: block; width: 100%; height: auto; border: 1px solid var(--sh-line); }

/* Layer callouts. Percentages track the real strata in the photograph. */
.sh-vis__call { position: absolute; left: 0; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.sh-vis__call i { flex: 0 0 auto; width: clamp(26px, 4vw, 58px); height: 1px; background: var(--sh-accent); }
.sh-vis__call b {
  font-family: var(--sh-font-body); font-weight: var(--sh-fw-medium);
  font-size: clamp(9.5px, 0.78vw, 11px); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sh-ink); background: rgba(8, 6, 5, 0.84); padding: 7px 12px;
  border: 1px solid var(--sh-line); white-space: nowrap;
}
@media (max-width: 560px) { .sh-vis__call b { white-space: normal; max-width: 46vw; } }

/* -- 04 craftsmanship ----------------------------------------------------- */
.sh-vis__bleed { position: relative; margin: 0; height: min(108svh, 1040px); overflow: hidden; }
.sh-vis__bleed-img { position: absolute; inset: -12% 0; }
.sh-vis__bleed-img img { width: 100%; height: 100%; object-fit: cover; }
.sh-vis__bleed-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 3, 3, 0.62), rgba(4, 3, 3, 0.18) 42%, rgba(4, 3, 3, 0.88));
}
.sh-vis__bleed-cap { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(48px, 8vw, 110px); }

.sh-vis__duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--sh-line); border: 1px solid var(--sh-line);
  margin-block: clamp(80px, 13vw, 170px);
}
@media (max-width: 800px) { .sh-vis__duo { grid-template-columns: 1fr; } }
.sh-vis__duo figure { margin: 0; background: var(--sh-ground-alt); overflow: hidden; }
.sh-vis__duo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1.2s var(--sh-ease);
}
.sh-vis__duo figure:hover img { transform: scale(1.03); }
.sh-vis__duo figcaption { padding: clamp(20px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 6px; }
.sh-vis__nm { font-family: var(--sh-font-display); font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--sh-ink); }

/* -- 05 heritage ---------------------------------------------------------- */
.sh-vis__heritage { padding-block: clamp(80px, 13vw, 170px); border-top: 1px solid var(--sh-line); }
.sh-vis__years {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--sh-line); border: 1px solid var(--sh-line);
  margin-top: clamp(44px, 7vw, 90px);
}
@media (max-width: 800px) { .sh-vis__years { grid-template-columns: 1fr; } }
.sh-vis__year { margin: 0; background: var(--sh-ground-alt); }
.sh-vis__year-img { overflow: hidden; }
.sh-vis__year img {
  display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover;
  /* archival grade — a filter on a real photograph, never a blur */
  filter: saturate(0.26) contrast(1.05) brightness(0.92);
  transition: filter 0.9s var(--sh-ease), transform 1.2s var(--sh-ease);
}
.sh-vis__year:hover img { filter: saturate(0.62) contrast(1.02) brightness(0.98); }
.sh-vis__year figcaption { padding: clamp(20px, 2.4vw, 34px); }
.sh-vis__yr { display: block; font-family: var(--sh-font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: var(--sh-ink); }
.sh-vis__yrtx { display: block; margin-top: 10px; font-size: var(--sh-fs-small); line-height: 1.55; color: var(--sh-ink-muted); max-width: 40ch; }

.sh-vis__milestone {
  display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap;
  margin: clamp(44px, 7vw, 90px) 0 0; padding-top: clamp(28px, 4vw, 52px);
  border-top: 1px solid var(--sh-line);
}
.sh-vis__milestone-k { font-family: var(--sh-font-display); font-size: clamp(3rem, 9vw, 7rem); line-height: 0.9; color: var(--sh-ink); }
.sh-vis__milestone-v { font-family: var(--sh-font-body); font-size: var(--sh-fs-body); letter-spacing: 0.06em; color: var(--sh-ink-muted); max-width: 30ch; }

/* -- 06 the facts --------------------------------------------------------- */
.sh-vis__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--sh-line); border: 1px solid var(--sh-line);
  margin-bottom: clamp(80px, 13vw, 170px);
}
@media (max-width: 900px) { .sh-vis__facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sh-vis__facts { grid-template-columns: 1fr; } }
.sh-vis__fact {
  background: var(--sh-ground-alt); padding: clamp(26px, 3vw, 46px) clamp(20px, 2.4vw, 34px);
  min-height: clamp(150px, 17vw, 210px); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sh-s-5);
  transition: background var(--sh-dur-hover) var(--sh-ease);
}
.sh-vis__fact:hover { background: #121010; }
.sh-vis__fact-k { font-family: var(--sh-font-display); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1; color: var(--sh-ink); }
.sh-vis__fact-v { color: var(--sh-ink-faint); }

/* -- 07 Spicy Home x Vispring ---------------------------------------------
   The panel itself, its optional background photograph and the scrim that
   keeps the type legible over it all live in
   snippets/spicy-vispring-pair.liquid. Only the type sits here. */
.sh-vis__pair { padding-block: clamp(80px, 13vw, 170px); border-top: 1px solid var(--sh-line); text-align: center; }
.sh-vis__logo { width: clamp(120px, 14vw, 190px); height: auto; margin: 0 auto clamp(26px, 4vw, 46px); opacity: 0.92; }
.sh-vis__pair .sh-vis__marker { justify-content: center; }
.sh-vis__pair-h { max-width: 20ch; margin-inline: auto; }
.sh-vis__pair .sh-vis__prose { margin-inline: auto; }

/* -- 08 the invitation ---------------------------------------------------- */
.sh-vis__cta { padding-block: clamp(70px, 11vw, 150px); border-top: 1px solid var(--sh-line); text-align: center; }
.sh-vis__cta-h { max-width: 14ch; margin-inline: auto; }
.sh-vis__cta .sh-vis__prose { margin-inline: auto; }
.sh-vis__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 3vw, 40px); margin-top: clamp(34px, 5vw, 60px);
}
.sh-vis__btn { color: var(--sh-ink); border-color: var(--sh-line-strong); }
.sh-vis__btn:hover, .sh-vis__btn:focus-visible { border-color: var(--sh-ink); }

/* -- reduced motion --------------------------------------------------------
   The bed is shown once, fully assembled, and the closing caption shown.
   Nothing scrolls, nothing is missing. */
@media (prefers-reduced-motion: reduce) {
  .sh-vis__track { height: 100svh; }
  .sh-vis__cue { display: none; }
  .sh-vis__duo figure:hover img,
  .sh-vis__year:hover img { transform: none; }
}
/* END_SECTION:spicy-vispring */