/* =============================================================================
   Aurora - profile template for Salkini.me
   -----------------------------------------------------------------------------
   An editorial, typography-led profile. Serif display headings against a neutral
   ramp, hairline "ledger" rows instead of dotted timelines, and one luminous
   accent used sparingly.

   Conventions used throughout:
   - Everything is driven by the custom properties in the token block below, so a
     new accent palette is 4 declarations and no new rules.
   - Logical properties (inline-start/end, padding-inline) everywhere, so RTL is
     a `dir` attribute rather than a mirrored stylesheet.
   - `au-` prefix on every selector. This template shares a document with nothing
     else, but the prefix keeps it greppable and immune to portfolio.css.
   - Every transform/opacity animation is inside a `prefers-reduced-motion: no-preference`
     query or neutralised at the end of the file.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
    /* Type families. Instrument Serif carries the display voice in Latin; Cairo
       does the same for Arabic, where a Latin serif has no equivalent. */
    --au-font-display: "Instrument Serif", "Outfit", "Iowan Old Style", Georgia, serif;
    --au-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --au-font-arabic: "Cairo", "Noto Naskh Arabic", system-ui, sans-serif;
    --au-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    /* Fluid type scale, 320px -> 1440px viewport. */
    --au-text-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
    --au-text-sm: clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem);
    --au-text-base: clamp(0.9375rem, 0.91rem + 0.18vw, 1.0625rem);
    --au-text-md: clamp(1.0625rem, 1.01rem + 0.27vw, 1.1875rem);
    --au-text-lg: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
    --au-text-xl: clamp(1.5rem, 1.29rem + 1.07vw, 2.125rem);
    --au-text-2xl: clamp(1.875rem, 1.45rem + 2.14vw, 3rem);
    --au-text-3xl: clamp(2.375rem, 1.55rem + 4.11vw, 4.5rem);
    --au-text-4xl: clamp(2.75rem, 1.32rem + 7.14vw, 6rem);

    /* Space scale. Section rhythm scales with the viewport, gaps mostly do not. */
    --au-space-2xs: 0.25rem;
    --au-space-xs: 0.5rem;
    --au-space-sm: 0.75rem;
    --au-space-md: 1rem;
    --au-space-lg: 1.5rem;
    --au-space-xl: 2rem;
    --au-space-2xl: 3rem;
    --au-space-3xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);
    --au-space-4xl: clamp(4.5rem, 3rem + 7vw, 7.5rem);

    --au-shell: 76rem;
    --au-shell-narrow: 52rem;
    --au-gutter: clamp(1.125rem, 0.6rem + 2.6vw, 2.5rem);
    --au-header-h: 4.25rem;

    /* How far the ledger/publication rows bleed past the shell so their hover
       fill has an edge. Deliberately below the gutter minimum, so the bleed
       never reaches the viewport edge. */
    --au-row-inset: 0.75rem;

    --au-radius-xs: 6px;
    --au-radius-sm: 10px;
    --au-radius-md: 14px;
    --au-radius-lg: 22px;
    --au-radius-xl: 34px;
    --au-radius-pill: 999px;

    /* Motion. One easing for entrances, one for interface feedback. */
    --au-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --au-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --au-dur-fast: 160ms;
    --au-dur: 320ms;
    --au-dur-slow: 720ms;

    color-scheme: light;
}

/* Light theme - warm-tinted neutrals rather than pure grey, so the serif reads
   as paper rather than as UI. */
