@charset "UTF-8";
/* ==========================================================================
   Nari Lundra - signature patterns
   Loaded after tokens.css. Everything here is the "Vjelja" (harvest) idea:
   the site reads like the farm's own ledger - a ruled margin threading the
   page, numbered plots, and quantities stated as fact.
   ========================================================================== */

/* --- 1. the ledger rule --------------------------------------------------
   A single hairline runs down the left margin of the whole page, and each
   section hangs a small diamond on it. It is what makes the page feel like
   one continuous record rather than a stack of blocks. Hidden below 1000px,
   where there is no margin to spare.                                        */

@media (min-width: 1000px) {
  .nl-thread { position: relative; }

  .nl-thread::before {
    content: "";
    position: absolute;
    left: calc(var(--nl-gutter) - 1px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--nl-stone);
    pointer-events: none;
  }

  .nl-on-ink.nl-thread::before { background: rgba(255, 253, 248, 0.18); }

  /* the marker sits where the section's eyebrow begins */
  .nl-thread::after {
    content: "";
    position: absolute;
    left: calc(var(--nl-gutter) - 4px);
    top: var(--nl-section);
    width: 7px;
    height: 7px;
    background: var(--nl-vine);
    transform: rotate(45deg);
    pointer-events: none;
  }

  .nl-on-ink.nl-thread::after { background: var(--nl-harvest); }
}

/* --- 2. provenance ticker ------------------------------------------------
   An infinite marquee of what the land actually gives. Two identical tracks
   slide by half the total width, so the seam never shows.                   */

.nl-ticker {
  overflow: hidden;
  border-top: 1px solid var(--nl-stone);
  border-bottom: 1px solid var(--nl-stone);
  padding: 0;
  --nl-ticker-speed: 48s;
}

.nl-ticker-track {
  display: flex;
  width: max-content;
  animation: nl-ticker var(--nl-ticker-speed) linear infinite;
}

.nl-ticker-track > span {
  display: block;
  white-space: nowrap;
  padding: 1.1rem 0;
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nl-ink-soft);
}

.nl-ticker-track b { color: var(--nl-vine); font-weight: 500; }
.nl-ticker-track i { color: var(--nl-harvest); font-style: normal; padding: 0 1.1em; }

@keyframes nl-ticker { to { transform: translateX(-50%); } }

.nl-ticker:hover .nl-ticker-track { animation-play-state: paused; }

/* With motion reduced, a marquee that has to be scrolled by hand is worse
   than no marquee. Let it wrap into a readable block of provenance instead. */
@media (prefers-reduced-motion: reduce) {
  .nl-ticker { overflow: visible; }
  .nl-ticker-track { animation: none; width: auto; flex-wrap: wrap; }
  .nl-ticker-track > span { white-space: normal; line-height: 2; }
  .nl-ticker-track > span[aria-hidden="true"] { display: none; }
}

/* --- 3. plot numerals ----------------------------------------------------
   Each pillar is a numbered plot. The numeral is set huge and allowed to sit
   hard against the edge of its band - it reads as a field marker, not a
   decorative badge.                                                          */

.nl-plot-num p,
.nl-plot-num {
  font-family: var(--nl-mono) !important;
  font-size: clamp(3.5rem, 9vw, 8.5rem) !important;
  line-height: 0.8 !important;
  letter-spacing: -0.04em !important;
  color: var(--nl-stone) !important;
  margin: 0 0 var(--nl-s4) !important;
}

.nl-on-ink .nl-plot-num p { color: rgba(255, 253, 248, 0.22) !important; }

/* --- 4. full-bleed image bands ------------------------------------------
   Images crop to a tall frame and scale very slightly on hover, so the
   photography does the talking without any chrome around it.                */

.nl-band-img .et_pb_image_wrap,
.nl-band-img img {
  display: block;
  width: 100%;
}

.nl-band-img img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 900ms var(--nl-ease);
}

.nl-band-img:hover img { transform: scale(1.03); }

.nl-band-wide img { aspect-ratio: 16 / 10; }
.nl-band-tall img { aspect-ratio: 3 / 4; }

@media (prefers-reduced-motion: reduce) {
  .nl-band-img img { transition: none; }
  .nl-band-img:hover img { transform: none; }
}

/* --- 5. hero -------------------------------------------------------------
   Full viewport, image behind, a very slow drift so the first screen is
   alive without anything moving fast enough to distract.                    */

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

.nl-hero .et_pb_row { position: relative; z-index: 2; }

