/* Casa M'xuma — "New look" preview, v2 (new-look/index.php)
   -------------------------------------------------------------------
   The same brand on a lighter ground, with a rhythm of paper and dark.
   Loaded after tokens.css and global.css; self-contained (no home.css).
   Scoped to body.nl so it can't leak into the live pages.

   Ground and ink reuse brand tokens: ash (warm paper), cream, espresso,
   char. Contrast on paper (measured on the page):
     espresso #1a1109 on ash #f5efe6  ≈ 15:1   body, headings
     --nl-ink-2  #4a3b2c              ≈  8:1   secondary
     --nl-ink-3  #6b5a44              ≈  5.6:1 captions
     bronze      #8a5a2b              ≈  5.9:1 labels, links (AA)
     ember       #c47a2b              ≈  3.0:1 — buttons and rules only
   ------------------------------------------------------------------- */

body.nl {
  --nl-paper:   var(--color-ash);
  --nl-paper-2: var(--color-cream);
  --nl-paper-3: #e4d8c4;
  --nl-ink:     var(--color-espresso);
  --nl-ink-2:   #4a3b2c;
  --nl-ink-3:   #6b5a44;
  --nl-bronze:  var(--color-bronze);
  --nl-gold:    var(--color-aged-gold);
  --nl-ember:   var(--color-ember);
  --nl-rule:    rgba(138, 90, 43, 0.28);
  --nl-rule-soft: rgba(138, 90, 43, 0.14);
  --nl-body:    17px;
  --nl-lh:      1.7;
  --nl-gutter:  20px;
  --nl-shadow:  0 24px 48px -32px rgba(26, 17, 9, 0.45);
  --nl-night:   #1b2330;             /* one cool dark, from the dusk sky: the Letters panel */

  background: var(--nl-paper);
  color: var(--nl-ink);
  overflow-x: clip;   /* belt and braces for anything animated past a narrow viewport */
  font-size: var(--nl-body);
  line-height: var(--nl-lh);
  font-weight: 400;
}

/* The reveal pre-state slides 24px sideways, more than the 20px phone
   gutter: every fade-right element below the fold stuck 4px past the edge,
   which is a horizontal scrollbar in desktop Chrome until it came into view.
   16px stays inside the gutter. (Scoped to the hidden state, so the
   visible rule in global.css still wins.) */
@media (prefers-reduced-motion: no-preference) {
  body.nl .reveal[data-reveal="fade-left"]:not(.is-visible)  { transform: translate3d(-16px, 0, 0); }
  body.nl .reveal[data-reveal="fade-right"]:not(.is-visible) { transform: translate3d(16px, 0, 0); }
}

/* The site-wide grain and glow overlays belong to the dark site. */
body.nl::before,
body.nl::after { display: none; }

@media (min-width: 768px) {
  body.nl { --nl-body: 18px; --nl-gutter: 32px; }
}

body.nl ::selection { background: var(--nl-ember); color: var(--nl-paper); }

/* Anchored chapters land below the sticky header. */
/* The bar's real height on these pages (see global.css): below 768px the
   controls are 44px, so 16px (or the safe area) + 44px + 16px + the rule;
   from 768px the bar is 85px, as on every page. */
:root { --header-height: calc(61px + max(16px, env(safe-area-inset-top, 0px))); }
@media (min-width: 768px) { :root { --header-height: 85px; } }
body.nl main > section[id] { scroll-margin-top: calc(var(--header-height) + 12px); }
body.nl main > section:focus { outline: none; }

/* --- Type ----------------------------------------------------------- */

body.nl h1, body.nl h2, body.nl h3, body.nl h4 {
  color: var(--nl-ink);
  font-weight: 400;
}

.nl-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.nl-h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

/* Labels carry a short rule before them — the page's recurring mark. */
.nl-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--space-3);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nl-bronze);
}

.nl-label::before {
  content: '';
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--nl-bronze);
}

.nl-label--light { color: var(--nl-gold); }
.nl-label--light::before { background: var(--nl-gold); }

.nl-lede {
  max-width: 48ch;   /* ≈ 68–70 characters of Jost at this size */
  text-wrap: pretty; /* no one-word last lines */
  margin: 0 0 var(--space-6);
  font-size: calc(var(--nl-body) + 2px);
  line-height: 1.65;
  color: var(--nl-ink-2);
}

body.nl p { margin: 0 0 var(--space-4); }

body.nl main a:not([class]) {
  color: var(--nl-bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.nl main a:focus-visible,
body.nl main button:focus-visible {
  outline: 2px solid var(--nl-bronze);
  outline-offset: 3px;
}

/* --- Layout --------------------------------------------------------- */

.nl-wrap {
  width: 100%;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--nl-gutter);
}

.nl-head { max-width: 760px; margin-bottom: var(--space-12); }
.nl-head .nl-lede { margin-bottom: 0; }

body.nl main > section { padding-block: var(--space-16); }
@media (min-width: 1024px) {
  body.nl main > section { padding-block: var(--space-24); }
}

.nl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.nl-actions--left { justify-content: flex-start; }

/* Buttons: 12px labels, 48px targets. */
.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}

.nl-btn--primary {
  background: var(--nl-ember);
  border-color: var(--nl-ember);
  color: var(--color-char);
}

.nl-btn--primary:hover,
.nl-btn--primary:focus-visible {
  background: var(--color-ember-hover);
  border-color: var(--color-ember-hover);
  color: var(--color-char);   /* the site's a:hover would turn it ember on ember */
}

.nl-btn--lg { min-height: 56px; padding: 14px 36px; font-size: 14px; }

.nl-btn--outline {
  background: transparent;
  border-color: var(--nl-bronze);
  color: var(--nl-ink);
}

.nl-btn--outline:hover,
.nl-btn--outline:focus-visible {
  background: var(--nl-ink);
  border-color: var(--nl-ink);
  color: var(--nl-paper);
}

/* Framed photographs: a gold hairline and a paper mat, like a print.
   Zoomable ones lift a touch on hover (lightbox.js makes them clickable). */
.nl-frame {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--nl-rule);
  background: #fff9f0;
  transition: transform var(--duration-base) var(--ease-expo-out), box-shadow var(--duration-base) var(--ease-expo-out);
}

.nl-frame img { display: block; width: 100%; height: auto; }

.nl-frame figcaption {
  padding: 12px 4px 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nl-ink-3);
}

.nl-frame.lightbox-zoomable { cursor: zoom-in; }
.nl-frame.lightbox-zoomable:hover,
.nl-frame.lightbox-zoomable:has(img:focus-visible) { border-color: var(--nl-bronze); }
body.nl .lightbox-zoomable img:focus-visible { outline: 2px solid var(--nl-bronze); outline-offset: 4px; }   /* the viewer opens from the keyboard too */

/* --- Header on the light pages ------------------------------------- */

body.nl .site-header {
  background: rgba(13, 11, 9, 0.82);
  border-bottom-color: rgba(183, 139, 74, 0.28);
}

/* Top-level links only: the Mezcal dropdown's links are styled further down. */
body.nl .site-nav > a,
body.nl .site-nav__group-link {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(245, 239, 230, 0.94);
}

body.nl .site-nav > a:hover,
body.nl .site-nav > a:focus-visible,
body.nl .site-nav__group-link:hover,
body.nl .site-nav__group-link:focus-visible { color: #fff8ec; }

body.nl .site-nav > a[aria-current="page"],
body.nl .site-nav__group-link[aria-current="page"] {
  color: var(--color-ember-hover);
  border-bottom-color: var(--color-ember-hover);
}

body.nl .site-nav__caret { color: rgba(245, 239, 230, 0.9); }
body.nl .lang-toggle { border-color: rgba(183, 139, 74, 0.5); }
body.nl .lang-toggle a { font-size: 12px; color: rgba(245, 239, 230, 0.9); }
body.nl .menu-trigger { font-size: 12px; color: rgba(245, 239, 230, 0.94); border-color: rgba(183, 139, 74, 0.5); }

body.nl .site-header.is-scrolled {
  background: rgba(245, 239, 230, 0.96);
  border-bottom-color: var(--nl-rule);
}

body.nl .site-header.is-scrolled .site-header__wordmark { filter: brightness(0.14); }
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav > a,
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav__group-link { color: var(--nl-ink); }
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav > a:hover,
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav > a:focus-visible,
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav__group-link:hover,
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav__group-link:focus-visible { color: var(--nl-bronze); }
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav > a[aria-current="page"],
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav__group-link[aria-current="page"] { color: var(--nl-bronze); border-bottom-color: var(--nl-bronze); }
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .site-nav__caret { color: var(--nl-ink); }
body.nl .site-header.is-scrolled .lang-toggle { border-color: var(--nl-rule); }
body.nl .site-header.is-scrolled .lang-toggle a { color: var(--nl-ink); }
body.nl .site-header.is-scrolled .lang-toggle a[aria-current="true"] { background: var(--nl-ember); color: var(--color-char); }
body.nl .site-header.is-scrolled .menu-trigger { color: var(--nl-ink); border-color: var(--nl-rule); }
body.nl .site-header.is-scrolled .menu-trigger[aria-expanded="true"] { color: var(--nl-bronze); border-color: var(--nl-bronze); }

/* While the drawer is open the bar is paper too, whatever the scroll state. */
body.nl .site-header:has(.site-nav.is-open) { background: rgba(245, 239, 230, 0.98); border-bottom-color: var(--nl-rule); }
body.nl .site-header:has(.site-nav.is-open) .site-header__wordmark { filter: brightness(0.14); }
body.nl .site-header:has(.site-nav.is-open) .menu-trigger { color: var(--nl-bronze); border-color: var(--nl-bronze); }
body.nl .site-header:has(.site-nav.is-open) .lang-switch { color: var(--nl-ink); border-color: var(--nl-rule); }

/* The Mezcal dropdown: a paper panel with ink links, whichever state the
   bar is in (the live site's black panel disappeared against the paper bar). */
@media (min-width: 1024px) {
  body.nl .site-nav__submenu {
    min-width: 240px;
    padding: 6px 0;
    background: #fff9f0;
    border: 1px solid var(--nl-rule);
    box-shadow: 0 24px 48px -24px rgba(26, 17, 9, 0.35);
  }

  body.nl .site-nav__submenu a {
    padding: 12px 22px;
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--nl-ink);
  }

  body.nl .site-nav__submenu a:hover,
  body.nl .site-nav__submenu a:focus-visible { background: var(--nl-paper-2); color: var(--nl-bronze); }
  body.nl .site-nav__submenu a[aria-current="page"] { color: var(--nl-bronze); }
}

/* --- The phone drawer --------------------------------------------------
   Below 1024px the menu is a full-height takeover on paper, like the rest
   of the page: the links in the display face, The Mezcal's expressions open
   beneath it, the ember button, then a foot of secondary links and the
   tagline. The agave crest sits whole in the top-right corner as a bronze
   silhouette (the icon SVG, masked to one colour), under the rows. Rows
   rise in one after another; reduced motion gets them in place at once
   (the page-wide rule at the end of this file). */
