/* ============================================================
   NR THEME — ABOUT PAGE
   Single-column editable prose, matching the live /about. The design is driven
   by the .nr- utility classes the author places in the editor:
     · eyebrow      — .nr-label (small, right-aligned)
     · opener       — .nr-display paragraph (full-width display statement)
     · body         — plain paragraphs (read at body-lg here)
     · closing      — .nr-display <h2> (reduced display)
     · closing CTA  — .nr-about__cta paragraph holding a "Let's talk →" link
   Element defaults use :where() (zero specificity) so the .nr- classes always
   win (a plain `.nr-about__inner p` rule would otherwise override them).
   Light/paper role. No the_title() — content drives the headline.
   ============================================================ */

.nr-about__inner {
  max-width: var(--content-max, 1240px);
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 9rem) var(--gutter, clamp(20px, 4vw, 64px)) clamp(5rem, 12vh, 9rem);
}

/* Element defaults at ZERO specificity — any .nr- class on the element wins.
   Unclassed paragraphs read at body-lg (1.2rem), matching the live body. */
:where(.nr-about__inner) p {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: var(--text-md, 1.2rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--colour-ink-2);
  margin: 0 0 1.5rem;
}
:where(.nr-about__inner) p em { font-style: italic; }

/* Two-column body — wrap the body paragraphs in a Group block with the CSS class
   `nr-about__cols`; the paragraphs auto-flow (and may break) across the two
   columns, like the live. */
.nr-about__cols {
  columns: 2;
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
  font-size: 1rem;          /* .nr-body scale — the body copy is one paragraph carrying the columns class */
  line-height: 1.7;
}

/* Mobile — two columns leaves each one too narrow to read comfortably, so the
   copy runs as a single column. */
@media (max-width: 700px) {
  .nr-about__cols { columns: 1; }
}

/* Thin rules above/below the two-column block (WordPress Separator blocks) */
.nr-about__inner hr,
.nr-about__inner .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--colour-rule);
  width: 100%;
  max-width: none;
  height: 0;
  margin: clamp(2.5rem, 5vh, 4rem) 0;
  opacity: 1;
}

/* Eyebrow — the .nr-label heading: small (from nr-type) + left-aligned */
.nr-about__inner .nr-label {
  text-align: left;
  margin: 0 0 1.5rem;
}

/* Display statements span the column (override nr-type's 16ch cap) */
.nr-about__inner .nr-display,
.nr-about__inner .nr-display-italic {
  max-width: none;
  margin: 0 0 2rem;
}

/* Closing statement — <h2 class="nr-display"> at a reduced display size,
   like the live (~2.488rem) so it reads as a section, not a hero */
.nr-about__inner h2.nr-display {
  font-size: clamp(1.6rem, 3.2vw, 2.488rem);
  line-height: 1.2;
  margin: 3rem 0 1.25rem;
}

/* Links in prose — .nr-link growing underline (covers the closing "Let's talk →") */
.nr-about__inner a {
  color: inherit;
  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);
}
.nr-about__inner a:hover,
.nr-about__inner a:focus-visible { background-size: 100% 1px; }

/* Closing CTA — quiet, inline, in the display font like the live (not a solid band) */
.nr-about__inner .nr-about__cta {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-top: 3rem;
}

@media (prefers-reduced-motion: reduce) {
  .nr-about__inner a { transition: none; }
}

/* ------------------------------------------------------------
   SCROLL-REVEAL (fade + slight rise) — shared with Contact via nr-reveal.js.
   .nr-reveal-init is added ONLY by the script, so with JS off the content is fully
   visible and stays in the DOM (no SEO impact). transform + opacity only (no layout
   shift, no horizontal scroll from translateY). This block is enqueued only on the
   About template, so the classes never affect other pages.
   ------------------------------------------------------------ */
.nr-reveal-init {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.nr-reveal-init.is-in {
  opacity: 1;
  transform: none;
}
/* Belt and braces: if reduced motion is set, never hide or animate. */
@media (prefers-reduced-motion: reduce) {
  .nr-reveal-init { opacity: 1; transform: none; transition: none; }
}