/* ============================================================
   Design refinement overrides — loaded AFTER the Webflow CSS so
   these win the cascade. Goals:
     - no uppercase text anywhere
     - no wide letter-spacing; tighter tracking everywhere
     - tighter line-height
     - cleaner (smaller) footer wordmark
   ============================================================ */

/* No uppercase. */
* {
  text-transform: none !important;
}

/* No wide tracking. Force a uniformly tight letter-spacing so nothing keeps
   the old 0.04–0.14em spacing. Headings already sit tight; this only removes
   widening. */
* {
  letter-spacing: -0.01em !important;
}

/* Tighter line-height. Scoped so it cannot clip the masked rotating hero
   (.rotating-text__heading) that still runs on /home-new. */
body,
.body {
  line-height: 1.4;
}
h1:not(.rotating-text__heading),
h2,
h3,
h4,
.display-1,
.page-title,
.insight-title,
.insights-card-title,
.about-heading {
  line-height: 1.08;
}

/* Footer wordmark — plain text instead of oversized SVG. */
.footer-main .footer-logo-wrap {
  width: auto;
  max-width: 100%;
}
.footer-logo-text {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Home page inline nav links (About + Contact) */
.bold-nav-full__home-links {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.bold-nav-full__home-link {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.bold-nav-full__home-link:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}
/* Current page (e.g. About link while on /about). */
.bold-nav-full__home-link--active {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}
.bold-nav-full__home-link--cta {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}
.bold-nav-full__home-link--cta:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--text-primary);
}

/* ============================================================
   Footer — one clean typographic row (two stacked rows on mobile).
   One font, one weight, one size, one colour for everything; hover /
   active just brighten. Overrides the legacy grid footer in custom.css
   (this file loads last). Layout: wordmark left, links + © pushed right.
   ============================================================ */