.nl-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: nl-drift 34s ease-in-out infinite alternate;
}

@keyframes nl-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nl-hero-media img { animation: none; transform: scale(1.04); }
}

/* a scrim so the type always holds, whatever the photograph does */
.nl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two scrims: one weighted to the left where the type sits, one from the
     foot. The building is lit from inside, so a plain bottom-up gradient
     leaves the sub-copy floating on bright glass. */
  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;
}

/* Below ~1024px the copy sits over the middle of the photograph, so the
   left-weighted scrim no longer covers it; fall back to a flat one. */
@media (max-width: 1023px) {
  .nl-hero::after {
    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%);
  }
}

.nl-hero-media {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.nl-hero-media > .et_pb_column {
  padding: 0 !important;
  width: 100% !important;
  height: 100%;
}
.nl-hero-img { position: absolute; inset: 0; margin: 0 !important; }
/* Divi wraps the img in an inline <span>, so width/height percentages are
   dead until it is a block. */
.nl-hero-img .et_pb_image_wrap {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- 6. scroll cue ------------------------------------------------------- */

.nl-cue p {
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nl-cue p::after {
  content: "";
  display: block;
  width: 1px;
  height: 52px;
  margin-top: 14px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: nl-cue 2.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes nl-cue {
  0%, 100% { transform: scaleY(0.45); opacity: 0.5; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-cue p::after { animation: none; transform: scaleY(1); }
}

/* --- 7. stat slab --------------------------------------------------------
   Four facts, set at display size. The figure carries the weight; the label
   underneath is deliberately tiny.                                          */

.nl-stat-num p {
  font-family: var(--nl-display) !important;
  font-size: clamp(2.75rem, 6vw, 5rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 0.35rem !important;
}

.nl-stat-lab p {
  font-family: var(--nl-mono) !important;
  font-size: var(--nl-label) !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  margin: 0 !important;
}

/* --- 8. seasonal panel ---------------------------------------------------
   Rendered by the [nari_season] shortcode: what the farm is actually giving
   this month. Real information, refreshed by the calendar, not decoration.  */

.nl-season { display: grid; gap: var(--nl-s5); }

.nl-season-head {
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nl-harvest);
}

/* Divi's content styles put markers back on any <ul>, so these have to be
   removed explicitly -- including ::marker, which list-style alone misses. */
.nl-season ul.nl-season-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0;
}

.nl-season ul.nl-season-list li { list-style: none; }
.nl-season ul.nl-season-list li::marker { content: ""; }

.nl-season-list li {
  font-family: var(--nl-display);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--nl-cream);
  display: inline-flex;
  align-items: baseline;
}

/* A diamond between items rather than a rule, so a wrapped line does not end
   on a dangling border. */
.nl-season-list li:not(:last-child)::after {
  content: "◆";
  color: var(--nl-harvest);
  font-size: 0.42em;
  padding: 0 0.85em;
  transform: translateY(-0.25em);
}

.nl-season-note {
  font-family: var(--nl-body);
  font-size: var(--nl-text);
  color: rgba(255, 253, 248, 0.72);
  max-width: 52ch;
}

/* --- 9. quiet link list -------------------------------------------------- */

.nl-foot-link .et_pb_link_text,
.nl-nav-link .et_pb_link_text {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 320ms var(--nl-ease);
  padding-bottom: 2px;
}

.nl-foot-link:hover .et_pb_link_text,
.nl-nav-link:hover .et_pb_link_text { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .nl-foot-link .et_pb_link_text,
  .nl-nav-link .et_pb_link_text { transition: none; }
}

/* --- 10. header on scroll ------------------------------------------------ */

.et-l--header {
  position: sticky;
  top: 0;
  z-index: 500;
  transition: box-shadow 300ms var(--nl-ease), background-color 300ms var(--nl-ease);
}

body.nl-scrolled .et-l--header {
  box-shadow: 0 1px 0 var(--nl-stone);
}

/* --- 11. reveal ----------------------------------------------------------
   tokens.css defines .nl-reveal; reveal.js adds .is-in. Stagger children of
   a marked row so a band assembles rather than appearing all at once.       */

.nl-stagger > * { transition-delay: var(--nl-delay, 0ms); }

/* --- 12. compact header on small screens ---------------------------------
   At 594px the stacked header was eating 217px before any content. The logo
   drops to the mark-plus-wordmark at a smaller size and the rows tighten. */

@media (max-width: 767px) {
  .nl-header .et_pb_section,
  .et-l--header .et_pb_section { padding-top: 12px !important; padding-bottom: 12px !important; }

  .et-l--header .nl-logo img { max-width: 150px !important; }

  .et-l--header .nl-nav { row-gap: 6px !important; column-gap: 16px !important; }

  .et-l--header .nl-nav-link .et_pb_link_text { font-size: 12px !important; }

  .et-l--header .nl-head-cta-col { justify-content: flex-start !important; }

  .et-l--header .et_pb_column { margin-bottom: 10px !important; }
  .et-l--header .et_pb_column:last-child { margin-bottom: 0 !important; }
}


/* --- 13. sticky-header offset -------------------------------------------
   The header is sticky, so anchor jumps and scrollIntoView would otherwise
   land content underneath it. */

html { scroll-padding-top: 96px; }

@media (max-width: 767px) { html { scroll-padding-top: 150px; } }

/* --- 14. ledger table ----------------------------------------------------
   Room types, amenities, opening times. Ruled rows with a monospace label on
   the left and the value on the right - the same record-keeping voice as the
   margin rule, and far easier to scan than prose or cards.                  */

.nl-ledger { width: 100%; }

.nl-ledger-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1.05rem 0;
  border-top: 1px solid var(--nl-stone);
}

.nl-ledger-row:last-child { border-bottom: 1px solid var(--nl-stone); }

.nl-on-ink .nl-ledger-row { border-color: rgba(255, 253, 248, 0.18); }

.nl-ledger-key {
  flex: 0 0 auto;
  min-width: 13rem;
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nl-ink-soft);
}

.nl-on-ink .nl-ledger-key { color: var(--nl-harvest); }

.nl-ledger-val {
  flex: 1 1 18rem;
  font-family: var(--nl-body);
  font-size: var(--nl-text);
  color: var(--nl-ink);
}

.nl-on-ink .nl-ledger-val { color: var(--nl-cream); }

.nl-ledger-val em {
  font-style: normal;
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  color: var(--nl-ink-soft);
  padding-left: 0.6em;
}

.nl-on-ink .nl-ledger-val em { color: rgba(255, 253, 248, 0.6); }

@media (max-width: 560px) {
  .nl-ledger-key { min-width: 100%; }
}

/* --- 15. gallery grid ---------------------------------------------------- */

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

.nl-grid-img img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
  transition: opacity 400ms var(--nl-ease), transform 700ms var(--nl-ease);
}

