/* =========================================================
   Type system for the whole portfolio.
   Headings: Bricolage Grotesque. Body: Figtree. Weights: 600 (semibold) and 400 (regular) only.
   Loaded last on every page, after layout.css, so it wins over older page rules.
   Change a size once here and every page follows.

   Desktop            Tablet (<=1000px)   Phone (<=640px)
   H1  64             52                  40
   H2  52             44                  34
   H3  44             38                  30
   H4  36             32                  26
   H5  28             26                  22
   H6  24             22                  20
   B1  20             19                  16
   B2  16             16                  16
   B3  14             14                  14
   B4  12             12                  14
   B5  10             10                  12   (nothing on the site goes below 10px)
   On phones body text is 16 (reading) or 14 (secondary), tiny badges 12 (asked 4 Oct 2026).
   ========================================================= */

/* Fallback faces sized to match Bricolage Grotesque and Figtree (measured 5 Oct 2026), so text
   keeps the same line breaks while the web fonts load and nothing jumps when they swap in.
   They are only seen for a moment on a first visit; the real fonts look exactly as before. */
@font-face {
    font-family: 'Bricolage Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial');
    size-adjust: 97.5%; /* Bricolage is 5 to 12% wider than bold Arial at heading sizes (22 to 64px) */
    ascent-override: 95.4%;
    descent-override: 27.7%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Figtree Fallback';
    src: local('Arial'), local('ArialMT');
    size-adjust: 99.85%;
    ascent-override: 95.1%;
    descent-override: 25%;
    line-gap-override: 0%;
}

:root {
    --t-head: 'Bricolage Grotesque', 'Bricolage Fallback', 'Figtree', system-ui, sans-serif;
    --t-body: 'Figtree', 'Figtree Fallback', system-ui, sans-serif;

    --t-h1: 64px;
    --t-h2: 52px;
    --t-h3: 44px;
    --t-h4: 36px;
    --t-h5: 28px;
    --t-h6: 24px;
    --t-b1: 20px;
    --t-b2: 16px;
    --t-b3: 14px;
    --t-b4: 12px;
    --t-b5: 10px;

    --t-semibold: 600;
    --t-regular: 400;

    /* buttons: text and stroke sized together so every button looks even */
    --btn-h: 44px;
    --btn-pad: 20px;
    --btn-sm-h: 36px;
    --btn-sm-pad: 14px;
    --btn-stroke: 1px;
}

@media (max-width: 1000px) {
    :root {
        --t-h1: 52px;
        --t-h2: 44px;
        --t-h3: 38px;
        --t-h4: 32px;
        --t-h5: 26px;
        --t-h6: 22px;
        --t-b1: 19px;
    }
}

/* Phones (asked 4 Oct 2026): nothing is bigger than the 28px home hero title */
@media (max-width: 640px) {
    :root {
        --t-h1: 28px;
        --t-h2: 24px;
        --t-h3: 24px;
        --t-h4: 22px;
        --t-h5: 20px;
        --t-h6: 18px;
        --t-b1: 16px;
        --t-b4: 14px;
        --t-b5: 12px;
    }
}

/* ---------- Base (anything not listed below still follows the scale) ---------- */
body {
    font-family: var(--t-body);
    font-size: var(--t-b2);
    font-weight: var(--t-regular);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--t-head);
    font-weight: var(--t-semibold);
}

h1 { font-size: var(--t-h1); line-height: 1.05; }
h2 { font-size: var(--t-h2); line-height: 1.1; }
h3 { font-size: var(--t-h3); line-height: 1.1; }
h4 { font-size: var(--t-h4); line-height: 1.15; }
h5 { font-size: var(--t-h5); line-height: 1.2; }
h6 { font-size: var(--t-h6); line-height: 1.25; }

b, strong {
    font-weight: var(--t-semibold);
}

