/* ===========================================================================
   One More Night — the theme
   ---------------------------------------------------------------------------
   The second half of the site. One More Day is warm sand, cream and teal,
   with a serif display face; this is its opposite, and deliberately so. A
   visitor should know which side of the site they are on within a second of
   the page painting, without reading a word.

   The palette is lifted from the original onemorenightevents.com so the
   brand carries over unchanged. Its author called the accent --gold long
   after it had become neon purple; the name is kept here only where the
   value is, and the token below is honestly called --nt-accent.

   WHY THIS IS A THEME AND NOT THE OLD SITE
   ----------------------------------------
   The old site's app.js is 305KB and loads on every page. Inside it sit the
   whole Mallorca price list -- every VIP tier, every bottle, to the pound --
   and the live Stripe payment links. Mike's instruction for this area is no
   prices and nothing purchasable. Serving that file would have put both in
   the page source of a site that promises neither, which is the same class
   of mistake as the deploy bundle that was shipping our build scripts.

   So the look is rebuilt here and the data is not carried over. Everything
   on a Night page is in the page. Nothing to strip, nothing to leak.

   Every class is prefixed nt-. Night pages never load the Day stylesheet
   and Day pages never load this one, but the prefix means a shared
   component could be dropped into either without a collision.
   =========================================================================== */

:root {
  --nt-ink:       #0a0a0f;   /* the ground */
  --nt-ink-2:     #111017;   /* header, footer */
  --nt-surface:   #15141c;   /* cards */
  --nt-surface-2: #1c1a24;   /* raised cards, table stripes */
  --nt-line:      #2a2733;
  --nt-accent:    #bf5afd;   /* the neon purple everything hangs off */
  --nt-accent-hi: #d693ff;
  --nt-cream:     #f3eee3;   /* body text */
  --nt-muted:     #9691a1;   /* secondary text */

  /* Each destination keeps its own tint, as the old site did. Used for the
     eyebrow above an h1 and the rule under a section label -- never for a
     button, which stays the one accent so the primary action is always the
     same colour wherever you are. */
  --nt-thailand:  #b23a6b;
  --nt-bali:      #4a7a5e;
  --nt-mallorca:  #3e8c82;
  --nt-ibiza:     #d9a441;

  --nt-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --nt-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;

  --nt-pad: clamp(16px, 4vw, 28px);
}

/* This area is dark in both themes on purpose -- it is a nightlife brand and
   a light version of it would be a different product. The Day side handles
   light and dark properly; here we commit, and set the ground explicitly so
   nothing shows through from the host page. */
.nt, .nt body { background: var(--nt-ink); }

.nt * { box-sizing: border-box; }

.nt body {
  margin: 0;
  font-family: var(--nt-body);
  color: var(--nt-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nt img { max-width: 100%; display: block; }

.nt a { color: var(--nt-accent-hi); }

.nt :focus-visible {
  outline: 2px solid var(--nt-accent-hi);
  outline-offset: 3px;
  border-radius: 3px;
}

.nt-wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--nt-pad);
}

/* ------------------------------------------------------------------ header */
.nt-hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 15, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--nt-line);
}
.nt-hdr__in {
  max-width: 1180px; margin-inline: auto;
  padding: 11px var(--nt-pad);
  display: flex; align-items: center; gap: 14px;
}
/* The real wordmark, not type set to look like it.
   "ONE MORE" is near-white and "NIGHT" is the brush script in the accent, so
   it only works on a dark ground -- which is the whole area. The file is
   transparent RGBA; do not put it on the Day side. */
.nt-logo { display: block; line-height: 0; text-decoration: none; flex: 0 0 auto; }
.nt-logo img { width: auto; height: 38px; }
.nt-logo--ft img { height: 46px; }
@media (max-width: 520px) { .nt-logo img { height: 32px; } }
.nt-nav { display: flex; gap: 22px; margin-left: 30px; }
.nt-nav a {
  font: 700 12px/1 var(--nt-display);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--nt-muted); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nt-nav a:hover { color: var(--nt-cream); }