:root,
:root[data-theme="light"] {
    --au-surface: #fbfaf8;
    --au-surface-alt: #f4f2ee;
    --au-surface-raised: #ffffff;
    --au-surface-sunken: #eeebe5;
    --au-surface-invert: #14140f;

    --au-text: #14140f;
    --au-text-soft: #4b4a43;
    --au-text-mute: #75736a;
    --au-text-invert: #fbfaf8;

    --au-line: color-mix(in oklab, var(--au-text) 12%, transparent);
    --au-line-soft: color-mix(in oklab, var(--au-text) 7%, transparent);
    --au-line-strong: color-mix(in oklab, var(--au-text) 22%, transparent);

    --au-glass: color-mix(in oklab, #ffffff 78%, transparent);
    --au-scrim: color-mix(in oklab, #14140f 55%, transparent);

    --au-shadow-sm: 0 1px 2px color-mix(in oklab, #14140f 6%, transparent);
    --au-shadow: 0 2px 6px -1px color-mix(in oklab, #14140f 8%, transparent), 0 10px 24px -8px color-mix(in oklab, #14140f 10%, transparent);
    --au-shadow-lg: 0 4px 12px -2px color-mix(in oklab, #14140f 8%, transparent), 0 28px 56px -16px color-mix(in oklab, #14140f 16%, transparent);

    --au-grain-opacity: 0.4;
    --au-glow-opacity: 0.5;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --au-surface: #0c0d10;
    --au-surface-alt: #12141a;
    --au-surface-raised: #171a21;
    --au-surface-sunken: #08090b;
    --au-surface-invert: #f5f4f1;

    --au-text: #f0efec;
    --au-text-soft: #b6b4ad;
    --au-text-mute: #8b8983;
    --au-text-invert: #101116;

    --au-line: color-mix(in oklab, var(--au-text) 14%, transparent);
    --au-line-soft: color-mix(in oklab, var(--au-text) 8%, transparent);
    --au-line-strong: color-mix(in oklab, var(--au-text) 26%, transparent);

    --au-glass: color-mix(in oklab, #12141a 72%, transparent);
    --au-scrim: color-mix(in oklab, #000000 72%, transparent);

    --au-shadow-sm: 0 1px 2px color-mix(in oklab, #000000 40%, transparent);
    --au-shadow: 0 2px 6px -1px color-mix(in oklab, #000000 45%, transparent), 0 12px 28px -10px color-mix(in oklab, #000000 60%, transparent);
    --au-shadow-lg: 0 6px 16px -4px color-mix(in oklab, #000000 50%, transparent), 0 34px 64px -20px color-mix(in oklab, #000000 70%, transparent);

    --au-grain-opacity: 0.22;
    --au-glow-opacity: 0.75;
}

/* ------------------------------------------------- 2. Accent palettes
   `--au-accent` is only ever used where WCAG contrast matters (text, borders,
   focus rings) and is picked to clear 4.5:1 against its surface in both themes.
   `--au-glow` is the decorative twin: free to be brighter because nothing
   legible sits on it. */

[data-profile-accent="modern"] {
    --au-accent: #0e7490;
    --au-accent-hover: #155e75;
    --au-glow: #22d3ee;
    --au-glow-2: #6366f1;
}

[data-profile-accent="classic"] {
    --au-accent: #1d4ed8;
    --au-accent-hover: #1e40af;
    --au-glow: #60a5fa;
    --au-glow-2: #c084fc;
}

[data-profile-accent="minimal"] {
    --au-accent: #3f3f46;
    --au-accent-hover: #27272a;
    --au-glow: #a1a1aa;
    --au-glow-2: #78716c;
}

[data-profile-accent="creative"] {
    --au-accent: #6d28d9;
    --au-accent-hover: #5b21b6;
    --au-glow: #a78bfa;
    --au-glow-2: #f472b6;
}

[data-theme="dark"][data-profile-accent="modern"] {
    --au-accent: #67e8f9;
    --au-accent-hover: #a5f3fc;
}

[data-theme="dark"][data-profile-accent="classic"] {
    --au-accent: #93c5fd;
    --au-accent-hover: #bfdbfe;
}

[data-theme="dark"][data-profile-accent="minimal"] {
    --au-accent: #d4d4d8;
    --au-accent-hover: #f4f4f5;
}

[data-theme="dark"][data-profile-accent="creative"] {
    --au-accent: #c4b5fd;
    --au-accent-hover: #ddd6fe;
}

/* Accent tint used behind pills and hovers - derived, never hand-authored, so it
   tracks whatever palette is active. */
:root {
    --au-accent-wash: color-mix(in oklab, var(--au-accent) 12%, transparent);
    --au-accent-wash-strong: color-mix(in oklab, var(--au-accent) 20%, transparent);
    --au-accent-line: color-mix(in oklab, var(--au-accent) 45%, transparent);

    /* Kept separate from --au-accent-wash: a full-bleed ledger row needs a
       fainter fill than a pill-sized control to read as a highlight rather than
       a block of colour. Still strong enough to be seen without a comparison
       row next to it, which is the whole point of a hover state. */
    --au-hover-row: color-mix(in oklab, var(--au-accent) 9%, transparent);

    /* Hover for surfaces that sit on an accent-free panel (dropdown items).
       Derived from --au-text so it darkens on a light panel and lightens on a
       dark one, instead of following the surface ramp - which inverts between
       themes and left dark-mode menu hovers *darker* than the panel. */
    --au-hover-neutral: color-mix(in oklab, var(--au-text) 9%, transparent);
}

/* The same mix percentage of a light accent over a near-black surface lands at
   roughly half the perceived contrast of its light-mode counterpart, so dark
   mode gets stronger mixes rather than reusing the light ones. */
:root[data-theme="dark"] {
    --au-accent-wash: color-mix(in oklab, var(--au-accent) 17%, transparent);
    --au-accent-wash-strong: color-mix(in oklab, var(--au-accent) 27%, transparent);
    --au-accent-line: color-mix(in oklab, var(--au-accent) 55%, transparent);
    --au-hover-row: color-mix(in oklab, var(--au-accent) 14%, transparent);
    --au-hover-neutral: color-mix(in oklab, var(--au-text) 13%, transparent);
}

/* -------------------------------------------------------------- 3. Reset */

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

.au-doc {
    margin: 0;
    padding: 0;
    background: var(--au-surface);
    color: var(--au-text);
    font-family: var(--au-font-sans);
    font-size: var(--au-text-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    overflow-x: hidden;
    /* Prevents the sticky header from covering an anchor target. */
    scroll-padding-top: calc(var(--au-header-h) + var(--au-space-lg));
}

html:has(> .au-doc) {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--au-header-h) + var(--au-space-lg));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

[dir="rtl"] .au-doc {
    font-family: var(--au-font-arabic);
}

.au-doc :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
    margin: 0;
}

.au-doc :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.au-doc :where(img, picture, svg, iframe, video) {
    display: block;
    max-width: 100%;
}

.au-doc :where(img) {
    height: auto;
}

.au-doc :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.au-doc :where(a) {
    color: inherit;
    text-decoration: none;
}

.au-doc :where(svg) {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/*
   The `hidden` attribute only carries a UA-level `display: none`, so any author
   rule that sets `display` beats it - which silently breaks every element this
   template hides from script (inactive theme icons, the "Show more" toggle on
   short text, the non-active language block). One declaration, stated once,
   rather than remembering to re-assert it per component.
*/
.au-doc [hidden] {
    display: none !important;
}

/* One focus treatment for the whole template. Two rings so it stays visible on
   both light and dark surfaces and over imagery. */
.au-doc :where(a, button, [tabindex], input, summary, dialog):focus-visible {
    outline: 2px solid var(--au-accent);
    outline-offset: 3px;
    border-radius: var(--au-radius-xs);
}

.au-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.au-skip {
    position: fixed;
    inset-block-start: var(--au-space-xs);
    inset-inline-start: var(--au-space-xs);
    z-index: 200;
    padding: 0.7rem 1.1rem;
    background: var(--au-accent);
    color: #fff;
    border-radius: var(--au-radius-sm);
    font-size: var(--au-text-sm);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--au-dur) var(--au-ease);
}

[data-theme="dark"] .au-skip {
    color: var(--au-text-invert);
}

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

/* ------------------------------------------------------------ 4. Primitives */

.au-shell {
    width: 100%;
    max-width: var(--au-shell);
    margin-inline: auto;
    padding-inline: var(--au-gutter);
}

.au-shell--narrow {
    max-width: var(--au-shell-narrow);
}

.au-display {
    font-family: var(--au-font-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

[dir="rtl"] .au-display {
    font-family: var(--au-font-arabic);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.au-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: var(--au-text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--au-text-mute);
}

[dir="rtl"] .au-eyebrow {
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--au-text-sm);
}

.au-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--au-accent);
    flex: none;
}

.au-rule {
    height: 1px;
    border: 0;
    background: var(--au-line);
}

/* Buttons ------------------------------------------------------------------ */

.au-btn {
    --au-btn-bg: transparent;
    --au-btn-fg: var(--au-text);
    --au-btn-border: var(--au-line-strong);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 2.875rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--au-btn-border);
    border-radius: var(--au-radius-pill);
    background: var(--au-btn-bg);
    color: var(--au-btn-fg);
    font-size: var(--au-text-sm);
    font-weight: 550;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background var(--au-dur-fast) var(--au-ease-soft), border-color var(--au-dur-fast) var(--au-ease-soft), color var(--au-dur-fast) var(--au-ease-soft), transform var(--au-dur-fast) var(--au-ease-soft), box-shadow var(--au-dur) var(--au-ease-soft);
}

.au-btn svg {
    width: 1.05em;
    height: 1.05em;
}

.au-btn--solid {
    --au-btn-bg: var(--au-text);
    --au-btn-fg: var(--au-text-invert);
    --au-btn-border: var(--au-text);
    box-shadow: var(--au-shadow-sm);
}

.au-btn--accent {
    --au-btn-bg: var(--au-accent);
    --au-btn-fg: #fff;
    --au-btn-border: var(--au-accent);
}

[data-theme="dark"] .au-btn--accent {
    --au-btn-fg: var(--au-text-invert);
}

.au-btn--ghost {
    --au-btn-border: var(--au-line);
}

.au-btn:hover {
    border-color: var(--au-accent);
    color: var(--au-accent);
}

.au-btn--solid:hover {
    --au-btn-bg: var(--au-accent);
    --au-btn-fg: #fff;
    border-color: var(--au-accent);
    color: var(--au-btn-fg);
}

[data-theme="dark"] .au-btn--solid:hover {
    --au-btn-fg: var(--au-text-invert);
}

.au-btn--accent:hover {
    --au-btn-bg: var(--au-accent-hover);
    --au-btn-border: var(--au-accent-hover);
    color: var(--au-btn-fg);
}

.au-btn:active {
    transform: translateY(1px);
}

/* Icon-only control, used in the header and on sliders. */
.au-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid transparent;
    color: var(--au-text-soft);
    transition: color var(--au-dur-fast) var(--au-ease-soft), background var(--au-dur-fast) var(--au-ease-soft), border-color var(--au-dur-fast) var(--au-ease-soft);
}

.au-icon-btn svg {
    width: 1.15rem;
    height: 1.15rem;
}

.au-icon-btn:hover {
    color: var(--au-text);
    background: var(--au-accent-wash);
    border-color: var(--au-accent-line);
}

.au-icon-btn[aria-expanded="true"] {
    color: var(--au-accent);
    background: var(--au-accent-wash);
    border-color: var(--au-accent-line);
}

/* Text link with a sweeping underline. */
.au-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    color: var(--au-accent);
    font-weight: 550;
    font-size: var(--au-text-sm);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size var(--au-dur) var(--au-ease), color var(--au-dur-fast) var(--au-ease-soft);
    padding-block-end: 2px;
}

[dir="rtl"] .au-link {
    background-position: 100% 100%;
}

.au-link:hover {
    background-size: 100% 1px;
    color: var(--au-accent-hover);
}

.au-link svg {
    width: 1em;
    height: 1em;
    transition: transform var(--au-dur) var(--au-ease);
}

.au-link:hover svg {
    transform: translateX(3px);
}

[dir="rtl"] .au-link:hover svg {
    transform: translateX(-3px) scaleX(-1);
}

[dir="rtl"] .au-link svg {
    transform: scaleX(-1);
}

/* Pills / tags ------------------------------------------------------------- */

.au-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-pill);
    background: var(--au-surface-raised);
    color: var(--au-text-soft);
    font-size: var(--au-text-sm);
    line-height: 1.4;
    transition: border-color var(--au-dur-fast) var(--au-ease-soft), color var(--au-dur-fast) var(--au-ease-soft), background var(--au-dur-fast) var(--au-ease-soft);
}

.au-pill svg {
    width: 0.9em;
    height: 0.9em;
    color: var(--au-accent);
}

.au-pill:hover {
    border-color: var(--au-accent-line);
    color: var(--au-text);
}

.au-pill--bare {
    background: transparent;
    border-color: var(--au-line-soft);
    font-size: var(--au-text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--au-text-mute);
}

[dir="rtl"] .au-pill--bare {
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------------------------- 5. Scroll progress */

.au-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 120;
    background: transparent;
    pointer-events: none;
}

.au-progress__bar {
    height: 100%;
    width: 100%;
    transform: scaleX(var(--au-progress, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--au-accent), var(--au-glow));
}

[dir="rtl"] .au-progress__bar {
    transform-origin: 100% 50%;
}

/* --------------------------------------------------------------- 6. Header */

.au-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 110;
    height: var(--au-header-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background var(--au-dur) var(--au-ease-soft), box-shadow var(--au-dur) var(--au-ease-soft), border-color var(--au-dur) var(--au-ease-soft), backdrop-filter var(--au-dur) var(--au-ease-soft);
    border-block-end: 1px solid transparent;
}

.au-header[data-stuck="true"] {
    background: var(--au-glass);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-block-end-color: var(--au-line-soft);
    box-shadow: var(--au-shadow-sm);
}

.au-header__inner {
    display: flex;
    align-items: center;
    gap: var(--au-space-md);
    width: 100%;
    max-width: var(--au-shell);
    margin-inline: auto;
    padding-inline: var(--au-gutter);
}

.au-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: var(--au-text-sm);
    letter-spacing: 0.02em;
    margin-inline-end: auto;
}

.au-brand__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    background: var(--au-text);
    color: var(--au-text-invert);
    font-family: var(--au-font-display);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    transition: background var(--au-dur) var(--au-ease-soft), transform var(--au-dur) var(--au-ease);
}

[dir="rtl"] .au-brand__mark {
    font-family: var(--au-font-sans);
    font-weight: 700;
}

.au-brand:hover .au-brand__mark {
    background: var(--au-accent);
    color: #fff;
    transform: rotate(-6deg);
}

[data-theme="dark"] .au-brand:hover .au-brand__mark {
    color: var(--au-text-invert);
}

.au-brand__text {
    color: var(--au-text-soft);
}

/* Desktop nav ------------------------------------------------------------- */

.au-nav {
    display: none;
}

.au-nav__list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.au-nav__link {
    position: relative;
    display: block;
    padding: 0.45rem 0.7rem;
    border-radius: var(--au-radius-pill);
    font-size: var(--au-text-sm);
    color: var(--au-text-mute);
    transition: color var(--au-dur-fast) var(--au-ease-soft), background var(--au-dur-fast) var(--au-ease-soft);
}

.au-nav__link:hover {
    color: var(--au-text);
    background: var(--au-accent-wash);
}

.au-nav__link[aria-current="true"] {
    color: var(--au-text);
    font-weight: 550;
}

.au-nav__link[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset-block-end: 0.15rem;
    inset-inline-start: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--au-accent);
    transform: translateX(-50%);
}