/* ---------- H1: page titles (one per page) ---------- */
.hero-title,
.gr-hero-title,
.csx-title,
.about-page .bw-title,
h1.bw-title {
    font-family: var(--t-head) !important;
    font-size: var(--t-h1) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
}

.gr-hero-title em,
.csx-title .text-accent,
.csx-title span {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* ---------- H2: page section titles ---------- */
h2.bw-title,
.section-title,
.tl-title,
.gr-h2,
.footer-heading {
    font-family: var(--t-head) !important;
    font-size: var(--t-h2) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

.footer-heading .cursive-highlight {
    font-size: inherit !important;
    font-weight: var(--t-regular) !important;
}

/* ---------- H3: feature titles and hero numbers ---------- */
.highlight-title,
.highlight-title .card-link,
.gr-report-title,
.ib-name,
.gr-stat-value {
    font-family: var(--t-head) !important;
    font-size: var(--t-h3) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

/* Work page startup card title: one step down (H4) so it sits on two lines (asked 4 Oct 2026) */
.highlight-title,
.highlight-title .card-link {
    font-size: var(--t-h4) !important;
}

/* small laptops: the text column is narrower, so 32px keeps it on two lines */
@media (min-width: 1001px) and (max-width: 1279px) {
    .highlight-title,
    .highlight-title .card-link {
        font-size: 32px !important;
    }
}

/* ---------- H4: sub sections, case study section titles, big stats ---------- */
.cs-section-title,
.cs-summary-title,
.sw-headline,
.ot-label,
.lt-connect,
.csx-more-title,
.abdm-stat-value,
.ia-stat-value {
    font-family: var(--t-head) !important;
    font-size: var(--t-h4) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
}

/* ---------- H5: card titles and card numbers ---------- */
.tl-company,
.gr-brand-name,
.gr-tool-name,
.csx-more-name,
.hk-result,
.ib-stat strong,
.ev-kpi strong,
.ia-method .big,
.csx-impact-card li strong,
.tl-p-title {
    font-family: var(--t-head) !important;
    font-size: var(--t-h5) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

/* quotes: H5 regular */
.ia-quote {
    font-family: var(--t-head) !important;
    font-size: var(--t-h5) !important;
    font-weight: var(--t-regular) !important;
    line-height: 1.3 !important;
}

/* ---------- H6: small card titles and card stats ---------- */
.card-info h3,
.card-info h3 .card-link,
.stat-number,
.metric-value,
.counter-value,
.ev-rc-name,
.rp-pos,
.ia-card h3,
.cs-card-subtitle,
.ia-insight h3,
.csx-read-title {
    font-family: var(--t-head) !important;
    font-size: var(--t-h6) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
}

/* ---------- Body 1 (20): ledes and long reading text ---------- */
.hero-subtitle,
.bw-note,
.ot-lede,
.lt-aside,
.section-subtitle,
.tl-sub,
.gr-hero .gr-sub,
.cs-summary-intro,
.cs-paragraph,
.cs-summary-body-text p,
.cs-bullet-list li,
.ia-hmw,
.about-text p,
.footer-quote {
    font-family: var(--t-body) !important;
    font-size: var(--t-b1) !important;
    font-weight: var(--t-regular) !important;
    line-height: 1.6 !important;
}

.hero-subtitle strong,
.cs-paragraph strong,
.cs-paragraph b,
.cs-summary-intro strong,
.cs-bullet-list li strong,
.about-text p strong,
.csx-impact-title {
    font-weight: var(--t-semibold) !important;
}

.csx-impact-title {
    font-family: var(--t-body) !important;
    font-size: var(--t-b1) !important;
    line-height: 1.3 !important;
}

/* ---------- Body 2 (16): card text, nav, labels ---------- */
.sw-line,
.ib-desc,
.hk-event,
.tl-p-desc,
.gr-section-head .gr-sub,
.gr-cta .gr-sub,
.gr-report-desc,
.highlight-description,
.stat-label,
.card-info p,
.wm-piece blockquote p,
.ia-card p,
.ia-feature p,
.ia-insight p,
.ia-math-card p,
.ia-bubble,
.ia-timeline li,
.ia-why,
.csx-meta-text,
.csx-impact-card p,
.csx-read-desc,
.csx-more-desc,
.kp-persona p,
.gr-tool-body p,
.abdm-stat-label,
.ia-stat-label,
.cs-tldr-text,
.ib-stat span,
.nh-link {
    font-family: var(--t-body) !important;
    font-size: var(--t-b2) !important;
    font-weight: var(--t-regular) !important;
    line-height: 1.55 !important;
}

.nh-link {
    line-height: 1.2 !important;
}

/* Body 2 semibold: small titles and names in Figtree */
.gr-card h3,
.csx-impact-card h3,
.ia-feature h4,
.wr-card-title,
.sw-name,
.csx-meta-label,
.kp-persona h3,
.gr-stat-label,
.nh-ask-long,
.wm-who strong,
.ia-insight .answer {
    font-family: var(--t-body) !important;
    font-size: var(--t-b2) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.4 !important;
}

.ia-feature h4 {
    line-height: 1.35 !important;
}

/* ---------- Body 3 (14): meta, captions, tables, small links ---------- */
figcaption,
.copyright,
.footer-instruction span,
.metric-label,
.tl-company small,
.gr-brand-what,
.gr-card p,
.gr-note,
.gr-rank,
.ev-rc-desc,
.ia-caption,
.abdm-caption,
.ia-compare-note,
.ia-cover-note,
.wr-card-desc,
.csx-crumbs,
.csx-crumbs a,
.csx-crumbs span,
.cs-summary-full-image p,
td,
th,
cite,
.ia-flow ol li,
.wm-piece blockquote footer,
.wm-src,
.wm-who span span {
    font-family: var(--t-body) !important;
    font-size: var(--t-b3) !important;
    font-weight: var(--t-regular) !important;
    line-height: 1.5 !important;
}

/* Body 3 semibold */
.tl-period,
.tl-roles li,
.tl-metrics li,
.ab-info-main,
.ia-chips li,
.ia-cover-meta,
.rp-bar-label,
.csx-crumbs a,
.csx-toc a,
.csx-toc-group > a,
th,
.wm-src a,
.ia-flow-head span {
    font-weight: var(--t-semibold) !important;
}

.csx-toc a {
    font-family: var(--t-body) !important;
    font-size: var(--t-b3) !important;
    line-height: 1.45 !important;
}

/* ---------- Body 4 (12): tags, chips, eyebrows, dates ---------- */
.ib-eyebrow,
.hk-when,
.skill-tag,
.project-tag,
.sw-chip,
.wr-card-stat,
.wr-card-tags span,
.ab-months,
.ab-legend,
.journey-shot figcaption,
.tl-kind,
.tl-chip,
.tl-roles li small,
.gr-eyebrow,
.gr-tag,
.gr-chip,
.gr-stat-meta,
.ev-rc-brand,
.ev-src,
.ev-date,
.csx-read-meta,
.csx-more-tag,
.csx-toc-label,
.csx-toc-sub a,
.rp-bar-label small,
.rp-bar-num small,
.rp-legend span,
.ev-kpi span,
.cs-tldr-tag,
.ia-math-card h3,
.ia-flow-head h4,
.ia-timeline .when,
.heard,
.ia-hmw span,
.ia-compare-tag,
.ia-tagline,
.ia-card-num,
.kp-tag,
.tk-meta,
.tk-src,
code,
.ia-kbd {
    font-size: var(--t-b4) !important;
    line-height: 1.4 !important;
}

.ib-eyebrow,
.hk-when,
.skill-tag,
.project-tag,
.sw-chip,
.wr-card-stat,
.wr-card-tags span,
.tl-kind,
.tl-chip,
.gr-eyebrow,
.gr-tag,
.gr-chip,
.ev-rc-brand,
.ev-src,
.ev-date,
.csx-read-meta,
.csx-more-tag,
.csx-toc-label,
.cs-tldr-tag,
.ia-math-card h3,
.ia-flow-head h4,
.ia-timeline .when,
.heard,
.ia-hmw span,
.ia-compare-tag,
.ia-tagline,
.ia-card-num,
.kp-tag,
.tk-src {
    font-family: var(--t-body) !important;
    font-weight: var(--t-semibold) !important;
}

.ab-months,
.ab-legend,
.journey-shot figcaption,
.gr-stat-meta,
.rp-legend span,
.ev-kpi span,
.tk-meta {
    font-family: var(--t-body) !important;
    font-weight: var(--t-regular) !important;
}

/* ---------- Body 5 (10): tiny badges. Nothing goes smaller than this. ---------- */
.tl-now,
.ev-tag,
.ia-new,
.lt-stamp-code {
    font-family: var(--t-body) !important;
    font-size: var(--t-b5) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.3 !important;
}

/* ---------- Buttons ---------- */
/* Main buttons: Body 2 semibold, 44px tall, 1px stroke */
.rw-btn,
.btn-filled,
.btn-outline,
.wr-all-btn,
.gr-btn,
.ia-btn,
.tk-more,
.tl-link,
.nav-resume,
.mobile-case-study-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--btn-h) !important;
    min-height: var(--btn-h) !important;
    padding: 0 var(--btn-pad) !important;
    border-width: var(--btn-stroke) !important;
    border-style: solid !important;
    font-family: var(--t-body) !important;
    font-size: var(--t-b2) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

.btn-filled .btn-text,
.rw-btn span,
.footer-copy-label {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
}

/* filled buttons get a stroke the same colour as their fill */
.rw-btn:not(.rw-btn-line),
.btn-filled,
.wr-all-btn:not(.tk-btn-line),
.gr-btn-solid,
.ia-btn-solid,
.nav-resume,
.mobile-case-study-btn {
    border-color: transparent;
}

/* Small buttons: Body 3 semibold, 36px tall, 1px stroke */
.nh-hello,
.csx-shuffle,
.ia-cover-play {
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box;
    height: var(--btn-sm-h) !important;
    min-height: var(--btn-sm-h) !important;
    border-width: var(--btn-stroke) !important;
    font-family: var(--t-body) !important;
    font-size: var(--t-b3) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1 !important;
}

.nh-hello span,
.ia-cover-play span {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Text links that act like buttons: Body 3 semibold */
.sw-link,
.gr-go,
.csx-more-go,
.ev-rc-go,
.csx-read-cta,
.csx-toc-cta,
.wm-link {
    font-family: var(--t-body) !important;
    font-size: var(--t-b3) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.3 !important;
}

/* Tag like buttons */
.footer-copy:not(.rw-btn) {
    font-family: var(--t-body) !important;
    font-size: var(--t-b3) !important;
    font-weight: var(--t-semibold) !important;
}

@media (max-width: 640px) {
    :root {
        --btn-pad: 18px;
    }

    .rw-btn,
    .btn-filled,
    .wr-all-btn,
    .gr-btn,
    .ia-btn,
    .tk-more,
    .tl-link {
        white-space: normal;
        text-align: center;
    }
}

/* ---------- Handwriting (the letter, sticky notes, doodles) stays in Kalam ---------- */
.lt-letter p,
.lt-sign,
.lt-ps,
.lt-ps span,
.lt-hi span,
.lt-yay span,
.lt-pointer,
.wm-sticky p,
.wm-photo figcaption {
    font-family: 'Kalam', cursive !important;
}

.lt-letter p,
.wm-sticky p {
    font-size: var(--t-b1) !important;
    line-height: 1.5 !important;
}

.wm-photo figcaption {
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* ---------- Small leftovers mapped onto the scale ---------- */
b,
strong {
    font-weight: var(--t-semibold) !important;
}

.ia-micro h4 {
    font-family: var(--t-body) !important;
    font-size: var(--t-b2) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.35 !important;
}

.ia-method p,
.ab-stats li span {
    font-size: var(--t-b2) !important;
    font-weight: var(--t-regular) !important;
    line-height: 1.5 !important;
}

.gr-mini strong,
.ab-stats strong {
    font-family: var(--t-head) !important;
    font-size: var(--t-h5) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.1 !important;
}

.tl-roles li small,
.rp-bar-label small,
.rp-bar-num small,
.gr-card small,
.ev-report small,
.gr-mini span,
.gr-bar span,
small {
    font-size: var(--t-b4) !important;
    font-weight: var(--t-regular) !important;
}

.tl-company small {
    font-size: var(--t-b3) !important;
}

.gr-up,
.rp-bar-num,
.wm-logo {
    font-weight: var(--t-semibold) !important;
}

.ia-micro p {
    font-size: var(--t-b2) !important;
    font-weight: var(--t-regular) !important;
    line-height: 1.5 !important;
}

.asknish-side p {
    font-size: var(--t-b3) !important;
    line-height: 1.5 !important;
}

.gr-li-facts span {
    font-size: var(--t-b4) !important;
    font-weight: var(--t-regular) !important;
}

.gr-brand-nums strong {
    font-family: var(--t-head) !important;
    font-size: var(--t-h6) !important;
    font-weight: var(--t-semibold) !important;
    line-height: 1.1 !important;
}

/* Icon weight (1 Oct 2026): icons inside buttons and links match the semibold label.
   Figtree 600 stems are about 0.115em thick, so line icons use 0.105em, drawn at that
   width on screen whatever the icon's size (about 1.5px next to 14px text, 1.7px next to 16px).
   Only the 24x24 line icon set is touched; doodles, charts and filled logos keep their own strokes. */
:is(a, button) svg[viewBox="0 0 24 24"] :is(path, line, polyline, polygon, rect, circle, ellipse) {
    vector-effect: non-scaling-stroke;
    stroke-width: 0.105em;
}

/* Captions under videos and images are always centred (4 Oct 2026): the text is centred,
   and a caption narrower than its media also sits in the middle under it.
   Not the name and role header of the testimonial cards (.wm-who), which lines up on the left (6 Oct 2026) */
figcaption:not(.wm-who),
.home-about-film-cap,
.abdm-caption,
.ia-caption {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* "View case study" on project cards and "Read case study" on the About timeline are for touch
   screens only (external links like "Visit the live site" stay): with a mouse the glass
   "Read case study" cursor already says it on hover (4 Oct 2026). Overrides the
   inline-flex !important above. */
@media (hover: hover) and (pointer: fine) {
    .mobile-case-study-btn,
    .tl-link[href$=".html"] {
        display: none !important;
    }
}

/* ---------- Phone body text: 16 for reading, 14 for secondary (asked 4 Oct 2026) ---------- */
@media (max-width: 640px) {
    .hero-section .hero-subtitle,
    .wm-photo figcaption {
        font-size: 16px !important;
    }

    .ia-howto li > div,
    .ia-howto li strong {
        font-size: 16px !important;
    }

    .home-journey .journey-shot figcaption,
    .asknish-foot,
    .asknish-kicker,
    .bm-label,
    .csx-toc-btn,
    .tl-period,
    .tl-roles li,
    .tl-metrics li,
    .ab-facts span,
    .gr-brand-nums span,
    .gr-tool-nums span,
    .gr-tool-year,
    .gr-links span,
    .rp-bar-label,
    .ia-chips li,
    .ia-flow-head span,
    .wm-piece footer {
        font-size: 14px !important;
    }

    .skill-tag,
    .tag-group .skill-tag,
    .gr-next {
        font-size: 12px !important;
    }
}