/* ALHANIN — coming soon
   Brand palette only: dark chocolate #211c18 · warm sand #f5f0e8 · terracotta #b4674e */

@font-face {
    font-family: 'Plex AR';
    font-weight: 400;
    font-display: swap;
    src: url('plex-arabic-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plex AR';
    font-weight: 600;
    font-display: swap;
    src: url('plex-arabic-600.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 2.5rem 1.25rem;
    background: #f5f0e8;
    background-image:
        radial-gradient(60rem 40rem at 50% -10%, #fbf8f2 0%, transparent 70%),
        radial-gradient(40rem 30rem at 100% 100%, #ece3d5 0%, transparent 65%);
    color: #211c18;
    text-align: center;
    line-height: 1.9;
    font-family: 'Plex AR', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 38rem; }

.logo { height: 4.5rem; width: auto; margin-inline: auto; display: block; }

.kicker {
    margin-top: 3rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: #90503b;                 /* terracotta-deep: AA contrast at this size */
    text-transform: uppercase;
}

h1 {
    font-size: clamp(3.25rem, 2rem + 7vw, 5.5rem);
    font-weight: 600;
    line-height: 1.15;
    margin-top: .75rem;
    letter-spacing: -.01em;
}

.lede {
    margin-top: 1.25rem;
    color: #6b5e51;
    font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
}

.en {
    margin-top: .85rem;
    color: #8a7d6f;
    font-size: .88rem;
    letter-spacing: .02em;
    direction: ltr;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

.rule { height: 1px; background: #e2d9ca; border: 0; margin: 2.75rem auto; max-width: 7rem; }

.follow { font-size: .8rem; color: #6b5e51; letter-spacing: .04em; }

.socials { margin-top: 1.1rem; display: flex; gap: .75rem; justify-content: center; }
.socials a {
    width: 3.1rem;
    height: 3.1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid #ddd2c0;
    background: #fbf8f2;
    color: #211c18;
    text-decoration: none;
    transition: background-color .4s cubic-bezier(.22, 1, .36, 1), color .4s, border-color .4s, transform .4s;
}
.socials a:hover { background: #211c18; color: #f5f0e8; border-color: #211c18; transform: translateY(-3px); }
.socials a:focus-visible { outline: 2px solid #b4674e; outline-offset: 3px; }
.socials svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.foot { margin-top: 3rem; font-size: .78rem; color: #9b8f81; }

/* Calm entrance — fully disabled when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise .9s cubic-bezier(.22, 1, .36, 1) both; }
    .d1 { animation-delay: .05s; }
    .d2 { animation-delay: .18s; }
    .d3 { animation-delay: .30s; }
    .d4 { animation-delay: .42s; }
    .d5 { animation-delay: .54s; }
    @keyframes rise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}