/* News — About us. Figma 799:136 (navy band). Rebuilt from absolute-positioned
   signs into a 3-column layout (sign | text | sign) so the signs sit beside the
   copy without drifting over it; stacks on mobile (text on top, signs below). */
.nw-about {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: calc(82.3 * var(--npx)) calc(20 * var(--npx)) calc(44 * var(--npx));   /* top 58 -> 82.3 (first text 65px) */
  /* target of the nav's "Read our story" link; the nav is sticky (~137px tall on
     desktop), so leave room for it or the section lands underneath the bar */
  scroll-margin-top: 150px;
}

/* Text takes its own width in the centre; the sign columns fill the sides and
   align their images inward, so the gap sets how close they sit. */
.nw-about__cols {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 638/2 + 20 = 339px = the Figma distance from centre to each sign's inner edge */
  gap: calc(20 * var(--npx));
}
.nw-about__col { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* the middle column is a BLOCK so its heading/sub/body/button stack vertically
   (the side columns stay flex, to align their sign inward). */
/* Figma's text box is 638px in Domaine Display Narrow; this site substitutes the
   wider Playfair Display (see tokens.css), so the column is sized to keep the
   subheading on one line with that font. */
.nw-about__col--mid { display: block; flex: 0 1 auto; width: calc(760 * var(--npx)); max-width: 100%; }
.nw-about__col--l { justify-content: flex-end; }
.nw-about__col--r { justify-content: flex-start; }

.nw-about__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(47.958 * var(--npx));
}
.nw-about__sub {
  max-width: calc(760 * var(--npx));   /* wider than Figma's 638 to fit the Playfair stand-in on one line */
  margin: calc(22 * var(--npx)) auto 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(24.042 * var(--npx));
  line-height: 1.25;
}
.nw-about__body {
  max-width: calc(559 * var(--npx));
  margin: calc(16 * var(--npx)) auto 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: calc(12.661 * var(--npx));
  line-height: 1.5;
}
.nw-about__body p { margin: 0 0 calc(10 * var(--npx)); }
.nw-about__body a { color: inherit; text-decoration: underline; }

/* Collapsed (Hide clicked): show only the title + subheading; drop the body
   copy and the two street signs. The button stays, now "Read our story ▼". */
.nw-about.is-collapsed .nw-about__body,
.nw-about.is-collapsed .nw-about__col--l,
.nw-about.is-collapsed .nw-about__col--r { display: none; }
.nw-about__hide {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--npx));
  margin-top: calc(18 * var(--npx));
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-display);   /* Playfair Display — the site's Domaine Display Narrow stand-in */
  font-weight: 700;
  font-size: calc(17.432 * var(--npx));
}
.nw-about__hide-arrow {
  width: calc(13 * var(--npx));
  height: auto;
  fill: currentColor;
  transition: transform 0.15s ease;
}
/* Arrow points up when open; flips to point down when collapsed. */
.nw-about.is-collapsed .nw-about__hide-arrow { transform: rotate(180deg); }

.nw-about__img { object-fit: cover; border-radius: calc(6 * var(--npx)); max-width: 100%; }
.nw-about__img--l { width: calc(181 * var(--npx)); height: calc(130 * var(--npx)); }
.nw-about__img--r { width: calc(198 * var(--npx)); height: calc(126 * var(--npx)); }
/* the in-paragraph copies only exist for the mobile float layout */
.nw-about__img--ml,
.nw-about__img--mr { display: none; }

/* Mobile: the signs move INTO the copy — Frith Street floats left in the first
   paragraph, Maddox Street floats right in the second, and the text wraps around
   them. Both are ~30% smaller than the old stacked-below versions. */
@media (max-width: 600px) {
  .nw-about { padding: 32px 16px 30px; scroll-margin-top: 100px; }   /* shorter nav here */
  .nw-about__cols { flex-wrap: wrap; gap: 16px; }
  .nw-about__col--mid { order: 1; flex-basis: 100%; width: 100%; }
  .nw-about__col--l,
  .nw-about__col--r { display: none; }      /* the side columns are the desktop layout */
  .nw-about__title { font-size: 30px; }
  .nw-about__sub { font-size: 18px; max-width: 90%; margin-top: 14px; }
  .nw-about__body { font-size: 14px; max-width: 92%; margin-top: 12px; text-align: left; }
  /* overflow keeps each float inside its own paragraph; the --npx margin collapses
     to ~2px on a phone, so space the paragraphs in real px */
  .nw-about__body p { overflow: hidden; margin-bottom: 18px; }
  .nw-about__body p:last-child { margin-bottom: 0; }
  /* Hide/expand toggle IS shown on mobile (it now collapses the section). Its
     base size is 17.432·--npx, which is ~3px on a phone — set it in real px,
     matching the mobile subheading (18px) so it reads as a proper CTA. */
  .nw-about__hide { display: inline-flex; margin-top: 20px; font-size: 14px; gap: 7px; }
  .nw-about__hide-arrow { width: 10px; }

  .nw-about__img--ml,
  .nw-about__img--mr { display: block; height: auto; border-radius: 4px; }
  .nw-about__img--ml { float: left;  width: 105px; margin: 2px 12px 6px 0; }
  /* Dropped two lines (2 x 14px x 1.5) into the paragraph. margin-top alone isn't
     enough: a float's MARGIN box reserves the space, so those two lines would still
     be shortened. shape-outside cuts the same 42px off the wrap shape, letting the
     first two lines run the full width before the copy wraps around the sign. */
  .nw-about__img--mr {
    float: right; width: 112px;
    margin: 42px 0 6px 12px;
    shape-outside: inset(42px 0 0 0);
  }
}