@media (max-width: 1023px) {
  body.nl .site-nav {
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    max-height: none;
    padding: 26px 28px 30px;
    background: linear-gradient(180deg, #f8f3ea 0%, var(--nl-paper) 45%, var(--nl-paper-2) 100%);
    border-top: 1px solid var(--nl-rule-soft);
    border-bottom: 0;
    box-shadow: none;
    transform: translateY(-8px);
  }
  body.nl .site-nav.is-open { transform: none; }
  @media (min-width: 600px) {
    body.nl .site-nav { padding: 40px 48px 44px; }
  }
  /* The drawer covers the page, so the overlay's blur would only cost GPU. */
  body.nl .site-nav__overlay.is-active { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* The crest: massive and very faint, its base on the drawer's floor and
     the right 42% of it cut off by the edge (the tallest leaf's tip stays
     in frame). The box is only the visible 58%, so nothing reaches past
     the drawer; the mask image is the full crest, anchored left, and the
     box edge does the cropping. Sized from the drawer's height, so it
     keeps its proportion on any phone or tablet, under the rows (negative
     z-index inside the drawer's own stacking context). The file is the
     icon's paths with a viewBox that contains them (casa-mxuma-crest.svg):
     the icon's own viewBox clips the top leaf's tip by ~2 units, invisible
     at 26px in the bar, obvious here. */
  body.nl .site-nav::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 62%;
    aspect-ratio: 44.66 / 57.5;   /* 58% of the crest's 77 / 57.5 */
    background: var(--nl-gold);
    -webkit-mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
    mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 900ms var(--ease-expo-out) 300ms;
  }
  body.nl .site-nav.is-open::after { opacity: 0.06; }

  /* The links: the display face, large, ink; the current page in bronze. */
  body.nl .site-nav > a,
  body.nl .site-nav__group-link {
    width: auto;
    padding: 9px 0;
    border-bottom: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 9.4vw, 46px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    color: var(--nl-ink);
  }
  body.nl .site-nav > a:hover,
  body.nl .site-nav > a:focus-visible,
  body.nl .site-nav__group-link:hover,
  body.nl .site-nav__group-link:focus-visible { color: var(--nl-bronze); }
  body.nl .site-nav > a[aria-current="page"],
  body.nl .site-nav__group-link[aria-current="page"] { color: var(--nl-bronze); background: none; border-bottom: 0; }

  /* A dropdown row (The Tequila): the link, a caret at the right, and the
     expressions folded beneath — the site's accordion (nav.js), restyled
     for paper. Closed by default; the caret opens it, Escape closes it.
     max-height and its transition come from the site's own rules. */
  body.nl .site-nav__group { flex-wrap: wrap; width: 100%; align-items: center; gap: 0; }
  body.nl .site-nav .site-nav__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    color: var(--nl-ink);
  }
  body.nl .site-nav .site-nav__caret svg { width: 14px; height: 8px; }
  body.nl .site-nav .site-nav__caret:hover,
  body.nl .site-nav .site-nav__caret:focus-visible { color: var(--nl-bronze); }
  body.nl .site-nav .site-nav__caret:focus-visible { outline: 2px solid var(--nl-bronze); outline-offset: 2px; }
  body.nl .site-nav .site-nav__submenu {
    position: static;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  body.nl .site-nav__group.is-open .site-nav__submenu { padding-bottom: 10px; }
  body.nl .site-nav .site-nav__submenu a {
    width: auto;
    margin-left: 2px;
    padding: 7px 0 7px 18px;
    border: 0;
    border-left: 1px solid var(--nl-rule);
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nl-ink-2);
  }
  body.nl .site-nav .site-nav__submenu a:hover,
  body.nl .site-nav .site-nav__submenu a:focus-visible { color: var(--nl-bronze); }
  body.nl .site-nav .site-nav__submenu a[aria-current="page"] { color: var(--nl-bronze); }

  /* The whole row of a dropdown (The Tequila) is the toggle on phones (new-look.js). */
  body.nl .site-nav__group-link { flex: 1 1 auto; }

  /* The foot, pushed to the bottom when there's room. */
  body.nl .site-nav > .site-nav__foot--drawer { margin-top: auto; padding: 26px 0 0; gap: 12px; }
  /* Short phones (320×568): tighter rows so the foot stays in view without scrolling. */
  @media (max-height: 640px) {
    body.nl .site-nav { padding-top: 14px; }
    body.nl .site-nav > a,
    body.nl .site-nav__group-link { padding: 5px 0; }
    body.nl .site-nav > .site-nav__foot--drawer { padding-top: 18px; }
  }
  body.nl .site-nav .site-nav__foot-links { gap: 4px 22px; }
  body.nl .site-nav .site-nav__foot-links a {
    width: auto;
    padding: 8px 0;
    border: 0;
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nl-ink-2);
  }
  body.nl .site-nav .site-nav__foot-links a:hover,
  body.nl .site-nav .site-nav__foot-links a:focus-visible { color: var(--nl-bronze); }
  body.nl .site-nav .site-nav__foot-note {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--nl-rule);
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--nl-bronze);
  }

  /* Entrance: each row rises in turn once the drawer is open. */
  body.nl .site-nav > a,
  body.nl .site-nav > .site-nav__group,
  body.nl .site-nav > .header-cta-wrap--drawer,
  body.nl .site-nav > .site-nav__foot--drawer {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 360ms var(--ease-expo-out), transform 520ms var(--ease-expo-out);
  }
  body.nl .site-nav.is-open > a,
  body.nl .site-nav.is-open > .site-nav__group,
  body.nl .site-nav.is-open > .header-cta-wrap--drawer,
  body.nl .site-nav.is-open > .site-nav__foot--drawer { opacity: 1; transform: none; }
  body.nl .site-nav.is-open > :nth-child(1)  { transition-delay: 70ms; }
  body.nl .site-nav.is-open > :nth-child(2)  { transition-delay: 115ms; }
  body.nl .site-nav.is-open > :nth-child(3)  { transition-delay: 160ms; }
  body.nl .site-nav.is-open > :nth-child(4)  { transition-delay: 205ms; }
  body.nl .site-nav.is-open > :nth-child(5)  { transition-delay: 250ms; }
  body.nl .site-nav.is-open > :nth-child(6)  { transition-delay: 295ms; }
  body.nl .site-nav.is-open > :nth-child(7)  { transition-delay: 340ms; }
  body.nl .site-nav.is-open > :nth-child(8)  { transition-delay: 385ms; }
  body.nl .site-nav.is-open > :nth-child(9)  { transition-delay: 430ms; }
  body.nl .site-nav.is-open > :nth-child(10) { transition-delay: 475ms; }

  /* The bar's controls share one 44px height (the pill was 36px beside a
     32px menu button), and sit a little closer. */
  body.nl .site-header__right { gap: 10px; }
  body.nl .site-header__right .lang-switch,
  body.nl .site-header__right .header-cta,
  body.nl .menu-trigger { box-sizing: border-box; height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  body.nl .menu-trigger { width: 48px; min-width: 48px; padding: 0; }
}

/* The one-link language switch ("Español"): a globe and the word, 13px.
   Cream over the hero, ink once the bar turns to paper, cream in the drawer. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(183, 139, 74, 0.5);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(245, 239, 230, 0.94);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}

.lang-switch__icon { flex: none; }

/* Scoped under the header so it outranks the live site's header link colours. */
body.nl .site-header .lang-switch { color: rgba(245, 239, 230, 0.94); }
body.nl .site-header .lang-switch:hover,
body.nl .site-header .lang-switch:focus-visible { color: #fff8ec; border-color: var(--color-ember-hover); }

body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .lang-switch { color: var(--nl-ink); border-color: var(--nl-rule); }
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .lang-switch:hover,
body.nl .site-header.is-scrolled:not(:has(.site-nav.is-open)) .lang-switch:focus-visible { color: var(--nl-bronze); border-color: var(--nl-bronze); background: var(--nl-paper-2); }

/* The bar's switch stays visible on phones (beside the menu button), so the
   drawer's copy isn't needed here. */
body.nl .lang-switch-wrap--drawer { display: none; }

/* No Find It in the main nav: there's no direct-to-consumer sale yet (the
   business is trade), and the footer keeps the link. */

/* Between 1024px (where the bar replaces the drawer) and 1200px the row of
   links and the language pill are a close fit: tighter spacing there. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  body.nl .site-header { padding-left: 32px; padding-right: 32px; gap: var(--space-5, 20px); }
  body.nl .site-nav { gap: 22px; }
  body.nl .site-nav > a,
  body.nl .site-nav__group-link { letter-spacing: 0.12em; }
  body.nl .site-header__right { gap: 12px; }
}

/* Narrow phones (up to 420px): the pill shows the globe and the language's
   own code ("ES", from the link's hreflang; the full name stays for
   assistive tech), both controls are 44px, and the gutters tighten, so the
   wordmark keeps its room beside them. */
@media (max-width: 419.98px) {
  body.nl .site-header { padding-left: 16px; padding-right: 16px; }
  body.nl .site-header__right { gap: 8px; }
  body.nl .site-header__right .lang-switch { padding: 0 11px; gap: 7px; }
  body.nl .site-header__right .lang-switch span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.nl .site-header__right .lang-switch::after {
    content: attr(hreflang) / "";
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  body.nl .menu-trigger { width: 44px; min-width: 44px; }
}
/* Its drawer form is styled with the rest of the phone drawer, above. */

/* --- 1 · Hero --------------------------------------------------------- */
.nl-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 64svh;
  margin-top: calc(-1 * var(--header-height));
  padding: var(--header-height) 0 0;
  overflow: hidden;
  background: var(--color-char);
  color: var(--color-cream);
  text-align: left;
  isolation: isolate;
}
/* The film is a section in main, and main's sections carry the page's block
   padding (64px; 96px from 1024px). That rule outranked the padding above, so
   the copy floated 96px above the film's foot on every page, and whether a
   title looked centred depended on its line count and the hero's minimum
   (2026-10-12). Named with the section's own weight, the hero's padding
   holds: the header's height on top, nothing below — the copy sits in the
   lower-left corner on every page, at the copy's own foot gap. */
body.nl main > section.nl-hero { margin-top: calc(-1 * var(--header-height)); padding: var(--header-height) 0 0; }

.nl-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.nl-hero__img,
.nl-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  /* Room for the parallax translate without exposing edges. */
  transform: scale(1.06);
}

/* The two videos crossfade over the still (motion.js toggles .is-active). */
.nl-hero__video {
  opacity: 0;
  transition: opacity 1200ms ease;
}

.nl-hero__video.is-active { opacity: 1; }

.nl-hero__scrim {
  position: absolute;
  inset: 0;
}

/* Embers rise from the fire (the live hero's own treatment). */
.nl-hero__embers {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.nl-hero__ember {
  position: absolute;
  bottom: 10%;
  border-radius: 50%;
  background: var(--color-ember-hover);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .nl-hero__ember { animation: nlEmber var(--fd, 8s) ease-in infinite var(--fd2, 0s); }
}

@keyframes nlEmber {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  12%  { opacity: 0.85; }
  100% { transform: translate(var(--tx, 20px), -70vh) scale(0.2); opacity: 0; }
}

/* --- 3 · The lineup --------------------------------------------------- */
/* Three cards in a row at one scale, each with its own way through. The
   Tequila menu deep-links to a card by id; :target marks it. On phones
   the row is a swipeable strip. */
.nl-lineup__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl-lineup__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  scroll-margin-top: calc(var(--header-height) + 24px);
}
/* Arrived here from the menu: this is the one. */
.nl-lineup__item:target .nl-lineup__name { color: var(--nl-bronze); }

/* The re-graded studio shot is the object; a click opens the close-up
   (lightbox.js, via .lightbox-zoomable). */
.nl-lineup__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-5, 1.25rem);
  overflow: hidden;
}
/* A plain pointer on the bottles: lightbox.js writes cursor: zoom-in inline
   on its triggers, so this has to outrank an inline style. */
.nl-lineup__photo,
.nl-lineup__photo img { cursor: pointer !important; }
.nl-lineup__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transition: transform var(--duration-slow, 600ms) var(--ease-expo-out);
}
.nl-lineup__photo:hover .nl-lineup__img { transform: scale(1.03); }
.nl-lineup__num { margin: 0 0 6px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-bronze); }
.nl-lineup__name { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.nl-lineup__line { margin: 0 0 var(--space-5, 1.25rem); max-width: none; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--nl-ink-2); }
.nl-lineup__more,
.nl-lineup__soon { margin-top: auto; }
.nl-lineup__soon {
  margin-bottom: 0;
  padding: 14px 0;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nl-ink-3);
}

@media (max-width: 699px) {
  .nl-lineup__row {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--nl-gutter));
    padding: 4px var(--nl-gutter) var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .nl-lineup__row::-webkit-scrollbar { display: none; }
  .nl-lineup__item { flex: 0 0 78%; scroll-snap-align: center; }
}

/* --- 5 · Craft ------------------------------------------------------- */
.nl-craft { background: var(--nl-paper-2); }

.nl-craft__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.nl-craft__btn {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  width: 100%;
  padding: 12px;
  border: 1px solid var(--nl-rule-soft);
  background: var(--nl-paper);
  color: var(--nl-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.nl-craft__thumb { display: block; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; }
.nl-craft__num { display: none; }
.nl-craft__text { display: block; }
.nl-craft__title { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.nl-craft__body { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--nl-ink-2); }

.nl-craft__viewer { display: none; }

@media (min-width: 900px) {
  .nl-craft__layout { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: start; }
  .nl-craft__viewer { display: block; position: sticky; top: calc(var(--header-height) + 24px); }
  .nl-craft__viewer img { aspect-ratio: 3 / 2; object-fit: cover; }
  .nl-craft__cap-num { margin-right: 8px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.18em; color: var(--nl-bronze); }
  .nl-craft__thumb { display: none; }

  .nl-craft__btn {
    grid-template-columns: 44px 1fr;
    padding: 14px 16px;
    border-color: transparent;
    border-bottom: 1px solid var(--nl-rule-soft);
    background: transparent;
  }

  .nl-craft__btn:hover,
  .nl-craft__btn:focus-visible { background: var(--nl-paper); }
  .nl-craft__btn.is-active { background: var(--nl-paper); border-color: var(--nl-rule); }

  .nl-craft__num { display: block; padding-top: 6px; font-family: var(--font-label); font-size: 13px; letter-spacing: 0.12em; color: var(--nl-bronze); }
  .nl-craft__btn.is-active .nl-craft__num { color: var(--nl-ink); }
  .nl-craft__title { font-size: 22px; }
  .nl-craft__body { display: none; }
  .nl-craft__btn.is-active .nl-craft__body { display: block; }
}

/* --- 7 · The philosophy (dark) --------------------------------------- */
/* A solid espresso panel beside the uncovered photograph (recomposed
   2026-10-10): five columns of panel, seven of photograph from 900px;
   phones stack the photograph over the panel. The second sentence is gold,
   not ember — ember is for actions. */
.nl-band {
  position: relative;
  display: grid;
  background: var(--color-espresso);
  color: var(--color-cream);
  overflow: hidden;
}
body.nl main > section.nl-band { padding: 0; }
.nl-band__img { display: block; width: 100%; height: 320px; object-fit: cover; }
.nl-band__panel { padding: var(--space-8) var(--nl-gutter); background: var(--color-espresso); }
.nl-band .nl-label { justify-content: flex-start; }

body.nl .nl-band__headline {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.15;
  color: var(--color-cream);
}
.nl-band__headline span { display: block; text-wrap: balance; }
.nl-band__headline span + span { font-style: italic; color: var(--nl-gold); }
.nl-band__body { margin: 0; font-size: calc(var(--nl-body) + 1px); color: var(--color-ash); }

@media (min-width: 900px) {
  /* Both bands share one height (the panel's text sets it only if it needs
     more); the photograph is laid over its columns absolutely, so its own
     proportions never set the row.
     The panel is the band's outer margin plus five of the content column's
     twelve, so its words line up with every other section's: on wide screens
     the photograph bleeds and the espresso grows, but the text stays where
     the page's text is instead of hugging the viewport's edge. From ~2260px
     the band grows a little taller so the photograph isn't cropped top and
     bottom. */
  .nl-band {
    --nl-band-panel: max(41.6667%, calc((100% - var(--max-content-width)) / 2 + var(--max-content-width) * 5 / 12));
    grid-template-columns: var(--nl-band-panel) minmax(0, 1fr);
    min-height: max(700px, 31vw);
  }
  .nl-band__img { position: absolute; top: 0; bottom: 0; left: var(--nl-band-panel); width: calc(100% - var(--nl-band-panel)); height: 100%; }
  .nl-band__panel {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-16) clamp(24px, 5vw, 72px);
    padding-left: max(clamp(24px, 5vw, 72px), calc(100% - var(--max-content-width) * 5 / 12 + var(--nl-gutter)));
    border-right: 1px solid rgba(183, 139, 74, 0.35);
  }
  /* The mirror band (Tequila · Jalisco): the photograph bleeds from the left
     edge and the panel sits on the right, its words ending where the content
     column ends. */
  .nl-band--mirror { grid-template-columns: minmax(0, 1fr) var(--nl-band-panel); }
  .nl-band--mirror .nl-band__img { left: 0; }
  .nl-band--mirror .nl-band__panel {
    grid-column: 2;
    padding-left: clamp(24px, 5vw, 72px);
    padding-right: max(clamp(24px, 5vw, 72px), calc(100% - var(--max-content-width) * 5 / 12 + var(--nl-gutter)));
    border-right: 0;
    border-left: 1px solid rgba(183, 139, 74, 0.35);
  }
  /* A page's close (the story's, the process's, the cocktails') is a shorter
     band than the homepage's chapters: a line, a few words and the actions
     need less room than a chapter, and the footer follows (2026-10-12). */
  .nl-band--close { min-height: max(600px, 27vw); }
  .nl-band--close .nl-band__panel { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body.nl .nl-band--close .nl-band__headline { font-size: clamp(28px, 3.6vw, 46px); }   /* a close's line, a touch under a chapter's */
}
/* On a phone the close's photograph is a shorter strip over the panel. */
.nl-band--close .nl-band__img { height: 280px; }
@media (min-width: 900px) {
  .nl-band--close .nl-band__img { height: 100%; }
}

/* --- 8 · Cocktails, with recipes ------------------------------------ */
.nl-cocktails__grid {
  display: grid;
  gap: var(--space-10, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Phones: a swipeable row, the next card peeking in. */
@media (max-width: 767px) {
  .nl-cocktails__grid {
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 340px);
    gap: var(--space-4);
    margin-inline: calc(-1 * var(--nl-gutter));
    padding: 0 var(--nl-gutter) var(--space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding: 0 var(--nl-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .nl-cocktails__grid::-webkit-scrollbar { display: none; }
  .nl-cocktail { scroll-snap-align: start; }
}

.nl-cocktail__media { margin: 0 0 var(--space-4); }
.nl-cocktail__crop { overflow: hidden; aspect-ratio: 4 / 5; }
.nl-cocktail__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.1); }

.nl-cocktail__num { margin: 0 0 2px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-bronze); }
.nl-cocktail__name { margin-bottom: 2px; }
.nl-cocktail__sub { margin: 0 0 var(--space-3); font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--nl-ink-2); }
.nl-cocktail__body { margin: 0 0 var(--space-3); color: var(--nl-ink-2); }

/* The recipe panel: open in plain HTML; with JS (.is-collapsible) it
   collapses to zero rows and opens with a grid transition. */

@media (min-width: 768px) {
  .nl-cocktails__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
}

/* --- 8b · How to taste + glossary ------------------------------------ */
.nl-taste { background: var(--nl-paper); }

/* The body: the square photograph beside the list. From 900px the two
   columns are the same height — the list's rows stretch to fill it, so
   the last rule sits on the photograph's bottom edge. */
.nl-taste__body { display: grid; gap: var(--space-8); }
.nl-taste__media { margin: 0; }
.nl-taste__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 40%; }
@media (min-width: 900px) {
  .nl-taste__body { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: stretch; }
  .nl-taste__media img { height: 100%; } /* …and where the rows wrap (tablets), the photograph grows to the list instead */
  .nl-taste__list { display: grid; }
  .nl-steps { display: grid; grid-auto-rows: auto; align-content: stretch; }
  .nl-steps__item { align-content: center; }
}

/* The five habits: a real sequence, so they're numbered; each one line. */
.nl-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nl-rule); }
.nl-steps__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: 14px 0; border-bottom: 1px solid var(--nl-rule-soft); }
.nl-steps__num { padding-top: 6px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.2em; color: var(--nl-bronze); }
body.nl .nl-steps__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--nl-ink-2); }
.nl-steps__title { margin-right: 6px; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--nl-ink); }
/* Phones: the rows wrap to three lines, so one size down and tighter rows take ~150px out of the chapter. */
@media (max-width: 599px) {
  .nl-steps__item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 11px 0; }
  .nl-steps__num { padding-top: 5px; font-size: 11px; }
  body.nl .nl-steps__text { font-size: 15px; line-height: 1.5; }
  .nl-steps__title { font-size: 20px; }
}