.nt-nav a[aria-current="page"] { color: var(--nt-accent); border-bottom-color: var(--nt-accent); }
.nt-hdr__gap { flex: 1 1 auto; }

.nt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 12px/1 var(--nt-display); letter-spacing: .11em; text-transform: uppercase;
  padding: 0 18px; height: 40px; border-radius: 4px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--nt-accent); background: none; color: var(--nt-accent-hi);
  transition: background .15s, color .15s, border-color .15s;
}
.nt-btn:hover { background: rgba(191, 90, 253, .14); color: #fff; }
/* Near-black on the accent, not a dark purple. A tinted dark on a saturated
   purple reads as muddy at 12px with letter-spacing, which is exactly the
   size the primary action is set at. */
.nt-btn--solid { background: var(--nt-accent); border-color: var(--nt-accent); color: #0a0410; }
.nt-btn--solid:hover { background: var(--nt-accent-hi); border-color: var(--nt-accent-hi); color: #0a0410; }
.nt-btn--ghost { border-color: var(--nt-line); color: var(--nt-cream); }
.nt-btn--ghost:hover { border-color: var(--nt-cream); background: rgba(243, 238, 227, .06); }

/* The way back to the Day side. Quiet, but on every page -- someone who
   took the wrong door should never have to use the browser's back button. */
.nt-cross {
  font: 600 11.5px/1 var(--nt-display); letter-spacing: .06em;
  color: var(--nt-muted); text-decoration: none; white-space: nowrap;
}
.nt-cross:hover { color: var(--nt-cream); }
.nt-cross b { color: var(--nt-cream); font-weight: 700; }

@media (max-width: 860px) {
  .nt-nav { display: none; }
  .nt-cross span { display: none; }
}

/* ------------------------------------------------------------------- ticker
   The old site ran a scrolling strip of upcoming nights across the top and
   it was the best thing on the page -- proof the site was alive. Kept, but
   fed from the what's-on sheet rather than typed in by hand, so it cannot
   sit there advertising a night that happened in August. With no rows it
   removes itself; an empty ticker is worse than none. */
.nt-ticker {
  background: var(--nt-ink-2); border-bottom: 1px solid var(--nt-line);
  overflow: hidden; white-space: nowrap;
}
.nt-ticker__t {
  display: inline-block; padding: 9px 0;
  font: 600 11.5px/1 var(--nt-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--nt-muted);
  animation: nt-slide 48s linear infinite;
}
.nt-ticker__t b { color: var(--nt-accent); font-weight: 700; }
.nt-ticker__t span { padding-inline: 26px; }
@keyframes nt-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nt-ticker__t { animation: none; }
  .nt-ticker { overflow-x: auto; }
}

/* --------------------------------------------------------------------- hero */
.nt-hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; }
.nt-hero__media { position: absolute; inset: 0; overflow: hidden; }
.nt-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* A hero with no photograph.
   Not every venue has a picture we are allowed to use, and a few have none at
   all. The alternative to this is a stock beach standing in for a club, which
   is worse than no picture: it tells the visitor something untrue about the
   place. So the hero keeps its shape and its type and loses only the
   photograph, lit by the destination's own tint so it still reads as
   somewhere rather than as a grey box. Swap in a real photograph and the
   modifier comes off. */
.nt-hero--flat .nt-hero__media {
  background:
    radial-gradient(120% 90% at 78% 8%, var(--nt-tint, var(--nt-accent)) 0%, transparent 62%),
    radial-gradient(90% 70% at 8% 100%, rgba(191, 90, 253, .30) 0%, transparent 60%),
    linear-gradient(168deg, #16131f 0%, var(--nt-ink) 62%);
}
.nt-hero--flat .nt-hero__scrim {
  background: linear-gradient(180deg, rgba(10,10,15,.42) 0%, rgba(10,10,15,.18) 40%, rgba(10,10,15,.88) 100%);
}
/* the same, for a tile on a hub */
.nt-venue--flat {
  background:
    radial-gradient(110% 80% at 80% 6%, var(--nt-tint, var(--nt-accent)) 0%, transparent 60%),
    linear-gradient(168deg, #17141f 0%, #100e16 70%);
}
.nt-venue--flat .nt-venue__scrim { background: linear-gradient(180deg, rgba(10,10,15,.18) 35%, rgba(10,10,15,.86) 100%); }
.nt-photo-note {
  display: inline-block; margin-top: 10px;
  font: 600 10.5px/1 var(--nt-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--nt-muted); border: 1px solid var(--nt-line);
  border-radius: 999px; padding: 6px 11px;
}

/* Two gradients, not one. The vertical alone left the lede sitting over the
   brightest part of the photograph -- Yona's white deck runs straight through
   where the second line of text falls -- so there is a horizontal wash on the
   text side as well. The hero image changes per venue and the copy must stay
   readable over whatever the next one turns out to be. */
.nt-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(10,10,15,.93) 0%, rgba(10,10,15,.74) 38%, rgba(10,10,15,.12) 78%),
    linear-gradient(180deg, rgba(10,10,15,.78) 0%, rgba(10,10,15,.42) 34%, rgba(10,10,15,.96) 100%);
}
@media (max-width: 760px) {
  .nt-hero__scrim {
    background: linear-gradient(180deg, rgba(10,10,15,.76) 0%, rgba(10,10,15,.62) 40%, rgba(10,10,15,.96) 100%);
  }
}
.nt-hero__in { position: relative; width: 100%; padding-block: 40px 44px; }
.nt-back {
  display: inline-block; margin-bottom: 20px;
  font: 600 12.5px/1 var(--nt-display); color: var(--nt-cream);
  text-decoration: none; opacity: .8;
}
.nt-back:hover { opacity: 1; }
.nt-eyebrow {
  margin: 0 0 10px; font: 700 11.5px/1 var(--nt-display);
  letter-spacing: .19em; text-transform: uppercase; color: var(--nt-accent);
}
.nt-hero h1 {
  margin: 0; font-family: var(--nt-display); font-weight: 800;
  font-size: clamp(2.3rem, 6.6vw, 4.2rem); line-height: 1.02;
  letter-spacing: -.028em; text-wrap: balance;
}
.nt-lede {
  margin: 16px 0 0; max-width: 60ch;
  font-size: clamp(.98rem, 1.5vw, 1.1rem); line-height: 1.62; color: #ddd7e4;
}

/* The stat strip under the hero. Four facts, no adjectives. */
.nt-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; margin: 28px 0 0; max-width: 760px;
  background: var(--nt-line); border: 1px solid var(--nt-line); border-radius: 6px;
  overflow: hidden;
}
.nt-stats div { background: rgba(21, 20, 28, .86); padding: 15px 17px; }
.nt-stats dt, .nt-stats b {
  display: block; font: 800 1.45rem/1 var(--nt-display);
  letter-spacing: -.02em; color: var(--nt-cream);
}
.nt-stats dd, .nt-stats i {
  display: block; margin: 7px 0 0; font-style: normal;
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--nt-muted);
}
.nt-cta-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.nt-cta-row .nt-btn { height: 46px; padding-inline: 22px; }