.au-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/* Dropdown shared by the theme and language controls. */
.au-menu {
    position: relative;
}

.au-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    min-width: 11rem;
    padding: 0.4rem;
    background: var(--au-surface-raised);
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-md);
    box-shadow: var(--au-shadow-lg);
    display: grid;
    gap: 0.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: 100% 0;
    transition: opacity var(--au-dur-fast) var(--au-ease-soft), transform var(--au-dur-fast) var(--au-ease), visibility var(--au-dur-fast);
    z-index: 5;
}

[dir="rtl"] .au-menu__panel {
    transform-origin: 0 0;
}

.au-menu[data-open="true"] .au-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.au-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: var(--au-radius-sm);
    font-size: var(--au-text-sm);
    color: var(--au-text-soft);
    text-align: start;
    transition: background var(--au-dur-fast) var(--au-ease-soft), color var(--au-dur-fast) var(--au-ease-soft);
}

.au-menu__item svg {
    width: 1rem;
    height: 1rem;
}

/* Was --au-surface-alt, which is *below* --au-surface-raised on the dark ramp -
   so the hovered item in the theme/language menus came out darker than the panel
   it sits in and read as a hole rather than a highlight. */
.au-menu__item:hover {
    background: var(--au-hover-neutral);
    color: var(--au-text);
}

.au-menu__item[aria-checked="true"] {
    color: var(--au-accent);
    font-weight: 550;
}

.au-menu__item[aria-checked="true"] .au-menu__tick {
    opacity: 1;
}

.au-menu__tick {
    margin-inline-start: auto;
    opacity: 0;
    color: var(--au-accent);
}

/* Mobile drawer ----------------------------------------------------------- */

.au-burger {
    display: inline-flex;
}

.au-drawer {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    grid-template-rows: 1fr;
    visibility: hidden;
    pointer-events: none;
}

.au-drawer[data-open="true"] {
    visibility: visible;
    pointer-events: auto;
}

.au-drawer__scrim {
    position: absolute;
    inset: 0;
    background: var(--au-scrim);
    opacity: 0;
    transition: opacity var(--au-dur) var(--au-ease-soft);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.au-drawer[data-open="true"] .au-drawer__scrim {
    opacity: 1;
}

.au-drawer__panel {
    position: relative;
    inset-inline-start: 0;
    width: min(23rem, 88vw);
    margin-inline-start: auto;
    height: 100%;
    padding: var(--au-space-lg) var(--au-space-lg) var(--au-space-2xl);
    background: var(--au-surface-raised);
    border-inline-start: 1px solid var(--au-line);
    box-shadow: var(--au-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--au-space-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(101%);
    transition: transform var(--au-dur) var(--au-ease);
}

[dir="rtl"] .au-drawer__panel {
    transform: translateX(-101%);
}

.au-drawer[data-open="true"] .au-drawer__panel {
    transform: translateX(0);
}

.au-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--au-space-md);
}

.au-drawer__nav {
    display: grid;
    gap: 0.15rem;
}

.au-drawer__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.75rem;
    border-radius: var(--au-radius-sm);
    font-size: var(--au-text-md);
    color: var(--au-text-soft);
    transition: background var(--au-dur-fast) var(--au-ease-soft), color var(--au-dur-fast) var(--au-ease-soft);
}

.au-drawer__link svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--au-text-mute);
}

.au-drawer__link:hover,
.au-drawer__link[aria-current="true"] {
    background: var(--au-accent-wash);
    color: var(--au-text);
}

.au-drawer__link[aria-current="true"] svg {
    color: var(--au-accent);
}

.au-drawer__group {
    display: grid;
    gap: var(--au-space-xs);
}

.au-drawer__label {
    font-size: var(--au-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--au-text-mute);
}

[dir="rtl"] .au-drawer__label {
    letter-spacing: 0;
    text-transform: none;
}

.au-segment {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--au-surface-alt);
    border: 1px solid var(--au-line-soft);
    border-radius: var(--au-radius-pill);
}

.au-segment__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--au-radius-pill);
    font-size: var(--au-text-sm);
    color: var(--au-text-mute);
    transition: background var(--au-dur-fast) var(--au-ease-soft), color var(--au-dur-fast) var(--au-ease-soft), box-shadow var(--au-dur-fast) var(--au-ease-soft);
}

.au-segment__btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.au-segment__btn[aria-checked="true"] {
    background: var(--au-surface-raised);
    color: var(--au-text);
    box-shadow: var(--au-shadow-sm);
    font-weight: 550;
}

/* The unselected segments had no hover state at all, so the drawer's theme and
   language switches looked inert until clicked. Excluding the checked one keeps
   the selection the strongest thing in the control. */
.au-segment__btn:hover:not([aria-checked="true"]) {
    background: var(--au-hover-neutral);
    color: var(--au-text);
}

/* ----------------------------------------------------------------- 7. Hero */

.au-hero {
    position: relative;
    padding-block: calc(var(--au-header-h) + var(--au-space-3xl)) var(--au-space-3xl);
    overflow: clip;
    isolation: isolate;
}

/* Decorative aurora field. Two soft radial gradients plus an SVG grain, all
   behind `aria-hidden` and all dropped when motion is reduced. */
.au-hero__canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.au-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: var(--au-glow-opacity);
    will-change: transform;
}

.au-hero__glow--a {
    width: clamp(18rem, 45vw, 34rem);
    aspect-ratio: 1;
    inset-block-start: -12%;
    inset-inline-end: -8%;
    background: radial-gradient(circle at 50% 50%, var(--au-glow) 0%, transparent 68%);
}

.au-hero__glow--b {
    width: clamp(16rem, 38vw, 28rem);
    aspect-ratio: 1;
    inset-block-end: -18%;
    inset-inline-start: -10%;
    background: radial-gradient(circle at 50% 50%, var(--au-glow-2) 0%, transparent 68%);
}

.au-hero__grain {
    position: absolute;
    inset: 0;
    opacity: var(--au-grain-opacity);
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Hairline grid that anchors the editorial feel. */
.au-hero__lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--au-line-soft) 1px, transparent 1px);
    background-size: 25% 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
}

.au-hero__grid {
    display: grid;
    gap: var(--au-space-2xl);
}

.au-hero__body {
    display: grid;
    gap: var(--au-space-lg);
    justify-items: start;
}

