/* ==========================================================================
   Nari Lundra - design tokens
   Loaded by mu-plugin nari-brand.php, before the theme stylesheet.

   Direction: "Vjelja" (harvest). Warm paper, deep olive ink, wine as the
   primary accent, gold as the second. Drawn from westernsydneylakes.com.au
   (oversized display serif, full-bleed photography, bare-text CTAs) and
   dirtyvine.com (paper background, no true black, monospace eyebrows,
   pill buttons).
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------
   Self-hosted. Albanian needs U+00EB and U+00E7, both in the latin subset;
   latin-ext is declared second so it only downloads when a page needs it.   */

@font-face {
  font-family: "Nib Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/nibpro-light.woff2") format("woff2");
}
@font-face {
  font-family: "Nib Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nibpro-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Nib Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nibpro-semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-400_700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-ext-400_700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens ------------------------------------------------------------- */

:root {
  /* colour */
  --nl-paper:     #F6F1E6;
  --nl-paper-2:   #EDE5D5;
  --nl-ink:       #24301F;
  --nl-ink-soft:  #5A6650;
  --nl-vine:      #7A1F2B;
  --nl-vine-deep: #5E1721;
  --nl-harvest:   #C9962F;
  --nl-stone:     #DED6C6;
  --nl-cream:     #FFFDF8;

  /* type families */
  --nl-display: "Nib Pro", "Iowan Old Style", Georgia, serif;
  --nl-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nl-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* display scale - tight leading, negative tracking, per the references */
  --nl-display-xl: clamp(3.25rem, 8.5vw, 8rem);
  --nl-display-l:  clamp(2.5rem, 5.5vw, 5rem);
  --nl-display-m:  clamp(1.875rem, 3.6vw, 3.25rem);
  --nl-display-s:  clamp(1.5rem, 2.4vw, 2rem);
  --nl-display-lh: 0.94;
  --nl-display-ls: -0.02em;

  /* body scale */
  --nl-text-lg: clamp(1.125rem, 1.4vw, 1.375rem);
  --nl-text:    1.0625rem;
  --nl-text-sm: 0.9375rem;
  --nl-text-lh: 1.6;

  /* eyebrow / label */
  --nl-label:    0.8125rem;
  --nl-label-ls: 0.08em;

  /* space - 4px base; section rhythm scales with the viewport */
  --nl-s1: 0.25rem;  --nl-s2: 0.5rem;   --nl-s3: 0.75rem;  --nl-s4: 1rem;
  --nl-s5: 1.5rem;   --nl-s6: 2rem;     --nl-s7: 3rem;     --nl-s8: 4rem;
  --nl-s9: 6rem;     --nl-s10: 8rem;
  --nl-section: clamp(4rem, 9vw, 8.5rem);
  --nl-gutter:  clamp(1rem, 4vw, 3.5rem);

  /* measure */
  --nl-measure:       68ch;
  --nl-measure-tight: 46ch;
  --nl-container:     82rem;

  /* motion - one reveal, one easing, nothing else */
  --nl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nl-dur:  420ms;
  --nl-dur-fast: 180ms;

  /* lines */
  --nl-hairline: 1px solid var(--nl-stone);
}

/* --- base ---------------------------------------------------------------
   Divi prints its own `body` and `h1..h6` rules from inline and dynamic
   stylesheets that load AFTER this file, at identical (0,0,1) specificity --
   so later position wins. These selectors are deliberately one step more
   specific (`html body`, `body h1`) so the design system holds regardless of
   load order, without resorting to !important. Divi's per-module CSS is kept
   in agreement through its own global settings rather than fought here.      */

html { -webkit-text-size-adjust: 100%; }

html body {
  background: var(--nl-paper);
  color: var(--nl-ink);
  font-family: var(--nl-body);
  font-size: var(--nl-text);
  font-weight: 400;
  line-height: var(--nl-text-lh);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body :is(h1, h2, h3, h4),
body .nl-display {
  font-family: var(--nl-display);
  font-weight: 400;
  line-height: var(--nl-display-lh);
  letter-spacing: var(--nl-display-ls);
  color: var(--nl-ink);
  text-wrap: balance;
}

body h1, body .nl-display-xl { font-size: var(--nl-display-xl); }
body h2, body .nl-display-l  { font-size: var(--nl-display-l); }
body h3, body .nl-display-m  { font-size: var(--nl-display-m); }
body h4, body .nl-display-s  { font-size: var(--nl-display-s); }

/* Only the measure is set here. Giving `p` a font-size would outrank Divi's
   per-module text styling (Divi targets the module wrapper, so `body p` wins),
   which silently flattened every text module to the base size. Size and colour
   inherit from the container instead. */
body p {
  max-width: var(--nl-measure);
}

body a { color: inherit; }

/* --- Divi reconciliation -------------------------------------------------
   Divi paints several structural wrappers white (and the footer its brand
   blue) by default. These are the only Divi selectors this file touches; the
   rest of Divi is brought into line through its own global settings.        */

body #main-content        { background-color: var(--nl-paper); }
body .et_pb_section       { background-color: transparent; }
body .et_pb_section.nl-on-ink { background-color: var(--nl-ink); }
body #main-footer         { background-color: var(--nl-ink); }
body #et-main-area        { background-color: transparent; }

/* --- components --------------------------------------------------------- */

/* Eyebrow: monospace, uppercase, tracked - the label voice of the site. */
.nl-eyebrow {
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--nl-label-ls);
  text-transform: uppercase;
  color: var(--nl-ink-soft);
  margin: 0 0 var(--nl-s5);
}

/* Pill button with a monospace label - from dirtyvine. */
.nl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nl-s2);
  padding: 0.9em 1.75em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--nl-vine);
  color: var(--nl-cream);
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  font-weight: 500;
  letter-spacing: var(--nl-label-ls);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--nl-dur-fast) var(--nl-ease),
              color var(--nl-dur-fast) var(--nl-ease);
}
.nl-btn:hover, .nl-btn:focus-visible { background: var(--nl-vine-deep); }

