/* * Base reset + typographic ground rules. * Tuned for both RTL Arabic and LTR English (dir is on ). */ *, *::before, *::after { box-sizing: border-box; } /* `display: flex/grid/etc` on elements like .region-card overrides the * browser's default `[hidden] { display: none }`, which makes the HTML * `hidden` attribute silently fail. Force it back so toggling * `el.hidden = true` from JS always hides the element. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--color-bg); color: var(--color-text); /* Containing horizontal overflow at the root is safe: html is the * natural viewport scroll container, so setting `overflow-x: hidden` * here doesn't affect vertical scrolling. Setting it on * instead would turn into its own scroll container and clamp * `window.scrollTo` past the first sticky sibling. */ overflow-x: hidden; } body { margin: 0; min-height: 100dvh; font: 400 1rem/1.6 var(--font-sans); background: radial-gradient(1200px 600px at 110% -10%, rgba(178, 122, 74, 0.10), transparent 60%), radial-gradient(900px 500px at -10% 100%, rgba(47, 94, 58, 0.10), transparent 60%), var(--color-bg); color: var(--color-text); } /* RTL gets the same serif but a slightly bigger optical scale. */ html[dir="rtl"] body { font-feature-settings: "ss01"; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--color-accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease-out-soft); } a:hover { color: var(--color-accent); } h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.12; color: var(--color-text); margin: 0 0 var(--space-4); font-weight: 900; letter-spacing: -0.01em; } h1 { font-size: var(--fs-hero); font-weight: 900; letter-spacing: -0.02em; } h2 { font-size: var(--fs-section); } h3 { font-size: var(--fs-24); font-weight: 700; } p { margin: 0 0 var(--space-4); color: var(--color-text-2); } ::selection { background: var(--color-accent); color: #fff; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--section-pad-x); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-pad-y); position: relative; } .section--soft { background: var(--color-bg-soft); } .section--accent-soft { background: var(--color-accent-soft); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-deep); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 24%, transparent); } .section-title { font-size: var(--fs-section); font-family: var(--font-serif); font-weight: 900; letter-spacing: -0.015em; margin: var(--space-4) 0 var(--space-3); max-width: 26ch; } .section-lead { font-size: var(--fs-18); color: var(--color-text-2); max-width: 60ch; line-height: 1.6; } .section-header { text-align: center; max-width: 64rem; margin: 0 auto var(--space-12); } .section-header .section-title { margin-inline: auto; } .section-header .section-lead { margin-inline: auto; } /* Skip-link + screen-reader-only */ .skip-link { position: fixed; inset-inline-start: 12px; top: -100px; background: var(--color-text); color: var(--color-bg); padding: 10px 16px; border-radius: var(--radius-md); z-index: 1000; transition: top 0.2s var(--ease-out-soft); } .skip-link:focus { top: 12px; outline: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Print: keep it kind */ @media print { .site-header, .site-footer, .cursor-blob, .scroll-cue { display: none !important; } } /* ─── Responsive guardrails ───────────────────────────────────── * Mobile-first scale-downs that keep the page comfortable on small * phones (320–414px) without affecting tablet/desktop. */ @media (max-width: 480px) { /* Tighter spacing on small phones so each section fits more naturally */ :root { --section-pad-y: clamp(2.5rem, 8vw, 4.5rem); --section-pad-x: 1rem; } /* Section titles a touch smaller so they don't dwarf the screen */ .section-title { font-size: clamp(1.5rem, 1.2rem + 2.5vw, 2rem); max-width: 22ch; } .section-lead { font-size: var(--fs-16); } .section-header { margin-bottom: var(--space-8); } /* Big serif `h1`s on the hero stay punchy but cap at viewport width */ h1 { letter-spacing: -0.015em; } /* Eyebrow chip slightly tighter */ .eyebrow { padding: 5px 12px; font-size: 11px; } } /* Allow no element to push horizontal scroll */ img, svg, video, iframe { max-width: 100%; } * { min-width: 0; } table { max-width: 100%; }