.au-hero__honorific {
    font-family: var(--au-font-display);
    font-style: italic;
    font-size: var(--au-text-lg);
    line-height: 1;
    color: var(--au-text-mute);
    margin-block-end: calc(var(--au-space-lg) * -0.6);
}

[dir="rtl"] .au-hero__honorific {
    font-family: var(--au-font-arabic);
    font-style: normal;
    font-weight: 500;
}

.au-hero__name {
    font-size: var(--au-text-4xl);
    color: var(--au-text);
    max-width: 22ch;
}

.au-hero__role {
    font-size: var(--au-text-lg);
    color: var(--au-text);
    font-weight: 500;
    letter-spacing: -0.005em;
    max-width: 34ch;
}

.au-hero__role::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 1px;
    background: var(--au-accent);
    vertical-align: 0.35em;
    margin-inline-end: 0.75rem;
}

.au-hero__at {
    font-size: var(--au-text-sm);
    color: var(--au-text-mute);
    margin-block-start: calc(var(--au-space-lg) * -0.55);
}

.au-hero__at strong {
    font-weight: 600;
    color: var(--au-text-soft);
}

.au-hero__bio {
    font-size: var(--au-text-md);
    color: var(--au-text-soft);
    max-width: 46ch;
    line-height: 1.7;
}

.au-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--au-space-sm);
}

/* Metrics row - rule-separated rather than boxed, to stay editorial.
   Grid rather than flex-wrap so three metrics stay on one line even at 360px:
   wrapping the third one onto its own row pushed the portrait a screenful down. */
.au-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, max-content));
    gap: var(--au-space-md) var(--au-space-xl);
    padding-block-start: var(--au-space-md);
    border-block-start: 1px solid var(--au-line);
    width: 100%;
}

.au-metric {
    display: grid;
    gap: 0.15rem;
}

.au-metric__value {
    font-family: var(--au-font-display);
    font-size: var(--au-text-xl);
    line-height: 1;
    color: var(--au-text);
    font-variant-numeric: tabular-nums;
}

[dir="rtl"] .au-metric__value {
    font-family: var(--au-font-arabic);
    font-weight: 700;
}

.au-metric__label {
    font-size: var(--au-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--au-text-mute);
}

[dir="rtl"] .au-metric__label {
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--au-text-sm);
}

/* Portrait ---------------------------------------------------------------- */

.au-hero__aside {
    display: grid;
    gap: var(--au-space-lg);
    justify-items: center;
}

.au-portrait {
    position: relative;
    width: min(20rem, 72vw);
    aspect-ratio: 4 / 5;
    border-radius: var(--au-radius-xl);
    overflow: hidden;
    background: var(--au-surface-alt);
    box-shadow: var(--au-shadow-lg);
    isolation: isolate;
}

.au-portrait__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--au-dur-slow) var(--au-ease);
}

.au-portrait:hover .au-portrait__img {
    transform: scale(1.03);
}

/* Typographic stand-in for a missing photo. Sits underneath the image, so it is
   revealed for free when the upload URL 404s - no second request, no reflow. */
.au-portrait__mono {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--au-font-display);
    font-size: clamp(3.5rem, 2rem + 9vw, 7rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: color-mix(in oklab, var(--au-accent) 62%, var(--au-text));
    background-image:
        radial-gradient(circle at 32% 24%, var(--au-accent-wash-strong), transparent 62%),
        linear-gradient(150deg, var(--au-surface-alt), var(--au-surface-sunken));
    -webkit-user-select: none;
    user-select: none;
}

[dir="rtl"] .au-portrait__mono {
    font-family: var(--au-font-sans);
    font-weight: 600;
}

.au-portrait[data-image-failed="true"] .au-portrait__img {
    display: none;
}

/* Stacking inside the portrait, bottom to top: monogram, photo, keyline, badge.
   The photo needs an explicit layer to cover the monogram, which in turn forces
   every layer above it to be explicit too. */
.au-portrait__mono {
    z-index: 0;
}

/* Thin inner keyline; a border would sit outside the radius and clip oddly. */
.au-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--au-text) 10%, transparent);
    pointer-events: none;
}

.au-portrait__badge {
    position: absolute;
    z-index: 3;
    inset-block-end: var(--au-space-sm);
    inset-inline-start: var(--au-space-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--au-radius-pill);
    background: var(--au-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--au-line);
    font-size: var(--au-text-xs);
    font-weight: 550;
    color: var(--au-text);
}

.au-portrait__badge svg {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--au-accent);
}

.au-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.au-social__link {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--au-line);
    border-radius: 50%;
    color: var(--au-text-soft);
    transition: color var(--au-dur-fast) var(--au-ease-soft), border-color var(--au-dur-fast) var(--au-ease-soft), background var(--au-dur-fast) var(--au-ease-soft), transform var(--au-dur) var(--au-ease);
}

.au-social__link svg {
    width: 1.05rem;
    height: 1.05rem;
}

.au-social__link:hover {
    color: var(--au-accent);
    border-color: var(--au-accent-line);
    background: var(--au-accent-wash);
    transform: translateY(-3px);
}

.au-scroll-cue {
    display: none;
    margin-block-start: var(--au-space-2xl);
    color: var(--au-text-mute);
    font-size: var(--au-text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    align-items: center;
    gap: 0.6rem;
}

.au-scroll-cue svg {
    width: 1rem;
    height: 1rem;
}

[dir="rtl"] .au-scroll-cue {
    letter-spacing: 0;
    text-transform: none;
}

/* ------------------------------------------------------------- 8. Sections */

.au-section {
    position: relative;
    padding-block: var(--au-space-4xl);
    /* Below-the-fold sections are skipped during initial layout/paint. The
       intrinsic size keeps the scrollbar from jumping as they come into view. */
    content-visibility: auto;
    contain-intrinsic-size: auto 42rem;
}

.au-section[data-tone="alt"] {
    background: var(--au-surface-alt);
}

/* Sections whose whole content is one short row (see ProfileSection.Compact). */
.au-section--compact {
    padding-block: var(--au-space-2xl);
    contain-intrinsic-size: auto 16rem;
}

.au-section--compact .au-section__head {
    margin-block-end: var(--au-space-lg);
}

.au-section--compact .au-section__title {
    font-size: var(--au-text-xl);
}

.au-section__head {
    display: grid;
    gap: var(--au-space-sm);
    max-width: 44rem;
    margin-block-end: var(--au-space-2xl);
}

.au-section__title {
    font-size: var(--au-text-2xl);
    color: var(--au-text);
}

.au-section__sub {
    font-size: var(--au-text-md);
    color: var(--au-text-mute);
    max-width: 48ch;
}

/* Ledger: the two-column date/content rows used by experience and education.
   Chosen over a dotted timeline because it reads like a printed CV and needs no
   pseudo-element mirroring in RTL. */
/* Pulled out past the shell on both sides so the hover fill and the accent bar
   have a margin of their own. Rows keep matching inline padding, so their text
   still lines up with the section heading and their rules still line up with
   this container's top rule. */
.au-ledger {
    display: grid;
    margin-inline: calc(var(--au-row-inset) * -1);
    border-block-start: 1px solid var(--au-line);
}

.au-ledger__row {
    position: relative;
    display: grid;
    gap: var(--au-space-xs) var(--au-space-xl);
    padding-block: var(--au-space-lg);
    padding-inline: var(--au-row-inset);
    border-block-end: 1px solid var(--au-line);
    transition: background var(--au-dur) var(--au-ease-soft);
}

/* The bar lives in the inline padding rather than under the date text, where it
   read as a rule struck through the first column. */
.au-ledger__row::before {
    content: "";
    position: absolute;
    inset-block: var(--au-space-2xs);
    inset-inline-start: 0;
    width: 3px;
    border-radius: var(--au-radius-pill);
    background: var(--au-accent);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform var(--au-dur) var(--au-ease);
}

/* :focus-within as well as :hover - the row can hold a "Show more" button and a
   keyboard visitor gets the same row highlight a pointer does. */
.au-ledger__row:hover::before,
.au-ledger__row:focus-within::before {
    transform: scaleY(1);
}

.au-ledger__row:hover,
.au-ledger__row:focus-within {
    background: var(--au-hover-row);
}

/* Lifting the muted column on hover gives the fill something to read against;
   the tint alone can be mistaken for a screen artefact on a dim display. */
.au-ledger__row:hover .au-ledger__date,
.au-ledger__row:focus-within .au-ledger__date {
    color: var(--au-text-soft);
}

.au-ledger__meta {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.au-ledger__date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--au-text-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--au-text-mute);
    white-space: nowrap;
    transition: color var(--au-dur) var(--au-ease-soft);
}