/* The serve note: the list's last row, unnumbered — a short bronze dash where the numeral would be. */
.nl-steps__item--aside .nl-steps__num::before { content: ""; display: block; width: 18px; height: 1px; margin-top: 11px; background: var(--nl-bronze); }

/* --- 9 · The story (quote) ------------------------------------------ */
.nl-quote { background: var(--nl-paper-2); }

.nl-quote__grid { display: grid; gap: var(--space-10, 2.5rem); align-items: center; }

.nl-quote__text { position: relative; margin: 0; padding-top: var(--space-2); }

.nl-quote__text p {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);   /* the page's one typographic moment at scale; a size under the heroes' so the photograph holds its own (2026-10-12) */
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.nl-quote__text footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
/* The quote in the headline grammar (2026-10-12): the first sentence in ink,
   the last in the bronze italic, each on its own lines. */
.nl-quote__l1, .nl-quote__l2 { display: block; }
.nl-quote__l2 { font-style: italic; font-weight: 400; color: var(--nl-bronze); }
.nl-quote__media img { aspect-ratio: 4 / 3; object-fit: cover; }   /* taller than the still's 16:9, so it stands as tall as the quote */
.nl-quote__text footer .nl-label { margin: 0; }

@media (min-width: 900px) {
  .nl-quote__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); }   /* the photograph takes the wider column (2026-10-12) */
}

/* --- 11 · Letters ---------------------------------------------------- */
/* The one dark chapter on paper: an espresso panel with a gold hairline,
   cream heading, ash body, and the ember button doing the work. Text at
   full opacity throughout (ash ≈ 15:1, sand ≈ 11:1, gold ≈ 6:1 on espresso). */
.nl-letters { background: var(--nl-paper); }

/* The dark reads as an object on the page, not a band: the footer is the
   page's one dark band. */
.nl-letters__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) var(--space-6);
  background: var(--nl-night);
  color: var(--color-ash);
  border: 1px solid rgba(183, 139, 74, 0.45);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The crest, as in the footer and the drawer: gold, faint, off the panel's
   lower-right corner and cropped by it, under the words — the signature on
   the one object that asks for something. */
.nl-letters__inner::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 86%;
  max-height: 360px;
  aspect-ratio: 44.66 / 57.5;   /* the visible 58% of the crest */
  background: var(--nl-gold);
  -webkit-mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  opacity: 0.05;
  pointer-events: none;
}

.nl-letters .nl-label { color: var(--nl-gold); }
.nl-letters .nl-label::before { background: var(--nl-gold); }
body.nl main > section.nl-letters { padding-block: var(--space-12); }   /* a signpost, not a reading chapter */
body.nl .nl-letters .nl-h2 { margin-bottom: var(--space-4); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; color: var(--color-cream); }
body.nl .nl-letters .nl-lede { margin-bottom: 0; font-size: var(--nl-body); line-height: 1.6; color: var(--color-ash); }

@media (min-width: 900px) {
  .nl-letters__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: start; padding: var(--space-10, 2.5rem) var(--space-12); }
}
@media (min-width: 1024px) {
  body.nl main > section.nl-letters { padding-block: var(--space-16); }
}

/* The signup itself: who you are (three chips), then the email. The chips
   are the shared .newsletter-profile (global.css) on its own dark ground
   again: outlined in sand, the chosen one goes cream so it reads as state,
   not as the ember button. */
.nl-join { width: 100%; max-width: 580px; }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile { margin-bottom: var(--space-4); }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__hints { margin-top: 8px; }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__legend { font-size: 12px; letter-spacing: 0.22em; color: var(--nl-gold); }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__chip { border-color: rgba(216, 196, 163, 0.5); background: transparent; color: var(--color-ash); font-size: 15px; }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__chip:hover { border-color: var(--nl-gold); }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__chip:has(input:checked),
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__chip.is-checked { background: var(--color-cream); border-color: var(--color-cream); color: var(--color-espresso); }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__chip:has(input:focus-visible) { outline-color: var(--color-ember-hover); }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile__hint { font-size: 14px; color: var(--color-sand); }
/* "An enthusiast" is pre-checked here. Its hint would only repeat the lede
   beside it, so while it's the choice the "optional" note shows instead; the
   other two explain themselves when chosen. */
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile:has(input[value="enthusiast"]:checked) .newsletter-profile__hint[data-profile-hint="enthusiast"] { display: none; }
body.nl :is(.nl-join, .newsletter-cta-modal__form) .newsletter-profile:has(input[value="enthusiast"]:checked) .newsletter-profile__hint--none { display: block; }

.nl-join__row { display: flex; flex-wrap: wrap; gap: 10px; }
.nl-join__row input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--color-ash);
  background: var(--color-ash);
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--nl-ink);
}
.nl-join__row input[type="email"]::placeholder { color: var(--nl-ink-3); }
.nl-join__row input[type="email"]:focus { outline: 2px solid var(--color-ember-hover); outline-offset: 2px; border-color: var(--color-ember-hover); }
.nl-join__row input[type="email"][aria-invalid="true"] { border-color: #a23b2a; box-shadow: inset 0 0 0 1px #a23b2a; }
.nl-join__row .nl-btn { flex: 0 0 auto; min-height: 52px; }
.nl-join__hp { position: absolute; left: -9999px; }
body.nl .nl-join__note { margin: 8px 0 0; font-size: 14px; color: var(--color-sand); }
body.nl .nl-join__note.is-error { color: #f3b39b; }
.nl-join .nl-btn.is-loading { opacity: 0.6; cursor: progress; }

.nl-join__done { padding: var(--space-6); border: 1px solid rgba(183, 139, 74, 0.45); background: rgba(245, 239, 230, 0.05); }
.nl-join__done:focus { outline: 2px solid var(--color-ember-hover); outline-offset: 3px; }
body.nl .nl-join__done-heading { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); line-height: 1.15; color: var(--color-cream); }
body.nl .nl-join__done p:last-child { margin: 0; color: var(--color-sand); }

/* The site's dark modals (newsletter, success) keep their cream headings:
   this page's ink heading rule otherwise outranks them on the dark panel. */
body.nl .success-modal__heading { color: var(--color-cream); }

/* --- 12 · Trade strip -------------------------------------------------- */

/* --- 13 · Footer ------------------------------------------------------ */
/* Flat char, no photograph. The lockup, origin line and the signup button on
   the left, three columns of links on the right, the legal strip beneath;
   the crest faint off the bottom-right corner, as in the drawer.
   Links are 16px cream at 0.86 (the live footer's 0.6 was hard to read). */
.nlf {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-8);
  background: var(--color-char);
  color: var(--color-cream);
  border-top: 1px solid rgba(183, 139, 74, 0.28);
}
.nlf::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  height: 78%;
  max-height: 520px;            /* phones stack the footer tall; the crest needn't follow */
  aspect-ratio: 44.66 / 57.5;   /* the visible 58% of the crest */
  background: var(--color-cream);
  -webkit-mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  opacity: 0.05;
  pointer-events: none;
}
.nlf__inner { position: relative; z-index: 1; display: grid; gap: var(--space-10, 2.5rem); }
@media (min-width: 900px) {
  .nlf__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-16); align-items: start; }
  .nlf__legal { grid-column: 1 / -1; }
}

.nlf__lockup-link { display: inline-block; }
body.nl .nlf__lockup { display: block; width: 170px; max-width: 170px; height: auto; }
.nlf__origin { margin: var(--space-4) 0 0; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--nl-gold); }
/* "Join the list" under the origin line: the page's text link, cream on the char. */
body.nl .nlf__join { margin: var(--space-5) 0 0; }
body.nl .nlf__join .nl-link { color: rgba(245, 239, 230, 0.92); border-color: rgba(183, 139, 74, 0.55); }
body.nl .nlf__join .nl-link:hover,
body.nl .nlf__join .nl-link:focus-visible { color: var(--nl-gold); border-color: currentColor; }

.nlf__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 599px) { .nlf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* body.nl's heading colour (ink) would otherwise win over these on char. */
body.nl .nlf__heading { margin: 0 0 var(--space-4); font-family: var(--font-label); font-weight: 400; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--nl-gold); }
.nlf__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nlf__col a { font-family: var(--font-body); font-size: 16px; color: rgba(245, 239, 230, 0.86); text-decoration: none; transition: color var(--duration-fast); }
.nlf__col a:hover,
.nlf__col a:focus-visible { color: #fff8ec; }

/* The signup, under the lockup: a quiet small-caps link in gold with a
   hairline underline — present, not shouting. */

.nlf__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(183, 139, 74, 0.22);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.62);
}
.nlf__legal p { margin: 0; }
.nlf__legal a,
.nlf__prefs {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(245, 239, 230, 0.8);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}
.nlf__legal a:hover,
.nlf__legal a:focus-visible,
.nlf__prefs:hover,
.nlf__prefs:focus-visible { color: #fff8ec; }
.nlf__legal a { text-decoration: underline; text-decoration-color: rgba(245, 239, 230, 0.4); text-underline-offset: 3px; }   /* not colour alone */
.nlf__sep { margin: 0 10px; opacity: 0.5; }

/* --- Text links and the margin-label craft chapter (2026-10-10) ---------- */
body.nl .nl-link {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nl-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--nl-rule);
  padding-bottom: 3px;
  white-space: nowrap;
}
body.nl .nl-link:hover,
body.nl .nl-link:focus-visible { color: var(--nl-bronze); border-color: var(--nl-ember); }   /* bronze text (5.1:1 on paper) under the ember rule; ember text was 2.98:1 (audit 2026-10-12) */
/* On the espresso bands the link is cream on dark (it was ink on espresso — invisible but for its rule), gold on hover. */
body.nl .nl-band .nl-link { color: var(--color-cream); border-color: rgba(183, 139, 74, 0.55); }
body.nl .nl-band .nl-link:hover,
body.nl .nl-band .nl-link:focus-visible { color: var(--nl-gold); border-color: currentColor; }
body.nl .nl-band__cta { margin: var(--space-2) 0 0; } /* + the body's own 16px below it */

/* The margin-label craft chapter (wide screens; phones keep the stacked list). */
body.nl .nl-craft__margin-cta { margin: var(--space-2) 0 0; }
@media (min-width: 1024px) {
  body.nl .nl-craft__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-16); align-items: start; }
  body.nl .nl-craft__margin { position: sticky; top: calc(var(--header-height) + 32px); }
  body.nl .nl-craft__margin .nl-head { margin-bottom: 0; }
  body.nl .nl-craft__margin .nl-h2 { font-size: clamp(32px, 3.4vw, 44px); }
  body.nl .nl-craft__margin .nl-lede { max-width: 40ch; font-size: var(--nl-body); margin-bottom: var(--space-5); }
  body.nl .nl-craft__layout { display: block; }
  body.nl .nl-craft__viewer { position: static; margin-bottom: var(--space-6); }
  body.nl .nl-craft__body { display: block; font-size: 15px; color: var(--nl-ink-3); }
  body.nl .nl-craft__btn { grid-template-columns: 44px 1fr; padding: 14px 16px; }
  body.nl .nl-craft__title { font-size: 22px; }
}

