/* =========================================================
   INTER — the site's single typeface (branch: font-replacement)
   Loaded LAST on every page. Inter replaces Melodrama (display) and
   Switzer (text), set the way the Royal Chemicals site sets it
   (royalchemicals.site, measured at 1440). Tracking follows the
   rendered size: the bigger the line, the tighter.
     >= 140px     weight 300, -0.085em  (hero -0.095em)
     110-140px    weight 300, -0.08em   (manifesto -0.075em)
     80-110px     weight 300, -0.07em
     60-80px      weight 300, -0.06em
     40-60px      weight 300, -0.05em
     25-40px      weight 400, -0.035em
     18-24px      weight 400, -0.025em
     UI 14-17px   nav, buttons, filters: -0.02em
     body 13-17px weight 400, -0.01em, leading 1.5-1.65
     uppercase labels keep their open tracking
   Display lines were then hand-tuned tighter in type-editor.html
   (2026-10-25), so many now sit below their band.
   Sizes, layout and motion are the page stylesheets'; this file only
   swaps the face and re-sets weight / tracking / leading per role.
   Inter 4 variable (wght 100–900, opsz 14–32, held at opsz 14) —
   the same face Royal Chemicals loads from Google Fonts. OFL.
   ========================================================= */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter-Italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter-Italic-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- the swap: every page's font tokens point at Inter ---------- */
:root {
  --font-display: "Inter", Arial, sans-serif;
  --font-text: "Inter", Arial, sans-serif;
  --font-mono: "Inter", ui-monospace, monospace;
  --display: "Inter", Arial, sans-serif;
  --sans: "Inter", Arial, sans-serif;
  --component-display: "Inter", Arial, sans-serif;
  --component-sans: "Inter", Arial, sans-serif;
  /* the Melodrama-era fit hooks are neutral here — tracking is set per role */
  --display-fit: 0em;
  --display-hero-fit: 0em;
  --display-lh: 1;
}

/* Royal Chemicals renders Inter with its TEXT optical size at every size
   (their word widths match opsz 14 exactly). Left on auto, big headings
   switch to the display cut (opsz 32), which is ~10% narrower — the same
   tracking then reads far tighter than theirs. */
html,
body {
  font-family: "Inter", Arial, sans-serif;
}

/* !important on purpose: every `font:` shorthand in the page stylesheets
   resets optical sizing back to auto, so inheritance alone can't hold it */
*,
*::before,
*::after {
  font-optical-sizing: none !important;
}

/* ============ DISPLAY >= 80px — weight 300, -0.07 -> -0.095em ============ */

/* home hero wordmark — "Piliç" answers in Inter italic */
.hero-heading { font-weight: 300; letter-spacing: -0.1em; }
.hero-heading-sub { font-family: "Inter", Arial, sans-serif; font-weight: 400; letter-spacing: -0.06em; }

.op-feature-title { font-weight: 300; letter-spacing: -0.085em; }

.lh-colophon-title { font-weight: 300; letter-spacing: -0.1em; }
.lh-ledger-number { font-weight: 300; letter-spacing: -0.11em; }
.lh-ledger-year-prefix { letter-spacing: -0.07em; }
.lh-manifesto-title,
.lh-manifesto-probe { font-weight: 300; letter-spacing: -0.085em; }
.lh-bridge-title { font-weight: 300; letter-spacing: -0.09em; }
.lh-handoff-title { font-weight: 300; letter-spacing: -0.09em; }
.lh-compliance-title { font-weight: 300; letter-spacing: -0.07em; }
.lh-compliance-row h3 { font-weight: 300; letter-spacing: -0.095em; }
.lh-reel-title { font-weight: 300; letter-spacing: -0.08em; }
.lh-flight-title { font-weight: 300; letter-spacing: -0.07em; }
.lh-invitation-title { font-family: "Inter", Arial, sans-serif; font-weight: 300; letter-spacing: -0.09em; }
.nl-title { font-weight: 300; letter-spacing: -0.08em; }