[dir="rtl"] .au-ledger__date {
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--au-text-sm);
}

.au-ledger__now {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--au-radius-pill);
    background: var(--au-accent-wash);
    color: var(--au-accent);
    font-size: var(--au-text-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    width: fit-content;
}

.au-ledger__body {
    display: grid;
    gap: var(--au-space-xs);
    min-width: 0;
}

.au-ledger__title {
    font-size: var(--au-text-lg);
    font-family: var(--au-font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--au-text);
}

[dir="rtl"] .au-ledger__title {
    font-family: var(--au-font-arabic);
    font-weight: 700;
    line-height: 1.4;
}

.au-ledger__org {
    font-size: var(--au-text-sm);
    font-weight: 550;
    color: var(--au-accent);
}

/* Rich text (bullet lists and paragraphs from the description fields). */
.au-prose {
    color: var(--au-text-soft);
    font-size: var(--au-text-base);
    line-height: 1.72;
    display: grid;
    gap: 0.5rem;
}

.au-prose ul {
    display: grid;
    gap: 0.4rem;
}

.au-prose li {
    position: relative;
    padding-inline-start: 1.1rem;
}

.au-prose li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--au-accent);
    opacity: 0.7;
}

/* Collapsed long descriptions. max-height rather than line-clamp so the toggle
   can animate and so multi-element prose (lists + paragraphs) clamps correctly. */
.au-prose[data-clamped="true"] {
    max-height: 7.4em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.au-more {
    justify-self: start;
    font-size: var(--au-text-sm);
    font-weight: 550;
    color: var(--au-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.au-more svg {
    width: 0.9em;
    height: 0.9em;
    transition: transform var(--au-dur) var(--au-ease);
}

.au-more[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.au-more:hover {
    color: var(--au-accent-hover);
}

/* ------------------------------------------------------------- 9. Skills */

/*
   `align-items: start` so each card is as tall as its own content. Grid stretches
   items to the row height by default, which gave a two-skill group the height of
   a ten-skill group beside it: a card of mostly empty space, with the head rule
   stranded halfway down it and the tag pills stretched into lozenges by the
   leftover height.
*/
.au-skills {
    display: grid;
    align-items: start;
    gap: var(--au-space-lg);
}

.au-skillset {
    padding: var(--au-space-lg);
    background: var(--au-surface-raised);
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-lg);
    display: grid;
    align-content: start;
    gap: var(--au-space-md);
    transition: border-color var(--au-dur) var(--au-ease-soft), box-shadow var(--au-dur) var(--au-ease-soft), transform var(--au-dur) var(--au-ease);
}

.au-skillset:hover {
    border-color: var(--au-accent-line);
    box-shadow: var(--au-shadow);
    transform: translateY(-2px);
}

.au-skillset__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--au-space-md);
    padding-block-end: var(--au-space-sm);
    border-block-end: 1px solid var(--au-line-soft);
}

.au-skillset__title {
    font-size: var(--au-text-md);
    font-weight: 600;
    color: var(--au-text);
}

.au-skillset__count {
    font-size: var(--au-text-xs);
    color: var(--au-text-mute);
    font-variant-numeric: tabular-nums;
}

.au-skillset__list {
    display: grid;
    gap: var(--au-space-sm);
}

.au-skill {
    display: grid;
    gap: 0.35rem;
}

.au-skill__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--au-space-sm);
}

.au-skill__name {
    font-size: var(--au-text-sm);
    color: var(--au-text);
    font-weight: 500;
}

.au-skill__value {
    font-size: var(--au-text-xs);
    color: var(--au-text-mute);
    font-variant-numeric: tabular-nums;
}

/* Meter is a plain div with role="meter"; the fill width is set inline from the
   server so it is correct before any script runs. */
.au-skill__track {
    height: 3px;
    border-radius: var(--au-radius-pill);
    background: var(--au-line);
    overflow: hidden;
}

.au-skill__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--au-accent), var(--au-glow));
    width: var(--au-level, 0%);
    transform-origin: 0 50%;
}

[dir="rtl"] .au-skill__fill {
    background: linear-gradient(270deg, var(--au-accent), var(--au-glow));
}

.au-skill--plain .au-skill__track {
    display: none;
}

/* A pill is sized by its text. Both alignments are explicit because a wrapping
   flex container inherits stretch on lines *and* items, so any container taller
   than the tags themselves inflates every pill into a capsule. */
.au-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: start;
    gap: 0.4rem;
}

/* ------------------------------------------------------------ 10. Projects */

.au-projects {
    display: grid;
    gap: var(--au-space-lg);
}

.au-project {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--au-surface-raised);
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-lg);
    overflow: hidden;
    transition: border-color var(--au-dur) var(--au-ease-soft), box-shadow var(--au-dur) var(--au-ease-soft), transform var(--au-dur) var(--au-ease);
}

.au-project:hover {
    border-color: var(--au-accent-line);
    box-shadow: var(--au-shadow-lg);
    transform: translateY(-4px);
}

.au-project__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--au-surface-sunken);
    overflow: hidden;
}

/* No screenshot: a slim band instead of a third of the card holding one icon. */
.au-project__media--blank {
    aspect-ratio: auto;
    min-height: 5.5rem;
    border-block-end: 1px solid var(--au-line-soft);
}

.au-project__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--au-dur-slow) var(--au-ease), filter var(--au-dur) var(--au-ease-soft);
}

.au-project:hover .au-project__media img {
    transform: scale(1.05);
}

.au-project__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--au-text-mute);
    background-image: radial-gradient(circle at 30% 20%, var(--au-accent-wash), transparent 60%);
}

.au-project__fallback svg {
    width: 2.25rem;
    height: 2.25rem;
    stroke-width: 1.2;
}

.au-project__body {
    display: grid;
    gap: var(--au-space-sm);
    align-content: start;
    padding: var(--au-space-lg);
}

.au-project__title {
    font-family: var(--au-font-display);
    font-weight: 400;
    font-size: var(--au-text-lg);
    line-height: 1.2;
    color: var(--au-text);
}

[dir="rtl"] .au-project__title {
    font-family: var(--au-font-arabic);
    font-weight: 700;
    line-height: 1.4;
}

/* --------------------------------------------------------- 11. Scroll rails
   Certificates and recommendations share one horizontally snapping rail.
   Native overflow scrolling keeps it keyboard- and touch-accessible; the arrow
   buttons are a convenience, not the mechanism. */

.au-rail {
    position: relative;
    display: grid;
    gap: var(--au-space-md);
}

.au-rail__viewport {
    display: flex;
    gap: var(--au-space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--au-line-strong) transparent;
    /* Bleed to the gutter so cards can run off the edge of the shell. */
    margin-inline: calc(var(--au-gutter) * -1);
    padding-inline: var(--au-gutter);
    padding-block-end: var(--au-space-xs);
    /* Without this the snapport starts at the padding edge, so the first card
       snaps 1 gutter left of the section heading and the rail loads pre-scrolled. */
    scroll-padding-inline: var(--au-gutter);
    overscroll-behavior-x: contain;
}

.au-rail__viewport::-webkit-scrollbar {
    height: 6px;
}

.au-rail__viewport::-webkit-scrollbar-thumb {
    background: var(--au-line-strong);
    border-radius: var(--au-radius-pill);
}

.au-rail__item {
    flex: 0 0 min(20rem, 78vw);
    scroll-snap-align: start;
}

.au-rail__nav {
    display: none;
    gap: 0.35rem;
    justify-content: flex-end;
}

.au-rail__btn {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--au-line);
    border-radius: 50%;
    color: var(--au-text-soft);
    transition: color var(--au-dur-fast) var(--au-ease-soft), border-color var(--au-dur-fast) var(--au-ease-soft), background var(--au-dur-fast) var(--au-ease-soft), opacity var(--au-dur-fast);
}

.au-rail__btn svg {
    width: 1rem;
    height: 1rem;
}

[dir="rtl"] .au-rail__btn svg {
    transform: scaleX(-1);
}

.au-rail__btn:hover:not(:disabled) {
    color: var(--au-accent);
    border-color: var(--au-accent-line);
    background: var(--au-accent-wash);
}

.au-rail__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Certificate card -------------------------------------------------------- */

.au-cert {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--au-surface-raised);
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-md);
    overflow: hidden;
    transition: border-color var(--au-dur) var(--au-ease-soft), box-shadow var(--au-dur) var(--au-ease-soft);
}