/* ---------------------------------------------------------------- tab strip
   The jump bar. It is anchor links, not a JavaScript tab widget: every
   section stays in the page, in the DOM, indexable and printable, and the
   bar just moves you to one. The old site hid five of its six panels behind
   script, which meant a search engine saw a sixth of the page. */
.nt-jump {
  position: sticky; top: 62px; z-index: 40;
  background: rgba(17, 16, 23, .95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nt-line);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nt-jump::-webkit-scrollbar { display: none; }
.nt-jump ul {
  display: flex; gap: 0; margin: 0 auto; padding: 0 var(--nt-pad); list-style: none;
  max-width: 1180px;
}
.nt-jump a {
  display: block; padding: 15px 17px;
  font: 700 11.5px/1 var(--nt-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--nt-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nt-jump a:hover { color: var(--nt-cream); }
.nt-jump a.on { color: var(--nt-accent); border-bottom-color: var(--nt-accent); }

/* ------------------------------------------------------------------ section */
.nt-band { padding-block: clamp(46px, 7vw, 76px); scroll-margin-top: 112px; }
.nt-band--alt { background: var(--nt-ink-2); }
.nt-label {
  margin: 0 0 12px; font: 700 11px/1 var(--nt-display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--nt-accent);
}
.nt-band h2 {
  margin: 0 0 18px; font-family: var(--nt-display); font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem); line-height: 1.12;
  letter-spacing: -.024em; text-wrap: balance; max-width: 22ch;
}
.nt-band h3 {
  margin: 30px 0 10px; font-family: var(--nt-display); font-weight: 700;
  font-size: 1.12rem; letter-spacing: -.01em;
}
.nt-band p { margin: 0 0 15px; line-height: 1.68; color: #cdc7d6; max-width: 68ch; }
.nt-band p strong { color: var(--nt-cream); }

.nt-split { display: grid; gap: clamp(22px, 4vw, 44px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .nt-split { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.nt-split img { border-radius: 8px; }

/* -------------------------------------------------------------- fact tables
   Sittings, seating, capacities. Data, set as data. */
.nt-facts { display: grid; gap: 1px; background: var(--nt-line);
  border: 1px solid var(--nt-line); border-radius: 7px; overflow: hidden; margin: 0 0 20px; }
.nt-facts > div {
  background: var(--nt-surface); padding: 13px 16px;
  display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline;
}
.nt-facts dt, .nt-facts > div > b:first-child {
  font: 700 10.5px/1.5 var(--nt-display); letter-spacing: .13em;
  text-transform: uppercase; color: var(--nt-muted);
}
.nt-facts dd, .nt-facts > div > span { margin: 0; font-size: .95rem; line-height: 1.55; }
@media (max-width: 560px) { .nt-facts > div { grid-template-columns: 1fr; gap: 5px; } }

/* seating grid */
.nt-seats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); margin: 18px 0 0; }
.nt-seat {
  background: var(--nt-surface); border: 1px solid var(--nt-line);
  border-radius: 8px; padding: 16px 17px 15px;
  display: flex; flex-direction: column; gap: 8px;
}
.nt-seat h4 { margin: 0; font: 700 1rem/1.25 var(--nt-display); letter-spacing: -.01em; }
.nt-seat p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--nt-muted); max-width: none; }
.nt-seat__n { display: flex; gap: 16px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--nt-line); }
.nt-seat__n span { font: 10.5px/1.5 var(--nt-display); letter-spacing: .12em; text-transform: uppercase; color: var(--nt-muted); }
.nt-seat__n b { display: block; font: 800 1.15rem/1 var(--nt-display); color: var(--nt-cream); margin-top: 3px; }

/* deck heading */
.nt-deck { display: flex; align-items: center; gap: 13px; margin: 34px 0 4px; }
.nt-deck b {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--nt-accent); color: var(--nt-accent);
  font: 800 12px/1 var(--nt-display); letter-spacing: .04em;
}
.nt-deck h3 { margin: 0; }

