*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--nw-ink);
    background: var(--nw-surface);
    font-family: var(--nw-font-body);
    font-size: var(--nw-text-md);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family: var(--nw-font-body);
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0 0.6em;
    color: var(--nw-ink);
    font-family: var(--nw-font-heading);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
}

p,
ul,
ol,
dl,
blockquote,
figure {
    margin-block: 0 1.2rem;
}

p:last-child,
figure:last-child,
blockquote:last-child {
    margin-block-end: 0;
}

a {
    color: var(--nw-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.22em;
}

a:hover {
    color: var(--nw-primary-strong);
}

:focus-visible {
    outline: 2px solid var(--nw-primary);
    outline-offset: 3px;
    box-shadow: var(--nw-focus);
}

::selection {
    color: var(--nw-ink);
    background: color-mix(in srgb, var(--nw-accent) 36%, #ffffff);
}

.site-shell {
    width: var(--nw-shell);
    margin-inline: auto;
}

.site-shell--wide {
    width: var(--nw-shell-wide);
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    inset-block-start: var(--nw-space-2);
    inset-inline-start: var(--nw-space-2);
    z-index: 1000;
    padding: 0.7rem 1rem;
    border-radius: var(--nw-radius-sm);
    color: #ffffff;
    background: var(--nw-primary);
    font-weight: 750;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--nw-transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.eyebrow {
    margin-block: 0 var(--nw-space-4);
    color: var(--nw-primary);
    font-size: var(--nw-text-xs);
    font-weight: 850;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lead {
    max-width: 48rem;
    color: var(--nw-muted);
    font-size: var(--nw-text-lg);
    line-height: 1.55;
}

.prose {
    max-width: var(--nw-prose);
}

.prose--narrow {
    max-width: 44rem;
}

.prose--wide {
    max-width: 74rem;
}

.prose > *:first-child {
    margin-block-start: 0;
}

.prose > *:last-child {
    margin-block-end: 0;
}

.prose h2 {
    margin-block-start: 1.35em;
    font-size: var(--nw-text-2xl);
}

.prose h3 {
    margin-block-start: 1.35em;
    font-size: var(--nw-text-xl);
}

.prose li + li {
    margin-block-start: 0.45rem;
}

[dir="rtl"] body {
    font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, serif;
}