.au-cert:hover {
    border-color: var(--au-accent-line);
    box-shadow: var(--au-shadow);
}

.au-cert__figure {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--au-surface-sunken);
    overflow: hidden;
    width: 100%;
    display: block;
}

.au-cert__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--au-dur-slow) var(--au-ease);
}

.au-cert__figure:hover img {
    transform: scale(1.04);
}

.au-cert__zoom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--au-scrim);
    color: #fff;
    opacity: 0;
    transition: opacity var(--au-dur) var(--au-ease-soft);
}

.au-cert__zoom svg {
    width: 1.5rem;
    height: 1.5rem;
}

.au-cert__figure:hover .au-cert__zoom,
.au-cert__figure:focus-visible .au-cert__zoom {
    opacity: 1;
}

/* Deliberately shorter than the 4:3 image state: a placeholder icon stretched to
   the same height as a real certificate scan is just dead space. */
.au-cert__blank {
    display: grid;
    place-items: center;
    min-height: 6.5rem;
    color: var(--au-accent);
    background-image: radial-gradient(circle at 50% 40%, var(--au-accent-wash), transparent 65%);
    border-block-end: 1px solid var(--au-line-soft);
}

.au-cert__blank svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke-width: 1.2;
}

.au-cert__body {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    padding: var(--au-space-md);
}

.au-cert__name {
    font-size: var(--au-text-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--au-text);
}

.au-cert__org {
    font-size: var(--au-text-sm);
    color: var(--au-text-mute);
}

.au-cert__date {
    font-size: var(--au-text-xs);
    color: var(--au-text-mute);
    font-variant-numeric: tabular-nums;
}

/* Recommendation card ----------------------------------------------------- */

.au-quote {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--au-space-md);
    padding: var(--au-space-lg);
    background: var(--au-surface-raised);
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-lg);
    transition: border-color var(--au-dur) var(--au-ease-soft), box-shadow var(--au-dur) var(--au-ease-soft);
}

.au-quote:hover {
    border-color: var(--au-accent-line);
    box-shadow: var(--au-shadow);
}

/*
   Every card above leans on a drop shadow to signal hover. A shadow is a dark
   halo, which is close to invisible against a near-black page - so in dark mode
   the cards get a surface lift instead, mixed into the opaque raised colour
   rather than layered as a translucent wash so the card stays a solid panel.
*/
[data-theme="dark"] .au-skillset,
[data-theme="dark"] .au-project,
[data-theme="dark"] .au-cert,
[data-theme="dark"] .au-quote {
    transition: border-color var(--au-dur) var(--au-ease-soft), box-shadow var(--au-dur) var(--au-ease-soft), background var(--au-dur) var(--au-ease-soft), transform var(--au-dur) var(--au-ease);
}

[data-theme="dark"] .au-skillset:hover,
[data-theme="dark"] .au-project:hover,
[data-theme="dark"] .au-cert:hover,
[data-theme="dark"] .au-quote:hover {
    background: color-mix(in oklab, var(--au-accent) 7%, var(--au-surface-raised));
}

.au-quote__mark {
    font-family: var(--au-font-display);
    font-size: 2.75rem;
    line-height: 0.5;
    color: var(--au-accent);
    opacity: 0.35;
    height: 0.9rem;
}

/* Truncated by height rather than -webkit-line-clamp: the clamp shorthand and its
   prefixed twin disagree in current engines and leak an extra line past the
   ellipsis. A max-height plus a fade is predictable and matches .au-prose. */
.au-quote__text {
    font-size: var(--au-text-base);
    line-height: 1.7;
    color: var(--au-text-soft);
    max-height: 10.2em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent);
    mask-image: linear-gradient(to bottom, #000 76%, transparent);
}

.au-quote__foot {
    display: grid;
    gap: var(--au-space-sm);
}

.au-quote__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.au-avatar {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--au-accent-wash-strong);
    color: var(--au-accent);
    font-size: var(--au-text-sm);
    font-weight: 650;
    letter-spacing: 0.02em;
    border: 1px solid var(--au-line);
}

.au-quote__who {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.au-quote__name {
    font-size: var(--au-text-sm);
    font-weight: 600;
    color: var(--au-text);
}

.au-quote__role {
    font-size: var(--au-text-xs);
    color: var(--au-text-mute);
}

.au-quote__linkedin {
    margin-inline-start: auto;
    padding-inline-start: var(--au-space-xs);
    color: var(--au-text-mute);
    transition: color var(--au-dur-fast) var(--au-ease-soft);
}

.au-quote__linkedin:hover {
    color: #0a66c2;
}

.au-quote__linkedin svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* ------------------------------------------------------- 12. Publications */

.au-papers {
    display: grid;
    margin-inline: calc(var(--au-row-inset) * -1);
    border-block-start: 1px solid var(--au-line);
}

/* Same hover contract as .au-ledger__row - these are the template's other
   rule-separated list, and the two sit two sections apart on the same page. */
.au-paper {
    position: relative;
    display: grid;
    gap: var(--au-space-xs) var(--au-space-lg);
    padding-block: var(--au-space-lg);
    padding-inline: var(--au-row-inset);
    border-block-end: 1px solid var(--au-line);
    transition: background var(--au-dur) var(--au-ease-soft);
}

.au-paper::before {
    content: "";
    position: absolute;
    inset-block: var(--au-space-2xs);
    inset-inline-start: 0;
    width: 3px;
    border-radius: var(--au-radius-pill);
    background: var(--au-accent);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform var(--au-dur) var(--au-ease);
}

.au-paper:hover::before,
.au-paper:focus-within::before {
    transform: scaleY(1);
}

.au-paper:hover,
.au-paper:focus-within {
    background: var(--au-hover-row);
}

.au-paper:hover .au-paper__index,
.au-paper:focus-within .au-paper__index {
    color: var(--au-accent);
}

.au-paper__index {
    font-family: var(--au-font-mono);
    font-size: var(--au-text-xs);
    color: var(--au-text-mute);
    font-variant-numeric: tabular-nums;
    padding-block-start: 0.35rem;
    transition: color var(--au-dur) var(--au-ease-soft);
}

.au-paper__body {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.au-paper__title {
    font-size: var(--au-text-md);
    font-weight: 600;
    line-height: 1.4;
    color: var(--au-text);
}

.au-paper__authors {
    font-size: var(--au-text-sm);
    color: var(--au-text-soft);
}

.au-paper__where {
    font-size: var(--au-text-sm);
    color: var(--au-text-mute);
    font-style: italic;
}

/* -------------------------------------------------------- 13. Video / media */

.au-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--au-radius-lg);
    overflow: hidden;
    background: var(--au-surface-sunken);
    border: 1px solid var(--au-line);
    box-shadow: var(--au-shadow);
}

.au-video iframe,
.au-video video {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Click-to-load facade: an embedded player costs several hundred KB and a
   handful of third-party requests, none of which should be paid for by a
   visitor who never presses play. */
.au-video__facade {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    /* Without this the two auto rows stretch to fill the 16:9 box and the caption
       drifts to the bottom edge instead of sitting under the play button. */
    align-content: center;
    gap: var(--au-space-md);
    width: 100%;
    background: var(--au-surface-alt);
    background-image: radial-gradient(circle at 50% 45%, var(--au-accent-wash), transparent 60%);
    color: var(--au-text);
    transition: background var(--au-dur) var(--au-ease-soft);
}

.au-video__facade:hover {
    background-color: var(--au-surface-sunken);
}

.au-video__play {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: var(--au-accent);
    color: #fff;
    box-shadow: var(--au-shadow-lg);
    transition: transform var(--au-dur) var(--au-ease);
}

[data-theme="dark"] .au-video__play {
    color: var(--au-text-invert);
}

.au-video__play svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    stroke: none;
    margin-inline-start: 3px;
}

[dir="rtl"] .au-video__play svg {
    transform: scaleX(-1);
    margin-inline-start: 0;
    margin-inline-end: 3px;
}

.au-video__facade:hover .au-video__play {
    transform: scale(1.08);
}

.au-video__label {
    font-size: var(--au-text-sm);
    color: var(--au-text-soft);
}

/* ------------------------------------------------------------- 14. Contact */

/*
   The closing band stays deep in *both* themes. Painting it with the inverted
   surface would turn it white on a dark page - a full-viewport flash of light at
   the end of the scroll, which is exactly what someone in dark mode is avoiding.
   So it gets its own pair of tokens rather than reusing the invert pair.
*/
.au-contact {
    --au-contact-bg: #14140f;
    --au-contact-fg: #fbfaf8;
    position: relative;
    padding-block: var(--au-space-4xl);
    background: var(--au-contact-bg);
    color: var(--au-contact-fg);
    overflow: clip;
    isolation: isolate;
}