/* --- Phase 1 (2026-10-10): consistency and the phone details ----------- */
@media (max-width: 599px) {
  .nl-join__row .nl-btn { flex: 1 1 100%; }
}
@media (max-width: 479px) {
  .nlf__sep { display: none; }
  .nlf__legal-text { display: grid; gap: 6px; justify-items: start; }
}

/* --- 1 · The film and the sentence (2026-10-10) ------------------------- */
/* The hero is the film, no box, no panel. The scrim darkens only the top
   strip (for the header) and the lower-left corner, where one line of display
   type sits on the page's own column edge with one action. */
.nl-hero { place-items: end start; }
/* Three gradients: the header strip; a left-weighted shade for the column the
   type stands in; a foot shade that reaches the fire's lower edge, so the
   second line keeps its contrast where it crosses the flames. */
.nl-hero .nl-hero__scrim {
  background:
    linear-gradient(180deg, rgba(13, 11, 9, 0.5) 0%, rgba(13, 11, 9, 0) 28%),
    linear-gradient(to right, rgba(13, 11, 9, 0.84) 0%, rgba(13, 11, 9, 0.62) 34%, rgba(13, 11, 9, 0.2) 58%, rgba(13, 11, 9, 0) 76%),
    linear-gradient(to top, rgba(13, 11, 9, 0.72) 0%, rgba(13, 11, 9, 0.38) 30%, rgba(13, 11, 9, 0) 56%);
}
/* The copy's foot gap: one value on every film, so a title's last line (or the
   homepage's buttons) stands the same distance above the film's foot on every
   page — one line or two. */
.nl-film__copy { position: relative; z-index: 1; width: 100%; padding: var(--space-16) 0 clamp(56px, 8vh, 104px); }
.nl-film__label { margin-bottom: var(--space-5); }
body.nl .nl-film__headline {
  margin: 0 0 var(--space-8);
  max-width: 13ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--color-cream);
  text-wrap: balance;
}
/* The headline's margin makes room for the homepage's buttons; where nothing
   follows it (a page's or a chapter's film), it ends the copy. */
body.nl .nl-film__headline:last-child { margin-bottom: 0; }
.nl-film__l1,
.nl-film__l2 { display: block; }
.nl-film__l2 { font-style: italic; font-weight: 400; color: var(--nl-gold); }   /* the italic ships at 400; no faux bold */
.nl-film__actions { margin-top: 0; }
/* Phones: the dateline alone in the label; the statement at a size whose
   sentences hold as lines. */
@media (max-width: 599px) {
  .nl-film__label-spirits { display: none; }
  body.nl .nl-film__headline { max-width: none; font-size: clamp(30px, 8.6vw, 40px); }
}
@media (min-width: 900px) {
  .nl-hero { min-height: clamp(560px, 80svh, 800px); }
  .nl-film__l1 { white-space: nowrap; }
  body.nl .nl-film__headline { max-width: none; }
}
/* The slip beneath the film: the lockup, small, beside the lede; from 900px
   the lineup's three names as an index at the right (2026-10-11), behind a
   hairline, each a link to its plate — a left, a centre and a right, at the
   same height. */
body.nl main > section.nl-film-lede { padding-block: var(--space-8); background: var(--nl-paper-2); border-bottom: 1px solid var(--nl-rule-soft); }
.nl-film-lede__inner { display: grid; gap: var(--space-6); align-items: center; }
.nl-film-lede__lockup { display: block; width: 104px; height: auto; }
body.nl .nl-film-lede__text { margin: 0; max-width: 62ch; font-size: 19px; line-height: 1.6; color: var(--nl-ink-2); }
.nl-film-lede__index { display: none; }
@media (min-width: 700px) {
  .nl-film-lede__inner { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-12); }
  .nl-film-lede__lockup { width: 120px; }
}
@media (min-width: 900px) {
  .nl-film-lede__inner { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .nl-film-lede__index { display: block; margin: 0; padding: 2px 0 2px 40px; list-style: none; border-left: 1px solid var(--nl-rule); }
  .nl-film-lede__index li { font-size: 11px; line-height: 24px; white-space: nowrap; }   /* three rows, 72px: shorter than the lockup, so the slip's height holds */
  /* Classed, so the page's underline for unclassed prose links (main a:not([class])) leaves them alone. */
  body.nl .nl-film-lede__index-link { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-bronze); text-decoration: none; border: 0; transition: color var(--duration-fast); }
  body.nl .nl-film-lede__index-link:hover,
  body.nl .nl-film-lede__index-link:focus-visible { color: var(--nl-ink); }
}

/* --- The craft, shorter (2026-10-10) --------------------------------------- */
/* Desktop: a 2:1 photograph and the six steps as a three-by-two grid of
   compact cells beneath it (was a 16:10 photograph over six full rows).
   Phones: the photograph viewer shows (16:9) and the steps become a
   two-column grid of text cells; the thumbnail list goes. */
@media (min-width: 1024px) {
  body.nl .nl-craft__viewer img { aspect-ratio: 16 / 10; }   /* was 2:1 — the step photographs are portrait, and that crop showed a slice of each */
  body.nl .nl-craft__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--nl-rule); border-left: 1px solid var(--nl-rule); }
  body.nl .nl-craft__step { display: flex; } /* the cell (the button carries the rules) fills its row, so a two-line cell is as tall as a three-line one */
  body.nl .nl-craft__btn { grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; padding: 14px 16px 16px; border: 0; border-right: 1px solid var(--nl-rule); border-bottom: 1px solid var(--nl-rule); background: transparent; }   /* the firmer rule says "these are controls" */
  body.nl .nl-craft__btn:hover,
  body.nl .nl-craft__btn:focus-visible { background: var(--nl-paper); }
  body.nl .nl-craft__btn.is-active { background: var(--nl-paper); border-color: var(--nl-rule-soft); box-shadow: inset 0 -2px 0 var(--nl-ember); }
  body.nl .nl-craft__num { padding-top: 0; font-size: 11px; }
  body.nl .nl-craft__title { font-size: 21px; }
  body.nl .nl-craft__body { font-size: 14px; line-height: 1.45; }
}
@media (max-width: 899px) {
  body.nl .nl-craft__margin { margin-bottom: var(--space-6); }
  body.nl .nl-craft__viewer { display: block; margin: 0 0 var(--space-5); scroll-margin-top: calc(var(--header-height) + 12px); }   /* new-look.js scrolls it back into view on a tap */
  body.nl .nl-craft__viewer img { aspect-ratio: 16 / 9; object-fit: cover; }
  body.nl .nl-craft__cap-num { margin-right: 8px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.18em; color: var(--nl-bronze); }
  body.nl .nl-craft__thumb { display: none; }
  body.nl .nl-craft__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--nl-rule); border-left: 1px solid var(--nl-rule); }
  body.nl .nl-craft__step { display: flex; } /* as on desktop: the cell fills its row */
  body.nl .nl-craft__btn { grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; padding: 12px 12px 14px; border: 0; border-right: 1px solid var(--nl-rule); border-bottom: 1px solid var(--nl-rule); background: transparent; }
  body.nl .nl-craft__btn.is-active { background: var(--nl-paper); box-shadow: inset 0 -2px 0 var(--nl-ember); }
  body.nl .nl-craft__num { display: block; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; color: var(--nl-bronze); }
  body.nl .nl-craft__title { font-size: 19px; }
  body.nl .nl-craft__body { font-size: 13px; line-height: 1.45; color: var(--nl-ink-3); }
}

/* --- Cookie notice, in the new look (2026-10-10) --------------------------- */
/* The shared notice (includes/cookie-notice.php, styled for the old pages in
   global.css as dark glass with ember buttons) restyled for pages that carry
   body.nl: a paper card on the content column — label with its dash, heading
   in the display face, Jost body — with Accept and Decline as two equal
   outline buttons, since declining really does leave the site the same.
   The old look stays on the old pages; the script and markup are untouched. */
body.nl .cookie-notice { padding: var(--nl-gutter); }
body.nl .cookie-notice__inner {
  max-width: calc(var(--max-content-width) - 2 * var(--nl-gutter));
  padding: 20px 24px 22px;
  gap: var(--space-4);
  background: var(--nl-paper);
  border: 1px solid var(--nl-rule);
  box-shadow: 0 -16px 48px -24px rgba(26, 17, 9, 0.45), var(--nl-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.nl .cookie-notice__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-indent: 0;
  color: var(--nl-bronze);
}
body.nl .cookie-notice__eyebrow::before { content: ''; flex: none; width: 28px; height: 1px; background: var(--nl-bronze); }
body.nl .cookie-notice__heading {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--nl-ink);
}
body.nl .cookie-notice__body { max-width: 62ch; margin: 0; font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--nl-ink-2); }
body.nl .cookie-notice__link { margin-left: 2px; color: var(--nl-ink); text-decoration-color: var(--nl-rule); }
body.nl .cookie-notice__link:hover,
body.nl .cookie-notice__link:focus-visible { color: var(--nl-ember); text-decoration-color: currentColor; }
body.nl .cookie-notice__actions { gap: var(--space-3); }
body.nl .cookie-notice__btn {
  min-height: 44px;
  padding: 10px 22px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  background: transparent;
  border: 1px solid var(--nl-bronze);
  color: var(--nl-ink);
}
body.nl .cookie-notice__btn:hover,
body.nl .cookie-notice__btn:focus-visible { background: var(--nl-ink); border-color: var(--nl-ink); color: var(--nl-paper); }
@media (min-width: 800px) {
  body.nl .cookie-notice__inner { padding: 20px 28px 22px; gap: var(--space-8); }
}
@media (max-width: 480px) {
  body.nl .cookie-notice { padding: 12px; }
  body.nl .cookie-notice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  body.nl .cookie-notice__btn { width: auto; padding-inline: 12px; }
}

/* --- The "Join the list" window, in the new look (2026-10-10) -------------- */
/* The shared modal (includes/newsletter-cta-modal.php; its chrome is the old
   pages' .success-modal in global.css — and the contact form's success window
   is the same chrome, so these rules read .success-modal__* and dress both)
   as the Letters panel it mirrors: the
   night panel with the gold hairline, left-aligned, the label with its dash,
   an upright cream heading, the chips and the paper field as on the panel.
   The photograph on top goes — the panel has none, and the image is lazy, so
   it is never fetched here. Both views (form, success) share the chrome. */
body.nl .success-modal,
body.nl .newsletter-cta-modal { background: rgba(13, 11, 9, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.nl .success-modal__panel {
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: var(--nl-night);
  border: 1px solid rgba(183, 139, 74, 0.45);
  color: var(--color-ash);
  text-align: left;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7);
}
body.nl .success-modal__hero { display: none; }
/* The same crest as the Letters panel, so the window reads as the same object. */
body.nl .success-modal__panel::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 72%;
  max-height: 360px;
  aspect-ratio: 44.66 / 57.5;
  background: var(--nl-gold);
  -webkit-mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  opacity: 0.05;
  pointer-events: none;
}
body.nl .success-modal__copy { align-items: flex-start; text-align: left; padding: var(--space-10, 2.5rem) var(--space-8) var(--space-8); }
body.nl .success-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--space-4);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nl-gold);
}
body.nl .success-modal__eyebrow::before { content: ''; flex: none; width: 28px; height: 1px; background: var(--nl-gold); }
body.nl .success-modal__heading {
  margin: 0 0 var(--space-4);
  max-width: 18ch;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--color-cream);
}
body.nl .success-modal__body { margin: 0 0 var(--space-6); max-width: 52ch; font-family: var(--font-body); font-weight: 400; font-size: var(--nl-body); line-height: 1.6; color: var(--color-ash); }
body.nl .success-modal__close { top: 14px; right: 14px; background: transparent; border-color: rgba(237, 229, 216, 0.4); color: var(--color-cream); }
body.nl .success-modal__close:hover,
body.nl .success-modal__close:focus-visible { background: var(--color-cream); border-color: var(--color-cream); color: var(--nl-night); }

