/* ===================================================================
   Nari Lundra - layer 4: liquid glass, header, image overlays
   Loads after refine.css. Owns the site chrome and the photographic
   overlay layer; the body sections stay warm paper.
   =================================================================== */

:root {
  --nl-glass:        rgba(246, 241, 230, 0.72);
  --nl-glass-ink:    rgba(36, 48, 31, 0.55);
  --nl-glass-blur:   blur(20px) saturate(1.6);
  --nl-glass-line:   rgba(255, 253, 248, 0.45);
  --nl-glass-shadow: inset 0 1px 0 rgba(255, 253, 248, .4), 0 8px 32px rgba(36, 48, 31, .10);
  --nl-hdr-h:        96px;
  --nl-hdr-h-sm:     76px;
}

/* -------------------------------------------------------------- header
   Fixed rather than sticky: the Theme Builder wrapper sits inside
   containers whose overflow we do not control, and every page opens on a
   full-bleed hero that the header is meant to float over anyway. */

.et-l--header { position: relative; z-index: 9000; }
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module { margin: 0 !important; padding: 0 !important; }
.et-l--header .et_pb_row { width: 100% !important; max-width: none !important; }

.nl-hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9000;
  height: var(--nl-hdr-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height .24s cubic-bezier(.4, 0, .2, 1),
              background-color .24s ease, border-color .24s ease;
}

/* Three columns, the outer two equal. Flex centring only centred the nav in
   whatever space was left between the logo and the actions -- and since the
   actions are twice the width of the logo, the nav sat 112px left of the page
   centre at 1280px. With 1fr auto 1fr the middle column is centred on the
   header no matter how wide the two ends are. */
.nl-hdr-in {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--nl-gutter, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;          /* ONE baseline. */
  gap: 28px;
}
.nl-hdr-logo { justify-self: start; }
.nl-hdr-nav  { justify-self: center; }
.nl-hdr-act  { justify-self: end; }

/* Scrolled: frosted paper. */
.nl-hdr[data-state="scrolled"] {
  height: var(--nl-hdr-h-sm);
  background: var(--nl-glass);
  -webkit-backdrop-filter: var(--nl-glass-blur);
  backdrop-filter: var(--nl-glass-blur);
  border-bottom-color: var(--nl-stone, #DED6C6);
  box-shadow: 0 1px 24px rgba(36, 48, 31, .06);
}

/* ---- logo: two lockups, CSS picks one, so scrolling never flashes */
.nl-hdr-logo { display: block; flex: 0 0 auto; line-height: 0; position: relative; }
.nl-hdr-logo img { display: block; width: 140px; height: auto; transition: opacity .24s ease; }
.nl-hdr-logo-lt { position: absolute; inset: 0; opacity: 0; }
.nl-hdr-logo-dk { opacity: 1; }
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-logo-dk { opacity: 0; }
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-logo-lt { opacity: 1; }

/* ---- nav */
.nl-hdr-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}