/* the footer word is set in capitals — Royal Chemicals' only uppercase
   display line runs heavier and opens to -0.05em */
.footer-big,
.footer-big-overlay { font-family: "Inter", Arial, sans-serif; font-weight: 600; letter-spacing: -0.105em; }

/* about */
.about-hero-title { --wght: 300; letter-spacing: -0.085em; }
.hero-outline text { font-weight: 300; letter-spacing: -0.085em; }
.story-year { --wght: 300; letter-spacing: -0.07em; }
.story-row.is-active .story-year { --wght: 400; }
.standard-stat strong { font-weight: 300; letter-spacing: -0.07em; }
.closing h2 { --wght: 300; font-variation-settings: "wght" var(--wght); font-weight: 300; letter-spacing: -0.08em; line-height: 1.05; }

/* contact + product detail */
.ct-title { font-family: "Inter", Arial, sans-serif; font-weight: 300; letter-spacing: -0.07em; }
.pd-ghost { font-weight: 300; letter-spacing: -0.085em; }

/* ============ LARGE 40–80px — weight 300, -0.05 / -0.06em ============ */
.loader-word { letter-spacing: -0.06em; }
.sc-info-name { font-weight: 300; letter-spacing: -0.09em; line-height: 1.02; }
.footer-email-track { font-weight: 300; letter-spacing: -0.07em; }
.mm-text,
.global-mobile-menu nav a { font-weight: 300; letter-spacing: -0.06em; }

.section-head h2 { --wght: 300; font-weight: 300; letter-spacing: -0.08em; line-height: 1.05; }
.hub-card-main h3 { font-weight: 300; letter-spacing: -0.07em; }
.range-index { --wght: 300; letter-spacing: -0.05em; }
.range-row:hover .range-index { --wght: 500; }
.range-copy h3 { font-weight: 300; letter-spacing: -0.07em; }
.manifesto-copy { font-weight: 300; letter-spacing: -0.08em; line-height: 1.25; }
.footer-lead a { font-weight: 300; letter-spacing: -0.06em; }

.pp-title { font-weight: 300; letter-spacing: -0.08em; line-height: 1.05; }
.pd-name { font-weight: 300; letter-spacing: -0.08em; line-height: 1.08; }

/* ============ MEDIUM 25–40px — weight 400, -0.035em ============ */
h1, h2, h3 { font-weight: 400; letter-spacing: -0.035em; }
.story-copy h3 { font-weight: 400; letter-spacing: -0.055em; line-height: 1.12; }
.hub-card-top strong { font-weight: 400; letter-spacing: -0.035em; }
.standard-stat span { font-weight: 400; letter-spacing: -0.035em; }
.lh-channel-mask { font-weight: 400; letter-spacing: -0.035em; }
.pcard-name { font-weight: 300; letter-spacing: -0.065em; }
.pd-related-title { font-weight: 400; letter-spacing: -0.075em; }
.ct-form-title { font-weight: 400; letter-spacing: -0.035em; line-height: 1.2; }

/* ============ SMALL DISPLAY 18–24px — weight 400, -0.025em ============ */
.brand-word { font-weight: 500; letter-spacing: -0.025em; }
.pp-rail-row,
.pp-row-label { font-weight: 400; letter-spacing: -0.025em; }
.pd-ledger dd { font-weight: 400; letter-spacing: -0.025em; }
.ct-row-value { font-weight: 400; letter-spacing: -0.025em; }
.standard-pillar h3 { letter-spacing: -0.03em; }
.footer-cta { letter-spacing: -0.02em; }

/* ============ UI 14–17px — nav, buttons, filters: -0.02em ============ */
.global-nav-link,
.global-nav-toggle,
.global-mobile-kicker,
.ui-button,
.ui-roll-char,
.ct-send-text,
.hub-duties strong { letter-spacing: -0.02em; }