/* list of inclusions / rules */
.nt-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; max-width: 68ch; }
.nt-list li { position: relative; padding-left: 21px; line-height: 1.6; color: #cdc7d6; font-size: .95rem; }
.nt-list li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--nt-accent);
}
.nt-list--no li::before { background: none; border: 1px solid var(--nt-muted); }

/* two columns of lists, for dress code do/don't */
.nt-cols { display: grid; gap: clamp(18px, 3vw, 34px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .nt-cols { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------- packages */
.nt-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 20px; }
.nt-card {
  background: var(--nt-surface); border: 1px solid var(--nt-line); border-radius: 9px;
  padding: 20px 21px 22px; display: flex; flex-direction: column; gap: 11px;
}
.nt-card__tag {
  align-self: flex-start; font: 700 10px/1 var(--nt-display); letter-spacing: .15em;
  text-transform: uppercase; color: var(--nt-accent);
  border: 1px solid rgba(191,90,253,.42); border-radius: 999px; padding: 6px 11px;
}
.nt-card h3 { margin: 0; font-size: 1.22rem; }
.nt-card p { margin: 0; font-size: .92rem; color: var(--nt-muted); max-width: none; }

/* -------------------------------------------------------------------- venue
   tiles on a destination hub */
.nt-venues { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.nt-venue {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--nt-line);
  background: var(--nt-surface); min-height: 310px;
}
.nt-venue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-venue__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,.12) 30%, rgba(10,10,15,.93) 100%);
}
.nt-venue__t { position: relative; padding: 18px 19px; margin-top: auto; }
.nt-venue__in { position: relative; height: 100%; min-height: 310px; display: flex; flex-direction: column; justify-content: flex-end; }
/* The colour is restated because the whole tile is an <a>, and .nt a paints
   its descendants accent purple. A venue name is a heading that happens to
   sit inside a link, not a link. */