/* The form: the panel's own row — paper field, ember button — and its note. */
body.nl .newsletter-cta-modal__form { width: 100%; max-width: none; margin: 0; }
body.nl .newsletter-cta-modal__form .newsletter-profile { text-align: left; }
body.nl .newsletter-cta-modal__form .newsletter-profile__chips { justify-content: flex-start; }
body.nl .newsletter-cta-modal__form .newsletter__row { display: flex; flex-direction: row; /* global.css stacks it as a column on phones, which would turn the field's flex-basis into a height */ flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.nl .newsletter-cta-modal__form .newsletter__row:focus-within { border: 0; box-shadow: none; }
body.nl .newsletter-cta-modal__form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--color-ash);
  border-radius: 0;
  background: var(--color-ash);
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--nl-ink);
}
body.nl .newsletter-cta-modal__form input[type="email"]::placeholder { color: var(--nl-ink-3); }
body.nl .newsletter-cta-modal__form input[type="email"]:focus { outline: 2px solid var(--color-ember-hover); outline-offset: 2px; border-color: var(--color-ember-hover); }
body.nl .newsletter-cta-modal__form input[type="email"][aria-invalid="true"] { border-color: #a23b2a; box-shadow: inset 0 0 0 1px #a23b2a; }
body.nl .newsletter-cta-modal__form button[type="submit"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid var(--nl-ember);
  border-radius: 0;
  background: var(--nl-ember);
  color: var(--color-char);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
body.nl .newsletter-cta-modal__form button[type="submit"]:hover,
body.nl .newsletter-cta-modal__form button[type="submit"]:focus-visible { background: var(--color-ember-hover); border-color: var(--color-ember-hover); color: var(--color-char); }
body.nl .newsletter-cta-modal__form .newsletter__note { margin: 8px 0 0; font-size: 14px; line-height: 1.5; text-align: left; color: var(--color-sand); }
body.nl .newsletter-cta-modal__form .newsletter__note.is-error { color: #f3b39b; }

/* The success view's Close: a cream outline, like the panel's own sign-off. */
body.nl .success-modal__cta {
  align-self: flex-start;
  min-width: 0;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid rgba(237, 229, 216, 0.6);
  background: transparent;
  color: var(--color-cream);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
body.nl .success-modal__cta:hover,
body.nl .success-modal__cta:focus-visible { background: var(--color-cream); border-color: var(--color-cream); color: var(--nl-night); }
@media (max-width: 599px) {
  body.nl .success-modal__copy { padding: var(--space-8) var(--space-5) var(--space-6); }
  body.nl .newsletter-cta-modal__form button[type="submit"] { flex: 1 1 100%; }
}

/* --- The recipe window (2026-10-11) ------------------------------------- */
/* Each cocktail card opens its recipe in a native <dialog>: a paper panel,
   the photograph down the left (on top on phones), the recipe on the right
   in the page's own type — label, name, the ruled ingredient list, the
   method, glassware / garnish / when, the note — and a link to the book.
   The card's "The recipe" is a button in the page's text-link style; the
   photograph opens it too. */
body.nl .nl-cocktail__recipe,
body.nl .nl-lineup__more { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--nl-rule); background: none; cursor: pointer; }
body.nl .nl-lineup__more { margin-top: auto; }
/* A bottle's window: the plate's own proportions on phones; a quiet "page to follow" where there is no page yet. */
body.nl .nl-recipe__grid--bottle .nl-recipe__media img { aspect-ratio: 4 / 5; object-position: center 55%; }
body.nl .nl-recipe__soon { margin: 22px 0 0; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-ink-3); }
body.nl .nl-cocktail__media[data-nl-recipe-open] { cursor: pointer; }
body.nl .nl-recipe {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--nl-rule);
  background: var(--nl-paper);
  color: var(--nl-ink);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
  overflow: auto;
  overscroll-behavior: contain;
}
body.nl .nl-recipe::backdrop { background: rgba(13, 11, 9, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.nl .nl-recipe__close {
  position: sticky;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 12px 12px -52px auto;   /* sits over the panel's top-right corner, stays put while it scrolls */
  padding: 0;
  border: 1px solid var(--nl-rule);
  background: var(--nl-paper);
  color: var(--nl-ink);
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
body.nl .nl-recipe__close:hover,
body.nl .nl-recipe__close:focus-visible { color: var(--nl-bronze); border-color: var(--nl-bronze); }
body.nl .nl-recipe__close:focus-visible { outline: 2px solid var(--nl-bronze); outline-offset: 2px; }
body.nl .nl-recipe__grid { display: grid; }
body.nl .nl-recipe__media { margin: 0; }
body.nl .nl-recipe__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; }
body.nl .nl-recipe__copy { padding: 24px 20px 28px; }
body.nl .nl-recipe__name { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; color: var(--nl-ink); }
body.nl .nl-recipe__sub { margin: 0 0 8px; font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--nl-ink-2); }
body.nl .nl-recipe__tagline { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--nl-ink-2); }
body.nl .nl-recipe__h { margin: 18px 0 8px; font-family: var(--font-label); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-recipe__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nl-rule); }
body.nl .nl-recipe__list li { padding: 8px 0; border-bottom: 1px solid var(--nl-rule-soft); font-size: 15px; line-height: 1.5; color: var(--nl-ink); }
body.nl .nl-recipe__method { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nl-ink-2); }
body.nl .nl-recipe__meta { display: grid; gap: 6px; margin: 18px 0 0; }
body.nl .nl-recipe__meta div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.5; }
body.nl .nl-recipe__meta dt { padding-top: 3px; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-recipe__meta dd { margin: 0; color: var(--nl-ink-2); }
body.nl .nl-recipe__note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--nl-rule-soft); font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--nl-ink-2); }
body.nl .nl-recipe__more { margin: 22px 0 0; }
@media (min-width: 800px) {
  body.nl .nl-recipe__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  body.nl .nl-recipe__media img { aspect-ratio: auto; min-height: 100%; }
  body.nl .nl-recipe__copy { padding: 40px 44px 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  body.nl .nl-recipe[open] { animation: nlRecipeIn 320ms var(--ease-expo-out); }
  @keyframes nlRecipeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* --- The drawer's motion (2026-10-11) -------------------------------------- */
/* Opening was already choreographed (the panel rises, the rows follow one by
   one, the crest fades in). This adds the rest: the bar and the wordmark
   cross to paper on the same beat instead of snapping; the close is quick
   and clean (the rows fade at once, the panel drifts up); The Tequila's
   expressions rise in turn as the accordion opens, and its height follows
   its content so the close no longer lags behind the 280px cap; a row dims
   under the finger. Only where motion is welcome. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  body.nl .site-header { transition: background-color 360ms var(--ease-expo-out), border-color 360ms var(--ease-expo-out), padding 240ms ease; }
  body.nl .site-header__wordmark { transition: filter 360ms var(--ease-expo-out); }
  body.nl .menu-trigger { transition: color 240ms ease, border-color 240ms ease, background-color 240ms ease; }

  /* The panel: a little longer on the way in, quick on the way out. */
  body.nl .site-nav { transition: transform 240ms ease, opacity 200ms ease, visibility 0s linear 240ms; }
  body.nl .site-nav.is-open { transition: transform 480ms var(--ease-expo-out), opacity 320ms var(--ease-expo-out); }

  /* The rows: closing fades fast and together; opening keeps its stagger
     (the nth-child delays above outrank this shorthand). */
  body.nl .site-nav > a,
  body.nl .site-nav > .site-nav__group,
  body.nl .site-nav > .header-cta-wrap--drawer,
  body.nl .site-nav > .site-nav__foot--drawer { transition: opacity 160ms ease, transform 160ms ease, color 200ms ease; }
  body.nl .site-nav.is-open > a,
  body.nl .site-nav.is-open > .site-nav__group,
  body.nl .site-nav.is-open > .header-cta-wrap--drawer,
  body.nl .site-nav.is-open > .site-nav__foot--drawer { transition: opacity 420ms var(--ease-expo-out), transform 600ms var(--ease-expo-out), color 200ms ease; }

  /* A row answers the finger (the top-level rows carry their colour ease above). */
  body.nl .site-nav__group-link,
  body.nl .site-nav .site-nav__foot-links a { transition: color 200ms ease, opacity 120ms ease; }
  body.nl .site-nav > a:active,
  body.nl .site-nav__group-link:active,
  body.nl .site-nav .site-nav__submenu a:active,
  body.nl .site-nav .site-nav__foot-links a:active { opacity: 0.55; }

  /* The accordion. */
  body.nl .site-nav .site-nav__submenu { transition: max-height 420ms var(--ease-expo-out), padding-bottom 420ms var(--ease-expo-out); }
  body.nl .site-nav__group.is-open .site-nav__submenu { max-height: 160px; }   /* its two rows, not the site's 280px cap */
  body.nl .site-nav .site-nav__submenu a { opacity: 0; transform: translateY(-6px); transition: opacity 140ms ease, transform 140ms ease, color 200ms ease; }
  body.nl .site-nav__group.is-open .site-nav__submenu a { opacity: 1; transform: none; transition: opacity 360ms var(--ease-expo-out), transform 480ms var(--ease-expo-out), color 200ms ease; }
  body.nl .site-nav__group.is-open .site-nav__submenu a:nth-child(2) { transition-delay: 60ms; }
  body.nl .site-nav__group.is-open .site-nav__submenu a:nth-child(3) { transition-delay: 120ms; }
}

/* --- Inner pages in the new look (2026-10-11): the Process page --------- */
/* The homepage's grammar, on a page: a page head (label, h1, lede) with a
   framed photograph; a two-column method block on cream; the six steps as
   chapters — the graded photograph and the copy side by side, alternating,
   each closed by a bronze detail line; a closing line, the tequila note and
   the actions on cream. */
.nl-h1 { margin: 0 0 var(--space-5, 1.25rem); font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; color: var(--nl-ink); }
body.nl .nl-head--page { max-width: 820px; margin-bottom: var(--space-10, 2.5rem); }
/* A page's film-style opener: the homepage hero's grammar on a photograph, a
   little shorter; then the lede alone on a cream strip, in the display face. */
.nl-hero--page { min-height: clamp(440px, 62svh, 620px); }
body.nl main > section.nl-page-lede { padding-block: var(--space-8); background: var(--nl-paper-2); border-bottom: 1px solid var(--nl-rule-soft); }
body.nl .nl-page-lede__text { margin: 0; max-width: 30em; font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.45; text-wrap: pretty; color: var(--nl-ink); }

.nl-overview { background: var(--nl-paper-2); }
.nl-overview__grid { display: grid; gap: var(--space-6); }
body.nl .nl-overview .nl-head { margin-bottom: 0; }
body.nl .nl-overview__body p { max-width: 58ch; margin: 0 0 var(--space-4); font-size: var(--nl-body); line-height: 1.7; color: var(--nl-ink-2); }
body.nl .nl-overview__body p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .nl-overview__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
}

.nl-step { display: grid; gap: var(--space-6); padding: var(--space-10, 2.5rem) 0; border-top: 1px solid var(--nl-rule-soft); }
.nl-step:first-child { padding-top: 0; border-top: 0; }
.nl-step:last-child { padding-bottom: 0; }
.nl-step__media { margin: 0; }
.nl-step__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; }
.nl-step__numeral { display: block; margin: 0 0 4px; font-family: var(--font-display); font-size: clamp(64px, 7vw, 96px); line-height: 0.9; color: var(--nl-bronze); opacity: 0.38; }
body.nl .nl-step__title { margin-bottom: var(--space-4); }
body.nl .nl-step__para { max-width: 56ch; margin: 0 0 var(--space-4); font-size: var(--nl-body); line-height: 1.7; color: var(--nl-ink-2); }
body.nl .nl-step__detail { max-width: 56ch; margin: var(--space-5, 1.25rem) 0 0; padding-top: 14px; border-top: 1px solid var(--nl-rule); font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; line-height: 1.9; text-transform: uppercase; color: var(--nl-bronze); }
@media (min-width: 900px) {
  .nl-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12) 0; }
  .nl-step--flip .nl-step__media { order: 2; }
  .nl-step__media img { aspect-ratio: 4 / 5; }
}

/* The closing band: a link inside the body, and the actions under it. */
body.nl .nl-band__inline-link { color: var(--nl-gold); text-decoration: underline; text-decoration-color: rgba(183, 139, 74, 0.5); text-underline-offset: 3px; white-space: nowrap; }
body.nl .nl-band__inline-link:hover,
body.nl .nl-band__inline-link:focus-visible { color: var(--color-cream); text-decoration-color: currentColor; }
.nl-band__actions { margin-top: var(--space-6); }

/* --- Inner pages: the bar starts as paper (2026-10-11) ----------------- */
/* Without the film behind it, the bar on a converted page (body.nl-page) is
   paper from the first pixel: every rule of the scrolled state, mirrored —
   the ground, the wordmark, the links, the caret, the menu button and the
   language switch. */
body.nl.nl-page .site-header {
  background: rgba(245, 239, 230, 0.96);
  border-bottom-color: var(--nl-rule);
}
body.nl.nl-page .site-header .site-header__wordmark { filter: brightness(0.14); }
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav > a,
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav__group-link { color: var(--nl-ink); }
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav > a:hover,
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav > a:focus-visible,
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav__group-link:hover,
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav__group-link:focus-visible { color: var(--nl-bronze); }
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav > a[aria-current="page"],
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav__group-link[aria-current="page"] { color: var(--nl-bronze); border-bottom-color: var(--nl-bronze); }
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .site-nav__caret { color: var(--nl-ink); }
body.nl.nl-page .site-header .lang-toggle { border-color: var(--nl-rule); }
body.nl.nl-page .site-header .lang-toggle a { color: var(--nl-ink); }
body.nl.nl-page .site-header .lang-toggle a[aria-current="true"] { background: var(--nl-ember); color: var(--color-char); }
body.nl.nl-page .site-header .menu-trigger { color: var(--nl-ink); border-color: var(--nl-rule); }
body.nl.nl-page .site-header .menu-trigger[aria-expanded="true"] { color: var(--nl-bronze); border-color: var(--nl-bronze); }
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .lang-switch { color: var(--nl-ink); border-color: var(--nl-rule); }
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .lang-switch:hover,
body.nl.nl-page .site-header:not(:has(.site-nav.is-open)) .lang-switch:focus-visible { color: var(--nl-bronze); border-color: var(--nl-bronze); background: var(--nl-paper-2); }
@media (min-width: 900px) {
  .nl-hero--page { min-height: clamp(520px, 70svh, 680px); }
}

/* --- The Story page (2026-10-11) ------------------------------------------ */
/* A chapter can open on its photograph full-bleed (the Land), shorter than the
   page's own opener and with a smaller headline; text chapters reuse the
   two-column method block, alternating paper and cream; the interlude is one
   large line with its name; the family chapter is a framed portrait beside
   the words. */
.nl-hero--chapter { min-height: clamp(360px, 52svh, 520px); }
/* A chapter's hero sits mid-page, not under the bar: none of the page hero's
   negative top margin or header-height padding. */
body.nl main > section.nl-hero--chapter { margin-top: 0; padding: 0; }
.nl-hero--chapter .nl-film__headline { font-size: clamp(30px, 4.4vw, 60px); }
/* A page's or a chapter's headline is a sentence, not the homepage's two short
   lines: it wraps inside a measure (the homepage keeps its lines whole). */
body.nl .nl-hero--page .nl-film__headline { max-width: 26ch; font-size: clamp(34px, 5vw, 72px); }
body.nl .nl-hero--chapter .nl-film__headline { max-width: 24ch; font-size: clamp(30px, 4.2vw, 56px); }
.nl-hero--page .nl-film__l1,
.nl-hero--page .nl-film__l2,
.nl-hero--chapter .nl-film__l1,
.nl-hero--chapter .nl-film__l2 { display: block; white-space: normal; text-wrap: balance; }
body.nl main > section.nl-interlude { padding-block: var(--space-16); }
.nl-overview--paper { background: var(--nl-paper); }
body.nl .nl-overview__caption { margin: var(--space-5, 1.25rem) 0 0; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-overview__caption--lead { margin: 6px 0 0; max-width: 32ch; line-height: 1.9; }   /* in the head's column, level with the first line of the body */
body.nl .nl-overview__cta { margin: var(--space-5, 1.25rem) 0 0; }

.nl-interlude { background: var(--nl-paper-2); }
.nl-interlude__block { margin: 0; }
/* Saul's line beside the still (2026-10-11): the quote on the left, a framed
   photograph on the right from 900px, stacked beneath it on phones, where it
   takes a landscape crop so the rest stays short. Its caption is set as a
   label, the way the process page sets a step's detail line. */
.nl-interlude__grid { display: grid; gap: var(--space-8); }
.nl-interlude__figure { margin: 0; }
.nl-interlude__figure img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 54% center; }
body.nl .nl-interlude__caption { padding: 12px 4px 2px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.8; color: var(--nl-bronze); }
@media (min-width: 900px) {
  .nl-interlude__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
  .nl-interlude__figure img { aspect-ratio: 4 / 5; }
}
body.nl .nl-interlude__quote { max-width: 26ch; margin: 0 0 var(--space-6); font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.2vw, 54px); line-height: 1.12; text-wrap: balance; color: var(--nl-ink); }
.nl-interlude__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
body.nl .nl-interlude__name { font-family: var(--font-display); font-size: 22px; color: var(--nl-ink); }
body.nl .nl-interlude__role { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }

.nl-family { background: var(--nl-paper-2); }
.nl-family__grid { display: grid; gap: var(--space-8); }
.nl-family__portrait { margin: 0; max-width: 420px; }
.nl-family__portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
body.nl .nl-family__name { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: var(--nl-ink); }
body.nl .nl-family__role { margin: 0 0 var(--space-4); font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-family__signature { margin: 0 0 var(--space-5, 1.25rem); font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--nl-ink-2); }
body.nl .nl-family__body p { max-width: 56ch; margin: 0 0 var(--space-4); font-size: var(--nl-body); line-height: 1.7; color: var(--nl-ink-2); }
body.nl .nl-family__body p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .nl-family__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: start; }
}

/* --- The story's photographs (2026-10-11) --------------------------------- */
/* A chapter's words beside a framed photograph; a triptych of framed
   photographs beneath a chapter, each a link — the steps under The Craft,
   the three bottles under The Vision. Three across at every width: on a
   phone they are a row of small frames, not three screens of photograph. */
.nl-overview__split { display: grid; gap: var(--space-8); }
.nl-overview__figure { margin: 0; }
.nl-overview__figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; }
@media (min-width: 900px) {
  .nl-overview__split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
}
.nl-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-10, 2.5rem) 0 0; padding: 0; list-style: none; }
.nl-triptych > li { display: flex; }
.nl-triptych__link { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
.nl-triptych .nl-frame { display: flex; flex: 1; flex-direction: column; margin: 0; transition: border-color var(--duration-fast); } /* every frame in the row the same height, whatever its caption wraps to */
.nl-triptych__link:hover .nl-frame,
.nl-triptych__link:focus-visible .nl-frame { border-color: var(--nl-bronze); }
.nl-triptych__link:focus-visible { outline: 2px solid var(--nl-bronze); outline-offset: 4px; }
.nl-triptych img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; }
.nl-triptych--bottles img { aspect-ratio: 3 / 4; object-position: center 55%; }
.nl-triptych__num { margin-right: 6px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.18em; color: var(--nl-bronze); }
@media (min-width: 700px) {
  .nl-triptych { gap: var(--space-8); margin-top: var(--space-12); }
}
@media (max-width: 599px) {
  /* Small frames: a thinner mat, and the numeral on its own line so a
     two-word name wraps under it rather than beside it. */
  .nl-triptych .nl-frame { padding: 6px; }
  .nl-triptych .nl-frame figcaption { padding: 8px 2px 2px; font-size: 12px; line-height: 1.4; }
  .nl-triptych__num { display: block; margin: 0 0 2px; }
}

/* --- Chapter II's survey plate (2026-10-11) -------------------------------- */
/* The range and the altitude on a plate pinned over the panorama's lower edge,
   the way a plate sits on a viewpoint rail: the figure in the display face,
   the words as a label. The plate is the darker cream (the paper the
   interlude and the family sit on) under a hairline, with the crest faint in
   bronze off its lower-right corner, as on the footer. The section gives up its top
   padding and the plate reaches up over the photograph (positioned, so it
   paints above the hero); the words start where a chapter's words start. On a
   phone the plate straddles the edge at full width and the words follow it. */
body.nl main > section.nl-land { padding-top: 0; }
.nl-land__grid { display: grid; gap: var(--space-8); align-items: start; }
.nl-land__plate { position: relative; z-index: 2; margin: -48px 0 0; padding: var(--space-6) var(--space-8); overflow: hidden; background: var(--nl-paper-2); color: var(--nl-ink); border: 1px solid var(--nl-rule); }
.nl-land__plate::before { content: ""; display: block; width: 40px; height: 1px; margin-bottom: var(--space-5, 1.25rem); background: var(--nl-bronze); }
.nl-land__plate::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;                  /* under the words, inside the plate's own stacking context */
  height: 96%;
  aspect-ratio: 44.66 / 57.5;   /* the visible 58% of the crest */
  background: var(--nl-bronze);
  -webkit-mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  opacity: 0.08;                /* a touch above the panel's 0.05: a small object, read close */
  pointer-events: none;
}
body.nl .nl-land__figure { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -0.01em; color: var(--nl-ink); }
.nl-land__unit { margin-left: 0.12em; font-style: italic; font-weight: 400; font-size: 0.5em; color: var(--nl-bronze); }
body.nl .nl-land__place { margin: var(--space-4) 0 0; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.9; color: var(--nl-bronze); }
.nl-land__measure { white-space: nowrap; }   /* the line breaks after the dot, never inside "above sea level" */
@media (min-width: 900px) {
  .nl-land__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); }
  .nl-land__body { grid-column: 1; grid-row: 1; padding-top: var(--space-16); }
  .nl-land__plate { grid-column: 2; grid-row: 1; justify-self: end; width: min(100%, 400px); margin-top: -72px; }
}

/* --- The legal pages (2026-10-12) ------------------------------------------ */
/* Terms and privacy: the page's photograph as a film hero, a little shorter
   than a chapter page's, with the title over it and the date in the label;
   then the legend — the sections' index — floating at the left while the
   sections scroll at the right (from 1024px; a plain list above them before
   that, two columns from 600px). The rail marks the section in view
   (new-look.js). Reading measure for the body, the display face for the
   section titles with the numeral in bronze italic, a paper-2 panel for a
   section's highlight and for the contact at the foot. */
.nl-hero--legal,
.nl-hero--short { min-height: clamp(400px, 52svh, 540px); }
/* The lede strip under the legal hero carries the crest, faint in bronze and
   whole: its right edge on the page's content edge (not the screen's), its
   height most of the strip's, centred on it — the strip's words sit short
   of it. */
.nl-page-lede--crest { position: relative; isolation: isolate; overflow: hidden; }
body.nl main > section.nl-page-lede--tall { padding-block: var(--space-12); }   /* a little more room above and below the words (the cocktails' lede) */
.nl-page-lede--crest::after {
  content: '';
  position: absolute;
  /* the content's right edge: the centred wrap's edge inside its gutter */
  right: max(var(--nl-gutter), calc((100% - var(--max-content-width)) / 2 + var(--nl-gutter)));
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  height: 78%;
  aspect-ratio: 77 / 57.5;      /* the whole crest */
  background: var(--nl-bronze);
  -webkit-mask: url('../logo/casa-mxuma-crest.svg') no-repeat right center / contain;
  mask: url('../logo/casa-mxuma-crest.svg') no-repeat right center / contain;
  opacity: 0.07;
  pointer-events: none;
}
/* These photographs are lit where the copy stands (the ledger's open page,
   the lit wall): a deeper foot shade under the label and the title. */
.nl-hero--legal .nl-hero__media::after,
.nl-hero--short .nl-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 11, 9, 0) 28%, rgba(13, 11, 9, 0.64) 100%); pointer-events: none; }
body.nl main > section.nl-legal { padding-block: var(--space-16) var(--space-24, 6rem); background: var(--nl-paper); }
.nl-legal__grid { display: grid; gap: var(--space-12); align-items: start; }

.nl-legend__label { padding-left: 16px; }
.nl-legend__list { margin: 0; padding: 0; list-style: none; }
.nl-legend__list li { border-left: 2px solid transparent; border-bottom: 1px solid var(--nl-rule-soft); padding-left: 14px; transition: border-color var(--duration-fast); }
.nl-legend__list li.is-current { border-left-color: var(--nl-bronze); }
.nl-legend__link { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--nl-ink-3); text-decoration: none; transition: color var(--duration-fast); }
.nl-legend__num { flex: none; min-width: 1.4em; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.12em; color: var(--nl-bronze); }
.nl-legend__link:hover,
.nl-legend__link:focus-visible,
.nl-legend__list li.is-current .nl-legend__link { color: var(--nl-ink); }
.nl-legend__link:focus-visible { outline: 2px solid var(--nl-bronze); outline-offset: 2px; }

.nl-legal__body { max-width: 68ch; }
.nl-legal__section { padding-block: var(--space-10, 2.5rem); border-top: 1px solid var(--nl-rule-soft); scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.nl-legal__section:first-child { padding-top: 0; border-top: 0; }
body.nl .nl-legal__title { display: flex; gap: 14px; align-items: baseline; margin: 0 0 var(--space-5, 1.25rem); font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; text-wrap: balance; color: var(--nl-ink); }
.nl-legal__num { flex: none; min-width: 1.3em; font-style: italic; font-weight: 400; color: var(--nl-bronze); }
body.nl .nl-legal__body p { margin: 0 0 var(--space-4); font-size: 17px; line-height: 1.7; color: var(--nl-ink-2); }
body.nl .nl-legal__body ul { margin: 0 0 var(--space-5, 1.25rem); padding: 0; list-style: none; }
body.nl .nl-legal__body li { position: relative; padding: 6px 0 6px 24px; font-size: 17px; line-height: 1.65; color: var(--nl-ink-2); }
body.nl .nl-legal__body li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 12px; height: 1px; background: var(--nl-bronze); }
body.nl .nl-legal__highlight { margin: var(--space-6) 0 0; padding: var(--space-5, 1.25rem) var(--space-6); border: 1px solid var(--nl-rule); background: var(--nl-paper-2); font-size: 16px; line-height: 1.65; color: var(--nl-ink); }

/* The foot, in the text column under the sections: the contact panel on the
   darker paper — from 900px a row, the words at the left and the button at
   the right; stacked inside before. */
.nl-legal__foot { display: grid; gap: var(--space-5, 1.25rem); margin-top: var(--space-12); }
.nl-legal__foot > * { min-width: 0; }   /* a grid item never widens the page: the button wraps instead */
.nl-legal__contact { display: flex; flex-direction: column; gap: var(--space-5, 1.25rem); padding: var(--space-8); border: 1px solid var(--nl-rule); background: var(--nl-paper-2); }
.nl-legal__contact-text { max-width: 60ch; }
.nl-legal__contact-cta { flex: none; align-self: flex-start; }
@media (max-width: 899px) {
  .nl-legal__contact-cta { white-space: normal; text-align: center; }
}
@media (min-width: 900px) {
  .nl-legal__contact { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-8); }
  .nl-legal__contact-cta { align-self: center; }
}
body.nl .nl-legal__contact-heading { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; color: var(--nl-ink); }
body.nl .nl-legal__contact-body { margin: 0; }

@media (min-width: 600px) and (max-width: 1023px) {
  .nl-legend__list { columns: 2; column-gap: var(--space-8); }
  .nl-legend__list li { break-inside: avoid; }
}
@media (min-width: 900px) {
  .nl-hero--legal,
  .nl-hero--short { min-height: clamp(460px, 58svh, 600px); }
}
@media (min-width: 1024px) {
  .nl-legal__grid { grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-16); }
  .nl-legend { position: sticky; top: calc(var(--header-height) + var(--space-6)); max-height: calc(100vh - var(--header-height) - var(--space-12)); overflow: auto; }
}

/* --- The contact page (2026-10-12) ----------------------------------------- */
/* The desk as a short film hero, the lede on the cream strip with the crest,
   then the form on the darker paper beside its words (the words stay put
   while the form scrolls, from 1024px), and the Letters panel as the close.
   The controls:
   label-face labels in bronze, paper fields under a hairline that turns
   bronze with focus, the select with a bronze chevron, errors in the warning
   colour under the field. The honeypot is off-screen. */
body.nl main > section.nl-contact { padding-block: var(--space-16) var(--space-24, 6rem); background: var(--nl-paper); }
.nl-contact__grid { display: grid; gap: var(--space-10, 2.5rem); align-items: start; }
body.nl .nl-contact__head { margin-bottom: 0; }
body.nl .nl-contact__note { margin: var(--space-6) 0 0; padding-top: var(--space-5, 1.25rem); border-top: 1px solid var(--nl-rule-soft); max-width: 48ch; font-size: 15px; line-height: 1.6; color: var(--nl-ink-3); }
.nl-form-panel { padding: var(--space-6); border: 1px solid var(--nl-rule); background: var(--nl-paper-2); }
.nl-form { display: grid; gap: var(--space-6); }
.nl-form.is-hidden-after-success { display: none; }
.nl-form__row { display: grid; gap: var(--space-6); }
.nl-form__field { display: grid; gap: 8px; }
body.nl .nl-form__label { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-form__input,
body.nl .nl-form__select,
body.nl .nl-form__textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--nl-ink);
  background: #fff9f0;
  border: 1px solid var(--nl-rule);
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
body.nl .nl-form__input::placeholder,
body.nl .nl-form__textarea::placeholder { color: rgba(107, 90, 68, 0.55); }
body.nl .nl-form__input:focus,
body.nl .nl-form__select:focus,
body.nl .nl-form__textarea:focus { border-color: var(--nl-bronze); box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.14); }
body.nl .nl-form__select {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--nl-bronze) 50%), linear-gradient(135deg, var(--nl-bronze) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
body.nl .nl-form__textarea { min-height: 170px; resize: vertical; }
.nl-form__field.is-invalid .nl-form__input,
.nl-form__field.is-invalid .nl-form__select,
.nl-form__field.is-invalid .nl-form__textarea { border-color: var(--color-warning); }
body.nl .nl-form__error { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-warning); }
body.nl .nl-form__error[hidden] { display: none; }
.nl-form__honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
body.nl .nl-form__optional { letter-spacing: 0.12em; color: var(--nl-ink-3); }
/* The phone field's widget (intl-tel-input): the flag and dial code inside
   the paper field at the left, the country list as a paper sheet under a
   hairline, the search at its head, the chosen row on the darker paper. */