.nl-grid-img:hover img { opacity: 0.88; transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .nl-grid-img img { transition: none; }
  .nl-grid-img:hover img { transform: none; opacity: 1; }
}

/* --- 16. page hero ------------------------------------------------------- */

.nl-page-hero { position: relative; overflow: hidden; }
.nl-page-hero .et_pb_row { position: relative; z-index: 2; }

.nl-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(16, 24, 14, 0.88) 0%, rgba(16, 24, 14, 0.58) 42%,
                            rgba(16, 24, 14, 0.20) 74%, rgba(16, 24, 14, 0.08) 100%),
    linear-gradient(to top, rgba(16, 24, 14, 0.62) 0%, rgba(16, 24, 14, 0.06) 40%,
                            rgba(16, 24, 14, 0.30) 100%);
}

@media (max-width: 1023px) {
  .nl-page-hero::after {
    background: linear-gradient(to top, rgba(16, 24, 14, 0.86) 0%,
                                        rgba(16, 24, 14, 0.52) 58%,
                                        rgba(16, 24, 14, 0.58) 100%);
  }
}

/* --- 17. language-aware nav + switcher ----------------------------------- */

.nl-navlist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 22px;
  row-gap: 8px;
}

.nl-navlist .nl-nav-link,
.nl-footlist .nl-foot-link {
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nl-ink);
}

.nl-footlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.nl-footlist .nl-foot-link {
  font-family: var(--nl-body);
  font-size: var(--nl-text);
  letter-spacing: normal;
  text-transform: none;
  color: var(--nl-cream);
}

.nl-lang { display: inline-flex; align-items: center; gap: 2px; }

.nl-lang-link {
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--nl-ink-soft);
  padding: 4px 7px;
  border-radius: 999px;
  line-height: 1;
  transition: color 180ms var(--nl-ease), background-color 180ms var(--nl-ease);
}

.nl-lang-link.is-current {
  color: var(--nl-cream);
  background: var(--nl-ink);
}

.nl-lang-link:not(.is-current):hover { color: var(--nl-vine); }

@media (prefers-reduced-motion: reduce) { .nl-lang-link { transition: none; } }