/* ============ BODY 13–17px — weight 400, -0.01em ============
   style.css opens the body by +0.005em (a Switzer setting) and some
   blocks pin 0; Inter's text cut sits better a hair tight. */
body { letter-spacing: -0.01em; }
.op-lede,
.op-facts li,
.op-feature-note,
.nl-text,
.nl-name,
.lh-handoff-copy,
.lh-colophon-side p,
.lh-manifesto-copy,
.lh-flight-text,
.lh-compliance-lede,
.lh-invitation-copy,
.lh-ledger-panel p,
.about-hero-bottom p,
.story-copy p,
.range-copy p,
.standard-pillar p,
.hub-card-main address,
.ct-address address,
.pd-desc,
.pcard-sub { letter-spacing: -0.01em; }

/* ============ masks ============
   Inter's tight tracking pulls each line's box in by ~0.08em at the end,
   so the last glyph's ink overhangs its overflow mask and gets shaved.
   Every reveal mask opens on the right by that much (and gives it back). */
.lh-mask,
.nl-mask,
.hero-title-mask,
.ct-title-mask,
.pp-title-mask,
.pd-name-mask,
.sc-info-mask {
  padding-right: 0.12em;
  margin-right: -0.12em;
}

.hero-heading .word {
  padding-right: 0.12em;
  margin-right: -0.12em;
}

/* ============ spots composed around Melodrama's widths ============ */

/* "One standard" is set at .605em of the colophon title, but tracking
   inherits as a px length — at the parent's −0.085em it lands at −0.14em
   here and swallows the word space. Give the line its own. */
.lh-wall--two { letter-spacing: -0.09em; }

/* manifesto, scattered state: "chicken" ends at 88.51vw in Inter (at
   -0.085em); "discipline" moves in to share that edge and its withheld
   period sits where the next glyph would (Melodrama set them at 50.2 /
   87.05vw). The converged sentence is measured live from the probe, so it
   needs nothing. Re-measure both if the manifesto tracking changes. */
.lh-mf-discipline { left: 56.15vw; }
.lh-mf-period { left: 88.51vw; }

/* invitation: the period sits right on "table" */
.lh-invitation-title > i { right: -0.08em; }

@media (max-width: 760px) {
  /* phone display lines render at 45–100px, so they take the
     60–110px bands instead of their desktop values */
  .hero-heading { letter-spacing: -0.08em; }
  .op-feature-title { letter-spacing: -0.065em; }
  .lh-compliance-row h3 { letter-spacing: -0.08em; }
  .lh-ledger-number { letter-spacing: -0.1em; }
  .lh-colophon-title { letter-spacing: -0.075em; }
  .lh-bridge-title,
  .lh-handoff-title,
  .lh-invitation-title { letter-spacing: -0.07em; }
  .lh-reel-title,
  .nl-title,
  .about-hero-title,
  .ct-title { letter-spacing: -0.06em; }
  .lh-manifesto-title,
  .lh-manifesto-probe { letter-spacing: -0.065em; }
  .lh-compliance-title,
  .lh-flight-title,
  .story-year,
  .standard-stat strong { letter-spacing: -0.05em; }
  .closing h2 { letter-spacing: -0.065em; }

  /* stacked manifesto: the period follows "discipline" in flow — take
     back the word space before it */
  .lh-mf-period { margin-left: -0.2em; }
  .lh-invitation-title > i { right: 0.12em; }

  /* the tracked uppercase micro-labels are 8–9px on desktop; on a phone
     that is below comfortable reading size, so they floor at 10px */
  .about-topbar,
  .pcard-format,
  .pp-chip,
  .pd-fact-chip,
  .pd-ledger dt,
  .pd-quote-form label,
  .ct-kicker,
  .ct-row-label,
  .ct-copied,
  .ct-address-label,
  .ct-socials,
  .ct-field-label,
  .ct-form-note { font-size: 10px; }
}