@charset "UTF-8";
/* ==========================================================================
   Nari Lundra - refinement layer
   Loaded after tokens.css and patterns.css.

   The first build laid sections out as full-width 50/50 blocks separated by
   ~300px of empty padding, with no framing, rules, texture or editorial
   detail. It read as markup rather than as a designed page. This layer adds
   the things that make print look expensive: a tighter vertical rhythm, an
   asymmetric grid with labels hanging in the margin, matted and captioned
   photography, ruled section marks, drop caps, pull quotes and a paper grain.
   ========================================================================== */

/* --- 1. vertical rhythm --------------------------------------------------
   Halved. Space should separate ideas, not strand them.                     */

:root {
  --nl-section: clamp(3rem, 5.2vw, 5.5rem);
  --nl-gutter:  clamp(1.25rem, 5vw, 5rem);
  --nl-rule:    rgba(36, 48, 31, 0.14);
  --nl-rule-ink: rgba(255, 253, 248, 0.17);
}

body .et_pb_section { padding-top: var(--nl-section); padding-bottom: var(--nl-section); }

/* Sections that sit against each other share one seam rather than two. */
body .et_pb_section + .et_pb_section:not(.nl-page-hero):not(.nl-hero) { padding-top: 0; }
body .nl-band-section { padding-top: var(--nl-section); }

/* --- 2. paper ------------------------------------------------------------
   A barely-there grain. On a flat hex the page reads as a screen; with a
   little tooth it reads as stock.                                           */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

#page-container { position: relative; z-index: 1; }

/* --- 3. section marks ----------------------------------------------------
   The eyebrow becomes a ruled mark: a short rule, the label, then a hairline
   running to the edge of the column. It gives every section a datum line.   */

body .nl-eyebrow,
body .nl-eyebrow p {
  display: flex;
  align-items: center;
  gap: 0.85em;
  font-size: 0.75rem !important;
  letter-spacing: 0.17em !important;
  margin-bottom: 1.5rem !important;
}

body .nl-eyebrow p::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: var(--nl-vine);
}

body .nl-eyebrow p::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--nl-rule);
}

.nl-on-ink .nl-eyebrow p::before { background: var(--nl-harvest); }
.nl-on-ink .nl-eyebrow p::after  { background: var(--nl-rule-ink); }

/* --- 4. matted photography ----------------------------------------------
   A thin cream mat and a hairline, the way a framed print sits on a wall.
   This single change does more than any other to lift the photography off
   the page.                                                                 */

.nl-band-img,
.nl-grid-img {
  background: var(--nl-cream);
  padding: 10px;
  border: 1px solid var(--nl-rule);
  box-shadow: 0 1px 0 rgba(36, 48, 31, 0.04);
}

.nl-on-ink .nl-band-img,
.nl-on-ink .nl-grid-img {
  background: rgba(255, 253, 248, 0.05);
  border-color: var(--nl-rule-ink);
}

.nl-band-img img, .nl-grid-img img { display: block; }

@media (max-width: 767px) {
  .nl-band-img, .nl-grid-img { padding: 6px; }
}

/* A figure caption, set in the label voice under a hairline. */
.nl-caption p {
  font-family: var(--nl-mono) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
  color: var(--nl-ink-soft) !important;
  margin: 0.9rem 0 0 !important;
  padding-top: 0.7rem;
  border-top: 1px solid var(--nl-rule);
  max-width: none !important;
}

.nl-on-ink .nl-caption p {
  color: rgba(255, 253, 248, 0.55) !important;
  border-top-color: var(--nl-rule-ink);
}

/* --- 5. the lead paragraph ----------------------------------------------- */

.nl-lead p:first-of-type::first-letter {
  float: left;
  font-family: var(--nl-display);
  font-size: 4.1em;
  line-height: 0.74;
  margin: 0.05em 0.1em 0 0;
  color: var(--nl-vine);
}

.nl-on-ink .nl-lead p:first-of-type::first-letter { color: var(--nl-harvest); }

.nl-lead p {
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem) !important;
  line-height: 1.65 !important;
  max-width: 58ch !important;
}

/* --- 6. pull quote -------------------------------------------------------
   Hanging quotation mark, set in the display face, with the attribution on a
   ruled line beneath.                                                       */

.nl-pull { position: relative; }

.nl-pull p {
  font-family: var(--nl-display) !important;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-indent: -0.46em;
  max-width: 24ch !important;
}