[data-theme="dark"] .au-contact {
    /* Slightly lifted off the page background so the band still reads as a
       distinct surface rather than an unbounded void. */
    --au-contact-bg: #16181f;
    --au-contact-fg: #f0efec;
}

.au-contact__glow {
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -10%;
    width: clamp(18rem, 50vw, 38rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--au-glow) 0%, transparent 65%);
    filter: blur(80px);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
}

.au-contact__grid {
    display: grid;
    gap: var(--au-space-2xl);
    align-items: start;
}

.au-contact__lead {
    display: grid;
    gap: var(--au-space-lg);
    justify-items: start;
}

.au-contact__title {
    font-size: var(--au-text-3xl);
    color: var(--au-contact-fg);
}

.au-contact__text {
    font-size: var(--au-text-md);
    color: color-mix(in oklab, var(--au-contact-fg) 72%, transparent);
    max-width: 44ch;
}

.au-contact .au-eyebrow {
    color: color-mix(in oklab, var(--au-contact-fg) 65%, transparent);
}

.au-contact__list {
    display: grid;
    gap: 0.25rem;
    width: 100%;
}

.au-contact__item {
    display: flex;
    align-items: center;
    gap: var(--au-space-md);
    padding-block: var(--au-space-md);
    border-block-end: 1px solid color-mix(in oklab, var(--au-contact-fg) 14%, transparent);
    color: var(--au-contact-fg);
    font-size: var(--au-text-md);
    transition: padding-inline-start var(--au-dur) var(--au-ease), color var(--au-dur-fast) var(--au-ease-soft);
    word-break: break-word;
}

/* The rules divide items; a trailing one under the last row reads as a list that
   got cut off, which is most obvious on profiles that only publish one thing. */
.au-contact__item:last-child {
    border-block-end: 0;
}

.au-contact__item svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--au-glow);
    flex: none;
}

a.au-contact__item:hover {
    padding-inline-start: var(--au-space-sm);
    color: var(--au-glow);
}

a.au-contact__item:hover svg {
    color: var(--au-glow);
}

.au-contact__arrow {
    margin-inline-start: auto;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--au-dur) var(--au-ease), transform var(--au-dur) var(--au-ease);
}

[dir="rtl"] .au-contact__arrow svg {
    transform: scaleX(-1);
}

a.au-contact__item:hover .au-contact__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* QR / vCard card */
.au-card-qr {
    display: grid;
    gap: var(--au-space-md);
    justify-items: center;
    padding: var(--au-space-lg);
    border-radius: var(--au-radius-lg);
    background: color-mix(in oklab, var(--au-contact-fg) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--au-contact-fg) 14%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    width: 100%;
    max-width: 20rem;
    justify-self: center;
}

.au-card-qr__frame {
    display: grid;
    place-items: center;
    padding: 0.75rem;
    background: #fff;
    border-radius: var(--au-radius-md);
    min-width: 9.5rem;
    min-height: 9.5rem;
}

.au-card-qr__frame canvas,
.au-card-qr__frame img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 11rem;
}

.au-card-qr__label {
    font-size: var(--au-text-sm);
    color: color-mix(in oklab, var(--au-contact-fg) 70%, transparent);
    text-align: center;
}

.au-card-qr__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--au-space-xs);
    justify-content: center;
}

.au-contact .au-btn {
    --au-btn-fg: var(--au-contact-fg);
    --au-btn-border: color-mix(in oklab, var(--au-contact-fg) 30%, transparent);
}

.au-contact .au-btn--solid {
    --au-btn-bg: var(--au-contact-fg);
    --au-btn-fg: var(--au-contact-bg);
    --au-btn-border: var(--au-contact-fg);
}

.au-contact .au-btn:hover {
    --au-btn-bg: var(--au-glow);
    --au-btn-fg: #0c0d10;
    --au-btn-border: var(--au-glow);
    color: var(--au-btn-fg);
}

/* -------------------------------------------------------------- 15. Footer */

.au-footer {
    padding-block: var(--au-space-xl);
    background: var(--au-surface);
    border-block-start: 1px solid var(--au-line);
}

.au-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--au-space-md);
    font-size: var(--au-text-sm);
    color: var(--au-text-mute);
}

.au-footer a {
    color: var(--au-text-soft);
    border-block-end: 1px solid var(--au-line-strong);
    transition: color var(--au-dur-fast) var(--au-ease-soft), border-color var(--au-dur-fast) var(--au-ease-soft);
}

.au-footer a:hover {
    color: var(--au-accent);
    border-block-end-color: var(--au-accent);
}

.au-top {
    position: fixed;
    inset-block-end: var(--au-space-lg);
    inset-inline-end: var(--au-space-lg);
    z-index: 100;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--au-surface-raised);
    border: 1px solid var(--au-line);
    color: var(--au-text-soft);
    box-shadow: var(--au-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--au-dur) var(--au-ease-soft), transform var(--au-dur) var(--au-ease), visibility var(--au-dur), color var(--au-dur-fast), border-color var(--au-dur-fast);
}

.au-top svg {
    width: 1.1rem;
    height: 1.1rem;
}

.au-top[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.au-top:hover {
    color: var(--au-accent);
    border-color: var(--au-accent-line);
}

/* -------------------------------------------------------------- 16. Dialogs
   Native <dialog>: the browser supplies the focus trap, Esc handling, inertness
   of the page behind, and focus restoration on close. */

.au-dialog {
    width: min(56rem, calc(100vw - 2rem));
    max-height: min(86vh, 56rem);
    padding: 0;
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-lg);
    background: var(--au-surface-raised);
    color: var(--au-text);
    box-shadow: var(--au-shadow-lg);
    overflow: hidden;
}

.au-dialog::backdrop {
    background: color-mix(in srgb, #05060a 72%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.au-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--au-space-md);
    padding: var(--au-space-md) var(--au-space-lg);
    border-block-end: 1px solid var(--au-line);
}

.au-dialog__title {
    font-size: var(--au-text-md);
    font-weight: 600;
}

.au-dialog__body {
    padding: var(--au-space-lg);
    overflow-y: auto;
    max-height: calc(86vh - 5rem);
    display: grid;
    gap: var(--au-space-md);
    /* Nothing in a dialog is meant to scroll sideways; a single mis-sized child
       otherwise turns the whole sheet into a two-axis scroller. */
    overflow-x: hidden;
}

/*
   Direct children only. As `.au-dialog__body img` this outspecified `.au-avatar`
   (one class vs one class + one element) and blew the recommender's 2.75rem
   thumbnail up to the full width of the sheet, which in turn shoved the name and
   role column off the inline edge. The certificate lightbox image - the one that
   actually wants the full width - is a direct child, so it still matches.
*/
.au-dialog__body > img {
    width: 100%;
    height: auto;
    /* A tall scan otherwise fills the sheet and pushes its own caption out of
       view; contain keeps the whole certificate on screen at once. */
    max-height: min(70vh, 40rem);
    object-fit: contain;
    border-radius: var(--au-radius-md);
    background: var(--au-surface-sunken);
}

/* Quoted testimony, set as a pull-quote: the accent keyline marks where the
   recommender's words start and end, which a bare paragraph in a sheet titled
   "Recommendation" does not. */
.au-dialog__quote {
    font-size: var(--au-text-md);
    line-height: 1.75;
    color: var(--au-text-soft);
    white-space: pre-line;
    padding-inline-start: var(--au-space-md);
    border-inline-start: 2px solid var(--au-accent-line);
    overflow-wrap: break-word;
}

/* Attribution row. Slightly sunken so it reads as the signature under the quote
   rather than as more of the quote. */
.au-dialog .au-quote__author {
    align-items: center;
    padding: var(--au-space-sm) var(--au-space-md);
    background: var(--au-surface-alt);
    border: 1px solid var(--au-line-soft);
    border-radius: var(--au-radius-md);
}

.au-dialog .au-avatar {
    width: 3rem;
    height: 3rem;
    font-size: var(--au-text-base);
}

.au-dialog .au-quote__role {
    /* Titles like "Associate Professor at Faculty of Informatics" need to wrap;
       the card version truncates, but the sheet is where the full text belongs. */
    font-size: var(--au-text-sm);
    line-height: 1.5;
    overflow-wrap: break-word;
}

.au-dialog--narrow {
    width: min(30rem, calc(100vw - 2rem));
}

/* Share sheet ------------------------------------------------------------- */

.au-share {
    display: grid;
    gap: var(--au-space-md);
}

.au-share__qr {
    display: grid;
    place-items: center;
    /* Shrink-wrap the code rather than stretching a white panel across the sheet. */
    width: fit-content;
    justify-self: center;
    padding: var(--au-space-md);
    background: #fff;
    border-radius: var(--au-radius-md);
    border: 1px solid var(--au-line);
}

.au-share__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: var(--au-space-xs);
}