.nt-venue h3 { margin: 0 0 6px; font: 800 1.35rem/1.15 var(--nt-display); letter-spacing: -.02em; color: var(--nt-cream); }
.nt-venue p { margin: 0; font-size: .875rem; line-height: 1.5; color: #c6c0d2; max-width: none; }
.nt-venue__go {
  display: inline-block; margin-top: 12px;
  font: 700 11px/1 var(--nt-display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--nt-accent);
}
.nt-venue:hover .nt-venue__go { color: var(--nt-accent-hi); }

/* ----------------------------------------------------------------- timeline
   A day's route, hour by hour. The old site set these as a plain two-column
   list, which read as a table of numbers; a rule down the left turns the same
   rows into a day you can picture. */
.nt-time { margin: 16px 0 0; padding: 0 0 0 4px; list-style: none; border-left: 1px solid var(--nt-line); }
.nt-time li { position: relative; padding: 0 0 18px 26px; }
.nt-time li::before {
  content: ""; position: absolute; left: -5px; top: 7px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--nt-ink); border: 1px solid var(--nt-accent);
}
.nt-time li:last-child { padding-bottom: 0; }
.nt-time li:last-child::before { background: var(--nt-accent); }
.nt-time b {
  display: block; font: 700 11px/1.5 var(--nt-display);
  letter-spacing: .13em; color: var(--nt-accent);
}
.nt-time span { display: block; margin-top: 2px; font-size: .95rem; line-height: 1.5; color: #cdc7d6; }

/* ------------------------------------------------------------ comparison
   Half day / day / overnight, side by side. Scrolls rather than squashes. */
.nt-tablewrap { overflow-x: auto; margin: 18px 0 20px; -webkit-overflow-scrolling: touch; }
.nt-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .93rem; }
.nt-table th, .nt-table td {
  text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--nt-line);
  font-variant-numeric: tabular-nums;
}
.nt-table thead th {
  font: 700 10.5px/1.4 var(--nt-display); letter-spacing: .13em;
  text-transform: uppercase; color: var(--nt-accent); border-bottom-color: var(--nt-line);
}
.nt-table tbody th {
  font: 700 10.5px/1.5 var(--nt-display); letter-spacing: .1em;
  text-transform: uppercase; color: var(--nt-muted); white-space: nowrap;
}
.nt-table tbody tr:nth-child(odd) td, .nt-table tbody tr:nth-child(odd) th { background: rgba(28, 26, 36, .5); }

/* ------------------------------------------------------------- venue index
   Nine venues with a line each, for a destination whose individual pages do
   not exist yet. Deliberately not the photo tiles used elsewhere: only three
   of the nine have a usable photograph, and a grid where six tiles are grey
   reads as a broken page rather than a list. */
.nt-mini { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); margin-top: 22px; }
.nt-mini a {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit;
  background: var(--nt-surface); border: 1px solid var(--nt-line);
  border-radius: 8px; padding: 17px 18px 16px;
  transition: border-color .15s, transform .15s;
}
.nt-mini a:hover { border-color: var(--nt-accent); transform: translateY(-2px); }
.nt-mini h3 { margin: 0; font: 700 1.05rem/1.25 var(--nt-display); letter-spacing: -.01em; color: var(--nt-cream); }
.nt-mini p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--nt-muted); max-width: none; }
.nt-mini span {
  margin-top: auto; padding-top: 9px;
  font: 700 10.5px/1 var(--nt-display); letter-spacing: .13em;
  text-transform: uppercase; color: var(--nt-accent);
}

