@import url("alriashi-tokens.css");
@import url("alriashi-components.css");
@import url("alriashi-pages.css");

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.alriashi-site {
    background: var(--alriashi-color-canvas);
    color: var(--alriashi-color-ink);
    font-family: var(--alriashi-font-sans);
    line-height: var(--alriashi-line-height-body);
    margin: 0;
    min-width: 20rem;
}

body.alriashi-site::selection { background: var(--alriashi-color-primary-soft); color: var(--alriashi-color-ink); }

a { color: inherit; }

a:focus-visible, button:focus-visible, summary:focus-visible {
    border-radius: var(--alriashi-radius-sm);
    outline: var(--alriashi-focus-ring);
    outline-offset: var(--alriashi-focus-offset);
}

.alriashi-skip-link {
    background: var(--alriashi-color-strong-surface); color: var(--alriashi-color-on-primary); inset-block-start: var(--alriashi-space-3); inset-inline-start: var(--alriashi-space-3); padding: var(--alriashi-space-3) var(--alriashi-space-4); position: fixed; transform: translateY(-160%); transition: transform var(--alriashi-motion-fast); z-index: var(--alriashi-z-skip-link);
}
.alriashi-skip-link:focus { transform: translateY(0); }

.alriashi-site-header { background: color-mix(in srgb, var(--alriashi-color-canvas) 94%, transparent); border-block-end: 1px solid var(--alriashi-color-border); inset-block-start: 0; position: sticky; z-index: var(--alriashi-z-header); }
.alriashi-site-header__inner, .alriashi-site-footer__inner, .alriashi-home__container { margin-inline: auto; max-width: var(--alriashi-container-width); padding-inline: var(--alriashi-gutter); }
.alriashi-site-header__inner { align-items: center; display: flex; gap: var(--alriashi-space-4); justify-content: space-between; min-height: var(--alriashi-header-height); }
.alriashi-site-brand { align-items: baseline; display: inline-flex; flex: 0 0 auto; gap: var(--alriashi-space-2); text-decoration: none; }
.alriashi-site-brand__name { color: var(--alriashi-color-ink); font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; }
.alriashi-site-brand__place { color: var(--alriashi-color-text-muted); font-size: 0.75rem; font-weight: 700; }
.alriashi-site-navigation { align-items: center; display: none; gap: var(--alriashi-space-1); }
.alriashi-site-navigation a { color: var(--alriashi-color-text-muted); font-size: 0.875rem; font-weight: 700; padding: var(--alriashi-space-3); text-decoration: none; }
.alriashi-site-navigation a:hover { color: var(--alriashi-color-primary-strong); }
.alriashi-site-navigation a.is-active { color: var(--alriashi-color-primary-strong); text-decoration: underline; text-decoration-color: var(--alriashi-color-primary); text-decoration-thickness: 2px; text-underline-offset: 0.45rem; }
.alriashi-mobile-navigation { position: relative; }
.alriashi-mobile-navigation summary { align-items: center; color: var(--alriashi-color-ink); cursor: pointer; display: inline-flex; font-size: 0.875rem; font-weight: 800; gap: var(--alriashi-space-2); list-style: none; min-height: var(--alriashi-target-size); padding-inline: var(--alriashi-space-2); }
.alriashi-mobile-navigation summary::-webkit-details-marker { display: none; }
.alriashi-mobile-navigation summary .alriashi-icon { transition: transform var(--alriashi-motion-fast); }
.alriashi-mobile-navigation[open] summary .alriashi-icon { transform: rotate(45deg); }
.alriashi-mobile-navigation__panel { background: var(--alriashi-color-surface); border: 1px solid var(--alriashi-color-border-strong); border-radius: var(--alriashi-radius-md); box-shadow: var(--alriashi-shadow-raised); display: grid; gap: var(--alriashi-space-1); inset-block-start: calc(100% + var(--alriashi-space-2)); inset-inline-end: 0; min-width: min(18rem, calc(100vw - (var(--alriashi-gutter) * 2))); padding: var(--alriashi-space-2); position: absolute; }
.alriashi-mobile-navigation__panel a { border-radius: var(--alriashi-radius-sm); color: var(--alriashi-color-ink); font-weight: 700; padding: var(--alriashi-space-3) var(--alriashi-space-4); text-decoration: none; }
.alriashi-mobile-navigation__panel a:hover { background: var(--alriashi-color-primary-soft); }
.alriashi-mobile-navigation__panel a.is-active { background: var(--alriashi-color-primary-soft); color: var(--alriashi-color-primary-strong); }