.nl-form__field--phone .iti {
  width: 100%;
  --iti-border-color: var(--nl-rule);
  --iti-dialcode-color: var(--nl-ink-3);
  --iti-dropdown-bg: #fff9f0;
  --iti-hover-color: var(--nl-paper-2);
  --iti-arrow-color: var(--nl-bronze);
  --iti-spacer-horizontal: 12px;
}
body.nl .nl-form__field--phone .iti__tel-input { width: 100%; }
body.nl .iti__selected-country { font-family: var(--font-body); color: var(--nl-ink); }
body.nl .iti__selected-country-primary { padding-left: 14px; }
body.nl .iti__selected-dial-code { font-size: 15px; color: var(--nl-ink-3); }
body.nl .iti__dropdown-content { border: 1px solid var(--nl-rule); border-radius: 0; box-shadow: 0 24px 48px -24px rgba(26, 17, 9, 0.35); }
body.nl .iti__search-input { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--nl-rule-soft); border-radius: 0; font-family: var(--font-body); font-size: 15px; color: var(--nl-ink); background: transparent; outline: none; }
body.nl .iti__search-input:focus { box-shadow: inset 0 -1px 0 var(--nl-bronze); }
body.nl .iti__country-list { font-family: var(--font-body); font-size: 15px; color: var(--nl-ink); }
body.nl .iti__country { padding: 9px 14px; }
body.nl .iti__country.iti__highlight { background: var(--nl-paper-2); }
body.nl .iti__dial-code { color: var(--nl-ink-3); }
body.nl .iti__divider { border-bottom-color: var(--nl-rule-soft); }
body.nl .iti__search-input::placeholder { color: rgba(107, 90, 68, 0.55); }
.nl-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5, 1.25rem); }
.nl-form__success { display: grid; gap: var(--space-4); }
.nl-form__success[hidden] { display: none; }   /* the window's thank-you waits hidden until the request is in */
body.nl .nl-form__success-heading { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; color: var(--nl-ink); }
body.nl .nl-form__success p { margin: 0; max-width: 52ch; }
.nl-form__success .nl-btn { justify-self: start; margin-top: var(--space-2); }
@media (min-width: 640px) {
  .nl-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nl-form-panel { padding: var(--space-10, 2.5rem); }
}
@media (min-width: 1024px) {
  .nl-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); }
  .nl-contact__head { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
}

/* --- The cocktails page (2026-10-12) --------------------------------------- */
/* The chapters bar stays under the site bar for the rest of the page, in the
   close bands' espresso so it reads apart from the paper: the label and the
   canon's name in gold, the three plates by numeral and name in cream, the one
   in view underlined in gold (new-look.js); on a phone the row scrolls
   sideways under fades and the current one is kept in sight. The method sits
   beside the stone; the canon's head is the agave field at sunset, a chapter
   hero. The plates are bands by turns, paper and darker paper:
   the photograph in the paper mat beside the recipe on the process page's
   step layout, the recipe window's text rules inside, the measures set off
   in the ingredients, glass, garnish and when on a ticket. The photographs
   keep their upright crop on phones, since a glass is tall. */
.nl-chapters { position: sticky; top: var(--header-height); z-index: 40; background: var(--color-espresso); border-top: 1px solid rgba(183, 139, 74, 0.4); border-bottom: 1px solid rgba(183, 139, 74, 0.4); box-shadow: 0 12px 28px -18px rgba(13, 11, 9, 0.6); }   /* the close bands' espresso, under the film, so the rail reads apart from the paper */
.nl-chapters__row { display: flex; align-items: center; gap: var(--space-6); min-height: 54px; }
.nl-chapters__label { display: none; flex: none; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-gold); }
.nl-chapters__scroller { position: relative; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.nl-chapters__scroller::-webkit-scrollbar { display: none; }
.nl-chapters__scroller.is-fading-start { --fade-l: 28px; }
.nl-chapters__scroller.is-fading-end { --fade-r: 28px; }
.nl-chapters__list { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nl-chapters__list li { flex: none; }
.nl-chapters__group { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-gold); }
.nl-chapters__group::after { content: ''; display: inline-block; width: 18px; height: 1px; margin-left: 14px; vertical-align: middle; background: rgba(237, 229, 216, 0.3); }
body.nl .nl-chapters__link { display: inline-flex; align-items: baseline; gap: 8px; padding: 17px 0 15px; font-family: var(--font-display); font-size: 19px; line-height: 1; color: rgba(237, 229, 216, 0.72); text-decoration: none; border: 0; box-shadow: inset 0 -2px 0 transparent; transition: color var(--duration-fast), box-shadow var(--duration-fast); }
.nl-chapters__num { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.18em; color: var(--nl-gold); }
body.nl .nl-chapters__link:hover,
body.nl .nl-chapters__link:focus-visible,
body.nl .nl-chapters__list li.is-current .nl-chapters__link { color: var(--color-cream); }
body.nl .nl-chapters__list li.is-current .nl-chapters__link { box-shadow: inset 0 -2px 0 var(--nl-gold); }
body.nl .nl-chapters__link:focus-visible { outline: 2px solid var(--nl-gold); outline-offset: -2px; }
@media (min-width: 700px) {
  .nl-chapters__label { display: inline-block; }
  .nl-chapters__label::after { content: ''; display: inline-block; width: 1px; height: 14px; margin-left: var(--space-6); vertical-align: -2px; background: rgba(237, 229, 216, 0.3); }
}
/* The canon's head is a chapter hero (the story's grammar) on the agave field:
   the label, the heading, and the canon's line in gold italic under it. */
body.nl .nl-canon .nl-film__headline { margin-bottom: var(--space-3); }
body.nl .nl-film__sub { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; color: var(--nl-gold); }
body.nl main > section.nl-plate { padding-block: var(--space-12); background: var(--nl-paper); border-top: 1px solid var(--nl-rule-soft); scroll-margin-top: calc(var(--header-height) + 54px); }
body.nl main > section.nl-canon + section.nl-plate { border-top: 0; }
body.nl main > section.nl-plate--alt { background: var(--nl-paper-2); }
.nl-plate .nl-step { padding: 0; border: 0; }
.nl-plate__media { max-width: 520px; }
.nl-plate__media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
body.nl .nl-plate .nl-recipe__sub { margin: 4px 0 var(--space-5, 1.25rem); font-size: 22px; }
body.nl .nl-plate .nl-recipe__h { margin-top: var(--space-5, 1.25rem); }
body.nl .nl-plate .nl-recipe__list li { font-size: 16px; color: var(--nl-ink-2); }
.nl-plate__measure { display: inline-block; min-width: 3.2em; margin-right: 6px; font-weight: 500; color: var(--nl-ink); }
body.nl .nl-plate .nl-recipe__method { max-width: 56ch; font-size: var(--nl-body); line-height: 1.7; }
body.nl .nl-plate .nl-recipe__note { max-width: 56ch; margin-top: var(--space-5, 1.25rem); font-size: 19px; }
/* The ticket: glass, garnish and when, on the other paper under a hairline. */
body.nl .nl-plate__ticket { max-width: 56ch; margin-top: var(--space-6); padding: var(--space-5, 1.25rem) var(--space-6); border: 1px solid var(--nl-rule); background: var(--nl-paper-2); gap: 10px; }
body.nl .nl-plate--alt .nl-plate__ticket { background: #fff9f0; }
body.nl .nl-plate__ticket div { grid-template-columns: 100px minmax(0, 1fr); font-size: 15px; }
@media (min-width: 900px) {
  body.nl main > section.nl-plate { padding-block: var(--space-16); }
  .nl-plate__media { max-width: none; }
}

/* --- The trade page (2026-10-12) ------------------------------------------- */
/* The tasting table as the short film hero, the lede with the crest, then the
   buyer's reading: four reasons as hairline tiles with their numerals; the
   fact sheet as rows beside its words on the darker paper; the range as three
   cards, the bottle plate in the paper mat over the facts; the kit as one
   request on the Letters panel's night object; the close on the bottling
   photograph. */
body.nl main > section.nl-trade { padding-block: var(--space-16); background: var(--nl-paper); }
.nl-tiles { display: grid; gap: var(--space-5, 1.25rem); margin: 0; padding: 0; list-style: none; }
.nl-tiles__item { position: relative; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8); border: 1px solid var(--nl-rule); background: var(--nl-paper-2); }
.nl-tiles__num { display: block; margin: 0 0 var(--space-3); font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em; color: var(--nl-bronze); }
body.nl .nl-tiles__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: var(--nl-ink); }
body.nl .nl-tiles__body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--nl-ink-2); }
.nl-facts { margin: 0; border-top: 1px solid var(--nl-rule); }
.nl-facts__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--nl-rule-soft); }
body.nl .nl-facts dt { padding-top: 3px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-facts dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--nl-ink); }
.nl-range { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.nl-range__card { display: flex; flex-direction: column; }
.nl-range__media { margin: 0 0 var(--space-5, 1.25rem); }
.nl-range__media img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center 55%; }
body.nl .nl-range__name { margin: 6px 0 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; color: var(--nl-ink); }
body.nl .nl-range__line { margin: 0 0 var(--space-4); font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.35; color: var(--nl-ink-2); }
body.nl .nl-range__rows { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--nl-rule); }
body.nl .nl-range__rows div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--nl-rule-soft); font-size: 15px; line-height: 1.5; }
body.nl .nl-range__rows dt { padding-top: 2px; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-range__rows dd { margin: 0; color: var(--nl-ink-2); }
body.nl .nl-range__note { margin: var(--space-4) 0 0; font-size: 14px; line-height: 1.55; color: var(--nl-ink-3); }
/* The kit as one request on the Letters panel's object: the words take the
   wider column and the button sits at the right, centred; the note under the
   words in the panel's ash. */
body.nl .nl-trade--kit .nl-letters__note { margin: var(--space-4) 0 0; font-size: 14px; line-height: 1.6; color: rgba(237, 229, 216, 0.72); }
.nl-trade__kit-action { display: flex; }
/* The kit's window: the recipe window's chrome, narrower, with the contact
   form's controls inside; the two needs as chips. */
body.nl .nl-window--kit { width: min(680px, calc(100vw - 32px)); }
.nl-window__inner { padding: var(--space-8) var(--space-6); }
body.nl .nl-window__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; color: var(--nl-ink); }
body.nl .nl-window__intro { margin: 0 0 var(--space-6); max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--nl-ink-2); }
.nl-form__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.nl-form__fieldset legend { padding: 0; margin-bottom: 8px; }
.nl-form__checks { display: flex; flex-wrap: wrap; gap: 10px; }
body.nl .nl-form__check { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--nl-rule); background: #fff9f0; font-size: 15px; line-height: 1.3; color: var(--nl-ink); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
body.nl .nl-form__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--nl-bronze); }
body.nl .nl-form__check:has(input:checked) { border-color: var(--nl-bronze); background: var(--nl-paper-2); }
body.nl .nl-form__check:has(input:focus-visible) { outline: 2px solid var(--nl-bronze); outline-offset: 2px; }
/* The kit window's chips sit beside a field in a row: two equal columns, each
   chip the field's height (14px + the 25.5px line + 14px + the border), so
   the row reads even. */