.footer-main .footer-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(16px, 1.8vw, 30px);
  row-gap: 14px;
}
/* Single font + colour for every footer element. */
.footer-main .footer-mark,
.footer-main .footer-copy,
.footer-main .footer-link,
.footer-main .lang-toggle,
.footer-main .lang-toggle__item,
.footer-main .lang-toggle__sep {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(0.82rem, 0.92vw, 0.9rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Wordmark sits left; everything else is pushed to the right edge. */
.footer-main .footer-mark {
  margin-right: auto;
}
.footer-main .footer-links-grid {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: clamp(16px, 1.8vw, 30px);
  row-gap: 10px;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.footer-main .footer-link {
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-main .footer-link:hover,
.footer-main .footer-link:focus-visible,
.footer-main .footer-link.is-current {
  color: var(--text-primary);
}
/* Language toggle: inherit the row exactly; active = brighter, same weight. */
.footer-main .footer-links-grid > .lang-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  flex: 0 0 auto;
}
.footer-main .lang-toggle__item {
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-main .lang-toggle__item:hover,
.footer-main .lang-toggle__item:focus-visible,
.footer-main .lang-toggle__item.is-active {
  color: var(--text-primary);
  font-weight: 400;
}
.footer-main .lang-toggle__sep {
  opacity: 0.5;
  user-select: none;
}

/* Mobile: two rows.
   Row 1 — wordmark (left) + email (right).
   Row 2 — social/About/lang (left) + © (right).
   The email sits with the wordmark so the long address never forces the link
   row to wrap; the link row then fits comfortably on one line. */
@media (max-width: 767px) {
  .footer-main .footer-mark {
    order: 1;
    margin-right: auto;
  }
  .footer-main .footer-email {
    order: 2;
  }
  .footer-main .footer-links-grid {
    order: 3;
    column-gap: 16px;
  }
  .footer-main .footer-copy {
    order: 4;
    margin-left: auto;
  }
}

/* ============================================================
   Typographic system (all-sans / Inter). Site-wide refinement,
   loaded after the Webflow CSS and the rules above, so it wins.
   Goals: crisper rendering, size-aware tracking, a real weight
   hierarchy in body copy, and aligned numerals on data.
   ============================================================ */

/* Crisper Inter everywhere. */
body,
.body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

/* Size-aware tracking. The global `* { letter-spacing:-0.01em }` above is a
   single blunt value; display type wants tighter tracking as it grows. These
   win over it on specificity (class/element beats the universal selector). */
h1:not(.rotating-text__heading),
.display-1,
.display-2,
.page-title {
  letter-spacing: -0.025em !important;
}
h2,
.display-1.second._5rem,
.page-title.flex.second {
  letter-spacing: -0.022em !important;
}
h3,
h4,
.heading-style-h4,
.display-1.second._1-7-rem {
  letter-spacing: -0.018em !important;
}

/* Weight hierarchy + reading rhythm. Inter's true text weight is 400; the
   Webflow export set body copy to 500, which reads flat next to the 500/600
   headings. Drop reading copy to 400 so the headings carry the weight, and
   keep leading tight (1.4) — the site reads better dense than airy. */
p,
.text-style-muted,
.about-intro p,
.text-rich-text p,
.paragraph {
  font-weight: 400;
  line-height: 1.4;
}

/* Aligned numerals on data that sits in columns or runs (indices, counters). */
.layout233_item-index,
.layout233_item-plus {
  font-variant-numeric: tabular-nums;
}

/* Descender room for GSAP SplitText masked lines. The line masks (mask:"lines")
   clip the line box, so a tight line-height cuts g/j/p off the bottom; a little
   padding keeps descenders inside the clip. Scoped to split headings, so the
   `.line-divider-*` utilities are untouched. (The home hero keeps its own
   `.section_header113 .rotating-line` fix in custom.css.) */
[data-split] .line,
[data-rotating-title] .line {
  padding-bottom: 0.1em;
}

/* ============================================================
   About pages (EN + SV share the same heading classes under the
   `about` namespace, so one scoped block refines both). Goal: one
   consistent section-heading scale, calmer skill-card titles, and a
   clear lead in the résumé rows.
   ============================================================ */

/* Hero: let the long display line wrap into a tight, balanced block. */
[data-barba-namespace="about"] .about-hero .display-1 {
  max-width: 16ch;
  text-wrap: balance;
}

/* One section-heading scale for every section's left column (Skills /
   How I work / Experience) so the page reads with a single rhythm instead
   of three unrelated heading sizes (13px label / 27px display / 16px). */
[data-barba-namespace="about"] .about-eyebrow,
[data-barba-namespace="about"] .display-1.second._1-7-rem,
[data-barba-namespace="about"] .page-title.flex.third {
  font-size: clamp(1.375rem, 1.9vw, 1.7rem) !important;
  line-height: 1.12;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 1;
  margin: 0;
}

/* The eyebrow label gains a short hairline marker — same language as the
   résumé dividers — so it anchors as a section heading, not an orphan word. */
[data-barba-namespace="about"] .about-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
[data-barba-namespace="about"] .about-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: translateY(-0.34em);
  flex: 0 0 auto;
}

/* Skill cards: even vertical rhythm (the EN cards had a 0px icon→title gap).
   One gap drives icon→title→body→index spacing; zero the children's own
   margins so it stays consistent. (SV cards keep their own larger gap +
   footer-to-bottom rule — higher specificity.) */
[data-barba-namespace="about"] .layout233_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.2vw, 20px);
}
[data-barba-namespace="about"] .layout233_item > * {
  margin: 0;
}

/* Skill-card titles: dial back from ~2rem/600 so six of them read as a grid,
   not six competing headlines; the section heading now leads. */
[data-barba-namespace="about"] .heading-style-h4 {
  font-size: clamp(1.2rem, 1.5vw, 1.45rem) !important;
  font-weight: 500;
  line-height: 1.1;
}

/* Résumé rows: role leads (primary), company + date recede; dates align. */
[data-barba-namespace="about"] .text-flex > :first-child {
  color: var(--text-primary);
  opacity: 1;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  font-weight: 500;
}
[data-barba-namespace="about"] .text-flex > :nth-child(2) {
  color: var(--text-muted);
  opacity: 1;
}
[data-barba-namespace="about"] .text-flex > :last-child {
  color: var(--text-muted);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

/* Comfortable measure on the prose columns. */
[data-barba-namespace="about"] .about-intro p {
  max-width: 64ch;
}