.nl-hdr-link {
  position: relative;
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--nl-ink, #24301F);
  padding: 6px 0;
  transition: color .2s ease;
}
.nl-hdr-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.nl-hdr-link:hover::after,
.nl-hdr-link:focus-visible::after { transform: scaleX(1); }
.nl-hdr-link.is-here { color: var(--nl-vine, #7A1F2B); }
.nl-hdr-link.is-here::after { transform: scaleX(1); background: var(--nl-vine, #7A1F2B); }

/* ---- actions */
.nl-hdr-act { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; }

.nl-hdr-tel {
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 12px; letter-spacing: .04em;
  color: var(--nl-ink-soft, #5A6650);
  text-decoration: none; white-space: nowrap;
}
.nl-hdr-tel:hover { color: var(--nl-vine, #7A1F2B); }

.nl-hdr-cta {
  display: inline-flex; align-items: center;
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  color: var(--nl-cream, #FFFDF8);
  background: var(--nl-vine, #7A1F2B);
  padding: 12px 24px;
  border-radius: 2px;
  transition: background-color .2s ease, transform .2s ease;
}
.nl-hdr-cta:hover { background: var(--nl-vine-dp, #5E1721); color: var(--nl-cream, #FFFDF8); }
.nl-hdr-cta:active { transform: translateY(1px); }

/* ---- language: a glass segmented pill */
.nl-hdr .nl-lang,
.nl-menu-lang .nl-lang {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(36, 48, 31, .06);
  border: 1px solid rgba(36, 48, 31, .10);
}
.nl-hdr .nl-lang-link,
.nl-menu-lang .nl-lang-link {
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 11px; letter-spacing: .08em;
  line-height: 1; text-decoration: none;
  color: var(--nl-ink-soft, #5A6650);
  padding: 7px 11px; border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
.nl-hdr .nl-lang-link.is-current,
.nl-menu-lang .nl-lang-link.is-current {
  background: var(--nl-cream, #FFFDF8);
  color: var(--nl-ink, #24301F);
  box-shadow: 0 1px 3px rgba(36, 48, 31, .12);
}

/* ---- over-hero state: everything goes cream */
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-link,
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-tel { color: var(--nl-cream, #FFFDF8); }
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-link.is-here { color: var(--nl-harvest, #C9962F); }
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-link.is-here::after { background: var(--nl-harvest, #C9962F); }
.nl-hdr[data-over="1"][data-state="top"] .nl-lang {
  background: rgba(255, 253, 248, .14);
  border-color: rgba(255, 253, 248, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nl-hdr[data-over="1"][data-state="top"] .nl-lang-link { color: rgba(255, 253, 248, .78); }
.nl-hdr[data-over="1"][data-state="top"] .nl-lang-link.is-current {
  background: rgba(255, 253, 248, .92); color: var(--nl-ink, #24301F);
}
.nl-hdr[data-over="1"][data-state="top"] .nl-burger-b { background: var(--nl-cream, #FFFDF8); }

/* ---- menu open: the panel behind the header is light, so the cream lockup
   and cream links would vanish into it. Same specificity as the over-hero
   rules above and declared after them, so this wins while the panel is up. */
.nl-hdr[data-over="1"][data-menu="open"] .nl-hdr-logo-dk { opacity: 1; }
.nl-hdr[data-over="1"][data-menu="open"] .nl-hdr-logo-lt { opacity: 0; }
.nl-hdr[data-over="1"][data-menu="open"] .nl-hdr-link,
.nl-hdr[data-over="1"][data-menu="open"] .nl-hdr-tel { color: var(--nl-ink, #24301F); }
.nl-hdr[data-over="1"][data-menu="open"] .nl-burger-b { background: var(--nl-ink, #24301F); }

/* ---- burger */
.nl-burger {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0; border: 0; background: none; cursor: pointer;
  position: relative;
}
.nl-burger-b {
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: var(--nl-ink, #24301F);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease, background-color .24s ease;
}
.nl-burger-b:nth-child(1) { top: 19px; }
.nl-burger-b:nth-child(2) { top: 26px; }
.nl-burger[aria-expanded="true"] .nl-burger-b { background: var(--nl-ink, #24301F); }
.nl-burger[aria-expanded="true"] .nl-burger-b:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nl-burger[aria-expanded="true"] .nl-burger-b:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

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

.nl-menu {
  position: fixed; inset: 0; z-index: 8999;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nl-hdr-h-sm) + 24px) var(--nl-gutter, 32px) 40px;
  background: rgba(246, 241, 230, .82);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  opacity: 0; transform: scale(1.02);
  transition: opacity .24s ease, transform .24s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.nl-menu[hidden] { display: none; }
.nl-menu.is-open { opacity: 1; transform: none; }

.nl-menu-nav { display: flex; flex-direction: column; gap: 2px; }
.nl-menu-link {
  font-family: var(--nl-display, "Nib Pro"), Georgia, serif;
  font-size: clamp(1.75rem, 7vw, 2.4rem);
  line-height: 1.18; letter-spacing: -.02em;
  color: var(--nl-ink, #24301F);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid rgba(36, 48, 31, .10);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, color .2s ease;
  transition-delay: calc(var(--i, 0) * 32ms);
}
.nl-menu.is-open .nl-menu-link { opacity: 1; transform: none; }
.nl-menu-link.is-here { color: var(--nl-vine, #7A1F2B); }
.nl-menu-link:hover { color: var(--nl-vine, #7A1F2B); }

.nl-menu-foot {
  margin-top: 34px; display: flex; flex-direction: column; gap: 18px;
  opacity: 0; transition: opacity .3s ease .22s;
}
.nl-menu.is-open .nl-menu-foot { opacity: 1; }
.nl-menu-meta { display: flex; flex-direction: column; gap: 7px; }
.nl-menu-meta a, .nl-menu-meta p {
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: 14px; line-height: 1.5; margin: 0;
  color: var(--nl-ink-soft, #5A6650); text-decoration: none;
}
.nl-menu-meta a:hover { color: var(--nl-vine, #7A1F2B); }

body.nl-locked { overflow: hidden; }

/* -------------------------------------------------------------- breakpoints */

@media (max-width: 1280px) {
  .nl-hdr-nav { gap: 20px; }
  .nl-hdr-link { letter-spacing: .11em; }
}

/* The last stretch before the burger takes over. Measured: without this the
   nav and the actions are 12px apart at 1150 and overlap by ~12 at 1101. */
@media (max-width: 1200px) {
  .nl-hdr-nav { gap: 15px; }
  .nl-hdr-link { font-size: 12px; letter-spacing: .09em; }
  .nl-hdr-cta { padding: 11px 18px; }
  .nl-hdr-in { gap: 20px; }
}

@media (max-width: 1100px) {
  :root { --nl-hdr-h: 68px; --nl-hdr-h-sm: 60px; }
  .nl-hdr-nav { display: none; }
  .nl-burger { display: block; }
  .nl-hdr .nl-lang { display: none; } /* lives in the panel instead */
  .nl-hdr-in { grid-template-columns: auto 1fr; gap: 16px; }
  .nl-hdr-logo img { width: 116px; }
  .nl-hdr-act { margin-left: auto; gap: 12px; }
  .nl-hdr-cta { padding: 10px 16px; font-size: 11px; }
}

@media (max-width: 420px) {
  .nl-hdr-cta { display: none; }      /* the panel carries it */
  .nl-hdr-logo img { width: 104px; }
}

/* -------------------------------------------------------- image overlays
   Photographs used to sit flat with the caption on the page below them.
   Every framed image now carries a scrim, and the caption moves onto the
   photograph on a glass plate -- which is what ties type to picture. */

/* The frames carry a 10px cream mat and a hairline (refine.css), so the scrim
   is inset to the mat rather than covering it -- a darkened mat would read as
   a printing error. */

.nl-figure { position: relative; }

/* The figure is a Divi flex group holding the image module and the plate's
   code module. The group's row-gap sat between them, so even with the module
   margin collapsed the figure box was ~30px taller than the frame and a plate
   positioned from its bottom hung below the photograph. Both have to go. */
.nl-figure { gap: 0 !important; row-gap: 0 !important; }
.nl-figure > .et_pb_module { margin-bottom: 0 !important; }
.nl-figure > .et_pb_code { height: 0; }
.nl-band-img, .nl-grid-img { position: relative; overflow: hidden; }

.nl-band-img::after,
.nl-grid-img::after {
  content: "";
  position: absolute; inset: 10px;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(36, 48, 31, .55) 0%,
              rgba(36, 48, 31, .18) 38%,
              rgba(36, 48, 31, 0) 70%);
}

.nl-band-img img, .nl-grid-img img {
  display: block; width: 100%;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
.nl-band-img a:hover img, .nl-grid-img a:hover img { transform: scale(1.04); }

/* The caption plate, sitting on the photograph inside the mat. */
.nl-cap-plate {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  z-index: 2;
  display: block;
  padding: 11px 15px;
  border-radius: 3px;
  background: var(--nl-glass-ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 253, 248, .18);
  color: var(--nl-cream, #FFFDF8);
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .nl-band-img::after, .nl-grid-img::after { inset: 6px; }
  .nl-cap-plate {
    left: 14px; right: 14px; bottom: 14px; padding: 9px 12px; font-size: 10.5px;
  }
}

/* The hero already carries a tuned, left-weighted scrim on .nl-page-hero::after
   in refine.css. Adding a second one here stacked the two and crushed the
   photograph to near-black on phones -- so this layer deliberately adds none. */

/* A glass plate behind the hero headline. */
.nl-hero-plate {
  display: block;
  max-width: 54rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.6rem, 3.4vw, 2.8rem);
  border-radius: 4px;
  background: rgba(20, 28, 16, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 253, 248, .18);
  box-shadow: 0 18px 60px rgba(20, 28, 16, .22);
}

/* -------------------------------------------------------------- fallbacks
   Glass must never be the only thing carrying legibility. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nl-hdr[data-state="scrolled"] { background: #F6F1E6; }
  .nl-menu { background: #F6F1E6; }
  .nl-cap-plate { background: rgba(36, 48, 31, .86); }
  .nl-hero-plate { background: rgba(36, 48, 31, .62); }
}

@media (prefers-reduced-transparency: reduce) {
  .nl-hdr[data-state="scrolled"] { background: #F6F1E6; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nl-menu { background: #F6F1E6; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nl-cap-plate { background: rgba(36, 48, 31, .9); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nl-hero-plate { background: rgba(36, 48, 31, .68); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-hdr, .nl-menu, .nl-menu-link, .nl-menu-foot,
  .nl-band-img img, .nl-grid-img img, .nl-burger-b { transition: none; }
  .nl-band-img a:hover img, .nl-grid-img a:hover img { transform: none; }
}

/* -------------------------------------------------------------- dishes
   A named dish, its photograph, and one line. The tag is the kitchen's own
   shorthand -- nga zjarri, nga baxhoja -- not a marketing category. */

.nl-dishes .nl-grid-img { margin-bottom: 0 !important; }

.nl-dish-tag p {
  font-family: var(--nl-mono, "DM Mono"), monospace !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  margin: 14px 0 6px !important;
}

.nl-dish-body p {
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  max-width: 34ch;
}

/* The dish name sits on the plate, so it needs a touch more presence than a
   location caption. */
.nl-dishes .nl-cap-plate {
  font-family: var(--nl-display, "Nib Pro"), Georgia, serif;
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Bands alternate left/right on desktop, which is the point of them. Stacked on
   a phone that alternation just reads as inconsistent ordering, so the
   photograph always comes first there. */
@media (max-width: 767px) {
  .nl-band-section .et_pb_row { display: flex; flex-direction: column; }
  .nl-band-section .nl-band-figcol { order: -1; }
}

/* ======================================================= harvest calendar
   The farm's year as one ledger. Same record-keeping voice as the room and
   amenity tables, but it is the only element on the site that knows what day
   it is: the current month is marked from the server clock, so it is right
   every month without anyone touching it. */

.nl-harvest {
  --h-winter: #6E7F86;
  --h-spring: #6F9A5E;
  --h-summer: var(--nl-harvest, #C9962F);
  --h-autumn: var(--nl-vine, #7A1F2B);
  border-top: 1px solid var(--nl-rule, #DED6C6);
}

.nl-harvest-head {
  display: grid;
  grid-template-columns: 11rem 7rem 1fr;
  gap: 1.5rem;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--nl-rule, #DED6C6);
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
}

.nl-harvest-rows { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.nl-harvest-row {
  position: relative;
  display: grid;
  grid-template-columns: 11rem 7rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 18px 0 17px;
  border-bottom: 1px solid var(--nl-rule, #DED6C6);
}

/* The season reads as a colour in the margin, not as a label shouting. */
.nl-harvest-row::before {
  content: "";
  position: absolute;
  left: -14px; top: 24px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--h-winter);
}
.nl-harvest-row[data-season="spring"]::before { background: var(--h-spring); }
.nl-harvest-row[data-season="summer"]::before { background: var(--h-summer); }
.nl-harvest-row[data-season="autumn"]::before { background: var(--h-autumn); }

.nl-h-month {
  font-family: var(--nl-display, "Nib Pro"), Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--nl-ink, #24301F);
}

.nl-h-season {
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
}

.nl-h-body { display: block; }

.nl-h-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-bottom: 6px;
}
.nl-h-item {
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: 0.9375rem;
  color: var(--nl-ink, #24301F);
}
.nl-h-item + .nl-h-item::before {
  content: "\25C6";                 /* the wine diamond used throughout */
  color: var(--nl-rule, #DED6C6);
  font-size: 0.5rem;
  vertical-align: 0.18em;
  margin: 0 10px;
}

.nl-h-note {
  display: block;
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nl-ink-soft, #5A6650);
  max-width: 56ch;
}

/* ---- the month you are standing in */
.nl-harvest-row.is-now {
  background: var(--nl-glass, rgba(246, 241, 230, 0.72));
  -webkit-backdrop-filter: var(--nl-glass-blur);
  backdrop-filter: var(--nl-glass-blur);
  box-shadow: inset 2px 0 0 var(--nl-vine, #7A1F2B),
              0 8px 32px rgba(36, 48, 31, .07);
  padding-left: 18px;
  padding-right: 18px;
  margin-left: -18px;
  margin-right: -18px;
  border-radius: 3px;
}
.nl-harvest-row.is-now::before { left: -32px; }
.nl-harvest-row.is-now .nl-h-month { color: var(--nl-vine, #7A1F2B); }
.nl-harvest-row.is-now .nl-h-item { font-weight: 500; }

.nl-h-now {
  display: inline-block;
  vertical-align: 0.14em;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--nl-vine, #7A1F2B);
  color: var(--nl-cream, #FFFDF8);
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .nl-harvest-head { display: none; }
  .nl-harvest-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 16px 0 15px;
  }
  .nl-harvest-row::before { left: -12px; top: 22px; }
  .nl-harvest-row.is-now { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .nl-harvest-row.is-now::before { left: -24px; }
  .nl-h-season { order: -1; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nl-harvest-row.is-now { background: #F1EADB; }
}
@media (prefers-reduced-transparency: reduce) {
  .nl-harvest-row.is-now { background: #F1EADB; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===================================================== hero
   No drift animation here on purpose: patterns.css already runs a slow Ken
   Burns (@keyframes nl-drift, scale 1.04 -> 1.12) on the hero image, with its
   own reduced-motion fallback. A second animation on the same property would
   fight it. All this layer adds is the clip, so the scaled image can never
   widen the page. */

.nl-page-hero, .nl-hero { overflow: hidden; }

/* The seasonal panel is one month of the farm's year; this leads to all twelve. */
.nl-season-more {
  display: inline-block;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nl-harvest, #C9962F);
  transition: color .2s ease, border-color .2s ease;
}
.nl-season-more:hover { color: var(--nl-cream, #FFFDF8); }

/* Landing from that link must not put the first row under the fixed header. */
.nl-harvest { scroll-margin-top: calc(var(--nl-hdr-h-sm) + 24px); }

/* The provenance marquee runs edge to edge while it scrolls, which is right for
   a marquee. With motion reduced it stops being one and wraps into a static
   block of text (patterns.css) -- but it kept the marquee's zero padding, so it
   sat hard against both window edges while every other block on the page
   respects the gutter. Give it the gutter back once it is prose. */

@media (prefers-reduced-motion: reduce) {
  .nl-ticker { padding-left: var(--nl-gutter); padding-right: var(--nl-gutter); }
  .nl-ticker-track {
    max-width: var(--nl-container, 82rem);
    margin-inline: auto;
  }
  .nl-ticker-track > span { padding: 0.9rem 0; line-height: 1.95; }
}

/* ===================================================== hero, on a phone
   Three faults, all of which made every page open badly on a phone.

   1. The inset hairline frame is positioned `absolute; inset:...`, but
      refine.css gives every non-media hero row `position: relative` -- and the
      frame lives in a row that is 1px tall. So instead of a rectangle around
      the hero it rendered as a stray line across the middle of the picture.
      Taking that row out of the positioning chain puts the frame back on the
      section where it belongs.

   2. The copy sat in the vertical middle, which on a tall phone hero puts the
      eyebrow over the brightest part of the photograph and leaves dead space
      below. Anchoring it to the bottom sits the type in the strong part of the
      scrim and lets the picture breathe above it.

   3. Gold on a sunlit window is marginal at small sizes; a soft shadow costs
      nothing and holds it. */

.nl-page-hero, .nl-hero { position: relative; }
/* The frame is a <span> four wrappers deep (row > column > code module >
   code inner), and Divi positions several of those, so `inset` always resolved
   against a 2px-tall box no matter which ancestor was unset. Drawing it as a
   pseudo-element of the section removes the ancestor chain from the problem
   entirely; the markup element is then redundant. */
.nl-page-hero::before,
.nl-hero::before {
  content: "";
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  border: 1px solid rgba(255, 253, 248, 0.26);
  z-index: 3;
  pointer-events: none;
}
.nl-hero-frame { display: none; }
@media (max-width: 767px) {
  .nl-page-hero::before, .nl-hero::before { inset: 10px; }
}

@media (max-width: 767px) {
  .nl-page-hero, .nl-hero {
    justify-content: flex-end;
    padding-top: clamp(6rem, 13vh, 8rem) !important;
    padding-bottom: clamp(2.25rem, 5vh, 3.25rem) !important;
  }
  .nl-page-hero .nl-eyebrow p,
  .nl-hero .nl-eyebrow p { text-shadow: 0 1px 10px rgba(14, 21, 12, .75); }
  .nl-page-hero h1, .nl-hero h1 { text-shadow: 0 2px 18px rgba(14, 21, 12, .5); }
  .nl-page-hero .nl-hero-sub p, .nl-hero .nl-hero-sub p,
  .nl-page-hero > .et_pb_row:last-of-type p,
  .nl-hero > .et_pb_row:last-of-type p { text-shadow: 0 1px 12px rgba(14, 21, 12, .6); }
}

/* The provenance marquee, wrapped by reduced motion, becomes sixteen
   uppercase fragments over eight lines on a phone -- unreadable as prose and
   ugly as a block. Every number in it is already on the page as a stat slab,
   so on a small screen it simply steps aside. */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .nl-ticker { display: none; }
}

/* The mobile scrim has to carry an eyebrow in harvest gold over sunlit glass.
   The previous curve bottomed out at 0.34 across the middle, which is where the
   type block now sits, so it is weighted lower and deeper. */
@media (max-width: 767px) {
  /* Balancing act: the type block sits in the lower two thirds and the eyebrow
     at the top of it is 12px gold, so that zone needs about 0.55 to read. Any
     more and the photograph goes black -- the previous curve held 0.72-0.90
     across two thirds and buried a well-lit room shot completely. This holds
     ~0.52 where the eyebrow sits, deepens under the body copy, and opens up in
     the top eighth so the picture still breathes. */
  .nl-hero::after, .nl-page-hero::after {
    background: linear-gradient(to top,
                rgba(14, 21, 12, 0.78) 0%,
                rgba(14, 21, 12, 0.60) 45%,
                rgba(14, 21, 12, 0.44) 70%,
                rgba(14, 21, 12, 0.14) 88%,
                rgba(14, 21, 12, 0.30) 100%) !important;
  }
}

/* On a desktop the hero plate is a contained panel sitting over one corner of
   the photograph. On a phone it stretches to the full column and covers 70% of
   the hero, so the golden-hour shot of the property -- the best picture on the
   site -- disappeared behind frosted glass plus the scrim. The scrim alone
   already carries the type on every inner page, so the plate simply steps back
   here and the photograph gets its hero. */
@media (max-width: 767px) {
  .nl-hero-plate {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
  }
}

/* One scrim has to serve both a sunlit window (Restoranti) and a vineyard in
   flat light (Ferma, mean luminance 104/255). Heavy enough for the bright one
   turned the dark one black. So the scrim is now light enough that every
   photograph reads, the cream type is held by its shadow rather than by brute
   opacity, and the darker frames get a gentle lift to meet it. Keeps cream on
   roughly 6:1 either way. */
@media (max-width: 767px) {
  .nl-hero-img img { filter: brightness(1.09) contrast(1.03); }
  .nl-page-hero .nl-eyebrow p,
  .nl-hero .nl-eyebrow p { text-shadow: 0 1px 3px rgba(14,21,12,.9), 0 2px 14px rgba(14,21,12,.8); }
  .nl-page-hero h1, .nl-hero h1 { text-shadow: 0 2px 6px rgba(14,21,12,.6), 0 4px 24px rgba(14,21,12,.5); }
  .nl-page-hero > .et_pb_row:last-of-type p,
  .nl-hero > .et_pb_row:last-of-type p { text-shadow: 0 1px 4px rgba(14,21,12,.8), 0 2px 16px rgba(14,21,12,.6); }
}

/* Harvest gold at 12px over a sunlit window is the one thing a scrim light
   enough to keep the photograph alive cannot hold. On a phone hero the eyebrow
   therefore goes cream; the gold rule beside it stays, and gold keeps its job
   everywhere it sits on paper. */
@media (max-width: 767px) {
  .nl-page-hero .nl-eyebrow p,
  .nl-hero .nl-eyebrow p { color: var(--nl-cream, #FFFDF8) !important; }
}

/* ================================================ the opening figures
   The page's numbers, set as a ruled line inside the opening rather than as a
   separate slab of ink. Measured before this change, the restaurant page had
   four sections under 400px orphaned around a 4,400px band section -- the page
   read as debris because its parts had no comparable weight. */

.nl-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--nl-rule, #DED6C6);
  border-bottom: 1px solid var(--nl-rule, #DED6C6);
}
.nl-fig {
  padding: 22px 0 20px;
  text-align: left;
  border-left: 1px solid var(--nl-rule, #DED6C6);
  padding-left: 20px;
}
.nl-fig:first-child { border-left: 0; padding-left: 0; }
.nl-fig-n {
  display: block;
  font-family: var(--nl-display, "Nib Pro"), Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--nl-vine, #7A1F2B);
  margin-bottom: 8px;
}
.nl-fig-l {
  display: block;
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
}

.nl-openquote { margin: 0; border-left: 2px solid var(--nl-vine, #7A1F2B); padding-left: clamp(18px, 2.4vw, 32px); }
.nl-openq {
  font-family: var(--nl-display, "Nib Pro"), Georgia, serif;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.32; letter-spacing: -0.01em;
  color: var(--nl-ink, #24301F); margin: 0 0 12px; max-width: 46ch;
}
.nl-openq-by {
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650); text-decoration: none;
}
a.nl-openq-by:hover { color: var(--nl-vine, #7A1F2B); }

@media (max-width: 767px) {
  .nl-figures { grid-template-columns: repeat(2, 1fr); }
  .nl-fig { padding-left: 16px; }
  .nl-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
  .nl-fig:nth-child(n+3) { border-top: 1px solid var(--nl-rule, #DED6C6); }
}

/* ================================================ band proportion
   Band images were 4:5. At 725px wide inside the asymmetric grid that makes a
   906px-tall photograph, so a four-band section measured 4,436px -- 54% of the
   restaurant page in one undifferentiated block, which is most of why the page
   had no rhythm. Landscape on a wide screen, portrait on a phone, where a tall
   image is the right shape and the column is narrow anyway. */

@media (min-width: 768px) {
  .nl-band-img img { aspect-ratio: 3 / 2; }
  .nl-band-wide img { aspect-ratio: 16 / 9; }
}

/* ============================================ hero proportion, desktop
   Measured at 1440x900 before this: the hero was 998px against a 900px
   viewport, the h1 alone was 359px (three lines at 122px -- poster scale, not
   hero scale), 189px of padding sat between the header and the eyebrow, and the
   REZERVO button landed at 832-880px: twenty pixels above the fold on this
   screen and well below it on a 1366x768 laptop. The inset frame's bottom edge
   was never visible at all, because the hero overflowed the window.

   So: bound the hero to the window, centre the content in it rather than
   pushing it down with padding, and bring the display size back to something a
   three-line sentence can live at. */

@media (min-width: 768px) {
  .nl-hero, .nl-page-hero {
    min-height: min(86vh, 820px);
    justify-content: center;
    padding-top: calc(var(--nl-hdr-h) + clamp(1rem, 2.4vh, 2rem)) !important;
    padding-bottom: clamp(1.5rem, 3.4vh, 3rem) !important;
  }
  /* 8.5vw was 122px at 1440. A headline that runs to three lines needs to be
     read, not announced. */
  .nl-hero h1      { font-size: clamp(2.75rem, 5.6vw, 5rem) !important; }
  .nl-page-hero h1 { font-size: clamp(2.5rem, 4.4vw, 4rem) !important; }
}

/* ============================================ header proportion
   Measured: a 96px bar carrying a 140x33 lockup -- the logo was 34% of the bar
   height, which left it reading as a smudge in the corner with the
   AGRO - TOURISM line below legibility, and a lot of empty bar around it.
   A wordmark wants roughly 45% of the bar. Tighter bar, larger lockup. */

@media (min-width: 1101px) {
  :root { --nl-hdr-h: 84px; --nl-hdr-h-sm: 68px; }
  .nl-hdr-logo img { width: 170px; }
}

/* ============================================ the hero plate, retired
   The plate was a block 741px wide holding a headline that filled about 400px
   of it, so a hard-edged frosted panel hung empty to the right of the type and
   sat on the photograph as a pale rectangle. It was also the only hero on the
   site with one -- every inner page carries its type on the scrim alone, and
   those read well. So the homepage joins them, and the heroes are consistent. */

.nl-hero-plate {
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none;
}

/* ================================================ section top padding
   refine.css zeroes padding-top on every section after the first so adjacent
   sections share one seam instead of two. That is right when two sections sit
   on the same paper -- but it also zeroes it where the background TONE changes,
   and there the gap has to belong to the incoming section. The result was every
   heading starting flush against the colour boundary above it, with all the
   air dumped at the bottom of the block. Measured: padding-top 0 against
   padding-bottom 75-86px on every section of the page.

   Restored at 0.78 of the section unit, so a seam is about 130px rather than
   the 150 that full symmetry would give. */

body .et_pb_section + .et_pb_section:not(.nl-page-hero):not(.nl-hero):not(.nl-ticker):not(.nl-header-shell):not(.nl-footer) {
  padding-top: calc(var(--nl-section) * 0.78);
}

/* ================================================ the plot mark
   Each pillar was numbered 01-04 in oversized mono. An index tells the reader
   nothing they need; the mark now carries a word in the label voice, set like
   every other section mark on the site so the page has one grammar. */

.nl-plot-num p,
.nl-plot-num {
  display: flex !important;
  align-items: center;
  gap: 0.85em;
  font-family: var(--nl-mono, "DM Mono"), monospace !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase;
  color: var(--nl-vine, #7A1F2B) !important;
  margin: 0 0 1.25rem !important;
  opacity: 1 !important;
}
.nl-plot-num p::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: var(--nl-vine, #7A1F2B);
}

/* ================================================ header over a photograph
   A solid white pill and a filled wine block sit on top of the picture like
   borrowed UI. Over the hero both go to outline; they fill in once the header
   frosts on scroll, where there is a surface to sit on. */

.nl-hdr[data-over="1"][data-state="top"] .nl-lang {
  background: rgba(255, 253, 248, 0.10);
  border-color: rgba(255, 253, 248, 0.38);
}
.nl-hdr[data-over="1"][data-state="top"] .nl-lang-link.is-current {
  background: rgba(255, 253, 248, 0.20);
  color: var(--nl-cream, #FFFDF8);
  box-shadow: none;
}
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-cta {
  background: transparent;
  color: var(--nl-cream, #FFFDF8);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.55);
}
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-cta:hover {
  background: rgba(255, 253, 248, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.85);
}

/* The over-hero state is an override of the resting style, and something in the
   cascade was holding `background` on these two while letting box-shadow
   through. State wins over resting style here, so it says so. */
.nl-hdr[data-over="1"][data-state="top"] .nl-lang {
  background: rgba(255, 253, 248, 0.10) !important;
  border-color: rgba(255, 253, 248, 0.38) !important;
}
.nl-hdr[data-over="1"][data-state="top"] .nl-lang-link.is-current {
  background: rgba(255, 253, 248, 0.22) !important;
  color: var(--nl-cream, #FFFDF8) !important;
  box-shadow: none !important;
}
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-cta {
  background: transparent !important;
  color: var(--nl-cream, #FFFDF8) !important;
}
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-cta:hover {
  background: rgba(255, 253, 248, 0.16) !important;
}

/* ======================================================= the frosted bar
   A heavier, more convincing glass once the header has something to sit on:
   a wider blur with a real saturation lift so colour blooms through rather
   than going grey, a bright inner line along the top edge the way light
   catches the lip of a pane, a hairline at the bottom, and a soft wide
   shadow so the bar reads as floating above the page rather than painted on.
   The resting state stays fully transparent over the hero. */

.nl-hdr[data-state="scrolled"] {
  background: rgba(246, 241, 230, 0.88) !important;
  -webkit-backdrop-filter: blur(26px) saturate(190%) !important;
  backdrop-filter: blur(26px) saturate(190%) !important;
  border-bottom-color: rgba(36, 48, 31, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(36, 48, 31, 0.04),
    0 10px 34px rgba(36, 48, 31, 0.09) !important;
}

/* The transition carries the blur and the shadow too, so the bar settles in
   rather than snapping. */
/* Height, shadow and border ease; the background and the blur switch outright.
   Transitioning backdrop-filter makes the browser re-blur the whole strip on
   every frame of the animation, which is the most expensive thing a header can
   do -- and if frames are not being produced the property sits at its start
   value, so the bar reads as never having frosted at all. Snapping them is both
   cheaper and the thing that actually always works; against the eased height
   the change still lands softly. */
.nl-hdr {
  transition:
    height .34s cubic-bezier(.32, .72, 0, 1),
    box-shadow .34s cubic-bezier(.32, .72, 0, 1),
    border-color .24s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nl-hdr[data-state="scrolled"] { background: #F3EEE3 !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nl-hdr[data-state="scrolled"] {
    background: #F3EEE3 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}

/* ======================================================= the ticker, inline
   It was wrapping into a block of eight fragments instead of running as one
   line. patterns.css does that deliberately when the visitor has asked for
   reduced motion, on the reasoning that a marquee you cannot read is worse
   than none - but a wrapped grid of uppercase scraps is worse than either.

   So it is always one line now. It scrolls for everyone who has not asked for
   stillness; for those who have, the same single line simply sits there and
   can be swiped or scrolled by hand. */

.nl-ticker { overflow: hidden; }
.nl-ticker-track { flex-wrap: nowrap !important; width: max-content !important; }
.nl-ticker-track > span { white-space: nowrap !important; }

@media (prefers-reduced-motion: reduce) {
  .nl-ticker {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nl-ticker::-webkit-scrollbar { display: none; }
  .nl-ticker-track { animation: none !important; }
  /* the duplicate track exists only to hide the seam of the loop */
  .nl-ticker-track > span[aria-hidden="true"] { display: none !important; }
  .nl-ticker { display: block !important; }
}

/* it was stepping aside entirely on small screens; one line fits anywhere */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .nl-ticker { display: block !important; }
}

/* a little more room to breathe, and the diamonds quieter than the words */
.nl-ticker-track > span { padding: 1.15rem 0 !important; }
.nl-ticker-track i { opacity: .55; }

/* ===================================================== the closing plate
   The footer was four stacks of links and a line of small print. It now opens
   on the motto, carries the estate's own tower as a watermark behind it, and
   uses the same ruled marks as the rest of the site so it reads as the last
   movement of the page rather than a utility strip bolted on. */

.nl-footer { position: relative; overflow: hidden; }

.nl-foot-mark {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 34vw, 560px);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}

.nl-foot-top { position: relative; z-index: 1; }

/* a short rule with the wine diamond, the same ornament that closes a section */
.nl-foot-orn {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 1px;
  background: rgba(255, 253, 248, 0.28);
  position: relative;
  margin-bottom: 2rem;
}
.nl-foot-orn::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--nl-harvest, #C9962F);
  transform: rotate(45deg);
}

.nl-foot-motto-l {
  font-family: var(--nl-display, "Nib Pro"), Georgia, serif;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--nl-harvest, #C9962F);
  margin: 0 0 1.1rem;
}
.nl-foot-motto-s {
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 253, 248, 0.68);
  margin: 0;
  max-width: 44ch;
}

/* the column marks, in the eyebrow grammar used everywhere else */
.nl-foot-head {
  display: flex !important;
  align-items: center;
  gap: 0.8em;
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--nl-harvest, #C9962F);
  margin: 0 0 1.25rem;
}
.nl-foot-head::before {
  content: "";
  flex: 0 0 auto;
  width: 20px; height: 1px;
  background: var(--nl-harvest, #C9962F);
}
.nl-foot-head-2 { margin-top: 2rem; }

.nl-foot-grid { position: relative; z-index: 1; }

.nl-foot-list { list-style: none; margin: 0; padding: 0; }
.nl-foot-list li {
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 253, 248, 0.82);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 253, 248, 0.10);
}
.nl-foot-list li:last-child { border-bottom: 0; }
.nl-foot-list a { color: inherit; text-decoration: none; transition: color .2s ease; }
.nl-foot-list a:hover { color: var(--nl-harvest, #C9962F); }
.nl-foot-addr { color: rgba(255, 253, 248, 0.6) !important; }

.nl-foot-hours { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.nl-foot-hours span {
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 253, 248, 0.5);
}
.nl-foot-hours strong {
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-weight: 400; color: var(--nl-cream, #FFFDF8); letter-spacing: 0.04em;
}

.nl-foot-maps {
  font-family: var(--nl-mono, "DM Mono"), monospace !important;
  font-size: 0.6875rem !important; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--nl-harvest, #C9962F) !important;
}

/* the footer navigation inherits the same ruled list */
.nl-footlist { display: flex; flex-direction: column; }
.nl-footlist .nl-foot-link {
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: 0.9375rem;
  color: rgba(255, 253, 248, 0.82);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 253, 248, 0.10);
  transition: color .2s ease, padding-left .2s ease;
}
.nl-footlist .nl-foot-link:last-child { border-bottom: 0; }
.nl-footlist .nl-foot-link:hover { color: var(--nl-harvest, #C9962F); padding-left: 6px; }

.nl-foot-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255, 253, 248, 0.14); }
.nl-foot-legal {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.nl-foot-legal p {
  font-family: var(--nl-mono, "DM Mono"), monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em;
  color: rgba(255, 253, 248, 0.5); margin: 0;
}
.nl-foot-credit a {
  color: rgba(255, 253, 248, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 253, 248, 0.3);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.nl-foot-credit a:hover { color: var(--nl-harvest, #C9962F); border-color: var(--nl-harvest, #C9962F); }

@media (max-width: 767px) {
  .nl-foot-mark { right: -22%; width: 300px; opacity: 0.05; }
  .nl-foot-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nl-foot-head-2 { margin-top: 1.5rem; }
}

/* ===================================================== plate corners
   The ink ledgers are the one dark block in the body of each page. Four
   hairline corners set inside the edge turn them from a coloured band into a
   plate - the way a printed card is trimmed. Quiet enough to register as
   craft rather than decoration. */

.nl-on-ink:not(.nl-footer) { position: relative; }
.nl-on-ink:not(.nl-footer)::before,
.nl-on-ink:not(.nl-footer)::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid rgba(255, 253, 248, 0.22);
  pointer-events: none;
}
.nl-on-ink:not(.nl-footer)::before {
  top: 22px; left: 22px;
  border-right: 0; border-bottom: 0;
}
.nl-on-ink:not(.nl-footer)::after {
  bottom: 22px; right: 22px;
  border-left: 0; border-top: 0;
}
@media (max-width: 767px) {
  .nl-on-ink:not(.nl-footer)::before { top: 12px; left: 12px; }
  .nl-on-ink:not(.nl-footer)::after  { bottom: 12px; right: 12px; }
}

/* ===================================================== ledger rows
   A little more weight on the key, a hairline that steps in on hover, so the
   tables read as a record rather than a list of divs. */

.nl-ledger-row { transition: background-color .2s ease; }
.nl-ledger-row:hover { background: rgba(255, 253, 248, 0.03); }
.nl-on-ink .nl-ledger-key { color: var(--nl-harvest, #C9962F) !important; }

/* ===================================================== the seam ornament
   The diamond that closes a section, given a pair of short rules so it reads
   as a printer's mark rather than a stray dot. */

.nl-seam::after { z-index: 1; }
.nl-seam { position: relative; }

/* ======================================================= the ticker runs
   You asked for the loop twice, so it now runs whatever the operating system's
   "reduce motion" setting says. That setting is normally worth honouring and
   the rest of the site still does - the hero drift, the scroll reveals and the
   panel transitions all stop when it is on. This one line keeps moving because
   you want it to.

   It is slowed to 72s, which is a drift rather than a scroll, and it pauses
   when the pointer is over it so anything can be read. */

@media (prefers-reduced-motion: reduce) {
  .nl-ticker {
    overflow: hidden !important;
    overflow-x: hidden !important;
    display: block !important;
  }
  .nl-ticker-track {
    animation: nl-ticker 72s linear infinite !important;
    width: max-content !important;
    flex-wrap: nowrap !important;
  }
  .nl-ticker-track > span[aria-hidden="true"] { display: block !important; }
  .nl-ticker:hover .nl-ticker-track,
  .nl-ticker:focus-within .nl-ticker-track { animation-play-state: paused !important; }
}

/* the same pause for everyone else */
.nl-ticker:hover .nl-ticker-track,
.nl-ticker:focus-within .nl-ticker-track { animation-play-state: paused; }
.nl-ticker-track { animation-duration: 72s; }

/* ======================================================= a little more craft
   Small, quiet marks that give the page texture without noise. */

/* The lead paragraph's drop cap gets a hairline shelf, the way a printed
   initial sits on the measure. */
.nl-lead > p:first-of-type::first-letter {
  padding-right: 0.08em;
}

/* Ruled marks get a diamond at the join, matching the seam ornament. */
body .nl-eyebrow p::before {
  position: relative;
}

/* Section seams: the diamond gains two short rules so it reads as a printer's
   mark rather than a stray dot. */
/* The two short box-shadow dashes that used to flank the diamond are gone:
   refine.css now draws one rule with a gap cut in it, and the stubs showed
   through that gap as loose marks. */

/* The figures line gets a hairline tick above each number, like a ledger rule. */
.nl-fig-n::before {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: var(--nl-vine, #7A1F2B);
  opacity: .45;
  margin-bottom: 14px;
}

/* Gallery tiles lift very slightly on hover: enough to feel handled. */
.nl-grid-img { transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s ease; }
.nl-grid-img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(36, 48, 31, .10);
}
@media (prefers-reduced-motion: reduce) {
  .nl-grid-img { transition: none; }
  .nl-grid-img:hover { transform: none; }
}


/* =========================================================================
   ROOM TYPES
   A card per room: the photograph, the name set in the display face, and the
   measurements as a mono rule beneath it. The specification is the point of
   the card, so it sits on the image baseline rather than buried in prose.
   ========================================================================= */

.nl-rooms .nl-room-fig {
  margin: 0;
  position: relative;
  background: var(--nl-cream, #FFFDF8);
  padding: 10px 10px 0;          /* the mat, same as every other figure here */
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6),
              0 14px 34px rgba(36, 48, 31, .08);
}
.nl-rooms .nl-room-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--nl-stone, #DED6C6);
}
.nl-rooms .nl-room-cap {
  display: block;
  padding: 14px 2px 16px;
  border-top: 1px solid rgba(36, 48, 31, .10);
  margin-top: 10px;
}
.nl-rooms .nl-room-name {
  display: block;
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--nl-ink, #24301F);
}
.nl-rooms .nl-room-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin-top: 9px;
  font-family: var(--nl-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
}
.nl-rooms .nl-room-spec > span + span { position: relative; padding-left: 14px; }
.nl-rooms .nl-room-spec > span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--nl-harvest, #C9962F);
}
.nl-rooms .nl-room-body {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 34ch;
}
.nl-rooms .nl-room-fig {
  transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s ease;
}
.nl-rooms .nl-room-fig:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6), 0 18px 40px rgba(36, 48, 31, .13);
}
.nl-room-note {
  padding-top: 6px;
  border-top: 1px solid var(--nl-stone, #DED6C6);
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .nl-rooms .nl-room-fig { transition: none; }
  .nl-rooms .nl-room-fig:hover { transform: none; }
}


/* =========================================================================
   AMENITIES
   Four marks, four short lists. A thirty-item run reads as a spec sheet;
   grouped under headings it reads as four answers.
   ========================================================================= */

.nl-amen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.5rem, 3vw, 2.75rem);
}
.nl-amen-head {
  font-family: var(--nl-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--nl-harvest, #C9962F);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
}
.nl-on-ink .nl-amen-head { border-bottom-color: rgba(201, 150, 47, .5); }
.nl-amen-list { list-style: none; margin: 0; padding: 0; }
.nl-amen-list li {
  font-family: var(--nl-body, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 5px 0 5px 15px;
  position: relative;
  color: var(--nl-ink-soft, #5A6650);
}
.nl-on-ink .nl-amen-list li { color: rgba(255, 253, 248, .78); }
.nl-amen-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 7px;
  height: 1px;
  background: var(--nl-vine, #7A1F2B);
  opacity: .5;
}
.nl-on-ink .nl-amen-list li::before {
  background: var(--nl-harvest, #C9962F);
  opacity: .75;
}


/* =========================================================================
   GALLERY BOARD
   Categories that say what they are, a chip row that filters to one, and a
   lightbox. Frames stay uncaptioned on the page; the caption lives in the
   lightbox and in the alt text.
   ========================================================================= */

.nl-gal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--nl-stone, #DED6C6);
}
.nl-gal-chip {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--nl-stone, #DED6C6);
  background: transparent;
  color: var(--nl-ink-soft, #5A6650);
  font-family: var(--nl-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nl-gal-chip:hover {
  border-color: var(--nl-ink-soft, #5A6650);
  color: var(--nl-ink, #24301F);
}
.nl-gal-chip.is-on {
  background: var(--nl-ink, #24301F);
  border-color: var(--nl-ink, #24301F);
  color: var(--nl-cream, #FFFDF8);
}
.nl-gal-n { font-size: 0.65rem; opacity: .6; letter-spacing: .06em; }
.nl-gal-chip.is-on .nl-gal-n { opacity: .72; }

.nl-gal-cat { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.nl-gal-head {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 6px clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.nl-gal-mark {
  grid-column: 1;
  font-family: var(--nl-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
  margin: 0;
  padding-top: .55em;
  position: relative;
  padding-left: 30px;
}
.nl-gal-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 20px;
  height: 1px;
  background: var(--nl-vine, #7A1F2B);
}
.nl-gal-title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--nl-ink, #24301F);
  margin: 0 0 10px;
}
.nl-gal-blurb {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 56ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--nl-ink-soft, #5A6650);
}
@media (max-width: 760px) {
  .nl-gal-head { grid-template-columns: 1fr; }
  .nl-gal-mark { grid-column: 1; padding-top: 0; }
  .nl-gal-title, .nl-gal-blurb { grid-column: 1; grid-row: auto; }
}

.nl-gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr));
  gap: 12px;
}
.nl-gal-cell {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--nl-stone, #DED6C6);
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  position: relative;
}
.nl-gal-cell img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.32,.72,0,1);
}
.nl-gal-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(36, 48, 31, .10);
  pointer-events: none;
}
.nl-gal-cell:hover img { transform: scale(1.045); }
.nl-gal-cell:focus-visible {
  outline: 2px solid var(--nl-harvest, #C9962F);
  outline-offset: 2px;
}

/* lightbox */
.nl-gal-locked { overflow: hidden; }
.nl-gal-box {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(20, 27, 17, .90);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.nl-gal-box[hidden] { display: none; }
.nl-gal-box figure { margin: 0; max-width: min(1400px, 100%); max-height: 100%; }
.nl-gal-box img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  background: var(--nl-ink, #24301F);
}
.nl-gal-box figcaption {
  margin: 14px auto 0;
  text-align: center;
  font-family: var(--nl-body, sans-serif);
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 253, 248, .72);
  max-width: 62ch;
}
.nl-gal-x, .nl-gal-prev, .nl-gal-next {
  position: absolute;
  appearance: none;
  border: 1px solid rgba(255, 253, 248, .28);
  background: rgba(20, 27, 17, .45);
  color: var(--nl-cream, #FFFDF8);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.nl-gal-x:hover, .nl-gal-prev:hover, .nl-gal-next:hover {
  background: rgba(255, 253, 248, .16);
  border-color: rgba(255, 253, 248, .55);
}
.nl-gal-x    { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.nl-gal-prev { left:  clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.nl-gal-next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .nl-gal-prev { left: 50%; top: auto; bottom: 1rem; transform: translateX(-120%); }
  .nl-gal-next { right: 50%; top: auto; bottom: 1rem; transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-gal-cell img { transition: none; }
  .nl-gal-cell:hover img { transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nl-gal-box { background: rgba(20, 27, 17, .97); }
}


/* =========================================================================
   BLOG
   An index of dated entries and the article page itself. Same ledger grammar
   as the rest: the date hangs in the left margin as a mono mark, the title
   carries the column.
   ========================================================================= */

.nl-post-list { display: grid; gap: 0; }
.nl-post-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1rem, 3vw, 2.75rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--nl-stone, #DED6C6);
  text-decoration: none;
  color: inherit;
  transition: background .3s ease;
}
.nl-post-row:last-child { border-bottom: 1px solid var(--nl-stone, #DED6C6); }
.nl-post-row:hover { background: rgba(36, 48, 31, .028); }
.nl-post-date {
  font-family: var(--nl-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
  margin: 0;
  padding-top: .45em;
  position: relative;
  padding-left: 28px;
}
.nl-post-date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 18px;
  height: 1px;
  background: var(--nl-vine, #7A1F2B);
}
.nl-post-main { min-width: 0; }
.nl-post-title {
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--nl-ink, #24301F);
  margin: 0 0 9px;
}
.nl-post-row:hover .nl-post-title { color: var(--nl-vine, #7A1F2B); }
.nl-post-sum {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--nl-ink-soft, #5A6650);
  max-width: 62ch;
}
.nl-post-tag {
  display: inline-block;
  margin-top: 11px;
  font-family: var(--nl-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nl-vine, #7A1F2B);
}
.nl-post-thumb {
  margin: 0;
  background: var(--nl-cream, #FFFDF8);
  padding: 8px 8px 0;
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6);
}
.nl-post-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--nl-stone, #DED6C6);
}
@media (max-width: 900px) {
  .nl-post-row { grid-template-columns: 1fr; gap: 12px; }
  .nl-post-thumb { order: -1; max-width: 100%; }
  .nl-post-date { padding-top: 0; }
}

/* the article body */
.nl-article { max-width: 68ch; }
.nl-article p {
  font-size: var(--nl-text-lg, 1.1875rem);
  line-height: 1.68;
  color: var(--nl-ink, #24301F);
  margin: 0 0 1.15em;
}
.nl-article h3 {
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 1.9em 0 .6em;
  color: var(--nl-ink, #24301F);
}
.nl-article ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.nl-article li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: var(--nl-text, 1.0625rem);
  line-height: 1.6;
  color: var(--nl-ink-soft, #5A6650);
}
.nl-article li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 9px;
  height: 1px;
  background: var(--nl-vine, #7A1F2B);
  opacity: .55;
}
.nl-article blockquote {
  margin: 1.8em 0;
  padding: 0 0 0 clamp(1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--nl-harvest, #C9962F);
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--nl-ink, #24301F);
}
.nl-article blockquote p { font: inherit; margin: 0; }


/* A photograph set into the run of an article: matted like every other figure
   on the site, and allowed to break the measure so it reads as a pause. */
.nl-article-fig {
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  background: var(--nl-cream, #FFFDF8);
  padding: 10px 10px 0 10px;
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6),
              0 14px 34px rgba(36, 48, 31, .08);
  max-width: 54rem;
}
.nl-article-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--nl-stone, #DED6C6);
  margin-bottom: 10px;
}


/* =========================================================================
   ROOM PAGE: the specification card
   Two columns of key/value on ink, each row ruled. It reads as a data sheet
   on purpose: this is the part somebody compares between two rooms.
   ========================================================================= */

.nl-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
}
.nl-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 253, 248, .16);
}
.nl-spec-k {
  font-family: var(--nl-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nl-harvest, #C9962F);
  white-space: nowrap;
}
.nl-spec-v {
  font-family: var(--nl-body, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 253, 248, .9);
  text-align: right;
}


/* =========================================================================
   ROOM PAGE: the rail of the other five rooms
   No room page is a dead end; the rail is how somebody comparing two types
   gets between them without going back up to the guest house.
   ========================================================================= */

.nl-sibs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.nl-sib {
  text-decoration: none;
  color: inherit;
  display: block;
}
.nl-sib-fig {
  margin: 0 0 11px;
  background: var(--nl-cream, #FFFDF8);
  padding: 7px 7px 0;
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6);
  overflow: hidden;
}
.nl-sib-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--nl-stone, #DED6C6);
  margin-bottom: 7px;
  transition: transform .6s cubic-bezier(.32,.72,0,1);
}
.nl-sib:hover .nl-sib-fig img { transform: scale(1.05); }
.nl-sib-name {
  display: block;
  font-family: var(--nl-display, Georgia, serif);
  font-size: 1.0625rem;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--nl-ink, #24301F);
}
.nl-sib:hover .nl-sib-name { color: var(--nl-vine, #7A1F2B); }
.nl-sib-spec {
  display: block;
  margin-top: 5px;
  font-family: var(--nl-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
}
@media (prefers-reduced-motion: reduce) {
  .nl-sib-fig img { transition: none; }
  .nl-sib:hover .nl-sib-fig img { transform: none; }
}


/* =========================================================================
   HEADER SUBMENU
   The guest house now has six child pages. They hang off the bar as a panel
   rather than a list, so the bar itself keeps its single baseline.
   ========================================================================= */

.nl-hdr-has-sub { position: relative; }
.nl-hdr-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 270px;
  padding: 10px;
  margin-top: 14px;
  background: var(--nl-cream, #FFFDF8);
  border: 1px solid var(--nl-stone, #DED6C6);
  box-shadow: 0 18px 44px rgba(36, 48, 31, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.nl-hdr-has-sub:hover .nl-hdr-sub,
.nl-hdr-has-sub.is-open .nl-hdr-sub,
.nl-hdr-has-sub:focus-within .nl-hdr-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nl-hdr-sub a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  text-decoration: none;
  color: var(--nl-ink, #24301F);
  font-family: var(--nl-body, sans-serif);
  font-size: 0.875rem;
  line-height: 1.3;
  border-radius: 2px;
}
.nl-hdr-sub a:hover,
.nl-hdr-sub a:focus-visible { background: rgba(36, 48, 31, .06); }
.nl-hdr-sub a .nl-sub-m {
  font-family: var(--nl-mono, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--nl-ink-soft, #5A6650);
  white-space: nowrap;
}
.nl-hdr-sub-head {
  margin: 2px 11px 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--nl-stone, #DED6C6);
  font-family: var(--nl-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
}
/* the bar goes transparent over a hero, so the panel must not */
.nl-hdr[data-state="top"] .nl-hdr-sub { background: var(--nl-cream, #FFFDF8); }

/* in the mobile panel the children are an indented list, always visible */
.nl-menu-sub {
  display: block;
  padding: 2px 0 10px 2px;
  margin: -4px 0 8px;
}
.nl-menu-sub a {
  display: block;
  padding: 7px 0 7px 18px;
  position: relative;
  text-decoration: none;
  color: rgba(255, 253, 248, .74);
  font-family: var(--nl-body, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.nl-menu-sub a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 10px;
  height: 1px;
  background: var(--nl-harvest, #C9962F);
  opacity: .8;
}
.nl-menu-sub a:hover { color: var(--nl-cream, #FFFDF8); }
@media (min-width: 1101px) {
  .nl-menu-sub { display: none; }
}
@media (max-width: 1100px) {
  .nl-hdr-sub { display: none; }
}


/* =========================================================================
   ROOM MOSAIC
   Eight frames of one room. The first runs two columns by two rows and the
   fourth runs two columns wide, so the eight fill three rows exactly with no
   ragged last line -- and the eye is given somewhere to start.
   ========================================================================= */

.nl-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(104px, 13.5vw, 196px);
  grid-auto-flow: dense;
  gap: 12px;
}
.nl-mosaic .nl-gal-cell { width: 100%; height: 100%; }
.nl-mosaic .nl-gal-cell img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;          /* the grid cell sets the shape here */
  object-fit: cover;
}
.nl-mosaic .nl-m-lead { grid-column: span 2; grid-row: span 2; }
.nl-mosaic .nl-m-wide { grid-column: span 2; }

/* the mat, as everywhere else on the site */
.nl-roomgal .nl-gal-cell::after {
  box-shadow: inset 0 0 0 1px rgba(36, 48, 31, .12);
}

@media (max-width: 900px) {
  .nl-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(118px, 29vw, 190px);
    gap: 10px;
  }
  .nl-mosaic .nl-m-wide { grid-column: span 2; }
}
@media (max-width: 420px) {
  .nl-mosaic .nl-m-lead { grid-column: span 2; grid-row: span 2; }
}


/* =========================================================================
   HEADER, OVER A HERO: give the white chrome something to sit on.
   The ghost state turns the logo, the links, the CTA border and the burger
   cream. Over a dark photograph that reads; over the bright sky at the top of
   several heroes the whole bar disappeared. A scrim that fades out over the
   header's own height fixes it without putting a bar back across the picture.
   ========================================================================= */

.nl-hdr::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--nl-hdr-h) + 64px);
  background: linear-gradient(to bottom,
              rgba(18, 24, 15, .62) 0%,
              rgba(18, 24, 15, .40) 38%,
              rgba(18, 24, 15, .16) 70%,
              rgba(18, 24, 15, 0) 100%);
  opacity: 0;
  transition: opacity .24s ease;
  pointer-events: none;
  z-index: -1;
}
.nl-hdr[data-over="1"][data-state="top"]::before { opacity: 1; }

/* and a little weight on the type itself, for the brightest frames */
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-link,
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-tel,
.nl-hdr[data-over="1"][data-state="top"] .nl-lang-link,
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-cta {
  text-shadow: 0 1px 10px rgba(18, 24, 15, .55);
}
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-logo-lt {
  filter: drop-shadow(0 2px 10px rgba(18, 24, 15, .5));
}
.nl-hdr[data-over="1"][data-state="top"] .nl-hdr-cta {
  border-color: rgba(255, 253, 248, .72);
  background: rgba(18, 24, 15, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nl-hdr[data-over="1"][data-state="top"] .nl-burger-b {
  box-shadow: 0 1px 6px rgba(18, 24, 15, .55);
}

/* The scrim is strongest on a phone, where the hero is portrait and the bar
   sits over whatever happens to be at the top of the frame. */
@media (max-width: 1100px) {
  .nl-hdr::before {
    height: calc(var(--nl-hdr-h) + 42px);
    background: linear-gradient(to bottom,
                rgba(18, 24, 15, .72) 0%,
                rgba(18, 24, 15, .46) 45%,
                rgba(18, 24, 15, 0) 100%);
  }
}


/* =========================================================================
   SUBMENU: do not fall away when the pointer crosses the gap.
   The panel hung 14px below the bar on a margin, so the pointer left
   .nl-hdr-has-sub on its way down and the panel closed before it could be
   reached. The offset is now a transparent bridge that belongs to the panel,
   so travelling across it keeps the hover.
   ========================================================================= */

/* The nav line box is only ~25px tall inside an 84px bar, so a panel hung off
   it landed inside the bar rather than under it, and the pointer left the item
   almost immediately. Stretching the nav to the full header height gives the
   hover target the whole bar and drops the panel cleanly below it. */
.nl-hdr-nav { height: 100%; }
.nl-hdr-has-sub {
  display: inline-flex;
  align-items: center;
  height: 100%;
  /* grow the hover target down past the panel's own offset without moving
     anything: padding enlarges it, the negative margin takes the space back */
  padding: 20px 10px 26px;
  margin: -20px -10px -26px;
}
.nl-hdr-sub { margin-top: 0; top: 100%; }
.nl-hdr-sub::before {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: -22px;
  height: 26px;
}
/* a small pointer up to the parent link, so the panel reads as attached */
.nl-hdr-sub::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  background: var(--nl-cream, #FFFDF8);
  border-left: 1px solid var(--nl-stone, #DED6C6);
  border-top: 1px solid var(--nl-stone, #DED6C6);
  transform: rotate(45deg);
}

/* the parent keeps its underline for as long as the panel is open */
.nl-hdr-has-sub:hover .nl-hdr-link::after,
.nl-hdr-has-sub.is-open .nl-hdr-link::after,
.nl-hdr-has-sub:focus-within .nl-hdr-link::after {
  transform: scaleX(1);
}

/* a caret so it is obvious the item opens */
.nl-hdr-has-sub > .nl-hdr-link::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  vertical-align: middle;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
  transition: opacity .2s ease, transform .2s ease;
}
.nl-hdr-has-sub:hover > .nl-hdr-link::before,
.nl-hdr-has-sub.is-open > .nl-hdr-link::before {
  opacity: 1;
  transform: translateY(0) rotate(45deg);
}


/* =========================================================================
   NAV: eight items now that the diary and the gallery are in the bar.
   Measured at 1100 (the burger breakpoint) the row needs the tighter gap and
   the smaller size to clear the logo and the actions.
   ========================================================================= */

@media (min-width: 1101px) and (max-width: 1420px) {
  .nl-hdr-nav { gap: 17px; }
  .nl-hdr-link { font-size: 11.5px; letter-spacing: .1em; }
}
@media (min-width: 1421px) {
  .nl-hdr-nav { gap: 24px; }
}


/* =========================================================================
   CROSSFADE
   Several photographs in one frame. The stack is absolutely positioned inside
   a box that keeps its own aspect ratio, so nothing jumps while the images
   load and the mat stays exactly where figure() would have put it.
   ========================================================================= */

.nl-fade-wrap {
  position: relative;
  margin: 0;
  background: var(--nl-cream, #FFFDF8);
  padding: 10px;
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6),
              0 18px 44px rgba(36, 48, 31, .10);
}
.nl-fade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--nl-stone, #DED6C6);
}
.nl-fade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2000ms cubic-bezier(.37, 0, .24, 1);
  will-change: opacity;
}
.nl-fade-img.is-on { opacity: 1; }

/* a slow drift behind the fade, so the frame is never completely static */
@media (prefers-reduced-motion: no-preference) {
  .nl-fade-img.is-on { animation: nl-drift 18s ease-out both; }
  @keyframes nl-drift {
    from { transform: scale(1.055); }
    to   { transform: scale(1); }
  }
}

/* the scrim every other photograph on the site carries */
.nl-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(36, 48, 31, .30) 0%,
              rgba(36, 48, 31, .08) 36%,
              rgba(36, 48, 31, 0) 66%);
}

/* how many, and which */
.nl-fade-dots {
  position: absolute;
  right: 14px;
  bottom: 13px;
  display: flex;
  gap: 7px;
  z-index: 3;
}
.nl-fade-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 253, 248, .42);
  cursor: pointer;
  transition: background .35s ease, width .35s ease;
}
.nl-fade-dot:hover { background: rgba(255, 253, 248, .7); }
.nl-fade-dot.is-on { background: var(--nl-harvest, #C9962F); width: 30px; }
.nl-fade-dot:focus-visible {
  outline: 2px solid var(--nl-harvest, #C9962F);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .nl-fade-dot { width: 15px; }
  .nl-fade-dot.is-on { width: 22px; }
}

.nl-fade-cap {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 3;
}


/* =========================================================================
   LOADING AND ENTRANCE
   Two things: a one-off curtain while the fonts and the hero resolve, so the
   first paint is not a flash of unstyled type; and a staged entrance for the
   hero's own lines.
   ========================================================================= */

.nl-boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--nl-paper, #F6F1E6);
  display: grid;
  place-items: center;
  transition: opacity .55s ease, visibility .55s;
  /* It lifts on a fixed delay from CSS alone. The script lifts it sooner when
     the fonts and the hero are ready, but nothing here waits on the script:
     a curtain that can stick is worse than no curtain. */
  animation: nl-boot-out .5s ease 1.5s forwards;
}
@keyframes nl-boot-out {
  to { opacity: 0; visibility: hidden; }
}
.nl-boot[hidden], .nl-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nl-boot-mark {
  width: 58px;
  height: auto;
  opacity: .9;
  animation: nl-boot-pulse 1.5s ease-in-out infinite;
}
.nl-boot-rule {
  position: absolute;
  left: 50%;
  bottom: calc(50% - 56px);
  width: 128px;
  height: 1px;
  margin-left: -64px;
  background: var(--nl-stone, #DED6C6);
  overflow: hidden;
}
.nl-boot-rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nl-vine, #7A1F2B);
  transform: translateX(-100%);
  animation: nl-boot-sweep 1.15s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes nl-boot-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes nl-boot-sweep {
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .nl-boot-mark { animation: none; opacity: .9; }
  .nl-boot-rule::after { animation: none; transform: none; opacity: .4; }
}

/* the hero's lines arrive in order once the curtain is gone */
.nl-booted .nl-hero .nl-reveal,
.nl-booted .nl-page-hero .nl-reveal { animation: none; }

.nl-stage > * {
  opacity: 0;
  transform: translateY(14px);
  animation: nl-stage-in .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.nl-stage > *:nth-child(1) { animation-delay: .06s; }
.nl-stage > *:nth-child(2) { animation-delay: .16s; }
.nl-stage > *:nth-child(3) { animation-delay: .26s; }
.nl-stage > *:nth-child(4) { animation-delay: .36s; }
.nl-stage > *:nth-child(5) { animation-delay: .46s; }
@keyframes nl-stage-in {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-stage > * { animation-duration: .01ms; animation-delay: 0s; }
}


/* =========================================================================
   DESIGN MARKS
   Small repeated devices that tie the pages together: a corner rule on the
   section label, a leaf diamond between parts of the ticker, and a hairline
   that draws itself as a section arrives.
   ========================================================================= */

.nl-rule-draw {
  position: relative;
}
.nl-rule-draw::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--nl-gutter, 32px);
  right: var(--nl-gutter, 32px);
  height: 1px;
  background: var(--nl-stone, #DED6C6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.nl-rule-draw.is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nl-rule-draw::before { transition: none; transform: scaleX(1); }
}

/* a quiet corner mark on the big display headings */
.nl-corner { position: relative; }
.nl-corner::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -10px;
  width: 16px;
  height: 16px;
  border-left: 1px solid var(--nl-harvest, #C9962F);
  border-top: 1px solid var(--nl-harvest, #C9962F);
  opacity: .75;
}
@media (max-width: 760px) {
  .nl-corner::before { left: -8px; top: -7px; width: 11px; height: 11px; }
}


/* =========================================================================
   HERO CROSSFADE
   The hero's own stack has no mat and no aspect ratio of its own: it fills the
   hero media row exactly as the single image used to.
   ========================================================================= */

/* The stack is absolutely positioned against .nl-hero-media. Divi puts a
   column, a module and a code wrapper in between, and any of those being
   position:relative makes IT the containing block -- which collapsed the hero
   to zero height and left the section's own dark ground showing. Forcing the
   intermediates to static, and giving them the full height, pins the stack to
   the hero row itself. */
.nl-hero-media { position: relative; }
.nl-hero-media .et_pb_column,
.nl-hero-media .et_pb_module,
.nl-hero-media .et_pb_code,
.nl-hero-media .et_pb_code_inner {
  position: static;
  height: 100%;
}
.nl-hero-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: var(--nl-ink, #24301F);
}
/* The section scrim in refine.css was tuned for ONE photograph: the building
   at golden hour, which is dark down its left side where the type sits. The
   slider puts four very different frames in that slot, two of them bright edge
   to edge (the laid table, the lobby), and on those the headline disappeared.

   So the slider carries its own overlay, directly over the images and only
   inside `.nl-hero` -- the inner-page heroes still have a single photograph
   each and their tuned scrim, and are untouched. It is weighted to the left
   and the bottom, where the words are, and fades to nothing on the right so
   the picture still opens up. */
.nl-hero .nl-hero-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(100deg,
      rgba(14, 21, 12, .80) 0%,
      rgba(14, 21, 12, .62) 30%,
      rgba(14, 21, 12, .30) 58%,
      rgba(14, 21, 12, .04) 86%,
      rgba(14, 21, 12, 0) 100%),
    linear-gradient(to top,
      rgba(14, 21, 12, .52) 0%,
      rgba(14, 21, 12, .10) 40%,
      rgba(14, 21, 12, .22) 100%);
}
/* On a phone the plate runs the full width, so the weighting goes vertical. */
@media (max-width: 767px) {
  .nl-hero .nl-hero-fade::after {
    background: linear-gradient(to top,
      rgba(14, 21, 12, .80) 0%,
      rgba(14, 21, 12, .62) 34%,
      rgba(14, 21, 12, .34) 62%,
      rgba(14, 21, 12, .46) 100%);
  }
}

/* and the type carries its own weight, so it never depends on the overlay
   alone to clear a bright frame */
.nl-hero .nl-hslide-t {
  text-shadow: 0 2px 8px rgba(14, 21, 12, .72), 0 4px 30px rgba(14, 21, 12, .55);
}
.nl-hero .nl-hslide-d {
  text-shadow: 0 1px 5px rgba(14, 21, 12, .85), 0 2px 18px rgba(14, 21, 12, .65);
}
.nl-hero .nl-eyebrow p {
  text-shadow: 0 1px 4px rgba(14, 21, 12, .9), 0 2px 14px rgba(14, 21, 12, .75);
}
.nl-hero-fade .nl-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.nl-hero-media { position: relative; }


/* =========================================================================
   ROOM RAIL on the homepage: six across, dropping to three then two.
   ========================================================================= */

.nl-sibs-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .nl-sibs-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .nl-sibs-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================================
   DIARY CARDS
   ========================================================================= */

.nl-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
.nl-note {
  text-decoration: none;
  color: inherit;
  display: block;
}
.nl-note-fig {
  margin: 0 0 14px;
  background: var(--nl-cream, #FFFDF8);
  padding: 8px 8px 0;
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6);
  overflow: hidden;
}
.nl-note-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--nl-stone, #DED6C6);
  margin-bottom: 8px;
  transition: transform .6s cubic-bezier(.32, .72, 0, 1);
}
.nl-note:hover .nl-note-fig img { transform: scale(1.045); }
.nl-note-date {
  display: block;
  font-family: var(--nl-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
  margin-bottom: 7px;
  position: relative;
  padding-left: 26px;
}
.nl-note-date::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 17px;
  height: 1px;
  background: var(--nl-vine, #7A1F2B);
}
.nl-note-title {
  display: block;
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--nl-ink, #24301F);
  margin-bottom: 8px;
}
.nl-note:hover .nl-note-title { color: var(--nl-vine, #7A1F2B); }
.nl-note-sum {
  display: block;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--nl-ink-soft, #5A6650);
}
@media (prefers-reduced-motion: reduce) {
  .nl-note-fig img { transition: none; }
  .nl-note:hover .nl-note-fig img { transform: none; }
}


/* =========================================================================
   GALLERY STRIP
   A run of frames on ink, tight together, that reads as a contact sheet.
   ========================================================================= */

.nl-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.nl-strip-cell {
  display: block;
  overflow: hidden;
  background: rgba(255, 253, 248, .08);
  position: relative;
}
.nl-strip-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  opacity: .82;
  transition: opacity .4s ease, transform .6s cubic-bezier(.32, .72, 0, 1);
}
.nl-strip-cell:hover img { opacity: 1; transform: scale(1.07); }
.nl-strip-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .13);
  pointer-events: none;
}
@media (max-width: 1100px) {
  .nl-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .nl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-strip-cell img { transition: opacity .3s ease; }
  .nl-strip-cell:hover img { transform: none; }
}


/* =========================================================================
   FOOTER, second cut
   Identity beside the navigation rather than above it, four ruled columns, and
   the hours set as a plate because they are what people scroll down to find.
   ========================================================================= */

.nl-footer { position: relative; overflow: hidden; }

.nl-foot-identcol { position: relative; z-index: 2; }
.nl-foot-mark {
  position: absolute;
  right: -11%;
  bottom: -26%;
  width: clamp(190px, 26vw, 330px);
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}
.nl-foot-ident { position: relative; z-index: 2; max-width: 34ch; }
.nl-foot-orn {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--nl-harvest, #C9962F);
  margin-bottom: 20px;
  position: relative;
}
.nl-foot-orn::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--nl-harvest, #C9962F);
  transform: rotate(45deg);
}
.nl-foot-motto-l {
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--nl-cream, #FFFDF8);
  margin: 0 0 14px;
}
.nl-foot-motto-s {
  font-size: 0.9rem;
  line-height: 1.62;
  color: rgba(255, 253, 248, .64);
  margin: 0 0 20px;
}

.nl-foot-head {
  font-family: var(--nl-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nl-harvest, #C9962F);
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(201, 150, 47, .34);
}
.nl-foot-list { list-style: none; margin: 0; padding: 0; }
.nl-foot-list li { margin: 0 0 9px; }
.nl-foot-list a,
.nl-foot-list .nl-foot-addr {
  font-family: var(--nl-body, sans-serif);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 253, 248, .74);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
  display: inline-block;
}
.nl-foot-list a:hover {
  color: var(--nl-cream, #FFFDF8);
  padding-left: 5px;
}
.nl-foot-list .nl-foot-addr { color: rgba(255, 253, 248, .58); }
.nl-foot-social { display: flex; gap: 20px; margin-top: 4px; }
.nl-foot-social li { margin: 0; }
.nl-foot-social a {
  font-family: var(--nl-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .6);
}

/* the hours, given their own ground */
.nl-foot-plate {
  background: rgba(255, 253, 248, .055);
  border: 1px solid rgba(255, 253, 248, .14);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.nl-foot-hours-l {
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--nl-cream, #FFFDF8);
  margin: 0 0 6px;
}
.nl-foot-hours-s {
  font-family: var(--nl-mono, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .55);
  margin: 0;
}
.nl-foot-tel {
  font-family: var(--nl-mono, monospace) !important;
  font-size: 0.95rem !important;
  letter-spacing: .02em;
  color: var(--nl-cream, #FFFDF8) !important;
}
.nl-foot-maps {
  color: var(--nl-harvest, #C9962F) !important;
  font-family: var(--nl-mono, monospace) !important;
  font-size: 0.68rem !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nl-foot-bottom {
  border-top: 1px solid rgba(255, 253, 248, .14);
  position: relative;
  z-index: 2;
}
.nl-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  align-items: baseline;
}
.nl-foot-legal p {
  margin: 0;
  font-family: var(--nl-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(255, 253, 248, .5);
}
.nl-foot-credit a {
  color: rgba(255, 253, 248, .72);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 150, 47, .5);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.nl-foot-credit a:hover {
  color: var(--nl-harvest, #C9962F);
  border-color: var(--nl-harvest, #C9962F);
}

@media (max-width: 980px) {
  .nl-foot-ident { max-width: none; }
  .nl-foot-mark { right: -18%; bottom: auto; top: -8%; width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-foot-list a { transition: color .2s ease; }
  .nl-foot-list a:hover { padding-left: 0; }
}


/* Divi styles every ul in content and wins on specificity, so the footer lists
   came back with disc markers. Stated here with the footer in the selector and
   flagged, because there is no higher-specificity selector available that Divi
   does not also match. */
.nl-footer .nl-foot-list,
.nl-footer .nl-foot-list li,
.nl-amen .nl-amen-list,
.nl-amen .nl-amen-list li,
.nl-article ul,
.nl-article ul li {
  list-style: none !important;
}
.nl-footer .nl-foot-list li::marker,
.nl-amen .nl-amen-list li::marker,
.nl-article ul li::marker { content: none; }


/* =========================================================================
   NO-WRAP REPAIRS
   A time, a telephone number and a short call to action are each one thing;
   breaking them over two lines reads as two.
   ========================================================================= */

.nl-foot-hours-l,
.nl-foot-tel,
.nl-foot-maps,
.nl-foot-hours-s { white-space: nowrap; }
.nl-foot-hours-l { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); }
.nl-foot-tel     { font-size: 0.9rem !important; }
.nl-foot-maps    { font-size: 0.64rem !important; letter-spacing: .1em; }

/* the room rail: a name over two lines against a spec over two more made six
   cards of four different heights */
.nl-sibs-6 .nl-sib-name {
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.2;
  min-height: 2.4em;
}
.nl-sibs-6 .nl-sib-spec {
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
}
@media (max-width: 1100px) {
  .nl-sibs-6 .nl-sib-name { min-height: 0; }
}


/* =========================================================================
   MOBILE PANEL, second cut
   The first link sat under the fixed header and collided with the logo. The
   panel now clears the bar, and the room list folds behind a caret.
   ========================================================================= */

#nl-menu { padding-top: calc(var(--nl-hdr-h) + 18px) !important; }

.nl-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nl-menu-row .nl-menu-link { flex: 1 1 auto; }

.nl-menu-toggle {
  appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 253, 248, .22);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.nl-menu-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -6px 0 0 -4px;
  border-right: 1.5px solid var(--nl-harvest, #C9962F);
  border-bottom: 1.5px solid var(--nl-harvest, #C9962F);
  transform: rotate(45deg);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.nl-menu-toggle.is-open { background: rgba(201, 150, 47, .14); }
.nl-menu-toggle.is-open::before {
  transform: rotate(225deg);
  margin-top: -2px;
}
.nl-menu-toggle:focus-visible {
  outline: 2px solid var(--nl-harvest, #C9962F);
  outline-offset: 2px;
}

.nl-menu-sub[hidden] { display: none; }
.nl-menu-sub a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0 9px 18px;
}
.nl-menu-sub-m {
  font-family: var(--nl-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(255, 253, 248, .42);
  white-space: nowrap;
}


/* =========================================================================
   BUJTINA RAIL, second cut
   Six equal cards read as a thumbnail strip. Giving the first one the width
   of two, and setting the name and the measurements as a plate over the
   photograph, makes it a section rather than a row of stamps.
   ========================================================================= */

/* Three columns, not four: with the feature card spanning two by two, six
   rooms come to nine cells, which fills three rows of three exactly. On four
   columns the sixth card sat alone in a row of its own. */
.nl-rooms-feature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.nl-rooms-feature .nl-rcard {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: var(--nl-ink, #24301F);
}
.nl-rooms-feature .nl-rcard:first-child { grid-column: span 2; grid-row: span 2; }
.nl-rcard img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.32, .72, 0, 1), opacity .4s ease;
}
.nl-rooms-feature .nl-rcard:first-child img { aspect-ratio: 1 / 1; }
.nl-rcard:hover img { transform: scale(1.055); }
.nl-rcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(18, 24, 15, .86) 0%,
              rgba(18, 24, 15, .40) 34%,
              rgba(18, 24, 15, .02) 66%);
  pointer-events: none;
}
.nl-rcard-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(.75rem, 1.4vw, 1.15rem);
}
.nl-rcard-name {
  display: block;
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(.95rem, 1.15vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--nl-cream, #FFFDF8);
  text-shadow: 0 1px 10px rgba(18, 24, 15, .6);
}
.nl-rooms-feature .nl-rcard:first-child .nl-rcard-name {
  font-size: clamp(1.25rem, 2.1vw, 2rem);
}
.nl-rcard-spec {
  display: block;
  margin-top: 7px;
  font-family: var(--nl-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nl-harvest, #C9962F);
  white-space: nowrap;
}
.nl-rcard-go {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 253, 248, .36);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.nl-rcard:hover .nl-rcard-go {
  opacity: 1;
  transform: none;
  background: rgba(255, 253, 248, .16);
}
.nl-rcard-go::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--nl-cream, #FFFDF8);
  border-right: 1.5px solid var(--nl-cream, #FFFDF8);
  transform: rotate(45deg);
  margin-left: -2px;
}
@media (max-width: 900px) {
  .nl-rooms-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-rooms-feature .nl-rcard:first-child { grid-column: span 2; grid-row: auto; }
  .nl-rooms-feature .nl-rcard:first-child img { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-rcard img { transition: none; }
  .nl-rcard:hover img { transform: none; }
  .nl-rcard-go { transition: opacity .2s ease; transform: none; }
}


/* =========================================================================
   GALLERY STRIP, second cut
   A flat run of eight squares said nothing. This stacks them at two heights
   with the count set large, so the block reads as an invitation rather than
   a row of thumbnails.
   ========================================================================= */

.nl-strip {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.nl-strip-cell img { aspect-ratio: 3 / 4; }
.nl-strip-cell:nth-child(even) img { aspect-ratio: 1 / 1; }
.nl-strip-cell:nth-child(3n) img { aspect-ratio: 4 / 5; }

.nl-gal-count {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 6px;
}
.nl-gal-count-n {
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--nl-harvest, #C9962F);
}
.nl-gal-count-l {
  font-family: var(--nl-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .6);
  max-width: 16ch;
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .nl-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .nl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
}


/* =========================================================================
   FLOATING ACTIONS: WhatsApp and back to top
   Bottom right, above everything, out of the way of the lightbox.
   ========================================================================= */

.nl-float {
  position: fixed;
  right: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  z-index: 8000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
}
/* The burger panel carries .is-open on itself, not on a wrapper, so the float
   is hidden from the state of the panel rather than from a body class that
   never existed. */
.nl-gal-locked .nl-float { display: none; }
body:has(.nl-menu.is-open) .nl-float {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.nl-float a, .nl-float button {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              box-shadow .3s ease, opacity .3s ease, background .3s ease;
}

.nl-wa {
  width: 54px;
  height: 54px;
  background: #25D366;
  box-shadow: 0 6px 20px rgba(18, 24, 15, .28);
  position: relative;
}
.nl-wa:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(18, 24, 15, .36); }
.nl-wa svg { width: 28px; height: 28px; fill: #fff; display: block; }
/* one quiet pulse ring, so it is noticed once and then forgotten */
.nl-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #25D366;
  animation: nl-wa-ring 2.8s cubic-bezier(.22, 1, .36, 1) infinite;
  pointer-events: none;
}
@keyframes nl-wa-ring {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

.nl-top {
  width: 44px;
  height: 44px;
  background: var(--nl-ink, #24301F);
  border: 1px solid rgba(255, 253, 248, .2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.nl-top.is-on { opacity: 1; visibility: visible; transform: none; }
.nl-top:hover { background: var(--nl-vine, #7A1F2B); transform: translateY(-3px); }
.nl-top::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1.6px solid var(--nl-cream, #FFFDF8);
  border-left: 1.6px solid var(--nl-cream, #FFFDF8);
  transform: rotate(45deg);
  margin-top: 3px;
}
.nl-float a:focus-visible, .nl-float button:focus-visible {
  outline: 2px solid var(--nl-harvest, #C9962F);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .nl-wa  { width: 48px; height: 48px; }
  .nl-wa svg { width: 25px; height: 25px; }
  .nl-top { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-wa::after { animation: none; opacity: 0; }
  .nl-float a, .nl-float button { transition: opacity .2s ease; }
  .nl-wa:hover, .nl-top:hover { transform: none; }
}


/* =========================================================================
   THE MENU
   A dish on the left, a price on the right, and a rule between them so the
   eye does not lose the line. It is the oldest solution to this and still the
   only one that works at a glance.
   ========================================================================= */

.nl-menu-list { display: grid; gap: 0; }
.nl-mi {
  padding: 15px 0;
  border-bottom: 1px solid var(--nl-stone, #DED6C6);
}
.nl-mi:first-child { padding-top: 0; }
.nl-mi:last-child { border-bottom: 0; }

.nl-mi-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nl-mi-name {
  font-family: var(--nl-display, Georgia, serif);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--nl-ink, #24301F);
  flex: 0 1 auto;
}
.nl-mi-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 18px;
  align-self: center;
  background-image: radial-gradient(circle, var(--nl-stone, #DED6C6) 1px, transparent 1px);
  background-size: 5px 1px;
  background-repeat: repeat-x;
  background-position: bottom;
  opacity: .9;
}
.nl-mi-price {
  flex: 0 0 auto;
  font-family: var(--nl-mono, monospace);
  font-size: 0.95rem;
  letter-spacing: .02em;
  color: var(--nl-ink, #24301F);
  white-space: nowrap;
}
.nl-mi-price i {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: .12em;
  color: var(--nl-ink-soft, #5A6650);
  margin-left: 5px;
}
.nl-mi-ask {
  font-size: 0.66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--nl-vine, #7A1F2B);
}
.nl-mi-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 7px;
}
.nl-mi-portion {
  font-family: var(--nl-mono, monospace);
  font-size: 0.64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--nl-harvest, #C9962F);
  white-space: nowrap;
}
.nl-mi-note {
  font-family: var(--nl-body, sans-serif);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nl-ink-soft, #5A6650);
  max-width: 54ch;
}
.nl-menu-note {
  padding-top: 4px;
  border-top: 1px solid var(--nl-stone, #DED6C6);
  max-width: 78ch;
  line-height: 1.7;
}

/* the courses that are named but not listed dish by dish */
.nl-alsos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.nl-also-h {
  font-family: var(--nl-display, Georgia, serif);
  font-size: 1.0625rem;
  line-height: 1.15;
  color: var(--nl-cream, #FFFDF8);
  margin: 0 0 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(201, 150, 47, .4);
}
.nl-also-b {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 253, 248, .72);
}


/* =========================================================================
   FLOATING ACTIONS, in the house colours
   The stock WhatsApp green sat on this palette like a sticker. Both buttons
   are ink with a harvest rule now, and WhatsApp keeps its mark so it is still
   recognised at a glance.
   ========================================================================= */

/* `.nl-float a` is 0-1-1 and beats a bare `.nl-wa`, so the rule that gives
   these their gold hairline has to carry the parent too. */
.nl-float .nl-wa {
  background: var(--nl-ink, #24301F);
  border: 1px solid rgba(201, 150, 47, .55);
  box-shadow: 0 6px 20px rgba(18, 24, 15, .3);
}
.nl-float .nl-top {
  background: var(--nl-ink, #24301F);
  border: 1px solid rgba(201, 150, 47, .35);
}
.nl-float .nl-wa:hover { background: var(--nl-vine, #7A1F2B); }
.nl-wa:hover { background: var(--nl-vine, #7A1F2B) !important; }
.nl-wa svg { fill: var(--nl-harvest, #C9962F); }
.nl-wa:hover svg { fill: var(--nl-cream, #FFFDF8); }
.nl-wa::after { border-color: rgba(201, 150, 47, .5); }
.nl-top {
  background: var(--nl-ink, #24301F);
  border: 1px solid rgba(201, 150, 47, .35);
}
.nl-top::before {
  border-top-color: var(--nl-harvest, #C9962F);
  border-left-color: var(--nl-harvest, #C9962F);
}
.nl-top:hover::before {
  border-top-color: var(--nl-cream, #FFFDF8);
  border-left-color: var(--nl-cream, #FFFDF8);
}


/* =========================================================================
   TRIPADVISOR, in the footer
   The rating is the one piece of outside evidence on the whole site, so it is
   set as a plate rather than a line of small print.
   ========================================================================= */

.nl-ta {
  display: block;
  text-decoration: none;
  background: rgba(255, 253, 248, .055);
  border: 1px solid rgba(255, 253, 248, .14);
  padding: 14px 16px;
  margin-bottom: 18px;
  transition: background .25s ease, border-color .25s ease;
}
.nl-ta:hover {
  background: rgba(201, 150, 47, .12);
  border-color: rgba(201, 150, 47, .45);
}
.nl-ta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.nl-ta-score {
  font-family: var(--nl-display, Georgia, serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--nl-cream, #FFFDF8);
}
.nl-ta-stars { display: inline-flex; gap: 3px; }
.nl-ta-stars span {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1.5px solid var(--nl-harvest, #C9962F);
  display: block;
}
.nl-ta-stars span.is-full { background: var(--nl-harvest, #C9962F); }
.nl-ta-stars span.is-half {
  background: linear-gradient(to right,
              var(--nl-harvest, #C9962F) 0 50%, transparent 50% 100%);
}
.nl-ta-sub {
  font-family: var(--nl-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .6);
  margin: 0;
  line-height: 1.6;
}
.nl-ta-sub b { color: var(--nl-harvest, #C9962F); font-weight: 400; }


/* =========================================================================
   A BORDER ON EVERY PHOTOGRAPH
   The matted figures already had one. The frames written by hand for the
   gallery, the mosaics, the strips, the room cards and the article body did
   not, so a photograph meant two different things depending on which section
   it was in. One hairline, everywhere.
   ========================================================================= */

.nl-gal-cell::after,
.nl-strip-cell::after,
.nl-rcard::before,
.nl-sib-fig,
.nl-note-fig,
.nl-post-thumb,
.nl-article-fig,
.nl-room-fig,
.nl-fade-wrap { --nl-frame: 1px solid rgba(36, 48, 31, .16); }

.nl-sib-fig,
.nl-note-fig,
.nl-post-thumb,
.nl-article-fig,
.nl-room-fig,
.nl-fade-wrap { border: var(--nl-frame); }

/* on ink, the hairline has to be light or it disappears */
.nl-on-ink .nl-sib-fig,
.nl-on-ink .nl-note-fig,
.nl-on-ink .nl-post-thumb { border-color: rgba(255, 253, 248, .18); }

.nl-rcard { position: relative; }
.nl-rcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .22);
  pointer-events: none;
}
.nl-strip-cell::after {
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .2);
}
.nl-gal-cell::after {
  box-shadow: inset 0 0 0 1px rgba(36, 48, 31, .16);
}
/* the lightbox picture gets the mat too */
.nl-gal-box img { border: 6px solid var(--nl-cream, #FFFDF8); }
@media (max-width: 620px) {
  .nl-gal-box img { border-width: 4px; }
}

/* an inline way through to a page, inside a paragraph of prose */
.nl-more-inline {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--nl-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nl-vine, #7A1F2B);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
}
.nl-more-inline:hover { color: var(--nl-harvest, #C9962F); }


/* =========================================================================
   HERO SLIDER
   Four frames, each with its own words. The copy is stacked in the same place
   so the plate never changes height as it cycles, and only the active slide
   takes part in the layout flow for height purposes.
   ========================================================================= */

.nl-hslides {
  position: relative;
  display: grid;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
}
.nl-hslide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .85s cubic-bezier(.22, 1, .36, 1),
              transform .85s cubic-bezier(.22, 1, .36, 1),
              visibility .85s;
  pointer-events: none;
}
.nl-hslide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.nl-hslide-t {
  font-family: var(--nl-display, Georgia, serif);
  font-size: var(--nl-display-l, clamp(2.5rem, 5.5vw, 5rem));
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--nl-cream, #FFFDF8);
  margin: 0 0 clamp(.85rem, 1.6vw, 1.3rem);
  text-shadow: 0 2px 26px rgba(18, 24, 15, .45);
  max-width: 17ch;
}
.nl-hslide-d {
  margin: 0;
  font-family: var(--nl-body, sans-serif);
  font-size: var(--nl-text-lg, 1.1875rem);
  line-height: 1.6;
  color: rgba(255, 253, 248, .9);
  text-shadow: 0 1px 16px rgba(18, 24, 15, .5);
  max-width: 46ch;
}

/* the marks, under the button */
.nl-hero-dots {
  display: flex;
  gap: 9px;
  margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
}
.nl-hero-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 253, 248, .32);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .35s ease, width .35s ease;
}
.nl-hero-dot:hover { background: rgba(255, 253, 248, .6); }
.nl-hero-dot.is-on { background: var(--nl-harvest, #C9962F); width: 46px; }
.nl-hero-dot:focus-visible {
  outline: 2px solid var(--nl-harvest, #C9962F);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .nl-hslide-t { max-width: none; }
  .nl-hslide-d { font-size: 1rem; max-width: none; }
  .nl-hero-dot { width: 24px; }
  .nl-hero-dot.is-on { width: 34px; }
}

/* The plate is stacked over the picture, so it needs the hero's own grid cell
   rather than a row of its own. */
.nl-hero-copyrow { position: relative; z-index: 4; }

@media (prefers-reduced-motion: reduce) {
  .nl-hslide { transition: opacity .3s ease, visibility .3s; transform: none; }
  .nl-hslide.is-on { transform: none; }
}


/* =========================================================================
   THE HERO FRAME, restored and given its corners
   The inset rule was always there, but at 26% white it had almost nothing to
   sit on once the slider's own overlay went in, and it read as a smudge. It is
   brighter now and carries gold brackets at the four corners: the oldest
   framing device there is, and the one detail that makes a photograph look
   mounted rather than pasted.
   ========================================================================= */

.nl-page-hero::before,
.nl-hero::before {
  border-color: rgba(255, 253, 248, 0.42);
}

/* the brackets. One element, four corners, drawn with two gradients each so
   there is no extra markup anywhere */
/* The brackets hang off two spans inside the frame row. That row is four
   wrappers deep (row > column > module > code inner) and Divi positions some of
   them, which is why an earlier attempt at this resolved `inset` against a 2px
   box. So the row itself becomes the containing block and everything between it
   and the spans is forced static, exactly as the media stack is. */
.nl-hero > .et_pb_row.nl-hero-framerow,
.nl-page-hero > .et_pb_row.nl-hero-framerow {
  display: block;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
  z-index: 4 !important;
}
.nl-hero-framerow .et_pb_column,
.nl-hero-framerow .et_pb_module,
.nl-hero-framerow .et_pb_code,
.nl-hero-framerow .et_pb_code_inner {
  position: static !important;
  height: 100%;
  margin: 0;
  padding: 0;
}

.nl-hero-frame {
  display: block !important;
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  z-index: 4;
  pointer-events: none;
}
.nl-hero-frame::before,
.nl-hero-frame::after {
  content: "";
  position: absolute;
  width: clamp(26px, 3vw, 46px);
  height: clamp(26px, 3vw, 46px);
  border-color: var(--nl-harvest, #C9962F);
  border-style: solid;
  opacity: .85;
}
/* top-left and bottom-right */
.nl-hero-frame::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.nl-hero-frame::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}
/* the other two corners hang off the section, so all four are drawn */
.nl-hero::after,
.nl-page-hero::after { /* keeps its scrim; corners go on a second layer */ }

.nl-hero-corners {
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  z-index: 4;
  pointer-events: none;
}
.nl-hero-corners::before,
.nl-hero-corners::after {
  content: "";
  position: absolute;
  width: clamp(26px, 3vw, 46px);
  height: clamp(26px, 3vw, 46px);
  border-color: var(--nl-harvest, #C9962F);
  border-style: solid;
  opacity: .85;
}
.nl-hero-corners::before {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0;
}
.nl-hero-corners::after {
  bottom: -1px; left: -1px;
  border-width: 0 0 2px 2px;
}

@media (max-width: 767px) {
  .nl-hero-frame, .nl-hero-corners { inset: 10px; }
  .nl-hero-frame::before, .nl-hero-frame::after,
  .nl-hero-corners::before, .nl-hero-corners::after {
    width: 18px; height: 18px; border-width: 0;
  }
  .nl-hero-frame::before { border-width: 2px 0 0 2px; }
  .nl-hero-frame::after  { border-width: 0 2px 2px 0; }
  .nl-hero-corners::before { border-width: 2px 2px 0 0; }
  .nl-hero-corners::after  { border-width: 0 0 2px 2px; }
}


/* =========================================================================
   A SECTION ORNAMENT
   A ruled mark with a lozenge at its centre, the device already used on the
   footer motto, promoted to a divider the whole site can use. It gives the
   long scroll a punctuation that is not another photograph.
   ========================================================================= */

.nl-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.nl-orn::before,
.nl-orn::after {
  content: "";
  height: 1px;
  width: clamp(40px, 8vw, 110px);
  background: linear-gradient(to right,
              transparent, var(--nl-stone, #DED6C6));
}
.nl-orn::after {
  background: linear-gradient(to left,
              transparent, var(--nl-stone, #DED6C6));
}
.nl-orn i {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--nl-harvest, #C9962F);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.nl-orn i + i { margin-left: -2px; opacity: .45; }
.nl-on-ink .nl-orn::before { background: linear-gradient(to right, transparent, rgba(255,253,248,.3)); }
.nl-on-ink .nl-orn::after  { background: linear-gradient(to left,  transparent, rgba(255,253,248,.3)); }


/* =========================================================================
   A FEW MORE TRADITIONAL MARKS
   All drawn in CSS, none of them an image, all of them restrained enough to
   read as printing rather than decoration.
   ========================================================================= */

/* The eyebrow already has a rule. Give it a lozenge terminal, so the smallest
   type on the page carries the same mark as the largest ornament. */
.nl-eyebrow p::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 9px;
  vertical-align: middle;
  background: currentColor;
  transform: rotate(45deg);
  opacity: .5;
}

/* A double rule under the display headings that open a section: a hairline
   above a heavier one, which is how a printed heading was ruled off. */
.nl-corner::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin-top: clamp(.9rem, 1.8vw, 1.3rem);
  background:
    linear-gradient(to bottom,
      var(--nl-vine, #7A1F2B) 0 1px,
      transparent 1px 2px,
      var(--nl-harvest, #C9962F) 2px 3px);
}
.nl-on-ink .nl-corner::after {
  background:
    linear-gradient(to bottom,
      rgba(255, 253, 248, .5) 0 1px,
      transparent 1px 2px,
      var(--nl-harvest, #C9962F) 2px 3px);
}


/* =========================================================================
   SLIDER MARKS, thinner
   Three-pixel bars read as a control panel. A hairline reads as a rule, which
   is the language the rest of the site is set in. The visible line is drawn by
   a pseudo-element so the button itself can stay a 44px touch target without
   the mark growing with it.
   ========================================================================= */

.nl-hero-dots { gap: 0; margin-top: clamp(1.1rem, 2.2vw, 1.7rem); }

.nl-hero-dot {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  padding: 14px 7px;
  display: block;
  transition: none;
}
.nl-hero-dot::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: rgba(255, 253, 248, .38);
  transition: background .45s ease, width .45s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s ease;
}
.nl-hero-dot:hover::before { background: rgba(255, 253, 248, .72); }
.nl-hero-dot.is-on::before {
  width: 52px;
  background: var(--nl-harvest, #C9962F);
  box-shadow: 0 0 0 .5px rgba(201, 150, 47, .5);
}
/* The earlier `.nl-hero-dot.is-on` is 0-2-0 and still carried a gold
   background and a fixed width, so the active mark rendered as a block over
   the new padding. Both are cleared at matching specificity. */
.nl-hero-dot.is-on,
.nl-hero-dot:hover {
  background: none;
  width: auto;
  height: auto;
}
.nl-fade-dot.is-on,
.nl-fade-dot:hover {
  background: none;
  width: auto;
  height: auto;
}
.nl-hero-dot:focus-visible { outline: none; }
.nl-hero-dot:focus-visible::before {
  background: var(--nl-cream, #FFFDF8);
  box-shadow: 0 0 0 2px rgba(201, 150, 47, .7);
}
@media (max-width: 760px) {
  .nl-hero-dot { padding: 13px 6px; }
  .nl-hero-dot::before { width: 24px; }
  .nl-hero-dot.is-on::before { width: 38px; }
}
/* the same treatment for the band stacks, so every mark on the site agrees */
.nl-fade-dots { gap: 0; }
.nl-fade-dot {
  width: auto; height: auto; background: none; border-radius: 0;
  padding: 11px 5px; display: block; transition: none;
}
.nl-fade-dot::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(255, 253, 248, .45);
  transition: background .45s ease, width .45s cubic-bezier(.22, 1, .36, 1);
}
.nl-fade-dot:hover::before { background: rgba(255, 253, 248, .8); }
.nl-fade-dot.is-on::before { width: 30px; background: var(--nl-harvest, #C9962F); }


/* =========================================================================
   HERO HEIGHT ON A PHONE
   61vh with the plate inside it left the photograph as a band across the top.
   Small-viewport units so the browser chrome collapsing does not jump it.
   ========================================================================= */

@media (max-width: 767px) {
  .nl-hero, .nl-page-hero {
    min-height: 82vh;
    min-height: 82svh;
  }
  .nl-hero .nl-hero-media,
  .nl-page-hero .nl-hero-media { min-height: 82vh; min-height: 82svh; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .nl-hero, .nl-page-hero { min-height: 72vh; }
  .nl-hero .nl-hero-media, .nl-page-hero .nl-hero-media { min-height: 72vh; }
}


/* =========================================================================
   FLOATING ACTIONS, squared up
   They were 48 and 40 on a right-aligned column, so neither their edges nor
   their centres lined up. One size, centred on a shared axis, and the pair
   reads as a set.
   ========================================================================= */

.nl-float {
  align-items: center;
  gap: 10px;
}
.nl-float .nl-wa,
.nl-float .nl-top {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
}
.nl-float .nl-wa svg { width: 25px; height: 25px; }
.nl-float .nl-top::before { width: 9px; height: 9px; margin-top: 3px; }

/* the back-to-top is the quieter of the two: it only appears once you are
   deep in the page, so it carries a lighter ground */
.nl-float .nl-top {
  background: rgba(36, 48, 31, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nl-float .nl-top:hover { background: var(--nl-vine, #7A1F2B); }

@media (max-width: 560px) {
  .nl-float { right: 14px; bottom: 14px; gap: 9px; }
  .nl-float .nl-wa, .nl-float .nl-top { width: 46px; height: 46px; flex: 0 0 46px; }
  .nl-float .nl-wa svg { width: 23px; height: 23px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nl-float .nl-top { background: var(--nl-ink, #24301F); }
}


/* =========================================================================
   FOOTER: the two ratings
   Google first, because it carries thirteen times the reviews, and because it
   is the one a visitor has probably already seen before arriving here.
   ========================================================================= */

.nl-rate {
  display: block;
  text-decoration: none;
  background: rgba(255, 253, 248, .055);
  border: 1px solid rgba(255, 253, 248, .14);
  padding: 13px 14px;
  margin-bottom: 11px;
  transition: background .25s ease, border-color .25s ease;
}
.nl-rate:hover {
  background: rgba(201, 150, 47, .12);
  border-color: rgba(201, 150, 47, .45);
}
.nl-rate-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.nl-rate-score {
  font-family: var(--nl-display, Georgia, serif);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--nl-cream, #FFFDF8);
}
.nl-rate-stars { display: inline-flex; gap: 3px; }
.nl-rate-stars span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1.5px solid var(--nl-harvest, #C9962F);
  display: block;
}
.nl-rate-stars span.is-full { background: var(--nl-harvest, #C9962F); }
.nl-rate-stars span.is-half {
  background: linear-gradient(to right,
              var(--nl-harvest, #C9962F) 0 50%, transparent 50% 100%);
}
.nl-rate-sub {
  font-family: var(--nl-mono, monospace);
  font-size: 0.6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .6);
  margin: 0;
  line-height: 1.65;
}
.nl-rate-sub b { color: var(--nl-harvest, #C9962F); font-weight: 400; }
.nl-rate-src {
  display: block;
  font-family: var(--nl-mono, monospace);
  font-size: 0.58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 253, 248, .45);
  margin-bottom: 8px;
}

/* six columns now, so the two narrow ones keep their measure */
@media (max-width: 1100px) {
  .nl-foot-grid { row-gap: clamp(1.75rem, 4vw, 2.75rem); }
}

/* Divi prints its own scroll-to-top button, which sat beside ours at a
   different size and position and read as a misalignment. Ours stays. */
.et_pb_scroll_top { display: none !important; }


/* =========================================================================
   MOBILE PANEL, corrected
   Three faults, reported together from a phone.

   1. The panel was a centred flex column with overflow-y: auto. When the
      content is taller than the screen -- nine links, a six-room sublist and
      the contact block always are -- a centred flex container overflows in
      BOTH directions, and the part above the start edge cannot be scrolled
      to. The first items were not merely hidden under the header; they were
      unreachable. It top-aligns now, and `safe center` re-centres it only on
      a screen tall enough to hold it.

   2. The bar itself was transparent while the panel was open, so links slid
      visibly under the logo. It now carries the same frosted paper it wears
      when the page is scrolled.

   3. The folded room list was styled for the DESKTOP dropdown, which sits on
      dark glass -- cream text at 74%, and the measurement at 42%. On the
      light panel that is cream on cream. The whole sublist is restated here
      in ink.
   ========================================================================= */

@media (max-width: 1100px) {

  .nl-menu {
    justify-content: flex-start;
    justify-content: safe center;        /* ignored where unsupported */
    padding-top: calc(var(--nl-hdr-h) + 20px);
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }

  /* The bar the panel scrolls beneath. Solid, not frosted: a filtered element
     forms its own backdrop root, so the header was sampling the hero
     PHOTOGRAPH rather than the panel sitting between them, and came out a
     dark olive band with a dark logo on it. Nothing to sample, nothing to
     get wrong. */
  .nl-hdr[data-menu="open"] {
    background: #F2ECDF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: rgba(36, 48, 31, .12);
  }
  /* ...and the dark gradient the bar wears so white type stays legible over a
     hero photograph. With the panel open there is no photograph behind it, so
     all it did was lay an olive band over the paper and the dark logo. */
  /* display, not opacity: the scrim carries an opacity transition, and a
     fading element is still a painting element. */
  .nl-hdr[data-menu="open"]::before { display: none; }

  /* The panel's own ground was 82% cream. Over the hero that reads as a muddy
     olive wash behind the first few links -- the thing that made the menu look
     washed out. Paper wins; the blur stays for the edges. */
  .nl-menu {
    background: rgba(243, 238, 226, .975);
  }

  /* ---------------------------------------------------------- the sublist */
  .nl-menu-sub {
    display: block;
    margin: 2px 0 10px;
    padding: 6px 0 8px 2px;
    border-left: 1px solid rgba(201, 150, 47, .35);
    padding-left: 14px;
  }
  .nl-menu-sub a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(36, 48, 31, .07);
    color: var(--nl-ink, #24301F);
    font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .nl-menu-sub a:last-child { border-bottom: 0; }
  .nl-menu-sub a::before { display: none; }   /* the rule replaces the dash */
  .nl-menu-sub a.is-here { color: var(--nl-vine, #7A1F2B); }

  .nl-menu-sub-m {
    font-family: var(--nl-mono, monospace);
    font-size: 0.6875rem;
    letter-spacing: .08em;
    color: var(--nl-ink-soft, #5A6650);
    opacity: .85;
    white-space: nowrap;
  }

  /* the fold control, on paper rather than on glass */
  .nl-menu-toggle {
    border-color: rgba(36, 48, 31, .16);
  }
  .nl-menu-toggle::before {
    border-right-color: var(--nl-vine, #7A1F2B);
    border-bottom-color: var(--nl-vine, #7A1F2B);
  }
  .nl-menu-toggle.is-open {
    background: rgba(122, 31, 43, .07);
    border-color: rgba(122, 31, 43, .28);
  }

  /* a row with a fold control must not let the link text run under it */
  .nl-menu-row { gap: 10px; }
  .nl-menu-row .nl-menu-link { min-width: 0; }
}


/* =========================================================================
   PORTRAIT PHOTOGRAPHS IN THE 3:2 BAND FRAME
   Four of the restaurant frames are already 3:2 and fill the frame exactly.
   Two are 3:4 portraits, and object-fit: cover keeps only the middle half of
   their height -- which on both of them is the half with the least in it.
   Anchoring the crop costs nothing, keeps the originals intact for the gallery
   and the page heroes, and survives a change of frame ratio, which re-encoding
   a cropped copy would not.

   The percentage is the share of the overflow hidden above the frame, so a
   number above 50% pulls the visible window DOWN the photograph.

   The fader hydrates lazily, so a frame carries data-src until the moment it
   is shown and src from then on. Both have to match or the anchor would snap
   into place on the first fade.
   ========================================================================= */

/* The laid table against the tall garden window: centred, the crop cut the
   place settings in half and kept empty glazing. Anchored lower, it holds the
   table, the glasses and most of the window. */
.nl-fade-img[src*="salla-dritare-3"],
.nl-fade-img[data-src*="salla-dritare-3"] { object-position: center 65%; }

/* Shot through foliage at golden hour: the bottom third is an out-of-focus
   foreground and the top is dark ceiling. The table sits above centre. */
.nl-fade-img[src*="salla-dritare-2"],
.nl-fade-img[data-src*="salla-dritare-2"] { object-position: center 40%; }


/* =========================================================================
   FOOTER: THE ROW HAD TO BE ALLOWED TO WRAP
   Divi gives a six-column row flex-wrap: nowrap, and then hands the columns
   correct phone widths (24/24 and 12/24) that can never take effect, because
   nothing is permitted to move to a second line. On a 375px screen the six
   columns therefore laid themselves out to x=823 and the whole site scrolled
   sideways -- on every page, since this is the Theme Builder footer.

   Wrapping is safe at every width: on desktop the six columns total exactly
   24/24, so there is nothing to wrap.
   ========================================================================= */

.nl-foot-grid { flex-wrap: wrap !important; }

/* The column headings are two short words with wide tracking; letting them
   break put "ME SHUME" and "VLERESIME" on two lines in a narrow column. */
.nl-foot-head { white-space: nowrap; }

@media (max-width: 1100px) {
  .nl-foot-grid > .et_pb_column { margin-bottom: 0 !important; }
  .nl-foot-grid { row-gap: clamp(1.75rem, 5vw, 2.5rem); }
}

/* Below the two-up point the ratings read better side by side than stacked,
   because each plate is then as wide as the pair of link columns above it. */
@media (max-width: 767px) {
  .nl-foot-ratecol .et_pb_code_inner { display: grid;
    grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .nl-foot-ratecol .nl-foot-head { grid-column: 1 / -1; }
  .nl-rate { margin-bottom: 0; }
}


/* --- Evente band: the three frames that are not already close to 3:2 ------
   restorant-14 is a 3:4 portrait, restorant-13 a 3:4 portrait and
   restorant-12 a square, so a centred cover crop would take the middle band
   of each and lose the table that is the subject. Anchored below centre, all
   three keep the laid table and the room behind it. The other four are 4:3,
   16:9 and 1.44, which the frame takes centred without losing anything. */
.nl-fade-img[src*="restorant-14"],
.nl-fade-img[data-src*="restorant-14"] { object-position: center 65%; }

.nl-fade-img[src*="restorant-13"],
.nl-fade-img[data-src*="restorant-13"] { object-position: center 60%; }

.nl-fade-img[src*="restorant-12"],
.nl-fade-img[data-src*="restorant-12"] { object-position: center 60%; }


/* =========================================================================
   DIVI FLEX ROWS MUST BE ALLOWED TO WRAP ON SMALL SCREENS
   The footer was not a one-off. Divi 5 lays every row out as a flex line with
   flex-wrap: nowrap, and separately gives each column a phone width -- almost
   always et_flex_column_24_24_phone, meaning "take the whole width and stack".
   Those two instructions contradict each other: nothing can take the whole
   width while everything is pinned to one line. The columns therefore ran off
   the right edge, and the page scrolled sideways.

   Measured on a 375px screen before this rule: the Theme Builder footer
   reached x=823, the restaurant CTA row x=420, the events page x=393.

   Letting the rows wrap is what makes Divi's own phone widths work. It cannot
   change a layout that already fits, because a row whose columns total 24/24
   has nothing to wrap -- which is every row on this site at desktop width,
   hence the 1100px bound.
   ========================================================================= */

@media (max-width: 1100px) {
  .et_flex_row { flex-wrap: wrap !important; }
}


/* Between a phone and a laptop there is room for the six footer columns to sit
   on one line, but not room for them to be readable: at 1024px the narrowest
   was 62px and set "Kalendari i vjeljes" four words deep. Three to a line, with
   the identity block across the top, uses the same space properly. */
@media (min-width: 768px) and (max-width: 1280px) {
  .nl-foot-grid > .et_pb_column { flex: 1 1 26% !important; max-width: none !important; }
  .nl-foot-grid > .nl-foot-identcol { flex: 1 1 100% !important; }
}


/* =========================================================================
   FORMS
   These had never been styled. Divi leaves its contact-form controls to the
   browser, and the browser gave them 1px solid #bbb on white, 2px of padding
   and 13.33px of whatever font it keeps for form controls -- 22px tall boxes
   that belong to no design at all. The select was worse: with no width rule it
   sized itself to its longest option, so on the room pages the "Dhoma" field
   was twice the width of every field above it.

   Everything here is one measure wide, one height, one typeface. Labels move
   to the mono voice the rest of the site uses for labels, so they read as
   labels rather than as body copy competing with the field under them.
   ========================================================================= */

/* Divi makes the form a flex COLUMN and then gives each field
   et_flex_column_12_24 -- a half-width class. The two cannot both be obeyed:
   stacked in a column, every field took half the width and left the other half
   of the form empty down its whole length. Laid out as a wrapping row, the
   half-width fields pair up as intended and the full-width ones take a line of
   their own. Divi's own widths are left alone; only the direction changes. */
.et_pb_contact_form {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 20px;
}

/* Divi makes each field a flex column too, which left 37px of air between a
   label and the box it names when the label's own margin says 7. Stacking them
   as ordinary blocks puts the label back on its field. The width still comes
   from the et_flex_column class on this same element, which is unaffected. */
.et_pb_contact_form .et_pb_contact_field { display: block; margin-bottom: 0; }

/* The sum and the button are not fields and should not pair with one. */
.et_pb_contact_form .et_pb_contact_right { flex: 0 0 100%; }

.et_pb_contact_form .et_pb_contact_field label,
.et_pb_contact_form .et_pb_contact_field > p > label {
  display: block;
  margin: 0 0 7px;
  font-family: var(--nl-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nl-ink-soft, #5A6650);
  line-height: 1.4;
}

/* One rule for every control, so a select cannot drift from a text field. */
.et_pb_contact_form input[type="text"],
.et_pb_contact_form input[type="email"],
.et_pb_contact_form input[type="tel"],
.et_pb_contact_form input[type="number"],
.et_pb_contact_form input[type="date"],
.et_pb_contact_form textarea,
.et_pb_contact_form select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 13px 15px;
  background: var(--nl-cream, #FFFDF8);
  border: 1px solid var(--nl-stone, #DED6C6);
  border-radius: 0;
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--nl-ink, #24301F);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.et_pb_contact_form textarea {
  min-height: 140px;
  resize: vertical;
  display: block;
}

/* The native arrow disappears with appearance:none, so one is drawn back on.
   Inline SVG, because a separate request for a 300-byte chevron is silly. */
.et_pb_contact_form select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6650' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}

.et_pb_contact_form ::placeholder { color: var(--nl-ink-soft, #5A6650); opacity: .55; }

.et_pb_contact_form input:hover,
.et_pb_contact_form textarea:hover,
.et_pb_contact_form select:hover { border-color: rgba(36, 48, 31, .3); }

.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus,
.et_pb_contact_form select:focus {
  outline: none;
  background: #fff;
  border-color: var(--nl-harvest, #C9962F);
  box-shadow: 0 0 0 3px rgba(201, 150, 47, .16);
}

/* Divi marks a failed field by adding this class. It said so only in red text
   above the form, which is easy to miss on a nine-field form. */
.et_pb_contact_form .et_contact_error input,
.et_pb_contact_form .et_contact_error textarea,
.et_pb_contact_form .et_contact_error select {
  border-color: var(--nl-vine, #7A1F2B);
  background: rgba(122, 31, 43, .04);
}

/* The sum that keeps the robots out. A full-width box for two digits looked
   like a mistake, so it keeps its own measure and sits beside its label. */
.et_pb_contact_form .et_pb_contact_right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  font-family: var(--nl-mono, monospace);
  font-size: 0.8125rem;
  letter-spacing: .06em;
  color: var(--nl-ink-soft, #5A6650);
}
.et_pb_contact_form .et_pb_contact_right input {
  width: 84px;
  flex: 0 0 84px;
  padding: 10px 12px;
  text-align: center;
}

/* Submit */
.et_pb_contact_form .et_pb_contact_submit,
.et_pb_contact_form button[type="submit"] {
  display: inline-block;
  margin-top: 6px;
  padding: 15px 34px;
  background: var(--nl-vine, #7A1F2B);
  border: 1px solid var(--nl-vine, #7A1F2B);
  border-radius: 0;
  font-family: var(--nl-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nl-cream, #FFFDF8);
  cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.et_pb_contact_form .et_pb_contact_submit:hover,
.et_pb_contact_form button[type="submit"]:hover {
  background: var(--nl-vine-deep, #5E1721);
  border-color: var(--nl-vine-deep, #5E1721);
  color: var(--nl-cream, #FFFDF8);
}
.et_pb_contact_form .et_pb_contact_submit::after { display: none !important; }

/* Divi's own message blocks, which were unstyled paragraphs. */
.et_pb_contact_form .et_pb_contact_error_text,
.et_pb_contact_form .et-pb-contact-message p {
  font-family: var(--nl-body, sans-serif);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--nl-vine, #7A1F2B);
}

@media (max-width: 767px) {
  .et_pb_contact_form input[type="text"],
  .et_pb_contact_form input[type="email"],
  .et_pb_contact_form input[type="tel"],
  .et_pb_contact_form input[type="number"],
  .et_pb_contact_form input[type="date"],
  .et_pb_contact_form textarea,
  .et_pb_contact_form select {
    /* 16px or iOS zooms the page in when the field takes focus. */
    font-size: 1rem;
    padding: 12px 14px;
  }
}


/* =========================================================================
   FAQ
   Questions set as headings with the answer under each, in the ledger's ruled
   language so the block belongs to the rest of the page. Deliberately not an
   accordion: the answers are the part most likely to be quoted, by a visitor
   scanning or by an assistant, and neither benefits from a click.
   ========================================================================= */

.nl-faq { display: block; }

.nl-faq-row {
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--nl-rule-ink, rgba(36, 48, 31, .14));
}
.nl-faq-row:first-child { padding-top: 0; }
.nl-faq-row:last-child { border-bottom: 0; padding-bottom: 0; }

.nl-faq-q {
  margin: 0 0 .5rem;
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--nl-ink, #24301F);
}
.nl-faq-a {
  margin: 0;
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif;
  font-size: clamp(.9375rem, 1.4vw, 1rem);
  line-height: 1.65;
  color: var(--nl-ink-soft, #5A6650);
  max-width: 62ch;
}


/* =========================================================================
   THE GALLERY FILTER DID NOTHING
   nav.js sets the `hidden` attribute on every category section that does not
   match the chip, which is correct and was working: measured on the live page,
   eight of nine sections carried `hidden` after a click. They stayed on screen
   because `hidden` is honoured by a USER-AGENT rule, `[hidden] { display: none }`,
   and any author rule that sets `display` on the same element beats it. Divi
   sets one on the elements inside a code module, so all 196 photographs stayed
   visible whichever chip was pressed.

   Stated here with !important for the same reason the footer list markers
   needed it: there is no higher-specificity selector available that Divi has
   not already used.
   ========================================================================= */

.nl-gal-cat[hidden],
.nl-gal-box[hidden],
.nl-menu-sub[hidden] { display: none !important; }


/* =========================================================================
   DIVI'S BUTTON ARROW
   Every Divi button carries a hidden ::after holding glyph "5" of the ETmodules
   icon font -- the arrow -- which it fades in on hover while widening the
   button's right padding to make room for it. This site's own buttons have no
   such icon, and with Divi's per-page CSS missing the arrow was appearing ON
   TOP of the label instead of beside it.

   Only the icon is removed here. Divi also widens the padding on hover
   (`.et_pb_module .et_pb_button:hover { padding: 0.3em 2em 0.3em 0.7em }`),
   which would shift the label now that nothing fills the gap -- but that rule
   carries no !important, and this site's own `body .et_pb_button { padding:
   1.15em 2.4em !important }` outranks it in both states. Checked before adding
   a second padding rule here, which would only have been noise.
   ========================================================================= */

.et_pb_button::after,
.et_pb_button::before {
  content: none !important;
  display: none !important;
}


/* =========================================================================
   THE HERO, ON DIVI'S SLIDER
   The hand-written crossfader was replaced by divi/slider so the slides can be
   edited in the builder. Divi renders its own markup, so the design is
   restated here against .et_pb_slide rather than the old .nl-hero-* classes.
   Everything below is the same design, pointed at different class names.
   ========================================================================= */

.nl-hero-section { padding: 0 !important; }

.nl-hero-divi,
.nl-hero-divi .et_pb_slides,
.nl-hero-divi .et_pb_slide {
  min-height: 88vh;
  min-height: 88svh;
}

/* Deliberately NO display rule here. Divi shows one slide and hides the rest
   with display, so `display: flex !important` on .et_pb_slide put all four on
   screen at once, titles printed over each other. The flex centring is applied
   to the active slide only, which is the one Divi has made visible. */
.nl-hero-divi .et_pb_slide {
  background-size: cover !important;
  background-position: center 58% !important;
  position: relative;
  padding: 0;
}
.nl-hero-divi .et_pb_slide.et-pb-active-slide {
  display: flex;
  align-items: center;
}

/* The scrim. Without it the type sat on whatever the photograph happened to be
   doing underneath, which is the note that came back on the first hero. */
/* The scrim, copied value for value from the old hero in patterns.css rather
   than re-tuned by eye: two layers, one weighted to the left where the type
   sits and one from the foot, because the building is lit from inside and a
   plain bottom-up gradient leaves the sub-copy floating on bright glass. */
.nl-hero-divi .et_pb_slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(16, 24, 14, 0.90) 0%, rgba(16, 24, 14, 0.62) 38%,
                            rgba(16, 24, 14, 0.18) 68%, rgba(16, 24, 14, 0.05) 100%),
    linear-gradient(to top, rgba(16, 24, 14, 0.72) 0%, rgba(16, 24, 14, 0.10) 38%,
                            rgba(16, 24, 14, 0.34) 100%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 767px) {
  .nl-hero-divi .et_pb_slide::before {
    background: linear-gradient(to top, rgba(16, 24, 14, 0.88) 0%,
                                        rgba(16, 24, 14, 0.55) 55%,
                                        rgba(16, 24, 14, 0.62) 100%);
  }
}

/* The frame, at the brightness the old hero settled on. */
.nl-hero-divi .et_pb_slide::after {
  content: "";
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  border: 1px solid rgba(255, 253, 248, 0.42);
  pointer-events: none;
  z-index: 2;
}

/* The gold corner brackets. The old hero drew these from two spare spans; the
   Divi slider has no spare markup, so all four are drawn as background
   gradients on the slider's own two pseudo-elements -- two corners each, an L
   per corner from a vertical and a horizontal bar. */
.nl-hero-divi { position: relative; }
.nl-hero-divi::before,
.nl-hero-divi::after {
  content: "";
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  z-index: 5;
  pointer-events: none;
  opacity: .85;
  --nl-bracket: clamp(26px, 3vw, 46px);
}
.nl-hero-divi::before {
  background:
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) left top / 2px var(--nl-bracket) no-repeat,
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) left top / var(--nl-bracket) 2px no-repeat,
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) right bottom / 2px var(--nl-bracket) no-repeat,
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) right bottom / var(--nl-bracket) 2px no-repeat;
}
.nl-hero-divi::after {
  background:
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) right top / 2px var(--nl-bracket) no-repeat,
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) right top / var(--nl-bracket) 2px no-repeat,
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) left bottom / 2px var(--nl-bracket) no-repeat,
    linear-gradient(var(--nl-harvest, #C9962F), var(--nl-harvest, #C9962F)) left bottom / var(--nl-bracket) 2px no-repeat;
}
@media (max-width: 767px) {
  .nl-hero-divi .et_pb_slide::after,
  .nl-hero-divi::before,
  .nl-hero-divi::after { inset: 10px; }
}

.nl-hero-divi .et_pb_slide_description {
  position: relative;
  z-index: 3;
  max-width: min(44rem, 86%);
  margin: 0;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  text-align: left;
}

.nl-hero-divi .et_pb_slide_title,
.nl-hero-divi .et_pb_slide_title a {
  font-family: var(--nl-display, "Nib Pro"), Georgia, serif !important;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em !important;
  font-weight: 400 !important;
  color: var(--nl-cream, #FFFDF8) !important;
  text-shadow: 0 1px 24px rgba(14, 21, 12, .5);
  margin: 0 0 clamp(.75rem, 1.6vw, 1.25rem) !important;
  padding: 0 !important;
}

.nl-hero-divi .et_pb_slide_content,
.nl-hero-divi .et_pb_slide_content p {
  font-family: var(--nl-body, "Instrument Sans"), system-ui, sans-serif !important;
  font-size: clamp(1rem, 1.45vw, 1.1875rem) !important;
  line-height: 1.6 !important;
  color: rgba(255, 253, 248, .92) !important;
  text-shadow: 0 1px 12px rgba(14, 21, 12, .6);
  max-width: 34rem;
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation: hairlines, the same marks the rest of the site uses, not Divi's
   round dots or its chevrons in a circle. */
.nl-hero-divi .et_pb_controllers {
  bottom: clamp(1.5rem, 3.5vw, 2.75rem);
  z-index: 4;
  text-align: left;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}
.nl-hero-divi .et_pb_controllers a {
  width: 34px;
  height: 1px;
  margin: 0 7px 0 0;
  border-radius: 0;
  background-color: rgba(255, 253, 248, .38) !important;
  transition: background-color .45s ease, width .45s cubic-bezier(.22, 1, .36, 1);
}
.nl-hero-divi .et_pb_controllers .et-pb-active-control {
  width: 52px;
  background-color: var(--nl-harvest, #C9962F) !important;
}

/* Divi 5's slider does not render the pagination dots the old crossfader used,
   so the arrows are the navigation and have to be visible rather than appearing
   on hover -- a control nobody can see is not a control, and on a touch screen
   there is no hover at all. */
.nl-hero-divi .et-pb-arrow-prev,
.nl-hero-divi .et-pb-arrow-next {
  color: var(--nl-cream, #FFFDF8);
  opacity: .72;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 4;
  text-shadow: 0 1px 14px rgba(14, 21, 12, .65);
  font-size: 44px;
}
.nl-hero-divi .et-pb-arrow-prev { left: clamp(.5rem, 2vw, 2rem); }
.nl-hero-divi .et-pb-arrow-next { right: clamp(.5rem, 2vw, 2rem); }
.nl-hero-divi .et-pb-arrow-prev:hover,
.nl-hero-divi .et-pb-arrow-next:hover { opacity: 1; color: var(--nl-harvest, #C9962F); }
.nl-hero-divi .et-pb-arrow-prev:focus-visible,
.nl-hero-divi .et-pb-arrow-next:focus-visible {
  outline: 2px solid var(--nl-harvest, #C9962F);
  outline-offset: 4px;
  opacity: 1;
}

@media (max-width: 767px) {
  .nl-hero-divi,
  .nl-hero-divi .et_pb_slides,
  .nl-hero-divi .et_pb_slide { min-height: 82vh; min-height: 82svh; }
  .nl-hero-divi .et_pb_slide_description { max-width: 100%; }
  .nl-hero-divi .et_pb_controllers a { width: 24px; }
  .nl-hero-divi .et_pb_controllers .et-pb-active-control { width: 38px; }
}


/* =========================================================================
   BAND PHOTOGRAPHS, ON DIVI'S SLIDER
   Same move as the hero: the hand-written crossfader became divi/slider so the
   pictures can be swapped in the builder. These slides carry a FOREGROUND
   image rather than a background one, so each is a real <img> with its alt
   text and stays in the image sitemap.

   Divi dresses a slide for a hero -- wine background, tall minimum height, a
   centred container with its own max-width. None of that belongs in a 3:2
   frame beside a column of text, so it is unwound here.
   ========================================================================= */

.nl-band-slider {
  background: var(--nl-cream, #FFFDF8);
  padding: 10px;
  box-shadow: 0 1px 0 var(--nl-stone, #DED6C6),
              0 18px 44px rgba(36, 48, 31, .10);
  border: var(--nl-frame, 1px solid rgba(36, 48, 31, .16));
}

.nl-band-slider .et_pb_slide {
  background-color: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* static, so the absolutely-placed image below resolves against the SLIDE and
   not against one of these. That was the 101px of mat left under the picture. */
.nl-band-slider .et_pb_container,
.nl-band-slider .et_pb_slider_container_inner {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.nl-band-slider .et_pb_slide_image {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Divi sizes the slider from its own stacked content, which left 250px of
   empty mat under a correctly-sized picture. The frame is given the 3:2 and
   the picture is pinned to fill it, so the box is the photograph's shape
   whatever Divi thinks the slide should be. */
.nl-band-slider .et_pb_slides { position: relative; }

.nl-band-slider .et_pb_slide {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.nl-band-slider .et_pb_slide_image {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

.nl-band-slider .et_pb_slide_image img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  /* Divi's slider JS writes an INLINE max-height on every slide image, equal to
     that photograph's own intrinsic height at the current width. A stylesheet
     rule without !important loses to an inline style, so height:100% resolved
     to 218px and was then clamped back to 186px -- the 32px strip of empty mat
     under each landscape frame. The slides are a mix of 3:2 and 3:4 originals,
     so without this the frame can never be one shape. */
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  margin: 0 !important;
}

/* Arrows sit over the picture, quiet until wanted. */
.nl-band-slider .et-pb-arrow-prev,
.nl-band-slider .et-pb-arrow-next {
  color: var(--nl-cream, #FFFDF8);
  opacity: 0;
  font-size: 30px;
  text-shadow: 0 1px 10px rgba(14, 21, 12, .7);
  transition: opacity .25s ease;
  z-index: 3;
}
.nl-band-slider:hover .et-pb-arrow-prev,
.nl-band-slider:hover .et-pb-arrow-next { opacity: .9; }
.nl-band-slider .et-pb-arrow-prev:focus-visible,
.nl-band-slider .et-pb-arrow-next:focus-visible { opacity: 1; outline: 2px solid var(--nl-harvest, #C9962F); }

@media (max-width: 767px) {
  .nl-band-slider { padding: 7px; }
}


/* =========================================================================
   SLIDER NAVIGATION
   Divi renders no pagination on this build, so nav.js builds the marks and
   drives them through the slider's own et_slider_move_to(). Hairlines, the
   same device the old hero used and the same one the band stacks use, so every
   mark on the site still agrees. Divi's arrows are hidden: the marks say how
   many there are and which one is showing, which the arrows never did.
   ========================================================================= */

.nl-hero-divi .et-pb-arrow-prev,
.nl-hero-divi .et-pb-arrow-next,
.nl-band-slider .et-pb-arrow-prev,
.nl-band-slider .et-pb-arrow-next { display: none !important; }

.nl-slider-nav {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 0;
  pointer-events: auto;
}
.nl-hero-divi .nl-slider-nav {
  left: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
}
.nl-band-slider .nl-slider-nav {
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
}

.nl-slider-mark {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 14px 7px;
  display: block;
  cursor: pointer;
  line-height: 0;
}
.nl-slider-mark::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background: rgba(255, 253, 248, .38);
  transition: background .45s ease, width .45s cubic-bezier(.22, 1, .36, 1);
}
.nl-slider-mark:hover::before { background: rgba(255, 253, 248, .72); }
.nl-slider-mark.is-on::before {
  width: 52px;
  background: var(--nl-harvest, #C9962F);
  box-shadow: 0 0 0 .5px rgba(201, 150, 47, .5);
}
.nl-slider-mark:focus-visible { outline: none; }
.nl-slider-mark:focus-visible::before {
  background: var(--nl-cream, #FFFDF8);
  box-shadow: 0 0 0 2px rgba(201, 150, 47, .7);
}

/* the band marks sit on the cream mat, so they need the ink treatment */
.nl-band-slider .nl-slider-mark { padding: 9px 5px; }
.nl-band-slider .nl-slider-mark::before {
  width: 20px;
  background: rgba(36, 48, 31, .28);
}
.nl-band-slider .nl-slider-mark:hover::before { background: rgba(36, 48, 31, .55); }
.nl-band-slider .nl-slider-mark.is-on::before {
  width: 30px;
  background: var(--nl-harvest, #C9962F);
  box-shadow: none;
}

@media (max-width: 767px) {
  .nl-hero-divi .nl-slider-mark { padding: 13px 6px; }
  .nl-hero-divi .nl-slider-mark::before { width: 24px; }
  .nl-hero-divi .nl-slider-mark.is-on::before { width: 38px; }
}

/* ---- the hero button, back to the site's own ------------------------------
   Divi's slide button is its "more button": transparent with a 2px white
   border and sentence case. The old hero carried the wine button the rest of
   the site uses. */
.nl-hero-divi .et_pb_more_button,
.nl-hero-divi .et_pb_button {
  background-color: var(--nl-vine, #7A1F2B) !important;
  border: 1px solid var(--nl-vine, #7A1F2B) !important;
  color: var(--nl-cream, #FFFDF8) !important;
  text-transform: uppercase !important;
  font-family: var(--nl-mono, monospace) !important;
  border-radius: 2px !important;
}
.nl-hero-divi .et_pb_more_button:hover,
.nl-hero-divi .et_pb_button:hover {
  background-color: var(--nl-vine-deep, #5E1721) !important;
  border-color: var(--nl-vine-deep, #5E1721) !important;
  color: var(--nl-cream, #FFFDF8) !important;
}


/* =========================================================================
   DIVI'S OWN SLIDER FURNITURE
   Two things it does that this design does not want.

   Its round controllers DO render after all -- not on a desktop, where the
   earlier check found none, but on a phone, where they appeared underneath the
   hairline marks nav.js builds. Two sets of navigation for one slider.

   And it hides the slide's paragraph entirely below 767px, which is where the
   hero's description went on mobile. The sentence under the heading is the one
   that says what the place actually is, so it stays.
   ========================================================================= */

/* The real class has hyphens: .et-pb-controllers. Styled, not hidden. */

@media (max-width: 767px) {
  .nl-hero-divi .et_pb_slide_content,
  .nl-hero-divi .et_pb_slide_content p {
    display: block !important;
  }
  .nl-hero-divi .et_pb_slide_description { padding-bottom: 3.5rem; }
}


/* =========================================================================
   DIVI'S SLIDER CONTROLS, DRAWN AS HAIRLINES
   .et-pb-controllers, with hyphens. Divi renders these itself and keeps
   et-pb-active-control on the current slide, so no script is needed: they are
   simply redrawn as the thin marks this site uses everywhere else. Each anchor
   carries its slide number as text, which is hidden rather than removed so the
   control still reads as a numbered link.
   ========================================================================= */

.nl-hero-divi .et-pb-controllers,
.nl-band-slider .et-pb-controllers {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 0;
  width: auto;
  bottom: auto;
  line-height: 0;
}
.nl-hero-divi .et-pb-controllers {
  left: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
}
.nl-band-slider .et-pb-controllers {
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
}

.nl-hero-divi .et-pb-controllers a,
.nl-band-slider .et-pb-controllers a {
  display: block;
  width: 34px;
  height: 1px;
  margin: 14px 7px 14px 0;
  padding: 0;
  border-radius: 0;
  background-color: rgba(255, 253, 248, .38);
  /* the anchor holds its slide number; kept for the accessible name */
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  transition: background-color .45s ease, width .45s cubic-bezier(.22, 1, .36, 1);
}
.nl-hero-divi .et-pb-controllers a:hover,
.nl-band-slider .et-pb-controllers a:hover {
  background-color: rgba(255, 253, 248, .72);
}
.nl-hero-divi .et-pb-controllers a.et-pb-active-control {
  width: 52px;
  background-color: var(--nl-harvest, #C9962F);
  box-shadow: 0 0 0 .5px rgba(201, 150, 47, .5);
}

/* The marks used to sit on the cream mat under the picture and were given the
   ink treatment to suit it. That mat was the empty strip left by the slide
   images being clamped to their own height; now the photograph fills its frame
   the marks lie ON it, so they take the hero's light treatment instead, with a
   shadow so they hold up over a pale sky as well as a dark interior. */
.nl-band-slider .et-pb-controllers { bottom: 10px; }
.nl-band-slider .et-pb-controllers a {
  width: 20px;
  margin: 9px 5px 9px 0;
  background-color: rgba(255, 253, 248, .45);
  box-shadow: 0 1px 3px rgba(14, 21, 12, .45);
}
.nl-band-slider .et-pb-controllers a:hover { background-color: rgba(255, 253, 248, .82); }
.nl-band-slider .et-pb-controllers a.et-pb-active-control {
  width: 30px;
  background-color: var(--nl-harvest, #C9962F);
  box-shadow: 0 1px 3px rgba(14, 21, 12, .45);
}

@media (max-width: 767px) {
  .nl-hero-divi .et-pb-controllers a { width: 24px; margin: 13px 6px 13px 0; }
  .nl-hero-divi .et-pb-controllers a.et-pb-active-control { width: 38px; }
}


/* =========================================================================
   SECTION LABELS ON ONE LINE
   The eyebrow sits in a deliberately narrow column -- 106px to 158px, measured
   on the homepage -- and its mono uppercase with wide tracking does not fit.
   "Cfare gjeni ketu" was breaking over FOUR lines next to its own dash, which
   reads as a column of fragments rather than a label.

   A label is one line by definition, so it is allowed to be one and to run
   past its column into the paper beside it. The column is a measuring device
   for the layout, not a box the label has to live inside.
   ========================================================================= */

.nl-eyebrow p,
.nl-eyebrow {
  white-space: nowrap;
  overflow: visible;
}

/* On a phone the columns stack full width, so there is no narrow box to escape
   and a long label would push the page sideways. It wraps there. */
@media (max-width: 767px) {
  .nl-eyebrow p,
  .nl-eyebrow { white-space: normal; }
}


/* =========================================================================
   BAND IMAGES ON MOBILE
   Divi hides .et_pb_slide_image below 767px -- its "show image on mobile"
   default is off. The photograph downloads (checked: naturalWidth 479) and is
   then not displayed, so every band on a phone was an empty cream frame with
   navigation marks under it. Same family as the slide paragraph.
   ========================================================================= */

@media (max-width: 767px) {
  .nl-band-slider .et_pb_slide_image,
  .nl-hero-divi .et_pb_slide_image {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }
  .nl-band-slider .et_pb_slide_image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
  }
}


/* =========================================================================
   THE SEAM, GIVEN ITS RULE
   The ornament was already there -- a wine diamond with two short dashes --
   but only the dashes, so between two sections of the same paper it had
   nothing to sit on and read as a stray mark. It gets the hairline that runs
   the width of the page, drawn as a background on the section's top edge; the
   diamond already carries a paper-coloured background, so it masks the line
   where it crosses and the gap in the middle comes for free.
   ========================================================================= */

/* The rule itself lives in refine.css, drawn on ::before with its own centred
   gap. Painting a SECOND line here as a background-image on the section was
   what put two hairlines of different widths under one diamond. */
.nl-seam::after,
.nl-seam-row::after { color: var(--nl-vine, #7A1F2B); }
.nl-on-ink.nl-seam::after,
.nl-on-ink .nl-seam-row::after { color: var(--nl-harvest, #C9962F); }

@media (max-width: 767px) {
  .nl-seam::before,
  .nl-seam-row::before { width: 86%; }
}


/* =========================================================================
   MOTION, SLOWED AND BROKEN INTO PIECES

   The site already revealed on scroll, but at row level and at 420ms: a whole
   band -- eyebrow, heading, paragraph, link and photograph -- arrived as one
   block, quickly. You asked for slow, smooth motion on the texts, the photos,
   the galleries and the sections, so three things change here.

   First the pace. 420ms stays for hover and panel transitions, where a delay
   would feel like lag; the reveal gets its own token at 1100ms on an expo-out
   curve, which moves most of the distance early and then settles, so it reads
   as slow without feeling like it is being waited on.

   Second the grain. reveal.js now marks each module inside a revealed row as a
   .nl-piece and spaces them 110ms apart, so a band assembles line by line
   instead of appearing whole. The row itself then carries no motion -- a fade
   inside a fade multiplies the two opacities and goes muddy in the middle.

   Third, the things that had no motion at all: gallery cells, which sweep in a
   grid row at a time; photographs, which fade up as they decode; and the seam
   rule, which draws out from its centre at the join.

   Nothing here is hidden until the script has added its class, so a parse
   error or a missing IntersectionObserver leaves a readable page.
   ========================================================================= */

:root {
  --nl-reveal-dur:  1100ms;
  --nl-reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --nl-reveal-rise: 26px;
}

/* the row reveal, slowed and lifted a little further */
.nl-reveal {
  transform: translateY(var(--nl-reveal-rise));
  transition: opacity var(--nl-reveal-dur) var(--nl-reveal-ease),
              transform var(--nl-reveal-dur) var(--nl-reveal-ease);
}

/* a row broken into pieces gives up its own motion to them */
.nl-reveal.nl-has-pieces {
  opacity: 1;
  transform: none;
  transition: none;
}

.nl-piece {
  opacity: 0;
  transform: translateY(var(--nl-reveal-rise));
  transition: opacity var(--nl-reveal-dur) var(--nl-reveal-ease),
              transform var(--nl-reveal-dur) var(--nl-reveal-ease);
  transition-delay: var(--nl-delay, 0ms);
  will-change: opacity, transform;
}
.nl-reveal.is-in .nl-piece {
  opacity: 1;
  transform: none;
}
/* once it has arrived it is static; holding a compositor layer on every module
   of a long page costs memory for nothing */
.nl-reveal.is-in .nl-piece { will-change: auto; }

/* A photograph settles out of a slight enlargement as well as rising, and
   takes longer over it than the text beside it -- the picture is the thing
   being looked at, so it is the thing allowed to take its time.

   Scoped to still pictures. The band sliders are left alone deliberately:
   their slides are absolutely positioned and Divi drives its own transform on
   them, so a second transition here would fight the crossfade. */
.nl-piece.et_pb_image img,
.nl-piece figure img {
  transform: scale(1.035);
  transition: transform calc(var(--nl-reveal-dur) * 1.5) var(--nl-reveal-ease);
  transition-delay: var(--nl-delay, 0ms);
}
.nl-reveal.is-in .nl-piece.et_pb_image img,
.nl-reveal.is-in .nl-piece figure img {
  transform: none;
}
/* the frame has to hold the enlargement in */
.nl-piece.et_pb_image,
.nl-piece figure { overflow: hidden; }


/* ---- galleries ---------------------------------------------------------
   Each cell is keyed to its COLUMN, not its index, so one grid row sweeps
   across in about a third of a second whether the category holds eight
   pictures or forty-eight. */

.nl-gal-cell.nl-cell-in {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity 900ms var(--nl-reveal-ease),
              transform 900ms var(--nl-reveal-ease);
  transition-delay: var(--nl-delay, 0ms);
}
.nl-gal-cell.nl-cell-in.is-in {
  opacity: 1;
  transform: none;
}


/* ---- photographs, as they decode --------------------------------------
   Only pictures still loading when the script runs are marked, so a cached
   image is never hidden in order to be faded back in. */

img.nl-img-load {
  opacity: 0;
  transition: opacity 800ms var(--nl-reveal-ease);
}
img.nl-img-load.is-loaded { opacity: 1; }


/* ---- the seam, drawn ---------------------------------------------------
   The rule runs out from the centre in both directions, which is the way the
   mark would be ruled by hand. transform-origin is the centre already because
   the line is centred with translateX(-50%); that translate has to be carried
   through every state or the rule jumps half its width. */

.nl-seam.nl-draw::before,
.nl-seam-row.nl-draw::before {
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 1500ms var(--nl-reveal-ease);
}
.nl-seam.nl-draw.is-drawn::before,
.nl-seam-row.nl-draw.is-drawn::before {
  transform: translateX(-50%) scaleX(1);
}
/* the diamond follows the rule rather than leading it */
.nl-seam.nl-draw::after,
.nl-seam-row.nl-draw::after {
  opacity: 0;
  transition: opacity 700ms var(--nl-reveal-ease) 650ms;
}
.nl-seam.nl-draw.is-drawn::after,
.nl-seam-row.nl-draw.is-drawn::after { opacity: 1; }


/* ---- the hero, on load -------------------------------------------------
   The staged entrance was .9s with 100ms between lines. Given the slower hand
   everywhere else it was arriving ahead of the rest of the page, so it is
   brought into step. */

.nl-stage > * {
  animation-duration: 1.15s;
  animation-timing-function: var(--nl-reveal-ease);
}
.nl-stage > *:nth-child(1) { animation-delay: .10s; }
.nl-stage > *:nth-child(2) { animation-delay: .26s; }
.nl-stage > *:nth-child(3) { animation-delay: .42s; }
.nl-stage > *:nth-child(4) { animation-delay: .58s; }
.nl-stage > *:nth-child(5) { animation-delay: .74s; }


/* ---- the standing instruction -----------------------------------------
   Everything above is decoration. If the reader has asked the operating
   system for less movement, none of it runs, and every element is simply in
   its finished state. */

@media (prefers-reduced-motion: reduce) {
  .nl-piece,
  .nl-gal-cell.nl-cell-in,
  img.nl-img-load {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .nl-piece.et_pb_image img,
  .nl-piece figure img { transform: none !important; transition: none !important; }

  .nl-seam.nl-draw::before,
  .nl-seam-row.nl-draw::before {
    transform: translateX(-50%) !important;
    transition: none !important;
  }
  .nl-seam.nl-draw::after,
  .nl-seam-row.nl-draw::after { opacity: 1 !important; transition: none !important; }

  .nl-stage > * { animation-duration: .01ms !important; animation-delay: 0s !important; }
}