.au-share__btn {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: var(--au-space-md) var(--au-space-xs);
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-md);
    font-size: var(--au-text-xs);
    color: var(--au-text-soft);
    transition: border-color var(--au-dur-fast) var(--au-ease-soft), color var(--au-dur-fast) var(--au-ease-soft), background var(--au-dur-fast) var(--au-ease-soft), transform var(--au-dur-fast) var(--au-ease);
}

.au-share__btn svg {
    width: 1.2rem;
    height: 1.2rem;
}

.au-share__btn:hover {
    color: var(--au-accent);
    border-color: var(--au-accent-line);
    background: var(--au-accent-wash);
    transform: translateY(-2px);
}

.au-share__copy {
    display: flex;
    align-items: center;
    gap: var(--au-space-xs);
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    border: 1px solid var(--au-line);
    border-radius: var(--au-radius-pill);
    background: var(--au-surface-alt);
}

.au-share__url {
    flex: 1;
    min-width: 0;
    font-size: var(--au-text-sm);
    color: var(--au-text-soft);
    font-family: var(--au-font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: start;
}

/* Toast ------------------------------------------------------------------- */

.au-toast {
    position: fixed;
    inset-block-end: var(--au-space-lg);
    inset-inline-start: 50%;
    z-index: 220;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-radius: var(--au-radius-pill);
    background: var(--au-surface-invert);
    color: var(--au-text-invert);
    font-size: var(--au-text-sm);
    box-shadow: var(--au-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity var(--au-dur) var(--au-ease-soft), transform var(--au-dur) var(--au-ease), visibility var(--au-dur);
}

.au-toast svg {
    width: 1rem;
    height: 1rem;
    color: var(--au-glow);
}

.au-toast[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ------------------------------------------------------- 17. Reveal on scroll
   Elements start displaced and are released by an IntersectionObserver adding
   `data-revealed`. `.au-reveal` is only *applied* by the script (it adds the
   class on load), so a visitor with JS disabled sees everything immediately. */

.au-js .au-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--au-dur-slow) var(--au-ease), transform var(--au-dur-slow) var(--au-ease);
    transition-delay: var(--au-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.au-js .au-reveal[data-revealed="true"] {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Hero entrance: the name rises word by word. */
.au-js .au-hero__name .au-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    animation: au-word-in 900ms var(--au-ease) forwards;
    animation-delay: calc(var(--au-word-index, 0) * 90ms + 120ms);
}

@keyframes au-word-in {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Slow drift on the hero glows - the only ambient animation in the template. */
@media (prefers-reduced-motion: no-preference) {
    .au-hero__glow--a {
        animation: au-drift-a 24s var(--au-ease-soft) infinite alternate;
    }

    .au-hero__glow--b {
        animation: au-drift-b 30s var(--au-ease-soft) infinite alternate;
    }
}

@keyframes au-drift-a {
    to {
        transform: translate3d(-6%, 8%, 0) scale(1.12);
    }
}

@keyframes au-drift-b {
    to {
        transform: translate3d(7%, -6%, 0) scale(1.08);
    }
}

/* ------------------------------------------------------- 18. Responsive
   Mobile-first: everything above is the small-screen layout. */

@media (min-width: 40rem) {
    .au-hero__actions {
        gap: var(--au-space-md);
    }

    .au-ledger__row,
    .au-paper {
        grid-template-columns: 10.5rem 1fr;
    }

    .au-skills {
        grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    }

    .au-projects {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }

    .au-rail__nav {
        display: flex;
    }

    .au-share__copy {
        padding-inline-start: 1.1rem;
    }
}

@media (min-width: 52rem) {
    :root {
        --au-header-h: 4.75rem;
    }

    .au-hero__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--au-space-3xl);
    }

    .au-hero__aside {
        justify-items: end;
    }

    .au-portrait {
        width: 100%;
        max-width: 24rem;
    }

    .au-scroll-cue {
        display: inline-flex;
    }

    .au-contact__grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
        gap: var(--au-space-3xl);
    }

    .au-card-qr {
        justify-self: end;
    }

    .au-ledger__row,
    .au-paper {
        grid-template-columns: 12rem 1fr;
    }
}

@media (min-width: 64rem) {
    .au-nav {
        display: block;
    }

    .au-burger {
        display: none;
    }

    .au-actions {
        gap: 0.25rem;
        margin-inline-start: var(--au-space-md);
    }

    .au-rail__item {
        flex-basis: 21rem;
    }

    .au-projects {
        grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    }
}

/* Very small screens: reclaim horizontal space. */
@media (max-width: 24rem) {
    .au-hero__role::before {
        display: none;
    }

    .au-metrics {
        gap: var(--au-space-md);
    }
}

/* --------------------------------------------------- 19. Preference queries */

@media (prefers-reduced-motion: reduce) {

    html:has(> .au-doc) {
        scroll-behavior: auto;
    }

    .au-doc *,
    .au-doc *::before,
    .au-doc *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Reveal and word-entrance are pure decoration - show the end state. */
    .au-js .au-reveal,
    .au-js .au-hero__name .au-word {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .au-hero__glow {
        animation: none !important;
    }

    .au-rail__viewport {
        scroll-behavior: auto;
    }
}

/* Honour a request for more contrast by hardening the hairlines and dropping
   the decorative washes that reduce it. */
/* `:root[data-theme="dark"]` also sets these, and it outspecifies a bare `:root`
   whatever the source order - so the dark selector is repeated here, otherwise a
   dark-mode visitor asking for more contrast got none of it. */
@media (prefers-contrast: more) {

    :root,
    :root[data-theme="dark"] {
        --au-line: color-mix(in oklab, var(--au-text) 34%, transparent);
        --au-line-soft: color-mix(in oklab, var(--au-text) 22%, transparent);
        --au-line-strong: color-mix(in oklab, var(--au-text) 55%, transparent);
        --au-text-mute: var(--au-text-soft);
        --au-glow-opacity: 0.18;
        --au-grain-opacity: 0;

        --au-hover-row: color-mix(in oklab, var(--au-accent) 20%, transparent);
        --au-hover-neutral: color-mix(in oklab, var(--au-text) 20%, transparent);
        --au-accent-line: color-mix(in oklab, var(--au-accent) 75%, transparent);
    }

    .au-prose[data-clamped="true"] {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Windows high-contrast / forced-colors: strip decoration, keep structure. */
@media (forced-colors: active) {

    .au-hero__canvas,
    .au-contact__glow,
    .au-hero__grain,
    .au-hero__lines {
        display: none;
    }

    .au-doc :where(.au-btn, .au-pill, .au-icon-btn, .au-social__link, .au-rail__btn, .au-top) {
        border: 1px solid ButtonBorder;
    }

    .au-skill__fill {
        background: Highlight;
    }

    .au-prose[data-clamped="true"] {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ---------------------------------------------------------------- 20. Print
   A profile is a CV; someone will print it. Drop the chrome, unclamp the text,
   and let the browser paginate a single column. */

@media print {
    :root {
        --au-surface: #fff;
        --au-surface-alt: #fff;
        --au-surface-raised: #fff;
        --au-surface-invert: #fff;
        --au-text: #000;
        --au-text-soft: #222;
        --au-text-mute: #555;
        --au-text-invert: #000;
        --au-space-4xl: 1.5rem;
        --au-space-3xl: 1rem;
    }

    .au-header,
    .au-progress,
    .au-drawer,
    .au-top,
    .au-toast,
    .au-hero__canvas,
    .au-contact__glow,
    .au-scroll-cue,
    .au-rail__nav,
    .au-hero__actions,
    .au-card-qr__actions,
    .au-more,
    .au-dialog {
        display: none !important;
    }

    .au-section,
    .au-hero,
    .au-contact {
        padding-block: 1rem;
        break-inside: avoid;
        content-visibility: visible;
    }

    .au-doc {
        font-size: 10.5pt;
    }

    .au-rail__viewport {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    .au-rail__item {
        flex-basis: auto;
    }

    .au-prose[data-clamped="true"] {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .au-quote__text {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .au-js .au-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #555;
        word-break: break-all;
    }
}