/* ============================================================
   NR THEME — TYPE, COLOUR & LINKS
   Foundation stylesheet for nr-theme.
   Extracted from the live Quick CSS, cleaned for a standalone theme:
     - Enfold/Avia selectors removed (#top, .av-*, #socket, .entry-*)
     - !important stripped throughout (no parent theme to override now)
     - off-system hardcoded greys (#1a1a1a #555 #888 #d8d4cc) mapped to
       tokens; each mapping marked  "was #xxxxxx" so it can be reverted
   Layout, grids, spacing-rhythm and component CSS are deliberately NOT here.
   ============================================================ */


/* ----------------------------------------------------------
   TOKENS
   ---------------------------------------------------------- */

:root {
  --font-display:      'Fraunces', Georgia, serif;
  --font-body:         'DM Sans', system-ui, sans-serif;
  --font-mono:         ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:           0.694rem;
  --text-sm:           0.833rem;
  --text-base:         1rem;
  --text-md:           1.2rem;
  --text-lg:           1.44rem;
  --text-xl:           1.728rem;
  --text-2xl:          2.074rem;
  --text-3xl:          2.488rem;
  --text-4xl:          2.986rem;
  --text-5xl:          3.583rem;
  --text-6xl:          4.3rem;

  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-bold:       700;

  --leading-none:      1.0;
  --leading-tight:     1.05;
  --leading-snug:      1.25;
  --leading-normal:    1.5;
  --leading-relaxed:   1.7;

  --tracking-tight:    -0.025em;
  --tracking-snug:     -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;

  /* Light role */
  --colour-ink:        #0E0D0B;
  --colour-ink-2:      #3D3C38;
  --colour-mid:        #6A6862;   /* secondary text on LIGHT (paper / #ECEAE4): ~5.0:1 / ~4.7:1 — passes WCAG AA 4.5:1 (was #8A8780 @ 3.23:1, failed) */
  --colour-mid-on-dark: #8A8780;  /* secondary text on DARK (ink) sections: ~5.1:1 — the old mid value, which passes on dark */
  --colour-rule:       #D9D6CF;
  --colour-rule-light: #ECEAE4;
  --colour-paper:      #F5F3EE;

  /* Dark role (footer / inverted sections) — from Enfold footer + socket panels */
  --colour-ink-deep:   #080807;   /* socket background, deepest */
  --colour-ink-3:      #5C5B57;   /* muted/secondary text on dark */
  --colour-rule-dark:  #1C1B18;   /* hairline on dark (footer) */
  --colour-rule-dark-2:#2A2926;   /* hairline on dark (socket) */

  /* Layout */
  --content-max:       1240px;    /* shared content column width — about, contact, footer */
}


/* ----------------------------------------------------------
   GLOBAL DEFAULTS
   ---------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--colour-ink-2);
  background-color: var(--colour-paper);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--colour-ink-2);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: var(--tracking-snug);
  color: var(--colour-ink);
  text-transform: none;
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); letter-spacing: 0; }
h5 { font-size: var(--text-md); letter-spacing: 0; }
h6 { font-size: var(--text-base); letter-spacing: 0; }


/* ----------------------------------------------------------
   TYPE UTILITY CLASSES
   ---------------------------------------------------------- */

.nr-display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 4.3rem);
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "opsz" 144, "wght" 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--colour-ink);
  max-width: 16ch;
}

.nr-display-italic {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 4.3rem);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--colour-ink);
  max-width: 16ch;
}

.nr-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 300;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--colour-ink);
}

.nr-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "opsz" 72, "wght" 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--colour-ink);
  margin: 0;
}

.nr-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--colour-ink);
}

.nr-h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--colour-ink);
}

.nr-h5 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--colour-ink);
}

.nr-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  color: var(--colour-ink-2);
}

.nr-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  color: var(--colour-ink-2);
}

.nr-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--colour-mid);
}

.nr-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-mid);
}

/* Measure caps on text blocks */
p.nr-display,
p.nr-display-italic { max-width: 14ch; }
p.nr-body-lg        { max-width: 54ch; }
p.nr-body           { max-width: 65ch; }
p.nr-body-sm        { max-width: 36ch; }

/* Mobile: the lead/body-lg size (1.2rem) reads too large on a phone — drop it to
   the regular body size so long passages stay comfortable. */
@media (max-width: 820px) {
  .nr-body-lg { font-size: var(--text-base); line-height: var(--leading-relaxed); }
}


/* ----------------------------------------------------------
   SECTION TAG  (e.g. "01 / Brand & Brief")
   ---------------------------------------------------------- */

