/* Type size override: small captions and description text larger and clearer.
   Loaded after the template CSS (see main() in tools/apply_content.py).
   The template sizes are in rem on a viewport-scaled root
   (html font-size = 16/1440*100vw on desktop, 16/416*100vw below 1024px),
   so these stay in rem at the same breakpoint and keep scaling with the viewport.
   The `html` prefix lifts each rule just above the template's single-class rules,
   which also load later (the page chunk CSS is appended at runtime).
   Line heights in the template are percentages, so they follow the new sizes.

   Second pass ("a bit bigger and more clear"): the c2 caption tier goes from
   12px to 14px at 1440 (13.1px -> 15px on phones), c3 and the copyright follow
   so they stay just below it, and c1 goes to 15px so nav and contact details are
   never smaller than the captions. Clarity: the template's -.02em tracking is
   opened to +.01em on the small tiers, captions get a 130% line height, and the
   40% grey labels are darkened to 72% (about 6:1 on #f0f0f0 instead of 2.9:1)
   so they still read as labels next to their values.
   Those labels take the theme's ink (--c-dark-primary) rather than the fixed base dark,
   so they turn light with the rest of the section in the "invert color" theme.
   Font smoothing is already antialiased site-wide by the template. */

/* ---- desktop (>= 1024px) ---- */

/* c3, the smallest tier (contact captions "Mail", "Operating Hours"):
   template 8px -> 12px at 1440 */
html .c3 { font-size: .75rem; letter-spacing: .01em; line-height: 125%; }

/* c2 captions, labels, counters, cookie text, footer: template 10px -> 14px */
html .c2,
html .c2-r,
html .c2-sb { font-size: .875rem; letter-spacing: .01em; line-height: 130%; }

/* c1 nav labels, contact details: template 12px -> 15px, tracking 0 */
html .c1 { font-size: .9375rem; letter-spacing: 0; }

/* p1 description paragraphs: 16px -> 18px.
   Longer lines now break earlier, so avoid one-word last lines. */
html .p1 { font-size: 1.125rem; text-wrap: pretty; }

/* grey labels on the light contact section ("Enquire", "Mail", "Operating Hours"):
   40% -> 72% of the dark primary. The class pair outranks the template's scoped rule. */
html .contact-item__caption.c3,
html .contact-item__title.c2-r { color: color-mix(in srgb, var(--c-dark-primary) 72%, transparent); }

/* narrow caption boxes widen with their text (x1.2 over the first pass:
   x1.167 for the size, the rest for the opened tracking),
   so they keep their original line breaks instead of adding a line */
html .hero-caption.c2-sb { max-width: calc(7.65rem + var(--padding-sm)); }
html .works-title.c2-sb { max-width: 7.65rem; }
html .approach-title.c2-sb { min-width: 7.65rem; }
html .process-caption.c2-sb { max-width: 12.96rem; }
html .company-caption.c2-sb { max-width: 18.18rem; }
html .copyright.c2-r { max-width: 12.75rem; }   /* keeps "PRINCYPL -" together on line one */

/* contact details now fill their column: balance two-line entries
   ("Mon to Fri, 10:00 / to 18:00 GMT" instead of a lone "GMT") */
html .contact-item__link { text-wrap: balance; }

/* "invert color" label is an SVG of outlined text: scale it with the c2 tier.
   Desktop only; on phones it sits beside "Back to top" and the gap would close up. */
@media (min-width: 1024px) {
  html .invert-button .invert-icon { width: 6.2125rem; height: 3.2375rem; margin: -.875rem; }

  /* cookie bar: 270px -> 312px so the text and Decline / Accept keep a gap */
  html .cookies.cookies { width: 19.5rem; }

  /* "Recent collaborations across / web, product, and brand." keeps two lines:
     the caption may run into the empty second grid column (max-width above) */
  html .process-caption.c2-sb { grid-column: 1 / 3; }

  /* "Principle-based thinking" stays on one line at 15px (its column is 172px) */
  html .digital-infra__caption.c1 { max-width: none; }

  /* section nav at the bottom edge ("UI/UX / Architecture  02 | 05"): a caption
     longer than the first one wraps to two lines; at the new size and line height
     its second line ran past the bottom of the screen, so the alternates grow
     upward from the first caption's line instead of downward */
  html .nav-wrap .nav-caption.nav-caption:not(:first-child) { top: auto; bottom: 0; }
}

/* ---- tablet and phone (< 1024px) ---- */
@media (max-width: 1023px) {
  html .c3 { font-size: .875rem; }                   /* template 9.4px -> 13.1px at 390 */
  html .c2,
  html .c2-r,
  html .c2-sb { font-size: 1rem; }                   /* template 11.3px -> 15px */
  html .c1 { font-size: 1.0625rem; }                 /* template 13.1px -> 15.9px */
  html .p1 { font-size: 1.1875rem; }                 /* 15.9px -> 17.8px */

  /* component overrides in the template that sit above the classes:
     project meta stays at 15px (now the c2 size) with the template's tighter
     tracking, because at 16px "Category: Web, UI/UX" wraps in its 180px column;
     its "Scope" label 40% -> 70% on the dark section */
  html .accordion-scope__caption.c2-sb,
  html .accordion-scope__item.c2-r { font-size: 1rem; letter-spacing: -.01em; }
  html .accordion-scope__caption.c2-sb { opacity: .7; }
  html .copyright.c2-r {                             /* template 7.5px -> 11.25px, 40% grey -> 72% */
    font-size: .75rem; letter-spacing: .01em; max-width: 11.16rem;
    color: color-mix(in srgb, var(--c-dark-primary) 72%, transparent);
  }

  /* caption boxes widen with their text (x1.177 over the first pass) */
  html .hero-caption.c2-sb { max-width: calc(7.575rem + var(--padding-sm)); }
  html .process-caption.c2-sb { max-width: 14.93rem; }
  html .company-caption.c2-sb { max-width: 21.26rem; }
}