.nl-btn--ghost {
  background: transparent;
  color: var(--nl-ink);
  border-color: var(--nl-ink);
}
.nl-btn--ghost:hover, .nl-btn--ghost:focus-visible {
  background: var(--nl-ink);
  color: var(--nl-cream);
}

.nl-btn--light { background: var(--nl-cream); color: var(--nl-ink); }
.nl-btn--light:hover, .nl-btn--light:focus-visible { background: var(--nl-harvest); }

/* Bare-text CTA with a rule beneath - from westernsydneylakes. */
.nl-link {
  display: inline-block;
  padding-bottom: var(--nl-s2);
  border-bottom: 1px solid currentColor;
  font-family: var(--nl-mono);
  font-size: var(--nl-label);
  letter-spacing: var(--nl-label-ls);
  text-transform: uppercase;
  text-decoration: none;
}

/* Inverted sections */
.nl-on-ink {
  background: var(--nl-ink);
  color: var(--nl-cream);
  --nl-hairline: 1px solid rgba(255, 253, 248, 0.18);
}
.nl-on-ink h1, .nl-on-ink h2, .nl-on-ink h3, .nl-on-ink h4 { color: var(--nl-cream); }
.nl-on-ink .nl-eyebrow { color: var(--nl-harvest); }

.nl-rule { border: 0; border-top: var(--nl-hairline); margin: 0; }

/* --- motion ------------------------------------------------------------- */

/* One reveal for the whole site: a short rise and fade, nothing else. */
.nl-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--nl-dur) var(--nl-ease),
              transform var(--nl-dur) var(--nl-ease);
}
.nl-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nl-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- focus -------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--nl-vine);
  outline-offset: 3px;
}
.nl-on-ink :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--nl-harvest);
}

/* --- chrome ------------------------------------------------------------- */

/* The header phone number costs ~60px of an 812px viewport; the same number
   is one tap away in the footer. */
@media (max-width: 767px) {
  /* Divi sets display:flex on the module itself, so this needs the ancestor
     to outrank it -- still no !important. */
  .et-l--header .nl-head-tel { display: none; }
}