/* ---------------------------------------------------------------------- faq */
.nt-faq { max-width: 74ch; }
.nt-faq details { border-bottom: 1px solid var(--nt-line); }
.nt-faq summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  font-weight: 700; font-size: 1rem; line-height: 1.45;
}
.nt-faq summary::-webkit-details-marker { display: none; }
.nt-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 1.35rem/1 var(--nt-display); color: var(--nt-accent);
}
.nt-faq details[open] summary::after { content: "\2013"; }
.nt-faq details p { margin: 0 0 17px; color: var(--nt-muted); }

/* ---------------------------------------------------------- what's on rows */
.nt-wo { display: grid; gap: 10px; margin-top: 18px; }
.nt-wo__row {
  display: grid; gap: 4px 18px; grid-template-columns: 116px 1fr auto; align-items: baseline;
  background: var(--nt-surface); border: 1px solid var(--nt-line);
  border-radius: 7px; padding: 13px 16px;
}
.nt-wo__d { font: 700 11px/1.4 var(--nt-display); letter-spacing: .1em; text-transform: uppercase; color: var(--nt-accent); }
.nt-wo__n { font-weight: 700; }
.nt-wo__h { font-size: .82rem; color: var(--nt-muted); }
@media (max-width: 620px) { .nt-wo__row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ closing */
.nt-ask {
  background: var(--nt-surface); border: 1px solid var(--nt-line);
  border-radius: 11px; padding: clamp(24px, 4vw, 38px);
}
.nt-ask h2 { margin-top: 0; }

/* ------------------------------------------------------------------- footer */
.nt-ft { background: var(--nt-ink-2); border-top: 1px solid var(--nt-line); padding-block: 44px 34px; }
.nt-ft__grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .nt-ft__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.nt-ft h4 {
  margin: 0 0 12px; font: 700 10.5px/1 var(--nt-display);
  letter-spacing: .17em; text-transform: uppercase; color: var(--nt-muted);
}
.nt-ft ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.nt-ft a { color: var(--nt-cream); text-decoration: none; font-size: .92rem; }
.nt-ft a:hover { color: var(--nt-accent-hi); }
.nt-ft__note { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--nt-line);
  font-size: .8rem; color: var(--nt-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* --------------------------------------------------- the consent bar, dark
   omd-tags.js builds one banner for the whole site and appends its stylesheet
   at runtime, which means its rules land after this file and win on equal
   specificity. `.nt` is on <html>, so these selectors carry one class more
   and take it back. Same banner, same consent key, same choice remembered
   across both areas -- only the paint changes. One domain gets one cookie
   bar, and a cream one on a black page would look like a hijacked page. */
.nt .omd-cbar {
  background: #14131b;
  border-top: 1px solid var(--nt-line);
  color: var(--nt-cream);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .5);
}
.nt .omd-cbar p { color: #c9c3d4; }
.nt .omd-cbar a { color: var(--nt-accent-hi); }
.nt .omd-cbar .c-no {
  background: none; border: 1px solid var(--nt-line); color: var(--nt-cream);
}
.nt .omd-cbar .c-no:hover { border-color: var(--nt-cream); background: rgba(243,238,227,.06); }
.nt .omd-cbar .c-yes {
  background: var(--nt-accent); border: 1px solid var(--nt-accent); color: #0a0410;
}
.nt .omd-cbar .c-yes:hover { background: var(--nt-accent-hi); border-color: var(--nt-accent-hi); }

/* ------------------------------------------------------- floating WhatsApp */
.nt-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center;
  background: #25d366; color: #05240f; box-shadow: 0 6px 22px rgba(0,0,0,.42);
}
.nt-wa svg { width: 27px; height: 27px; }