.nl-form__checks--even { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
body.nl .nl-form__checks--even .nl-form__check { box-sizing: border-box; min-height: calc(28px + 25.5px + 2px); padding: 10px 14px; }
body.nl .nl-form__textarea--short { min-height: 96px; }
@media (min-width: 640px) {
  .nl-window__inner { padding: var(--space-10, 2.5rem) var(--space-10, 2.5rem) var(--space-8); }
}
/* The night window — the "Join the list" window's chrome for a form of our
   own: the night panel under the gold hairline with the crest, the label and
   the field labels in gold, the heading in cream, the words in ash, the
   fields on the ash paper, the ember button, the thank-you in cream. */
body.nl .nl-window--night { isolation: isolate; border-color: rgba(183, 139, 74, 0.45); background: var(--nl-night); color: var(--color-ash); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7); }
body.nl .nl-window--night::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 72%;
  max-height: 360px;
  aspect-ratio: 44.66 / 57.5;
  background: var(--nl-gold);
  -webkit-mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  mask: url('../logo/casa-mxuma-crest.svg') no-repeat left center / auto 100%;
  opacity: 0.05;
  pointer-events: none;
}
body.nl .nl-window--night .nl-recipe__close { background: transparent; border-color: rgba(237, 229, 216, 0.4); color: var(--color-cream); }
body.nl .nl-window--night .nl-recipe__close:hover,
body.nl .nl-window--night .nl-recipe__close:focus-visible { background: var(--color-cream); border-color: var(--color-cream); color: var(--nl-night); }
body.nl .nl-window--night .nl-label { color: var(--nl-gold); }
body.nl .nl-window--night .nl-label::before { background: var(--nl-gold); }
body.nl .nl-window--night .nl-window__title { color: var(--color-cream); }
body.nl .nl-window--night .nl-window__intro { color: var(--color-ash); }
body.nl .nl-window--night .nl-form__label { color: var(--nl-gold); }
body.nl .nl-window--night .nl-form__optional { color: rgba(237, 229, 216, 0.6); }
body.nl .nl-window--night .nl-form__input,
body.nl .nl-window--night .nl-form__textarea { border-color: var(--color-ash); background: var(--color-ash); color: var(--color-espresso); }
body.nl .nl-window--night .nl-form__input::placeholder,
body.nl .nl-window--night .nl-form__textarea::placeholder { color: rgba(74, 59, 44, 0.6); }
body.nl .nl-window--night .nl-form__input:focus,
body.nl .nl-window--night .nl-form__textarea:focus { border-color: var(--nl-gold); box-shadow: 0 0 0 3px rgba(183, 139, 74, 0.25); }
body.nl .nl-window--night .nl-form__check { border-color: rgba(237, 229, 216, 0.35); background: transparent; color: var(--color-cream); }
body.nl .nl-window--night .nl-form__check input { accent-color: var(--nl-gold); }
body.nl .nl-window--night .nl-form__check:has(input:checked) { border-color: var(--nl-gold); background: rgba(183, 139, 74, 0.14); }
body.nl .nl-window--night .nl-form__check:has(input:focus-visible) { outline-color: var(--nl-gold); }
body.nl .nl-window--night .nl-form__error { color: #e8b4a0; }
body.nl .nl-window--night .nl-form__field.is-invalid .nl-form__input,
body.nl .nl-window--night .nl-form__field.is-invalid .nl-form__textarea { border-color: #e8b4a0; }
body.nl .nl-window--night .nl-form__field--phone .iti { --iti-border-color: var(--color-ash); }   /* the flag's arrow is currentColor (ink) on the ash field, as on the contact page */
body.nl .nl-window--night .nl-form__success-heading { color: var(--color-cream); }
body.nl .nl-window--night .nl-form__success p { color: var(--color-ash); }
body.nl .nl-btn--cream { background: transparent; border-color: rgba(237, 229, 216, 0.6); color: var(--color-cream); }
body.nl .nl-btn--cream:hover,
body.nl .nl-btn--cream:focus-visible { background: var(--color-cream); border-color: var(--color-cream); color: var(--nl-night); }
@media (min-width: 700px) {
  .nl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 900px) {
  .nl-range { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .nl-facts__row { grid-template-columns: 140px minmax(0, 1fr); }
  .nl-trade--kit .nl-letters__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }   /* the action column takes its own width, so a long label never crowds the panel's edge */
  .nl-trade__kit-action { justify-content: flex-end; }
}

/* The 404: one screen (2026-10-12). The body is a column one viewport tall;
   the film takes everything between the header and the footer, with the
   lede and the ways back under the headline in its corner; the footer sits on
   the bottom edge. The film keeps a floor so a short viewport scrolls instead
   of crushing the copy. */
body.nl.nl-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.nl.nl-404 main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.nl.nl-404 main > section.nl-hero { flex: 1 1 auto; min-height: 440px; }
body.nl.nl-404 .nl-film__copy { padding-top: var(--space-6); padding-bottom: clamp(40px, 5vh, 56px); }
/* The footer on the 404 is set a little tighter, so the page is one screen on
   a laptop too (its columns and the legal strip are unchanged). */
body.nl.nl-404 .nlf { padding-top: var(--space-10, 2.5rem); }
body.nl.nl-404 .nlf__legal { padding-top: var(--space-5, 1.25rem); padding-bottom: var(--space-5, 1.25rem); }
/* On a short viewport (a laptop with the browser's own bars) the film's copy
   sets a little smaller and the footer a little tighter, so the screen still
   holds the page; below that it scrolls. */
@media (max-height: 860px) {
  body.nl.nl-404 main > section.nl-hero { min-height: 380px; }
  body.nl.nl-404 .nl-film__copy { padding-top: var(--space-4); padding-bottom: 32px; }
  body.nl.nl-404 .nl-film__headline { font-size: clamp(30px, 3.6vw, 52px); }
  body.nl.nl-404 .nl-film__lede { margin-bottom: var(--space-5, 1.25rem); font-size: clamp(17px, 1.4vw, 20px); }
  body.nl.nl-404 .nlf { padding-top: var(--space-8); padding-bottom: var(--space-5, 1.25rem); }
  body.nl.nl-404 .nlf__legal { padding-top: var(--space-4); padding-bottom: 0; }
}
body.nl.nl-404 .nl-film__headline { margin-bottom: var(--space-5, 1.25rem); }
body.nl.nl-404 .nl-film__lede { margin: 0 0 var(--space-7, 1.75rem); max-width: 34em; font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; text-wrap: pretty; color: var(--color-ash); }
body.nl.nl-404 .nl-film__actions { gap: var(--space-5, 1.25rem) var(--space-7, 1.75rem); }
/* A text link on the film (cream, gold on hover) — the 404's ways back. */
body.nl .nl-link--light { color: var(--color-cream); border-bottom-color: rgba(237, 229, 216, 0.45); }
body.nl .nl-link--light:hover,
body.nl .nl-link--light:focus-visible { color: var(--nl-gold); border-bottom-color: var(--nl-gold); }

/* --- Find It (2026-10-12) --------------------------------------------------- */
/* The three channels, numbered, beside their words while nothing is listed. */
.nl-channels__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nl-rule); }
.nl-channels__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5, 1.25rem) 0; border-bottom: 1px solid var(--nl-rule-soft); }
.nl-channels__num { padding-top: 6px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em; color: var(--nl-bronze); }
body.nl .nl-channels__label { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: var(--nl-ink); }
body.nl .nl-channels__line { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nl-ink-2); }
/* The region row, once more than one region has placements to show. */
.nl-regions { background: var(--nl-paper-2); border-bottom: 1px solid var(--nl-rule-soft); }
body.nl main > nav.nl-regions { padding-block: var(--space-5, 1.25rem); }
.nl-regions__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8); }
.nl-regions__list { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
body.nl .nl-regions__link { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-ink-3); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
body.nl .nl-regions__link.is-current { color: var(--nl-ink); border-bottom-color: var(--nl-bronze); }
body.nl .nl-regions__link:hover,
body.nl .nl-regions__link:focus-visible { color: var(--nl-bronze); }
/* The placements: plain cards, every one the same (rule 8) — the kind and the
   place as a label, the name, the address, the way to its site. */
.nl-places__grid { display: grid; gap: var(--space-5, 1.25rem); margin: 0; padding: 0; list-style: none; }
.nl-places__card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border: 1px solid var(--nl-rule); background: var(--nl-paper-2); }
body.nl .nl-overview--paper .nl-places__card { background: var(--nl-paper-2); }
body.nl .nl-places__name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: var(--nl-ink); }
body.nl .nl-places__address { margin: 0; font-size: 15px; line-height: 1.55; color: var(--nl-ink-2); }
.nl-places__card .nl-link { justify-self: start; margin-top: var(--space-2); }
/* The night panel as a signpost with two actions at the right (Find It's
   inquiry; the trade page's kit sets its own). */
.nl-letters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
@media (min-width: 700px) {
  .nl-places__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 900px) {
  .nl-letters--signpost .nl-letters__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }   /* as the trade's kit: the actions at their own width */
  .nl-letters--signpost .nl-letters__actions { flex-direction: column; align-items: flex-end; justify-content: center; }
}
@media (min-width: 1024px) {
  .nl-places__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Press (2026-10-12) ----------------------------------------------------- */
/* The range as plates: the bottle in its frame on one side, the words on the
   other, the next plate the other way round; the facts as a compact two-column
   sheet under the sentence. */
body.nl main > section.nl-press--range { padding-bottom: 0; }
.nl-press--range .nl-head { margin-bottom: var(--space-8); }
.nl-plate2 { border-top: 1px solid var(--nl-rule-soft); padding-block: var(--space-12); }
.nl-plate2--alt { background: var(--nl-paper-2); }
.nl-plate2__grid { display: grid; gap: var(--space-8); align-items: center; }
.nl-plate2__link { display: block; }
.nl-plate2__media img { aspect-ratio: 3 / 4; object-fit: cover; }
body.nl .nl-plate2__name { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; color: var(--nl-ink); }
body.nl .nl-plate2__line { margin: 0 0 var(--space-5, 1.25rem); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.3; color: var(--nl-bronze); }
body.nl .nl-plate2__para { margin: 0 0 var(--space-6); max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--nl-ink-2); }
body.nl .nl-plate2__facts { display: grid; gap: 0 var(--space-6); margin: 0; border-top: 1px solid var(--nl-rule); }
body.nl .nl-plate2__facts div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--nl-rule-soft); }
body.nl .nl-plate2__facts dt { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-plate2__facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--nl-ink); }
body.nl .nl-plate2__cta { margin: var(--space-5, 1.25rem) 0 0; }
/* The team: the chapter's sentence under the film, in the display face, then
   the masthead — the name and the role on the left, the words on the right, a
   rule between the rows. */
body.nl .nl-press__lede { margin: 0 0 var(--space-8); max-width: 44em; font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.45; text-wrap: pretty; color: var(--nl-ink); }
.nl-masthead { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nl-rule); }
.nl-masthead__row { display: grid; gap: var(--space-3) var(--space-10, 2.5rem); padding: var(--space-6) 0; border-bottom: 1px solid var(--nl-rule-soft); }
body.nl .nl-masthead__name { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; color: var(--nl-ink); }
body.nl .nl-masthead__role { margin: 0; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em; line-height: 1.7; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-masthead__bio { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.7; color: var(--nl-ink-2); }
/* The mailbox under the title (2026-10-13): bronze, the body face, a hairline
   on hover. */
body.nl .nl-masthead__email { display: inline-block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--nl-bronze); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--duration-fast, 160ms), border-color var(--duration-fast, 160ms); }
body.nl .nl-masthead__email:hover, body.nl .nl-masthead__email:focus-visible { color: var(--nl-ember); border-color: var(--nl-ember); }
/* The kit panel's note, a breath under the body. */
body.nl .nl-letters--signpost .nl-letters__note { margin: var(--space-4) 0 0; font-size: 14px; line-height: 1.6; color: rgba(237, 229, 216, 0.72); }
/* The lines a writer can lift, set large: the display italic between hairlines. */
.nl-quotes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nl-rule); }
body.nl .nl-quotes li { padding: var(--space-5, 1.25rem) 0; border-bottom: 1px solid var(--nl-rule-soft); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.25; text-wrap: balance; color: var(--nl-ink); }
/* The lines beside the fire: the words on the left, the pit oven firing in
   its frame on the right, the two centred on each other. */
.nl-quotable__grid { display: grid; gap: var(--space-8); }
.nl-quotable__text .nl-head { margin-bottom: var(--space-8); }
.nl-quotable__figure img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 640px) {
  .nl-plate2__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  .nl-masthead__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
@media (min-width: 900px) {
  .nl-quotable__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
  .nl-plate2__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); }
  .nl-plate2--alt .nl-plate2__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .nl-plate2--alt .nl-plate2__link { order: 2; }
  .nl-plate2--alt .nl-plate2__text { order: 1; }
}

/* --- The homepage's cocktails close (2026-10-12) --------------------------- */
/* The way to the book stands apart from the cards' recipe links: a button,
   centred, with room above it. */
.nl-cocktails__actions { justify-content: center; margin-top: var(--space-10, 2.5rem); }

/* --- Partners (2026-10-12) -------------------------------------------------- */
/* The form's small print (the consent line) under the message, before the
   button; the tiles are the trade page's. */
body.nl .nl-form__fine { margin: var(--space-2) 0 0; max-width: 60ch; font-size: 13px; line-height: 1.6; color: var(--nl-ink-3); }

/* --- The mezcal's page (2026-10-12) ---------------------------------------- */
/* The bottle beside its sheet: the studio photograph in its frame at the left
   (a 3:4 crop keeps the neck and the foot), the words and the rows at the
   right; phones stack the frame above the words. */
.nl-bottle__grid { display: grid; gap: var(--space-8); }
.nl-bottle__figure img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }
/* The tasting notes: three movements down the left — the numeral and the
   name as a label, the lead in the display italic, the words beneath, a
   hairline between — and the pour in its frame at the right. */
.nl-notes { background: var(--nl-paper-2); }
.nl-notes__grid { display: grid; gap: var(--space-8); }
.nl-notes__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nl-rule); }
.nl-notes__item { padding: var(--space-6) 0; border-bottom: 1px solid var(--nl-rule-soft); }
body.nl .nl-notes__label { margin: 0 0 var(--space-3); font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nl-bronze); }
.nl-notes__num { display: inline-block; min-width: 2.2em; }
body.nl .nl-notes__lead { margin: 0 0 var(--space-3); max-width: 24ch; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; text-wrap: balance; color: var(--nl-ink); }
body.nl .nl-notes__body { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.65; color: var(--nl-ink-2); }
.nl-notes__figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 45%; }
/* The provenance's film sits mid-page (the chapter hero's rules); the crop
   favours the table's dark wood so the line reads over it. Beneath, the words
   in the display face beside the cork, and the way to the process. */
.nl-prov__film .nl-hero__img { object-position: center 62%; }
.nl-prov { background: var(--nl-paper); }
body.nl main > section.nl-prov { padding-block: var(--space-12); }
.nl-prov__grid { display: grid; gap: var(--space-8); }
body.nl .nl-prov__body { margin: 0 0 var(--space-5); max-width: 30em; font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.45; text-wrap: pretty; color: var(--nl-ink); }
body.nl .nl-prov__cta { margin: 0; }
.nl-prov__figure img { aspect-ratio: 4 / 3; object-fit: cover; }
/* The ritual: the three lines in the display italic between hairlines, the
   note as a label, the way to the cocktails under a rule; the drop in its
   frame at the right. */
.nl-ritual { background: var(--nl-paper-2); }
.nl-ritual__grid { display: grid; gap: var(--space-8); }
.nl-ritual__lines { margin: 0 0 var(--space-5); padding: 0; list-style: none; border-top: 1px solid var(--nl-rule); }
body.nl .nl-ritual__lines li { padding: 14px 0; border-bottom: 1px solid var(--nl-rule-soft); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; text-wrap: balance; color: var(--nl-ink); }
body.nl .nl-ritual__note { margin: 0 0 var(--space-8); font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.8; color: var(--nl-bronze); }
.nl-ritual__cocktails { padding-top: var(--space-6); border-top: 1px solid var(--nl-rule); }
body.nl .nl-ritual__cocktails-body { margin: 0 0 var(--space-5); max-width: 44ch; font-size: 16px; line-height: 1.65; color: var(--nl-ink-2); }
.nl-ritual__figure img { aspect-ratio: 1 / 1; object-fit: cover; }
.nl-ritual__figure--tall img { aspect-ratio: 4 / 5; object-position: center 42%; }   /* the tequila's pour stands tall */
/* /mezcal, the chooser: a plate per expression's page — the bottle in its
   frame, the still as a label, the name, the words, the way there; the whole
   plate is the link. Two across from 700px. */
.nl-select__list { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
body.nl .nl-select__card { display: grid; gap: var(--space-4); height: 100%; box-sizing: border-box; padding: var(--space-6); border: 1px solid var(--nl-rule); background: var(--nl-paper-2); color: inherit; text-decoration: none; transition: border-color var(--duration-fast); }
body.nl .nl-select__card:hover,
body.nl .nl-select__card:focus-visible { border-color: var(--nl-bronze); }
body.nl .nl-select__card:focus-visible { outline: 2px solid var(--nl-bronze); outline-offset: 2px; }
.nl-select__media img { aspect-ratio: 3 / 4; object-fit: cover; }
body.nl .nl-select__name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; color: var(--nl-ink); }
body.nl .nl-select__body { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.65; color: var(--nl-ink-2); }
body.nl .nl-select__cta { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nl-bronze); }
body.nl .nl-select__note { margin: var(--space-10, 2.5rem) 0 0; max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--nl-ink-3); }
/* The other expression, on an expression's page once its page is on: a line
   in the display face and the way across, on paper before the close. */
.nl-sibling { background: var(--nl-paper); border-top: 1px solid var(--nl-rule-soft); }
body.nl main > section.nl-sibling { padding-block: var(--space-12); }
body.nl .nl-sibling__lead { margin: 0 0 var(--space-4); max-width: 30em; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; color: var(--nl-ink); }
@media (min-width: 700px) {
  .nl-select__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}
@media (min-width: 900px) {
  .nl-bottle__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
  .nl-notes__grid,
  .nl-prov__grid,
  .nl-ritual__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
}