.nl-pull-by p {
  font-family: var(--nl-mono) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  padding-top: 1rem;
  border-top: 1px solid var(--nl-rule-ink);
  max-width: 34ch !important;
}

/* --- 7. headings ---------------------------------------------------------
   Slightly smaller and tighter than the first pass. Oversized type with
   nothing around it reads as a template; measured type with rules around it
   reads as a page.                                                          */

:root {
  --nl-display-xl: clamp(2.75rem, 6.4vw, 6rem);
  --nl-display-l:  clamp(2.125rem, 4.1vw, 3.75rem);
  --nl-display-m:  clamp(1.625rem, 2.7vw, 2.5rem);
  --nl-display-s:  clamp(1.25rem, 1.8vw, 1.625rem);
}

body :is(h1, h2, h3) { text-wrap: balance; }

/* --- 8. ledger, refined -------------------------------------------------- */

.nl-ledger-row {
  padding: 1.15rem 0;
  border-top: 1px solid var(--nl-rule);
  align-items: baseline;
}
.nl-ledger-row:last-child { border-bottom: 1px solid var(--nl-rule); }
.nl-on-ink .nl-ledger-row { border-color: var(--nl-rule-ink); }

.nl-ledger-key {
  min-width: 11.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
}

.nl-ledger-val { font-size: 1rem; line-height: 1.55; }

.nl-ledger-val a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* --- 9. stats ------------------------------------------------------------
   Ruled cells rather than four numbers floating on a slab.                  */

.nl-stat-num p {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem) !important;
  line-height: 1 !important;
}

.nl-stat-lab p {
  font-size: 0.6875rem !important;
  letter-spacing: 0.15em !important;
  padding-top: 0.75rem;
  margin-top: 0.75rem !important;
  border-top: 1px solid var(--nl-rule-ink);
}

/* --- 10. plot numerals ---------------------------------------------------
   Smaller, set on the baseline of the heading rather than looming over it,
   and tinted so they sit behind the text instead of competing with it.      */

.nl-plot-num p {
  font-size: clamp(1.75rem, 2.4vw, 2.5rem) !important;
  letter-spacing: 0.02em !important;
  color: var(--nl-vine) !important;
  opacity: 0.55;
  margin-bottom: 0.9rem !important;
}

.nl-on-ink .nl-plot-num p { color: var(--nl-harvest) !important; opacity: 0.7; }

/* --- 11. hero ------------------------------------------------------------
   An inset hairline frame, the way an estate or a grand hotel sets its
   plate. Costs nothing and changes the register completely.                 */

.nl-hero, .nl-page-hero { position: relative; }

.nl-hero > .et_pb_row:last-of-type::after,
.nl-page-hero > .et_pb_row:last-of-type::after { content: none; }

.nl-hero-frame {
  position: absolute;
  inset: clamp(14px, 1.6vw, 26px);
  border: 1px solid rgba(255, 253, 248, 0.26);
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 767px) { .nl-hero-frame { inset: 10px; } }

.nl-hero h1, .nl-page-hero h1 { text-wrap: balance; }

/* --- 12. buttons ---------------------------------------------------------
   Squarer, quieter, with a hairline. Pills read as app UI; a fine rectangle
   reads as stationery.                                                      */

body .et_pb_button {
  border-radius: 2px !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.16em !important;
  padding: 1.15em 2.4em !important;
}

/* --- 13. links ----------------------------------------------------------- */

body .nl-foot-link .et_pb_link_text,
body .nl-navlist .nl-nav-link .et_pb_link_text { background-size: 0% 1px; }