.alriashi-home { overflow: clip; }
.alriashi-home__section { padding-block: var(--alriashi-section-space); }
.alriashi-home__section--quiet { background: var(--alriashi-color-surface-muted); }
.alriashi-hero { background: linear-gradient(105deg, rgba(31, 39, 48, 0.98) 0%, rgba(31, 39, 48, 0.93) 48%, rgba(31, 39, 48, 0.78) 100%), radial-gradient(circle at 90% 15%, rgba(179, 48, 56, 0.54), transparent 26%), var(--alriashi-color-ink); color: var(--alriashi-color-on-primary); padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; }
.alriashi-hero::after { border: 1px solid rgba(250, 247, 240, 0.18); border-radius: 50%; content: ""; height: min(36rem, 62vw); inset-block-end: -20rem; inset-inline-end: -13rem; position: absolute; width: min(36rem, 62vw); }
.alriashi-hero__content { max-width: 47rem; position: relative; z-index: var(--alriashi-z-content); }
.alriashi-eyebrow { align-items: center; color: var(--alriashi-color-primary-light); display: inline-flex; font-size: 0.75rem; font-weight: 800; gap: var(--alriashi-space-2); letter-spacing: 0.12em; margin: 0 0 var(--alriashi-space-5); text-transform: uppercase; }
.alriashi-eyebrow::before { background: currentColor; content: ""; height: 0.5rem; width: 0.5rem; }
.alriashi-hero h1 { color: var(--alriashi-color-on-primary); font-family: var(--alriashi-font-display); font-size: clamp(2.65rem, 7vw, 5.5rem); font-weight: 750; letter-spacing: -0.055em; line-height: 0.98; margin: 0; max-width: 10.5ch; text-wrap: balance; }
.alriashi-hero__lede { color: var(--alriashi-color-on-primary-muted); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.7; margin: var(--alriashi-space-5) 0 0; max-width: 39rem; }
.alriashi-hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--alriashi-space-3); margin-top: var(--alriashi-space-6); }
.alriashi-section-heading { align-items: end; display: grid; gap: var(--alriashi-space-4); grid-template-columns: 1fr; margin-bottom: var(--alriashi-space-6); }
.alriashi-section-heading__label { color: var(--alriashi-color-primary-strong); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; margin: 0 0 var(--alriashi-space-2); text-transform: uppercase; }
.alriashi-section-heading h2 { color: var(--alriashi-color-ink); font-family: var(--alriashi-font-display); font-size: clamp(1.85rem, 4vw, 3rem); letter-spacing: -0.04em; line-height: 1.08; margin: 0; max-width: 17ch; text-wrap: balance; }
.alriashi-section-heading__description { color: var(--alriashi-color-text-muted); margin: 0; max-width: 39rem; }
.alriashi-tool-grid, .alriashi-article-grid, .alriashi-topic-grid { display: grid; gap: var(--alriashi-space-4); grid-template-columns: 1fr; }
.alriashi-topic-grid { gap: var(--alriashi-space-3); }
.alriashi-topic-card { background: var(--alriashi-color-surface); border-inline-start: 3px solid var(--alriashi-color-primary); padding: var(--alriashi-space-5); }
.alriashi-topic-card h3 { color: var(--alriashi-color-ink); font-family: var(--alriashi-font-display); font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 var(--alriashi-space-2); }
.alriashi-topic-card p { color: var(--alriashi-color-text-muted); margin: 0; }
.alriashi-author { align-items: start; background: var(--alriashi-color-strong-surface); color: var(--alriashi-color-on-primary); display: grid; gap: var(--alriashi-space-5); padding: clamp(1.5rem, 5vw, 3.5rem); }
.alriashi-author__mark { align-items: center; background: var(--alriashi-color-primary); color: var(--alriashi-color-on-primary); display: flex; font-family: var(--alriashi-font-display); font-size: 2.5rem; font-weight: 800; height: 5rem; justify-content: center; width: 5rem; }
.alriashi-author h2 { color: var(--alriashi-color-on-primary); font-family: var(--alriashi-font-display); font-size: clamp(1.7rem, 3.5vw, 2.5rem); letter-spacing: -0.035em; margin: 0 0 var(--alriashi-space-3); }
.alriashi-author p { color: var(--alriashi-color-on-primary-muted); margin: 0; max-width: 48rem; }
.alriashi-site-footer { background: var(--alriashi-color-surface); border-block-start: 1px solid var(--alriashi-color-border); padding-block: var(--alriashi-space-6); }
.alriashi-site-footer__inner { color: var(--alriashi-color-text-muted); display: grid; font-size: 0.875rem; gap: var(--alriashi-space-4); }
.alriashi-site-footer__brand { color: var(--alriashi-color-ink); font-weight: 800; letter-spacing: 0.08em; }
.alriashi-site-footer__note { margin: 0; max-width: 48rem; }
.alriashi-footer-navigation { display: flex; flex-wrap: wrap; gap: var(--alriashi-space-3); }
.alriashi-footer-navigation a { color: var(--alriashi-color-text-muted); font-weight: 700; text-decoration: none; }
.alriashi-footer-navigation a:hover { color: var(--alriashi-color-primary-strong); text-decoration: underline; }

@media (min-width: 48rem) {
    .alriashi-site-navigation { display: flex; }
    .alriashi-mobile-navigation { display: none; }
    .alriashi-section-heading { grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr); }
    .alriashi-tool-grid, .alriashi-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alriashi-article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .alriashi-author { grid-template-columns: auto minmax(0, 1fr); }
    .alriashi-site-footer__inner { align-items: end; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr); }
    .alriashi-footer-navigation { justify-content: end; }
}
@media (min-width: 64rem) {
    .alriashi-tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .alriashi-tool-grid > :first-child { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}