/* qentra.quriou.com — Astrolabe re-skin, v2: written against the design live on 2026-09-22.
   ADDITIVE. Load after the page's own styles. It re-points the page's design tokens and a few
   shapes; it edits no existing rule, no text and no translation. Roll back = remove one <link>.
   Coral becomes brass, deep green becomes night petrol, Fraunces / Inter / Space Grotesk become
   Instrument Serif / Instrument Sans / Martian Mono, Amiri becomes Reem Kufi, pills become 2 px edges. */
:root {
  --bg: #0A1D20; --bg-2: #0F2A2E; --panel: #163A3F;
  --ink: #F2ECE2; --ink-60: rgba(242, 236, 226, .68); --ink-40: rgba(242, 236, 226, .5); --ink-15: rgba(242, 236, 226, .17); --ink-08: rgba(242, 236, 226, .08);
  --accent: #D9B461; --accent-soft: rgba(217, 180, 97, .15); --on-accent: #071517; --on-accent-hover: #071517;
  --stroke: rgba(242, 236, 226, .85);
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
body.light {
  --bg: #FAF7F1; --bg-2: #F2ECE2; --panel: #EBE4D7;
  --ink: #1B1713; --ink-60: rgba(27, 23, 19, .7); --ink-40: rgba(27, 23, 19, .56); --ink-15: rgba(27, 23, 19, .2); --ink-08: rgba(27, 23, 19, .09);
  --accent: #8A6521; --accent-soft: rgba(138, 101, 33, .12); --on-accent: #FAF7F1; --on-accent-hover: #1B1713;
  --stroke: rgba(27, 23, 19, .85);
}

/* Instrument Serif has one weight: never let the browser fake a light or a bold */
html { font-synthesis: none; }
h1, h2, h3, .hero-title, .sec-title, .footer-title, .problem-big, .method-name, .feat-co { font-weight: 400 !important; font-variation-settings: normal !important; }
html[lang=ar] .hero-title, html[lang=ar] .sec-title, html[lang=ar] .footer-title, html[lang=ar] .feat-co, html[lang=ar] .work-item h3, html[lang=ar] .cap h3, html[lang=ar] .engage h3, html[lang=ar] .problem h3, html[lang=ar] .method-name, html[lang=ar] .problem-big { font-family: 'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif !important; font-weight: 500 !important; letter-spacing: 0 !important; }

/* Arabic: labels take the Arabic text face (no Arabic exists in a Latin mono), tracking is always zero
   because letter-spacing breaks the joins, and the outlined word becomes a solid brass word: an outline
   shows the overlapping contours of a Kufic face. */
html[lang=ar] { --mono: 'IBM Plex Sans Arabic', 'Martian Mono', sans-serif; }
html[lang=ar] body, html[lang=ar] body * { letter-spacing: 0 !important; }
html[lang=ar] .hero-title em { color: var(--accent) !important; -webkit-text-stroke: 0 !important; font-style: normal !important; }

/* Martian Mono is wider than Space Grotesk: same labels, a little less air */
.nav-links a, .nav-cta, .theme-toggle, .hero-kicker, .btn { letter-spacing: .1em !important; }
.nav-links a { font-size: 10.5px !important; } .nav-cta { font-size: 10.5px !important; } .btn { font-size: 11px !important; } .hero-kicker { font-size: 10.5px !important; letter-spacing: .2em !important; }

/* edges: instrumentation, not pills */
.nav-cta, .theme-toggle, .lang-switch, .lang-btn, .btn, .work-badge, .work-logo { border-radius: 2px !important; }

/* anything filled with the accent carries the matching ink */
.btn-solid { color: var(--on-accent) !important; }
.btn-solid::before { background: var(--ink) !important; }
.btn-solid:hover { color: var(--bg) !important; }
.nav-cta:hover { color: var(--on-accent) !important; }
::selection { background: var(--accent); color: var(--on-accent); }
.footer-glow { background: radial-gradient(50% 50% at 50% 50%, rgba(217, 180, 97, .13), transparent 70%) !important; }

/* lockup: the mark, then ENTRA in Qentra Rule (a mask, so it follows the theme ink) */
.nav-logo { font-size: 0 !important; letter-spacing: 0 !important; gap: 0 !important; align-items: flex-start !important; direction: ltr !important; }
.nav-logo svg { width: 26px !important; height: 26px !important; }
.nav-logo em { display: none !important; }
.nav-logo::after { content: ''; margin-inline-start: 4.2px; width: 118.5px; height: 26px; background: currentColor; -webkit-mask: url(../img/qentra-entra-mask.svg) 0 0 / 100% 100% no-repeat; mask: url(../img/qentra-entra-mask.svg) 0 0 / 100% 100% no-repeat; }
/* same lockup on the legal pages (.brand in legal.css) */
.brand { font-size: 0 !important; letter-spacing: 0 !important; gap: 0 !important; align-items: flex-start !important; direction: ltr !important; }
.brand em { display: none !important; }
.brand::after { content: ''; margin-inline-start: 3.9px; width: 109.4px; height: 24px; background: currentColor; -webkit-mask: url(../img/qentra-entra-mask.svg) 0 0 / 100% 100% no-repeat; mask: url(../img/qentra-entra-mask.svg) 0 0 / 100% 100% no-repeat; }
.back, .doc-kicker, .doc-meta { letter-spacing: .12em !important; }
@media (max-width: 700px) { .nav-logo svg { width: 22px !important; height: 22px !important; } .nav-logo::after { margin-inline-start: 3.6px; width: 100.3px; height: 22px; } }

/* the hero carries the plate of the name, behind the veil */
.hero { background-image: url(../img/plate-qentra.svg); background-repeat: no-repeat; background-position: 112% 46%; background-size: min(78vh, 64vw) auto; }
@media (max-width: 700px) { .hero { background-position: 50% 108%; background-size: 120vw auto; } }

/* Product lockups, brand charter. Each product keeps its own frozen shade from
   its domain family — turquoise health, clay business, lapis estate, aubergine
   consumer — in a night tint and a paper tone. The wordmark takes currentColor,
   so it follows the surrounding text. */
:root { --qbrass: #D9B461; --p-qpo: #4FB3AB; --p-qmon: #86A9DC; --p-ebo: #E08A5D; --p-qlp: #C29FD6; }
body.light { --qbrass: #8A6521; --p-qpo: #0F6B68; --p-qmon: #2D5590; --p-ebo: #A1522A; --p-qlp: #6F4690; }
/* The charter lockups are each their own width; fix the height and let the
   width follow, or the four would be squeezed to one ratio. */
.soft-mark svg { height: 30px; width: auto; display: block; }