.nl-more .et_pb_link_text,
a.nl-more {
  font-family: var(--nl-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* --- 14. header ---------------------------------------------------------- */

.et-l--header { border-bottom: 1px solid var(--nl-rule); }
body.nl-scrolled .et-l--header { box-shadow: 0 6px 24px -18px rgba(36, 48, 31, 0.5); }

.et-l--header .nl-navlist .nl-nav-link {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
}

/* --- 15. footer ---------------------------------------------------------- */

.nl-footer .et_pb_row:last-of-type { border-top: 1px solid var(--nl-rule-ink); }

/* --- 16. section seam ----------------------------------------------------
   Where two paper sections meet, a hairline with a small diamond centred on
   it - the closing ornament of a chapter.                                   */

.nl-seam,
.nl-seam-row {
  position: relative;
  --nl-seam-rule: var(--nl-rule, #DED6C6);
}
.nl-on-ink.nl-seam,
.nl-on-ink .nl-seam-row { --nl-seam-rule: rgba(255, 253, 248, .20); }

/* One hairline, carrying its own gap at the centre.

   It used to be a solid rule with the diamond masking it behind a
   paper-coloured pad. That pad is only ever the right colour on --nl-paper, so
   on the toned band sections it showed as a lighter box around the mark, and
   two further rules were drawn over the top of it: a second full-width line
   and a pair of box-shadow stubs. The gap is cut into the gradient instead, so
   the mark needs no background at all and sits correctly on every ground.

   Centred at a fixed measure rather than inset from the viewport gutter, so a
   seam between two ROWS lines up with a seam between two SECTIONS. */
.nl-seam::before,
.nl-seam-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 86%);
  height: 1px;
  background: linear-gradient(
    to right,
    var(--nl-seam-rule) 0,
    var(--nl-seam-rule) calc(50% - 22px),
    transparent         calc(50% - 22px),
    transparent         calc(50% + 22px),
    var(--nl-seam-rule) calc(50% + 22px),
    var(--nl-seam-rule) 100%);
}

.nl-seam::after,
.nl-seam-row::after {
  content: "\25C6";
  position: absolute;
  top: -0.3em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  line-height: 1;
  color: var(--nl-vine);
  background: none;
  padding: 0;
}

/* --- 17. honest measure --------------------------------------------------- */

body .et_pb_text p { max-width: 62ch; }
body .nl-wide p    { max-width: none; }

/* --- 18. hero stacking ---------------------------------------------------
   patterns.css sets `.nl-hero .et_pb_row { z-index: 2 }` for the copy, which
   also caught the media row - putting the photograph above its own scrim and
   leaving the headline unprotected. Order it explicitly: image, scrim, type. */

.nl-hero  .et_pb_row.nl-hero-media,
.nl-page-hero .et_pb_row.nl-hero-media { z-index: 0 !important; }

.nl-hero::after, .nl-page-hero::after { z-index: 1; }

.nl-hero  > .et_pb_row:not(.nl-hero-media),
.nl-page-hero > .et_pb_row:not(.nl-hero-media) { position: relative; z-index: 2; }

.nl-hero-frame { z-index: 3; }

/* --- 19. hero legibility -------------------------------------------------
   The building is lit from inside, so the sub-copy sits over bright glass.
   Deepen the left-weighted scrim where the type actually is.               */

.nl-hero::after, .nl-page-hero::after {
  background:
    linear-gradient(98deg, rgba(14, 21, 12, 0.94) 0%, rgba(14, 21, 12, 0.80) 30%,
                           rgba(14, 21, 12, 0.42) 58%, rgba(14, 21, 12, 0.10) 85%,
                           rgba(14, 21, 12, 0.04) 100%),
    linear-gradient(to top, rgba(14, 21, 12, 0.60) 0%, rgba(14, 21, 12, 0.08) 42%,
                            rgba(14, 21, 12, 0.34) 100%) !important;
}

@media (max-width: 1023px) {
  .nl-hero::after, .nl-page-hero::after {
    /* Light enough that the photograph still reads; dark enough to hold
       cream type over bright glass. */
    background: linear-gradient(to top, rgba(14, 21, 12, 0.80) 0%,
                                        rgba(14, 21, 12, 0.34) 48%,
                                        rgba(14, 21, 12, 0.46) 100%) !important;
  }
}

/* --- 20. mobile header ---------------------------------------------------
   The shortcode nav wraps differently to the old link modules and pushed the
   header back to 319px of an 812px viewport. Tighten it to about a quarter.  */

@media (max-width: 767px) {
  .et-l--header .et_pb_section { padding-top: 10px !important; padding-bottom: 10px !important; }
  .et-l--header .nl-logo img   { max-width: 132px !important; }
  .et-l--header .et_pb_column  { margin-bottom: 8px !important; }
  .et-l--header .et_pb_column:last-child { margin-bottom: 0 !important; }

  .et-l--header .nl-navlist { column-gap: 14px; row-gap: 4px; justify-content: flex-start; }
  .et-l--header .nl-navlist .nl-nav-link { font-size: 0.625rem; letter-spacing: 0.12em; }

  .et-l--header .et_pb_button { padding: 0.9em 1.5em !important; font-size: 0.625rem !important; }
  .nl-lang-link { padding: 3px 6px; font-size: 0.625rem; }
}

/* Keep a stat figure on one line so the row does not go ragged. */
.nl-stat-num p { text-wrap: nowrap; }
@media (max-width: 420px) { .nl-stat-num p { text-wrap: wrap; } }