.nr-section-tag {
  display: block;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colour-mid);            /* was #888 */
  margin-bottom: 32px;
}


/* ----------------------------------------------------------
   DESIGN DECISIONS  (type + colour only; grid layout lives elsewhere)
   NOTE: original used a cooler grey palette (#1a1a1a / #555 / #888 /
   #d8d4cc). Mapped to tokens for one coherent palette. Revert the marked
   values if the cooler greys were deliberate.
   ---------------------------------------------------------- */

.nr-decisions-heading {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 24px 0;
  color: var(--colour-ink);            /* was #1a1a1a */
}

.nr-decisions-intro {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--colour-ink-2);          /* was #555 */
  margin: 0;
  max-width: 640px;
}

.nr-decision-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--colour-mid);            /* was #888 */
  line-height: 1.3;
  align-self: baseline;
}

.nr-decision-title {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--colour-ink);            /* was #1a1a1a */
}

.nr-decision-desc {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--colour-ink-2);          /* was #555 */
  margin: 0;
  max-width: 620px;
}


/* ----------------------------------------------------------
   CASE META  (values only; grid layout lives elsewhere)
   ---------------------------------------------------------- */

.nr-case-meta__value {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--colour-ink);
}

.nr-case-meta__value a {
  color: var(--colour-ink);
  text-decoration: none;
  border-bottom: 0.5px solid var(--colour-rule);
}


/* ----------------------------------------------------------
   READ NEXT
   ---------------------------------------------------------- */

.nr-read-next {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.986rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "wght" 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--colour-ink);
  margin: 0 0 1.5rem 0;
}


/* ----------------------------------------------------------
   COLOUR MODIFIERS
   ---------------------------------------------------------- */

.nr-ink   { color: var(--colour-ink); }
.nr-mid   { color: var(--colour-mid); }
.nr-paper { color: var(--colour-paper); }


/* ----------------------------------------------------------
   COLOUR ROLES
   A section's colour scheme. Apply the role class to a section
   wrapper; descendants inherit the right ink/paper relationships.
   Light is the default (body), so most sections need no class.
   Use .nr-section--dark for the footer and any inverted case-study
   sections (the partials' "alternate_color" sections map to this).
   ---------------------------------------------------------- */

/* Dark / inverted section */
.nr-section--dark {
  background-color: var(--colour-ink);
  color: var(--colour-mid-on-dark);         /* default body text on dark */
}

.nr-section--dark.nr-section--socket {
  background-color: var(--colour-ink-deep);
}

.nr-section--dark h1,
.nr-section--dark h2,
.nr-section--dark h3,
.nr-section--dark h4,
.nr-section--dark h5,
.nr-section--dark h6,
.nr-section--dark .nr-display,
.nr-section--dark .nr-h1,
.nr-section--dark .nr-h2,
.nr-section--dark .nr-h3,
.nr-section--dark .nr-read-next {
  color: var(--colour-paper);               /* headings on dark */
}

.nr-section--dark p,
.nr-section--dark .nr-body,
.nr-section--dark .nr-body-lg {
  color: var(--colour-mid-on-dark);         /* body on dark */
}

.nr-section--dark .nr-body-sm,
.nr-section--dark .nr-label,
.nr-section--dark .nr-section-tag {
  color: var(--colour-mid-on-dark);         /* muted/secondary on dark, AA-compliant (5.42:1) */
}

.nr-section--dark hr,
.nr-section--dark .nr-rule {
  border-color: var(--colour-rule-dark);
}

/* Inline link colour on dark: keep it readable, underline still grows */
.nr-section--dark .nr-link {
  color: var(--colour-paper);
}


/* ----------------------------------------------------------
   ANIMATED INLINE LINK
   Underline grows from left on hover. Inherits colour.
   ---------------------------------------------------------- */

.nr-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.nr-link:hover,
.nr-link:focus-visible {
  background-size: 100% 1px;
}

/* Same behaviour when .nr-link sits inside a heading */
h1 .nr-link, h2 .nr-link, h3 .nr-link,
h4 .nr-link, h5 .nr-link, h6 .nr-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

h1 .nr-link:hover, h2 .nr-link:hover, h3 .nr-link:hover,
h4 .nr-link:hover, h5 .nr-link:hover, h6 .nr-link:hover,
h1 .nr-link:focus-visible, h2 .nr-link:focus-visible, h3 .nr-link:focus-visible,
h4 .nr-link:focus-visible, h5 .nr-link:focus-visible, h6 .nr-link:focus-visible {
  background-size: 100% 1px;
}