/* ============================================================================
   THE BRAND DESIGN SUB-PAGE
   ----------------------------------------------------------------------------
   One layout, four brand grounds. Amanda: "In their respective brand design
   sub-page, please use their brand colors as the background accordingly." So
   the ground and the ink arrive per page as --pf-brand-bg and --pf-brand-ink on
   the panel, and nothing else in this file is project-specific.

   THE IMAGE COLUMN CAPS AT 1400px, which is Amanda's requirement and also the
   exact native width of every identity_final_*.webp. Above the cap the images
   would only upscale.

   THREE of the type steps below MATCH css/pf-chrome.css's --pf-fs-* scale --
   same values, hand-copied: .pf-brand__blocktitle is --pf-fs-h5,
   .pf-brand__subname is --pf-fs-h6, .pf-brand__blockdesc is --pf-fs-body. The
   other two, .pf-brand__title (32->48) and .pf-brand__tagline (17->24), are
   sketch-derived and match no step in that scale -- they are not a fourth and
   fifth "hidden" match, just this page's own sizes. Either way this file has
   no load-order dependency on pf-chrome.css and references none of its custom
   properties. It could not: pf-chrome.css declares --pf-fs-* on
   `.pf-dock, .pf-outro`, never :root, so they are not even in scope on
   `.pf-brand`. The three literals that do match are deliberate, not a
   shortcut a later pass should "deduplicate" into var(--pf-fs-*) -- doing
   that would compute to an unset custom property on this class.
   ========================================================================== */

.pf-brand,
.pf-brand *,
.pf-brand *::before,
.pf-brand *::after {
  box-sizing: border-box;
}

.pf-brand {
  /* #111111 here is a deliberately neutral, "obviously unset" ground -- this
     codebase's own ink colour, not any project's brand colour. Identity's
     purple used to be hard-coded as this default, which meant a page that
     shipped without its own inline --pf-brand-bg would silently render on
     Identity's ground instead of failing visibly. Aspire and Kayn have not
     had their brand grounds chosen yet, so this file must not guess for them.
     EVERY PAGE MUST SET ITS OWN --pf-brand-bg INLINE on the .pf-brand panel,
     the way project_identity/index.html already does for #140335. */
  --pf-brand-bg: #111111;
  --pf-brand-ink: #FFFFFF;
  --pf-brand-ink-soft: rgba(255, 255, 255, 0.72);
  --pf-brand-max: 1400px;
  --pf-brand-gutter: clamp(20px, 5.2vw, 100px);

  background: var(--pf-brand-bg);
  color: var(--pf-brand-ink);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: clamp(80px, 9vw, 160px);
}

.pf-brand__wrap {
  width: 100%;
  max-width: calc(var(--pf-brand-max) + var(--pf-brand-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--pf-brand-gutter);
}

/* ---- the masthead ---------------------------------------------------------
   Sketch "New project nav - Brand 1.png": title and subtitle centred over the
   image column, title ~48px, subtitle ~24px. */
.pf-brand__head {
  padding-top: clamp(40px, 4.4vw, 68px);
  padding-bottom: clamp(36px, 4vw, 62px);
  text-align: center;
}
.pf-brand__title {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem);   /* 32 -> 48 */
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--pf-brand-ink);
}
.pf-brand__tagline {
  margin: clamp(10px, 1vw, 16px) 0 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.5rem);  /* 17 -> 24 */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--pf-brand-ink-soft);
}

/* ---- a titled block -------------------------------------------------------
   Sketches "Brand 2" and "Brand 3": the section title sits left, its
   description right, on one row above the images. Measured at the 1580px
   export, the title column runs ~264px against ~576px of description, which is
   the 1fr / 2fr below. It stacks under 900px. */
.pf-brand__block { padding-top: clamp(48px, 5.6vw, 92px); }

.pf-brand__blockhead {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
.pf-brand__blocktitle {
  margin: 0;
  font-size: clamp(1.5rem, 1.31rem + 0.6vw, 2rem);   /* 24 -> 32 */
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--pf-brand-ink);
}
.pf-brand__blockdesc {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--pf-brand-ink-soft);
}

/* ---- the images -----------------------------------------------------------
   width/height are on every <img> so the column reserves its space before the
   files land: the panel is display:none until its tab is picked, and without
   intrinsic sizing the whole sub-page would reflow as it opens. */
.pf-brand__stack {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
}
.pf-brand__stack img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--pf-brand-max);
  margin-inline: auto;
}

/* Amanda: "remove the gaps between the main showcase images. As for social and
   the sub-brands keep as they are." The six primary boards are one continuous
   reveal and read as a seam when separated; the social and sub-brand groups are
   discrete artefacts and keep their gutters. A modifier rather than a change to
   the base rule, because .pf-brand__stack is shared by the primary showcase on
   every project that uses this file -- only Identity also has a social block
   built from this same class (project_identity/index.html), and it is the
   reason the un-flushed default has to stay the base behaviour rather than
   being folded into --flush. */
.pf-brand__stack--flush { gap: 0; }

/* A named sub-brand board: a coloured dot, its name, then the board. --sub-c
   is set per article, as on the case study page.

   .pf-brand__sub is this board's own class -- it used to also be the masthead
   subtitle's class above, which is why it is renamed to .pf-brand__tagline
   there. The two were unrelated components sharing one name: every board
   inherited the tagline's `margin` and computed an unwanted flex column, and
   the tagline in turn computed this rule's `display: flex; gap` it never
   asked for. The descendant classes below (__subhead, __subdot, __subname)
   have always belonged to the board and are unaffected. */
.pf-brand__subs {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 48px);
}
.pf-brand__sub { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 18px); }
.pf-brand__subhead { display: flex; align-items: center; gap: 12px; }
.pf-brand__subdot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sub-c, var(--pf-brand-ink));
}
.pf-brand__subname {
  margin: 0;
  font-size: clamp(1.375rem, 1.25rem + 0.39vw, 1.75rem);  /* 22 -> 28 */
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--pf-brand-ink);
}
.pf-brand__sub img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--pf-brand-max);
}

@media (max-width: 900px) {
  .pf-brand__blockhead { grid-template-columns: 1fr; gap: 12px; }
}