/* =============================================================================
   site.css — the public site's skin: the portfolio.

   Loaded by `main/v3/site-base-layout.html` only, on top of Bootstrap (grid,
   utilities, collapse, dropdowns). The panels and the auth screens never load
   it, and it never loads landing.css or personalize.css: the public site has
   one fixed, dark look — the Stitch design under
   `assets/stitch_morteza_farhadi_bento_portfolio` — and everything below is
   drawn from the tokens in the first block.

   Four rules this file keeps, and a change should too:

   1. Colour comes from a token. A tone (`.tone-amber`, `.tone-cyan` …) sets
      `--tone`, `--tone-light` and `--tone-rgb`, and a component reads those
      rather than naming a colour — which is how one card markup comes out
      amber, cyan or green.
   2. Sides are logical (`inset-inline-start`, `padding-inline-end`), because
      the site is served RTL in Persian and LTR in English from one markup.
      The exception is a box with its own `dir="ltr"` inside a Persian line —
      an email address, a search box — where the icon is placed per *page*
      direction, since the box's own start is the other side.
   3. Nothing below the 12px floor (`.75rem`) — the design's 10px captions are
      raised to it — and no letter-spacing on Persian text.
   4. CSP drops `style` attributes, so every size a template needs is a class
      (`bar-h-35`), never an inline style.
   ========================================================================== */

/* ------------------------------------------------------ Persian in mono -- */
/* The monospaced stack is Latin fonts only, so a Persian digit or word inside
   a figure (`۹۹٫۹۹٪`, «۱۴۰۱ — اکنون») fell through to whatever system font had
   the glyph — DejaVu Sans Mono on Linux — and came out heavy, a size off and,
   for words, with every letter standing apart. This face is Vazirmatn cut to
   the Arabic script and put first in `--font-mono`: the browser takes it for
   those characters only, and everything Latin stays the mono font's. */
@font-face {
    font-family: "Vazirmatn Fa";
    src: url("../vendor/vazirmatn/fonts/webfonts/Vazirmatn-Regular.cdc140628f11.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
    font-family: "Vazirmatn Fa";
    src: url("../vendor/vazirmatn/fonts/webfonts/Vazirmatn-Medium.dd2193b32cbe.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
    font-family: "Vazirmatn Fa";
    src: url("../vendor/vazirmatn/fonts/webfonts/Vazirmatn-SemiBold.9260c1927872.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
    font-family: "Vazirmatn Fa";
    src: url("../vendor/vazirmatn/fonts/webfonts/Vazirmatn-Bold.7958481fe611.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
    font-family: "Vazirmatn Fa";
    src: url("../vendor/vazirmatn/fonts/webfonts/Vazirmatn-ExtraBold.a0f99309cd35.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

/* ---------------------------------------------------------------- tokens -- */
:root,
html[data-bs-theme="dark"] {
    --bg: #0B0F17;
    --bg-deep: #080B11;
    --surface-0: #0E1420;
    --surface-1: #111827;
    --surface-2: #131C2E;
    --surface-3: #182234;
    --surface-4: #1F2A40;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .15);

    --ink: #F1F5F9;
    --ink-2: #94A3B8;
    --ink-3: #7C8BA1;
    --ink-soft: #CBD5E1;

    --gold: #F59E0B;
    --gold-light: #FBBF24;
    --gold-soft: #FFC174;
    --gold-rgb: 245, 158, 11;
    --cyan: #06B6D4;
    --cyan-light: #4CD7F6;
    --cyan-rgb: 6, 182, 212;
    --blue: #3B82F6;
    --blue-light: #60A5FA;
    --blue-rgb: 59, 130, 246;
    --green: #10B981;
    --green-light: #56E5A9;
    --green-rgb: 16, 185, 129;
    --purple: #8B5CF6;
    --purple-light: #A78BFA;
    --purple-rgb: 139, 92, 246;
    --red: #EF4444;
    --red-light: #F87171;
    --red-rgb: 239, 68, 68;
    --gray: #94A3B8;
    --gray-light: #CBD5E1;
    --gray-rgb: 148, 163, 184;

    --radius-sm: .5rem;
    --radius: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, .5), 0 0 1px 1px rgba(255, 255, 255, .04);
    --shadow-float: 0 18px 40px -12px rgba(0, 0, 0, .65);

    --font: Vazirmatn, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Vazirmatn Fa", ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
    /* A figure — "+6 Yrs", «۹۹٫۹۹٪» — is set in one face, never two: on an
       English page the mono one, on a Persian page Vazirmatn, the design's own
       choice. A Persian figure in the mono stack came out in two fonts at
       once, Vazirmatn digits between monospaced "+", "." and "%". */
    --font-figure: var(--font-mono);

    --header-h: 80px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Bootstrap's own components read these */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font);
    --bs-border-color: var(--line);
    --bs-link-color: var(--cyan-light);
    --bs-link-color-rgb: 76, 215, 246;
    --bs-link-hover-color: var(--gold-soft);
    --bs-link-hover-color-rgb: 255, 193, 116;
    --bs-heading-color: var(--ink);
    --bs-secondary-color: var(--ink-2);
    color-scheme: dark;
}

html[dir="rtl"] { --font-figure: var(--font); }

/* tones: a component reads --tone / --tone-light / --tone-rgb */
.tone-amber { --tone: var(--gold); --tone-light: var(--gold-light); --tone-rgb: var(--gold-rgb); }
.tone-cyan { --tone: var(--cyan); --tone-light: var(--cyan-light); --tone-rgb: var(--cyan-rgb); }
.tone-blue { --tone: var(--blue); --tone-light: var(--blue-light); --tone-rgb: var(--blue-rgb); }
.tone-green { --tone: var(--green); --tone-light: var(--green-light); --tone-rgb: var(--green-rgb); }
.tone-purple { --tone: var(--purple); --tone-light: var(--purple-light); --tone-rgb: var(--purple-rgb); }
.tone-red { --tone: var(--red); --tone-light: var(--red-light); --tone-rgb: var(--red-rgb); }
.tone-gray { --tone: var(--gray); --tone-light: var(--gray-light); --tone-rgb: var(--gray-rgb); }
.tone-text { color: var(--tone-light, var(--gold-light)); }

/* ------------------------------------------------------------------ base -- */
html {
    background-color: var(--bg);
    scrollbar-color: #1F2937 var(--bg);
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

.site-body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

::selection { background: var(--gold); color: #0B0F17; }

.site-body ::-webkit-scrollbar { width: 8px; height: 8px; }
.site-body ::-webkit-scrollbar-track { background: var(--bg); }
.site-body ::-webkit-scrollbar-thumb { background: #1F2937; border-radius: 4px; }
.site-body ::-webkit-scrollbar-thumb:hover { background: #374151; }

.site-body :focus-visible {
    outline: 2px solid var(--cyan-light);
    outline-offset: 2px;
}

.site-body img { max-width: 100%; }
.site-body .bi { line-height: 1; }

.mono { font-family: var(--font-mono); }
.text-gold { color: var(--gold-light); }
.text-ink { color: var(--ink); }
.text-muted-2 { color: var(--ink-3); }

/* drawn for an RTL line; an LTR page mirrors it */
[dir="ltr"] .i-mirror { scale: -1 1; }

.skip-link {
    position: absolute;
    top: -100px;
    inset-inline-start: 1rem;
    z-index: 2000;
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--gold);
    color: #0B0F17;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #0B0F17; }

/* ---------------------------------------------------------------- layout -- */
.site-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(34rem 34rem at 88% -8%, rgba(var(--blue-rgb), .13), transparent 70%),
        radial-gradient(32rem 32rem at -6% 28%, rgba(var(--gold-rgb), .09), transparent 70%),
        radial-gradient(38rem 38rem at 72% 70%, rgba(var(--cyan-rgb), .08), transparent 70%);
}

.site-main {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    overflow-x: clip;
}
.site-main:focus { outline: none; }

.site-container {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}
.site-container.is-narrow { max-width: 960px; }

@media (min-width: 640px) {
    .site-container { padding-inline: 2rem; }
}
@media (min-width: 1024px) {
    .site-container { padding-inline: 3rem; }
}

.site-section { position: relative; padding-block: 2.5rem; }
.site-section.is-tight { padding-block: 1.75rem; }
.site-section.is-flush-top { padding-top: 0; }

@media (min-width: 992px) {
    .site-section { padding-block: 3rem; }
    .site-section.is-tight { padding-block: 2rem; }
}

/* ------------------------------------------------------------ typography -- */
.display-title {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 1.2rem + 3.6vw, 3.375rem);
    font-weight: 800;
    line-height: 1.4;
}

.page-title {
    max-width: 56rem;
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
    font-weight: 800;
    line-height: 1.45;
}

.page-lead {
    max-width: 48rem;
    margin: 0;
    color: var(--ink-2);
    font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
    line-height: 1.95;
}
.page-lead.is-sm { font-size: .875rem; }

.section-title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.45;
}
.section-title.is-sm { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }

.section-lead {
    margin: 0;
    color: var(--ink-2);
    font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
    line-height: 1.95;
}

.eyebrow {
    display: block;
    margin-bottom: .25rem;
    color: var(--gold);
    font-size: .8125rem;
    font-weight: 700;
}

/* the gold brush stroke behind a highlighted run */
.brush {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 0 .4em;
    color: #0B0F17;
}
.brush::before {
    content: "";
    position: absolute;
    inset: 15% -4px 5% -4px;
    z-index: -1;
    border-radius: .5rem;
    background: linear-gradient(135deg, var(--gold), #D97706);
    box-shadow: 0 4px 14px rgba(var(--gold-rgb), .35);
    transform: rotate(-1.5deg);
}

/* ------------------------------------------------------------ primitives -- */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: rgba(24, 34, 52, .9);
    color: var(--gold-soft);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.kicker.is-cyan { color: var(--cyan-light); }
.kicker.is-gold { color: var(--gold-soft); }
.kicker.is-green { color: var(--green-light); }
a.kicker:hover { border-color: rgba(var(--gold-rgb), .35); }

.kicker-dot {
    width: .5rem;
    height: .5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
    animation: dot-glow 2.4s ease-in-out infinite;
}
.kicker-spark { color: var(--cyan-light); font-size: .875rem; }
.kicker-spark.is-gold { color: var(--gold-light); font-size: .75rem; }
.kicker-path { color: var(--ink-3); font-size: .75rem; }

.icon-box {
    --size: 2.75rem;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--tone-rgb, var(--gold-rgb)), .22);
    border-radius: .875rem;
    background: rgba(var(--tone-rgb, var(--gold-rgb)), .1);
    color: var(--tone-light, var(--gold-light));
    font-size: 1.25rem;
    transition: transform .25s var(--ease);
}
/* a 1em flex box drops bootstrap-icons' vertical-align, so the glyph centres */
.icon-box > .bi { display: flex; }
.icon-box.is-sm { --size: 2rem; border-radius: var(--radius-sm); font-size: .9375rem; }
.icon-box.is-lg { --size: 3.5rem; border-radius: var(--radius-lg); font-size: 1.625rem; }

.tag-solid {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    border-radius: .375rem;
    background: rgba(var(--tone-rgb, var(--gold-rgb)), .92);
    color: #0B0F17;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
}
.tag-solid.tone-blue,
.tag-solid.tone-purple,
.tag-solid.tone-red { color: #fff; }

.tag-glass {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    border-radius: .375rem;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
}

.tag-soft {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .75rem;
    border: 1px solid rgba(var(--tone-rgb, var(--gray-rgb)), .2);
    border-radius: var(--radius-pill);
    background: rgba(var(--tone-rgb, var(--gray-rgb)), .12);
    color: var(--tone-light, var(--ink-2));
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.chip {
    display: inline-flex;
    padding: .25rem .625rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
    direction: ltr;
    unicode-bidi: isolate;
}
.chip-list.is-compact .chip {
    padding-inline: .5rem;
    border-color: transparent;
    background: rgba(255, 255, 255, .03);
    color: var(--ink-3);
}

.status-dot {
    --pulse-rgb: var(--tone-rgb, var(--green-rgb));
    display: inline-block;
    width: .625rem;
    height: .625rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tone, var(--green));
    animation: pulse-dot 2s ease-out infinite;
}

.status-pill {
    padding: .125rem .5rem;
    border-radius: .25rem;
    background: rgba(var(--tone-rgb, var(--green-rgb)), .14);
    color: var(--tone-light, var(--green-light));
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    direction: ltr;
}

.level-pill {
    padding: .125rem .625rem;
    border-radius: var(--radius-pill);
    background: rgba(var(--tone-rgb, var(--gray-rgb)), .12);
    color: var(--tone-light, var(--ink-2));
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--green-light);
    font-size: .75rem;
    direction: ltr;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--ink-2);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}
.link-arrow .bi { transition: translate .2s var(--ease); }
.link-arrow:hover { color: var(--gold-soft); }
[dir="rtl"] .link-arrow:hover .i-mirror { translate: -3px 0; }
[dir="ltr"] .link-arrow:hover .i-mirror { translate: 3px 0; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: rgba(19, 28, 46, .6);
    color: var(--ink-2);
    text-align: center;
}
.empty-state .bi { font-size: 2rem; color: var(--ink-3); }
.empty-state p { margin: 0; }
.empty-state.is-inline { margin-top: 1.5rem; padding: 1.5rem; }

/* --------------------------------------------------------------- buttons -- */
.site-body .btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-family: var(--font);
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: transform .2s var(--ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}
.site-body .btn-lg {
    --bs-btn-padding-x: 1.625rem;
    --bs-btn-padding-y: .8125rem;
    --bs-btn-font-size: .9375rem;
    --bs-btn-border-radius: var(--radius);
}
.site-body .btn-sm {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: .8125rem;
}

.btn-gold {
    --bs-btn-color: #0B0F17;
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #0B0F17;
    --bs-btn-hover-bg: var(--gold-light);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #0B0F17;
    --bs-btn-active-bg: var(--gold);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #0B0F17;
    --bs-btn-disabled-bg: var(--gold);
    background-image: linear-gradient(90deg, var(--gold), var(--gold-light));
    box-shadow: 0 4px 22px rgba(var(--gold-rgb), .32);
}
.btn-gold:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 28px rgba(var(--gold-rgb), .5);
}

.btn-glass {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--surface-2);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-border-color: rgba(var(--cyan-rgb), .35);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: rgba(var(--cyan-rgb), .45);
}
.btn-glass:hover { box-shadow: 0 10px 24px -12px rgba(var(--cyan-rgb), .45); }

.btn-ghost {
    --bs-btn-color: var(--ink-2);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-1);
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: var(--surface-2);
    --bs-btn-active-border-color: var(--line-strong);
}
.btn-ghost .bi { transition: translate .2s var(--ease); }
[dir="rtl"] .btn-ghost:hover .i-mirror { translate: -3px 0; }
[dir="ltr"] .btn-ghost:hover .i-mirror { translate: 3px 0; }

.btn-cyan-soft {
    --bs-btn-color: var(--cyan-light);
    --bs-btn-bg: rgba(var(--blue-rgb), .18);
    --bs-btn-border-color: rgba(var(--blue-rgb), .4);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--blue-rgb), .3);
    --bs-btn-hover-border-color: rgba(var(--blue-rgb), .55);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--blue-rgb), .35);
    --bs-btn-active-border-color: rgba(var(--blue-rgb), .6);
    --bs-btn-border-radius: var(--radius);
    box-shadow: 0 10px 24px -14px rgba(var(--blue-rgb), .6);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.btn-row.is-center { justify-content: center; }

.play-dot {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: -.5rem;
    border-radius: 50%;
    background: rgba(var(--blue-rgb), .2);
    color: var(--blue-light);
    transition: background-color .2s, color .2s;
}
.btn-glass:hover .play-dot { background: var(--blue); color: #0B0F17; }

.site-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: 1.125rem;
    transition: color .2s, border-color .2s, background-color .2s;
}
.site-icon-btn:hover,
.site-icon-btn[aria-expanded="true"] {
    border-color: var(--line-strong);
    background: var(--surface-3);
    color: var(--ink);
}
.site-icon-btn.is-avatar img { width: 100%; height: 100%; object-fit: cover; }

.social-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-1);
    color: var(--ink-soft);
    font-size: .9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}
.social-btn:hover {
    border-color: rgba(var(--gold-rgb), .3);
    background: var(--surface-3);
    color: var(--gold-soft);
}
.social-btn.is-done { color: var(--green-light); }

/* ------------------------------------------------------- section helpers -- */
.section-head {
    max-width: 48rem;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
}
.section-head.is-start {
    margin-inline: 0;
    align-items: flex-start;
    text-align: start;
}

.section-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 3rem;
}
.section-head-row .section-head { margin: 0; }

.section-foot {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) {
    .card-grid.is-3,
    .card-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .card-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.glass-card {
    position: relative;
    padding: 1.5rem;
    border: 1px solid rgba(30, 41, 59, .95);
    border-radius: var(--radius-lg);
    background: rgba(26, 34, 50, .72);
    box-shadow: var(--shadow-card);
    transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.glass-card:hover { border-color: rgba(var(--tone-rgb, var(--gold-rgb)), .35); }

.card-title {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.65;
}
.card-title.is-lg { font-size: 1.25rem; }

.card-text {
    margin: 0;
    color: var(--ink-2);
    font-size: .875rem;
    line-height: 1.95;
}

.card-label { color: var(--ink-2); font-size: .8125rem; font-weight: 600; }

.surface-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: rgba(24, 34, 52, .6);
}
.surface-panel::before,
.surface-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.surface-panel::before {
    width: 22rem;
    height: 22rem;
    bottom: -8rem;
    inset-inline-end: -7rem;
    background: radial-gradient(circle, rgba(var(--cyan-rgb), .13), transparent 70%);
}
.surface-panel::after {
    width: 18rem;
    height: 18rem;
    top: -7rem;
    inset-inline-start: 30%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), .11), transparent 70%);
}
@media (min-width: 576px) {
    .surface-panel { padding: 2.5rem; }
}
@media (min-width: 992px) {
    .surface-panel { padding: 3.5rem; }
}

/* ---------------------------------------------------------------- header -- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 15, 23, .85);
    backdrop-filter: blur(16px) saturate(1.2);
    transition: box-shadow .25s, background-color .25s;
}
.site-header.is-scrolled {
    background: rgba(11, 15, 23, .93);
    box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .8);
}

.site-header-bar {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--ink);
    text-decoration: none;
}
.site-brand-logo {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    padding: 2px;
    border-radius: .875rem;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    box-shadow: 0 6px 18px -6px rgba(var(--cyan-rgb), .55);
}
.site-brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: .75rem;
    object-fit: cover;
}
.site-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.site-brand-name {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.0625rem;
    font-weight: 800;
    transition: color .2s;
}
.site-brand:hover .site-brand-name { color: var(--gold-soft); }
.site-brand-role {
    overflow: hidden;
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-status-badge {
    padding: .05rem .4rem;
    border-radius: .375rem;
    background: rgba(var(--gold-rgb), .15);
    color: var(--gold-light);
    font-size: .75rem;
    font-weight: 700;
}

.site-nav {
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: rgba(24, 28, 35, .6);
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .45rem 1rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--ink-2);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s, background-color .2s;
}
.site-nav-link:hover { color: var(--ink); }
.site-nav-link.active,
.site-nav-link[aria-current="page"] {
    background: var(--surface-3);
    color: var(--gold-soft);
    font-weight: 700;
}
.site-nav-link.dropdown-toggle::after { margin-inline-start: .25rem; }

.site-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
}

#site-nav-panel { border-top: 1px solid var(--line); }
.site-nav-panel {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-block: .75rem 1.25rem;
}
.site-nav-panel .site-nav-link {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    font-size: .9375rem;
}
.site-nav-panel .btn { margin-top: .5rem; }

.site-dropdown,
.account-menu {
    --bs-dropdown-bg: var(--surface-2);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-border-radius: var(--radius);
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-link-color: var(--ink-2);
    --bs-dropdown-link-hover-color: var(--ink);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-link-active-color: var(--gold-soft);
    --bs-dropdown-link-active-bg: rgba(var(--gold-rgb), .14);
    --bs-dropdown-divider-bg: var(--line);
    --bs-dropdown-item-border-radius: var(--radius-sm);
    min-width: 12rem;
    padding: .375rem;
    box-shadow: var(--shadow-float);
}
.site-dropdown .dropdown-item,
.account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
}
.site-dropdown .dropdown-item.is-danger,
.account-menu .dropdown-item.is-danger { color: var(--red-light); }
.site-dropdown-head {
    margin-bottom: .25rem;
    padding: .5rem .75rem .625rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: .8125rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- footer -- */
.site-footer {
    position: relative;
    z-index: 1;
    margin-top: 3rem;
    padding-block: 4rem 2.5rem;
    border-top: 1px solid var(--line);
    background: var(--bg-deep);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-bottom: 3rem;
}
@media (min-width: 576px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
    .footer-grid { grid-template-columns: minmax(16rem, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr)); }
    .footer-brand { grid-column: auto; }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.footer-text {
    max-width: 26rem;
    margin: 0;
    color: var(--ink-2);
    font-size: .875rem;
    line-height: 1.95;
}
.footer-title {
    margin: 0 0 1rem;
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-links a {
    color: var(--ink-2);
    font-size: .875rem;
    text-decoration: none;
    transition: color .2s;
}
.footer-links a:hover { color: var(--gold-soft); }

.footer-line {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0 0 .375rem;
    color: var(--ink-2);
    font-size: .875rem;
}
.footer-line a { color: var(--ink-2); text-decoration: none; }
.footer-line a:hover { color: var(--ink); }
.footer-muted { color: var(--ink-3); }
.footer-line .footer-email { color: var(--gold); font-family: var(--font-mono); }
.footer-line .footer-email:hover { color: var(--gold-light); text-decoration: underline; }
.footer-note { margin: 0 0 1rem; color: var(--ink-3); font-size: .75rem; }

/* the row above the line, laid out like the copyright bar under it: the
   social networks at its start, the eNamad seal at its end */
.footer-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding-bottom: 2rem;
}
.footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    font-size: .8125rem;
}
.footer-social-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* upstream's components/enamad_seal.html: drawn for a white page, so it keeps
   a white card of its own on this dark footer */
.enamad-seal {
    display: inline-flex;
    padding: .375rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background-color: #fff;
    text-decoration: none;
}
/* the font is for the alt text, all that shows while enamad.ir cannot serve
   the image — a sample id, or the service down */
.enamad-seal img {
    display: block;
    width: 4.5rem;
    height: auto;
    color: #1f2937;
    font-size: .75rem;
    line-height: 1.6;
    text-align: center;
}
/* at the row's end even with no network before it */
.footer-extra .enamad-seal { margin-inline-start: auto; }

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: .8125rem;
    text-align: center;
}
.footer-copy a { color: var(--ink-2); }
.footer-copy .container-fluid { padding: 0; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.footer-legal a { color: var(--ink-3); text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: var(--ink); }
@media (min-width: 768px) {
    .footer-bottom { flex-direction: row; justify-content: space-between; text-align: start; }
    .footer-copy .text-center { text-align: start !important; }
}

/* ----------------------------------------------------- toasts / to top -- */
.site-toasts {
    position: fixed;
    top: calc(var(--header-h) + .75rem);
    left: 50%;
    z-index: 1080;
    width: min(32rem, calc(100% - 2rem));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transform: translateX(-50%);
    pointer-events: none;
}
.site-toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(19, 28, 46, .97);
    box-shadow: var(--shadow-float);
    color: var(--ink);
    font-size: .875rem;
    line-height: 1.75;
    pointer-events: auto;
    animation: toast-in .35s var(--ease);
    transition: opacity .25s, transform .25s;
}
.site-toast > .bi { margin-top: .2rem; font-size: 1.125rem; }
.site-toast.is-success { border-color: rgba(var(--green-rgb), .45); }
.site-toast.is-success > .bi { color: var(--green-light); }
.site-toast.is-error { border-color: rgba(var(--red-rgb), .45); }
.site-toast.is-error > .bi { color: var(--red-light); }
.site-toast.is-warning { border-color: rgba(var(--gold-rgb), .45); }
.site-toast.is-warning > .bi { color: var(--gold-light); }
.site-toast.is-info > .bi,
.site-toast.is-debug > .bi { color: var(--cyan-light); }
.site-toast.is-leaving { opacity: 0; transform: translateY(-6px); }
.site-toast-text { flex: 1; }
.site-toast-close {
    padding: .25rem;
    border: 0;
    background: none;
    color: var(--ink-3);
    line-height: 1;
    cursor: pointer;
}
.site-toast-close:hover { color: var(--ink); }

.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 1040;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    box-shadow: var(--shadow-float);
    color: var(--gold);
    font-size: 1.125rem;
    cursor: pointer;
    transition: background-color .2s, color .2s, translate .2s;
}
.back-to-top:hover { background: var(--gold); color: #0B0F17; translate: 0 -2px; }

/* ------------------------------------------------------------ home: hero -- */
.hero {
    position: relative;
    padding-block: 2.5rem 3rem;
}
@media (min-width: 992px) {
    .hero { padding-block: 4rem 3.5rem; }
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
}
@media (min-width: 992px) {
    .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; }
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.hero-lead {
    max-width: 42rem;
    margin: 0;
    color: var(--ink-2);
    font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
    line-height: 1.95;
}

.hero-checks {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 576px) {
    .hero-checks { grid-template-columns: repeat(3, auto); justify-content: start; gap: .75rem 1.5rem; }
}
.hero-checks li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-soft);
    font-size: .875rem;
    font-weight: 500;
}
.check-dot {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--green-rgb), .2);
    color: var(--green);
    font-size: .75rem;
}
.check-dot .bi { display: flex; }
.hero .btn-row { padding-top: .5rem; }

.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 1rem;
}
.hero-orb {
    position: relative;
    width: min(380px, 78vw);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-orb-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(var(--blue-rgb), .45), rgba(var(--cyan-rgb), .3), rgba(var(--gold-rgb), .32));
    filter: blur(32px);
    opacity: .7;
}
.hero-portrait {
    position: relative;
    width: 92%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 4px solid rgba(30, 41, 59, .85);
    border-radius: 50%;
    background: linear-gradient(180deg, #1D4ED8, #0284C7);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);
}
.hero-portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
    transition: transform .5s var(--ease);
}
.hero-portrait:hover img { transform: scale(1.05); }

.float-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(19, 28, 46, .95);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-float);
    white-space: nowrap;
    transition: transform .25s var(--ease);
}
.float-badge:hover { transform: translateY(-4px); }
.float-badge-mark {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(var(--tone-rgb), .15);
    color: var(--tone-light);
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 800;
}
.float-badge-mark .bi { display: flex; font-size: 1rem; }
.float-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: start;
}
.float-badge-title { color: #fff; font-size: .8125rem; font-weight: 700; }
.float-badge-sub { color: var(--tone-light); font-size: .75rem; }
.float-badge.is-status { gap: .5rem; padding: .375rem .75rem; }
.float-badge.is-pill { gap: .5rem; padding: .5rem .875rem; border-radius: var(--radius-pill); }
.float-badge.is-pill .bi { font-size: 1rem; }

.float-badge.is-top-start { top: -.5rem; inset-inline-start: -.25rem; }
.float-badge.is-top-end { top: 2.5rem; inset-inline-end: -1rem; }
.float-badge.is-bottom-end { bottom: -.25rem; inset-inline-end: -.5rem; }
.float-badge.is-bottom-start { bottom: 1.5rem; inset-inline-start: -1rem; }
.float-badge.is-top { top: -.75rem; left: 50%; translate: -50% 0; }
.float-badge.is-middle-end { top: 50%; inset-inline-end: -2.5rem; }
.float-badge.is-bottom-start.is-pill { bottom: 1rem; inset-inline-start: -1.5rem; }
@media (min-width: 576px) {
    .float-badge.is-top-start { inset-inline-start: .5rem; }
    .float-badge.is-top-end { inset-inline-end: -1.5rem; }
    .float-badge.is-bottom-start { inset-inline-start: -1.5rem; }
}

.sparkle {
    position: absolute;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
}
.sparkle.is-1 { top: -.5rem; inset-inline-start: 12%; color: var(--gold-light); animation: twinkle 3.2s ease-in-out infinite; }
.sparkle.is-2 { bottom: 2.5rem; inset-inline-start: 2%; color: var(--cyan-light); font-size: 1.25rem; animation: twinkle 4s ease-in-out .6s infinite; }
.sparkle.is-3 { top: 48%; inset-inline-end: 0; color: var(--green-light); font-size: 1.125rem; animation: twinkle 3.6s ease-in-out 1.2s infinite; }

/* ----------------------------------------------------------- home: stats -- */
.stat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 576px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
    transition: border-color .25s;
}
.stat-card:hover { border-color: rgba(var(--tone-rgb), .45); }
.stat-card:hover .icon-box { transform: scale(1.1); }
.stat-copy { min-width: 0; display: flex; flex-direction: column; }
.stat-value {
    color: #fff;
    font-family: var(--font-figure);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    font-weight: 800;
    line-height: 1.25;
}
.stat-label {
    margin-top: .125rem;
    color: var(--ink-2);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.6;
}

/* -------------------------------------------------------- home: projects -- */
.project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}
@media (min-width: 768px) {
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.project-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .35);
    transition: transform .3s var(--ease), border-color .3s;
}
.project-card:hover { transform: translateY(-6px); border-color: rgba(var(--tone-rgb), .5); }
.project-card-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--surface-1);
}
.project-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--surface-2), transparent 55%, rgba(0, 0, 0, .3));
    pointer-events: none;
}
.project-card:hover .cover { transform: scale(1.05); }
.project-card-badges {
    position: absolute;
    top: .75rem;
    inset-inline-start: .75rem;
    z-index: 1;
    display: flex;
    gap: .5rem;
}
.project-card-icon {
    position: absolute;
    top: .75rem;
    inset-inline-end: .75rem;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    color: var(--tone-light);
}
.project-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.5rem;
}
.project-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--ink-2);
    font-size: .75rem;
}
.project-card-top .mono { font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.project-card-scale { display: inline-flex; align-items: center; gap: .3rem; }
.project-card-title {
    margin: .25rem 0 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.65;
}
.project-card-title a { color: #fff; text-decoration: none; transition: color .2s; }
.project-card:hover .project-card-title a { color: var(--tone-light); }
.project-card-text {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--ink-2);
    font-size: .875rem;
    line-height: 1.85;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.project-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem .75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: .75rem;
}
.project-card-meta span { display: inline-flex; align-items: center; gap: .375rem; }

/* drawn cover art — used where a card has no image of its own */
/* a project's own cover image, where it has one, fills the same box */
.project-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 30%, rgba(var(--tone-rgb), .35), transparent 55%),
        radial-gradient(circle at 18% 88%, rgba(var(--tone-rgb), .18), transparent 50%),
        linear-gradient(160deg, #10203A 0%, #0B0F17 100%);
    transition: transform .5s var(--ease);
}
.cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--tone-rgb), .55) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: .35;
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 90%);
    mask-image: linear-gradient(to bottom, #000 25%, transparent 90%);
}
.cover-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52%;
    aspect-ratio: 1;
    border: 1px solid rgba(var(--tone-rgb), .35);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(var(--tone-rgb), .05), 0 0 0 38px rgba(var(--tone-rgb), .03);
    transform: translate(-50%, -50%);
}
.cover-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--tone-light);
    font-size: 3.25rem;
    filter: drop-shadow(0 0 18px rgba(var(--tone-rgb), .6));
    transform: translate(-50%, -50%);
}

/* ------------------------------------------------------- home: mentoring -- */
.mentor-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
}
@media (min-width: 992px) {
    .mentor-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mentor-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.arrow-list {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin: .5rem 0 1rem;
    padding: 0;
    list-style: none;
}
.arrow-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: #E2E8F0;
    font-size: clamp(.875rem, .85rem + .15vw, 1rem);
    line-height: 1.85;
}
.arrow-list .bi {
    flex-shrink: 0;
    margin-top: .45em;
    color: var(--cyan-light);
    font-weight: 700;
}

.terminal {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-inline: auto;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(19, 28, 46, .88);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .55);
}
.terminal::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    inset-inline-start: -2.5rem;
    z-index: -1;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--blue-rgb), .25), transparent 70%);
}
.terminal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.terminal-dots { display: inline-flex; gap: .375rem; }
.terminal-dots i {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: rgba(239, 68, 68, .8);
}
.terminal-dots i:nth-child(2) { background: rgba(234, 179, 8, .8); }
.terminal-dots i:nth-child(3) { background: rgba(16, 185, 129, .8); }
.terminal-file {
    overflow: hidden;
    color: var(--ink-2);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
}
.terminal-live { color: var(--gold); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.terminal-row .status-pill { margin-inline-start: auto; }
@media (max-width: 575.98px) {
    .terminal { padding: 1rem; }
}
.terminal-rows {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.terminal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
}
.terminal-row-text {
    min-width: 0;
    flex: 1 1 9rem;
    display: flex;
    flex-direction: column;
    line-height: 1.45;
}
.terminal-row-title { color: #fff; font-size: .8125rem; font-weight: 700; }
.terminal-row-sub { color: var(--ink-2); font-size: .75rem; }
.terminal-quote {
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(24, 34, 52, .9);
    color: var(--ink-2);
    font-size: .8125rem;
    line-height: 1.85;
    text-align: center;
}

.terminal.is-code { max-width: 32rem; background: rgba(10, 14, 21, .92); }
.terminal-kv {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    font-size: .8125rem;
}
.terminal-kv div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .625rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
}
.terminal-kv dt { color: var(--ink-3); font-weight: 500; }
.terminal-kv dd { margin: 0; font-weight: 700; }
.terminal-chart {
    padding: .875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
}
.terminal-chart-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
    color: var(--ink-3);
    font-size: .75rem;
}
.terminal-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid rgba(var(--gold-rgb), .22);
    border-radius: var(--radius);
    background: rgba(var(--gold-rgb), .06);
}
.terminal-chip strong { display: block; color: #fff; font-size: .8125rem; }
.terminal-chip small { display: block; color: var(--ink-2); font-size: .75rem; }

.sparkline { display: block; width: 100%; height: auto; color: var(--tone-light); }
.spark-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.spark-fill { fill: currentColor; fill-opacity: .1; stroke: none; }
.spark-dot { fill: currentColor; }
.spark-dot.is-gold { fill: var(--gold-light); }

/* -------------------------------------------------------- home: articles -- */
.articles-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 2rem;
}
@media (min-width: 992px) {
    .articles-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.articles-split.is-single {
    max-width: 40rem;
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
}
.article-rows {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}
.article-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    color: inherit;
    text-decoration: none;
    transition: border-color .25s;
}
.article-row:hover { border-color: rgba(var(--gold-rgb), .4); }
.date-badge {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
    transition: border-color .25s;
}
.article-row:hover .date-badge { border-color: rgba(var(--gold-rgb), .3); }
.date-badge-day {
    color: #fff;
    font-family: var(--font-figure);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1;
}
.date-badge-month {
    margin-top: .3rem;
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
}
.article-row-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.article-row-title {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: clamp(.875rem, .85rem + .15vw, 1rem);
    font-weight: 700;
    line-height: 1.7;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .2s;
}
.article-row:hover .article-row-title { color: var(--gold-soft); }
.article-row-text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-2);
    font-size: .75rem;
    line-height: 1.7;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.article-row-arrow {
    color: var(--ink-2);
    font-size: 1.25rem;
    transition: color .2s, translate .2s var(--ease);
}
.article-row:hover .article-row-arrow { color: var(--gold-soft); }
[dir="rtl"] .article-row:hover .article-row-arrow { translate: -4px 0; }
[dir="ltr"] .article-row:hover .article-row-arrow { translate: 4px 0; }

.feature-post {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .35);
    transition: border-color .3s;
}
.feature-post:hover { border-color: rgba(var(--green-rgb), .4); }
.feature-post-cover {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(6, 78, 59, .8), #0F172A 50%, #000);
}
.feature-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-art {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
}
.post-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--green-rgb), .9) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: .15;
}
.post-art > * { position: relative; }
.post-art-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.post-art-tag { color: var(--green-light); font-size: .75rem; font-weight: 700; direction: ltr; }
.post-art-title {
    display: -webkit-box;
    overflow: hidden;
    margin-block: 1rem;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #fff;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 800;
    line-height: 1.55;
    text-align: center;
}
.post-art-bottom {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: var(--ink-2);
    font-size: .75rem;
}
.feature-post-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.5rem;
}
.feature-post-title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.65; }
.feature-post-title a { color: #fff; text-decoration: none; transition: color .2s; }
.feature-post:hover .feature-post-title a { color: var(--green-light); }
.feature-post-text { margin: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.9; }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: .75rem;
}
.post-meta > span { display: inline-flex; align-items: center; gap: .375rem; }
.post-meta.is-lg {
    gap: .75rem 1.5rem;
    margin-top: .25rem;
    padding-top: 0;
    border-top: 0;
    font-size: .875rem;
}

/* ------------------------------------------------ home: tech, newsletter -- */
.tech-band { border-top: 1px solid var(--line); }
.tech-title {
    margin: 0 0 2rem;
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}
.tech-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 3.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .3s, opacity .3s;
}
.tech-list:hover { filter: none; opacity: 1; }
.tech-list li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: .875rem;
    font-weight: 700;
}
.tech-list .bi { color: var(--cyan-light); font-size: 1.25rem; }

.newsletter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
    .newsletter:not(.is-card) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 2rem;
    }
}
.newsletter-title { margin: 0 0 .25rem; color: #fff; font-size: 1.125rem; font-weight: 700; }
.newsletter-text { margin: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.85; }
.newsletter-form { width: 100%; max-width: 28rem; }
.newsletter-field { position: relative; display: flex; align-items: center; gap: .5rem; }
.newsletter-field > .bi { position: absolute; color: var(--ink-3); pointer-events: none; }
.newsletter-field .site-input { min-width: 0; flex: 1; }
[dir="rtl"] .newsletter-field > .bi { right: 1rem; }
[dir="ltr"] .newsletter-field > .bi { left: 1rem; }
[dir="rtl"] .newsletter-field .site-input { padding-right: 2.625rem; }
[dir="ltr"] .newsletter-field .site-input { padding-left: 2.625rem; }
.newsletter-field .btn { flex-shrink: 0; }
.newsletter-notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin: 0;
    padding: 0;
    color: var(--ink-3);
    font-size: .75rem;
    list-style: none;
}
.newsletter-notes li { display: inline-flex; align-items: center; gap: .375rem; }

.newsletter.is-card {
    align-items: center;
    gap: 1.25rem;
    padding: 2.5rem 1.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(24, 34, 52, .75), rgba(19, 28, 46, .95));
    text-align: center;
}
.newsletter.is-card .newsletter-copy { max-width: 40rem; }
.newsletter.is-card .newsletter-title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; margin-bottom: .75rem; }
.newsletter.is-card .newsletter-form { max-width: 34rem; }
.newsletter.is-card .newsletter-field {
    padding: .375rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-0);
}
.newsletter.is-card .newsletter-field .site-input { border: 0; background: transparent; box-shadow: none; }
@media (min-width: 768px) {
    .newsletter.is-card { padding: 3.5rem 2rem; }
}

/* ------------------------------------------------------------- forms ------ */
.site-input {
    width: 100%;
    display: block;
    padding: .75rem 1rem;
    border: 1px solid #1E293B;
    border-radius: var(--radius);
    background: var(--surface-0);
    color: var(--ink);
    font: inherit;
    font-size: .9375rem;
    line-height: 1.6;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.site-input::placeholder { color: var(--ink-3); opacity: 1; }
.site-input:focus {
    outline: none;
    border-color: rgba(var(--gold-rgb), .7);
    background: var(--surface-1);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18);
}
textarea.site-input { min-height: 8.5rem; resize: vertical; }
/* an address typed left to right still lines up with its label */
[dir="rtl"] .site-input[dir="ltr"] { text-align: right; }
[dir="ltr"] .site-input[dir="ltr"] { text-align: left; }

.site-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
    cursor: pointer;
}
[dir="rtl"] .site-select { padding-left: 2.75rem; background-position: left 1rem center; }
[dir="ltr"] .site-select { padding-right: 2.75rem; background-position: right 1rem center; }
.site-select option { background: var(--surface-2); color: var(--ink); }

/* bots fill it; people never see it */
.site-honeypot {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.field { min-width: 0; }
.field.is-wide { grid-column: 1 / -1; }
.field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
    color: var(--ink-soft);
    font-size: .8125rem;
    font-weight: 600;
}
.field-required { color: var(--gold); }
.field-optional, .field-hint { color: var(--ink-3); font-size: .75rem; font-weight: 500; }
.field-error {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: .5rem 0 0;
    color: var(--red-light);
    font-size: .8125rem;
}
.field.has-error .site-input { border-color: rgba(var(--red-rgb), .6); }

.form-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
    .form-card { padding: 2rem; }
}
.form-card-head { display: flex; align-items: flex-start; gap: 1rem; }
.form-card-head .card-text { margin-top: .25rem; }
.form-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.form-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--ink-3);
    font-size: .75rem;
}
.form-card > .form-note { justify-content: center; }
.form-alert {
    padding: .75rem 1rem;
    border: 1px solid rgba(var(--red-rgb), .3);
    border-radius: var(--radius);
    background: rgba(var(--red-rgb), .1);
    color: var(--red-light);
    font-size: .875rem;
}
.form-alert p { margin: 0; }

/* ------------------------------------------------------------ page heads -- */
.page-hero { position: relative; padding-block: 3rem 3.5rem; }
@media (min-width: 992px) {
    .page-hero { padding-block: 4rem 4.5rem; }
}
.page-hero .site-container > .kicker { margin-bottom: 1.25rem; }
.page-hero .filter-chips { margin-top: 2rem; }
.page-hero.is-article { padding-block: 2rem 2.5rem; }

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
}
@media (min-width: 992px) {
    .split-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.split-copy { display: flex; flex-direction: column; align-items: flex-start; }
.split-copy .kicker { margin-bottom: 1.25rem; }
.split-copy .btn-row { margin-top: 2rem; }
.split-visual { display: flex; justify-content: center; }

.metric-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}
.metric-row li { display: flex; flex-direction: column; }
.metric-value {
    color: #fff;
    font-family: var(--font-figure);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.3;
}
.metric-label { color: var(--ink-2); font-size: .8125rem; }
.metric-row.is-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    padding-top: 0;
    border-top: 0;
}
.metric-row.is-cards li {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}
.metric-row.is-cards .metric-value { color: var(--tone-light); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

/* ------------------------------------------------------------- projects --- */
.filter-chips {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    padding-block: .25rem;
    scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--ink-2);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s, background-color .2s, box-shadow .2s;
}
.filter-chip:hover { background: var(--surface-3); color: var(--ink); }
.filter-chip.is-active {
    border-color: transparent;
    background: var(--gold-soft);
    color: #472A00;
    font-weight: 700;
    box-shadow: 0 4px 14px -4px rgba(var(--gold-rgb), .55);
}
.filter-chip-count {
    padding: 0 .4rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    font-size: .75rem;
}
.filter-chip.is-active .filter-chip-count { background: rgba(0, 0, 0, .12); }

.flagship {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    background: var(--surface-2);
}
@media (min-width: 992px) {
    .flagship { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.flagship-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.flagship-text { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.95; }
.flagship-text strong { color: var(--ink); font-weight: 700; }
.flagship .btn-row { margin-top: .5rem; }

.bench-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(14, 20, 32, .9);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
}
@media (min-width: 992px) {
    .bench-card { padding: 1.5rem; }
}
.bench-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.bench-title { color: #fff; font-size: 1.0625rem; font-weight: 700; }
.bench-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bench-cell {
    display: flex;
    flex-direction: column;
    padding: .75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-1);
}
.bench-value {
    color: var(--tone-light, #fff);
    font-family: var(--font-figure);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.25;
}
.bench-cell.is-small .bench-value { font-size: 1.25rem; }
.bench-label { color: var(--ink-3); font-size: .75rem; line-height: 1.6; }
.bench-chart-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
    color: var(--ink-3);
    font-size: .75rem;
}
.bench-logs {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #0A0E15;
    color: var(--ink-3);
    font-size: .75rem;
    list-style: none;
    overflow-x: auto;
    white-space: nowrap;
}
.bench-logs li:first-child { color: var(--green-light); }

.bars {
    height: 4rem;
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    padding: .25rem .375rem 0;
    border-radius: .375rem;
    background: var(--surface-1);
    direction: ltr;
}
.bars.is-tall { height: 6rem; gap: .5rem; padding: 0; background: transparent; }
.bar {
    min-height: 4px;
    flex: 1;
    border-radius: .25rem .25rem 0 0;
    background: rgba(var(--cyan-rgb), .45);
}
.bar:nth-child(3n) { background: rgba(var(--cyan-rgb), .7); }
.bars.is-tall .bar { border-radius: .375rem .375rem 0 0; background: var(--surface-4); }
.bar.is-peak,
.bars.is-tall .bar.is-peak { background: var(--gold); box-shadow: 0 0 16px rgba(var(--gold-rgb), .5); }
.bar-h-5 { height: 5%; } .bar-h-10 { height: 10%; } .bar-h-15 { height: 15%; } .bar-h-20 { height: 20%; }
.bar-h-25 { height: 25%; } .bar-h-30 { height: 30%; } .bar-h-35 { height: 35%; } .bar-h-40 { height: 40%; }
.bar-h-45 { height: 45%; } .bar-h-50 { height: 50%; } .bar-h-55 { height: 55%; } .bar-h-60 { height: 60%; }
.bar-h-65 { height: 65%; } .bar-h-70 { height: 70%; } .bar-h-75 { height: 75%; } .bar-h-80 { height: 80%; }
.bar-h-85 { height: 85%; } .bar-h-90 { height: 90%; } .bar-h-95 { height: 95%; } .bar-h-100 { height: 100%; }

.project-tile { display: flex; flex-direction: column; gap: .875rem; }
.project-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(var(--tone-rgb), .25), 0 0 0 1px rgba(var(--tone-rgb), .35);
}
.project-tile-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.project-tile .card-text { flex: 1; }
.project-tile-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .8125rem;
}
.project-tile-metric { display: inline-flex; align-items: center; gap: .375rem; color: var(--tone-light); font-weight: 700; }

.bench-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    background: var(--surface-2);
}
@media (min-width: 992px) {
    .bench-banner { grid-template-columns: minmax(0, 1fr) auto; padding: 2.5rem 3rem; }
}
.bench-banner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.bench-banner-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bench-banner-metrics li {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    text-align: center;
}
.bench-banner-metrics .bench-value { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); }
@media (min-width: 992px) {
    .bench-banner-metrics li { min-width: 8rem; padding: 1.25rem; }
}

.cta-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(24, 34, 52, .75), rgba(19, 28, 46, .95));
    text-align: center;
}
.cta-banner::before {
    content: "";
    position: absolute;
    top: -9rem;
    left: 50%;
    z-index: -1;
    width: 28rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--gold-rgb), .16), transparent 70%);
    transform: translateX(-50%);
}
@media (min-width: 768px) {
    .cta-banner { padding: 4rem 3rem; }
}
.cta-banner-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), .15);
    color: var(--gold-light);
    font-size: 1.5rem;
}
.cta-banner-title {
    max-width: 44rem;
    margin: 0;
    color: #fff;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.55;
}
.cta-banner-text { max-width: 40rem; margin: 0 0 .5rem; color: var(--ink-2); line-height: 1.95; }

/* ------------------------------------------------------------ mentoring --- */
.audience-card { display: flex; flex-direction: column; gap: 1rem; }
.card-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: auto 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--tone-light);
    font-size: .8125rem;
    font-weight: 600;
}

.package-grid { align-items: stretch; }
@media (min-width: 1200px) {
    .package-grid { padding-top: .75rem; }
}
.package-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.5rem; }
.package-card.is-featured {
    border-color: rgba(var(--gold-rgb), .45);
    background: linear-gradient(180deg, rgba(38, 42, 50, .96), rgba(26, 34, 50, .96));
    box-shadow: 0 20px 45px -15px rgba(var(--gold-rgb), .28), var(--shadow-card);
}
@media (min-width: 1200px) {
    .package-card.is-featured { transform: translateY(-.75rem); }
}
.package-badge {
    position: absolute;
    top: 0;
    left: 50%;
    padding: .3rem .9rem;
    border-radius: var(--radius-pill);
    background: var(--gold);
    box-shadow: 0 6px 16px -4px rgba(var(--gold-rgb), .6);
    color: #0B0F17;
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}
.package-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.package-label { color: var(--gold-soft); font-size: .8125rem; font-weight: 700; }
.package-duration { color: var(--ink-3); font-size: .75rem; direction: ltr; }
.check-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0 0 .5rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    color: var(--ink-soft);
    font-size: .875rem;
    line-height: 1.85;
}
.check-list .bi { flex-shrink: 0; margin-top: .35em; color: var(--green-light); }
.package-card.is-featured .check-list .bi { color: var(--gold-light); }

.step-card { display: flex; flex-direction: column; gap: .875rem; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.step-num { color: var(--tone-light); font-size: 1.75rem; font-weight: 800; line-height: 1; }
.step-code {
    margin: auto 0 0;
    padding: .625rem .75rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #0A0E15;
    color: var(--tone-light);
    font-size: .75rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.quote-card { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.quote-stars { display: flex; gap: .125rem; color: var(--gold-light); font-size: .875rem; }
.quote-text { flex: 1; margin: 0; }
.quote-text p { margin: 0; color: var(--ink-soft); font-size: .9375rem; line-height: 2; }
.quote-person {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.quote-avatar {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--gold-rgb), .3);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), .3), rgba(var(--cyan-rgb), .3));
    color: #fff;
    font-weight: 800;
}
.quote-name { display: block; color: #fff; font-size: .9375rem; font-weight: 700; }
.quote-role { display: block; color: var(--ink-2); font-size: .75rem; }

.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    transition: border-color .2s;
}
.faq-item[open] { border-color: rgba(var(--gold-rgb), .3); }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    color: #fff;
    font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
    font-weight: 700;
    line-height: 1.75;
    list-style: none;
    cursor: pointer;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question .bi { flex-shrink: 0; color: var(--ink-2); transition: transform .25s var(--ease), color .2s; }
.faq-item[open] .faq-question .bi { color: var(--gold-soft); transform: rotate(180deg); }
.faq-answer { padding: 0 1.5rem 1.25rem; color: var(--ink-2); font-size: .9375rem; line-height: 2; }
.faq-answer p { margin: 0 0 .5rem; }
.faq-answer p:last-child { margin: 0; }

.booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
}
@media (min-width: 992px) {
    .booking { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.booking-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.booking .form-card { background: rgba(14, 20, 32, .92); }
.icon-list {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}
.icon-list li { display: flex; align-items: center; gap: .75rem; color: var(--ink-soft); font-size: .9375rem; }

/* ---------------------------------------------------------------- about --- */
.about-orb {
    position: relative;
    width: min(340px, 76vw);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto;
}
.about-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.about-ring.is-outer { inset: -7%; border: 1px dashed rgba(var(--gold-rgb), .35); animation: spin 48s linear infinite; }
.about-ring.is-inner {
    inset: 3%;
    border: 1px solid rgba(var(--cyan-rgb), .25);
    box-shadow: inset 0 0 60px rgba(var(--cyan-rgb), .15);
}
.about-portrait {
    position: relative;
    width: 84%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 4px solid rgba(30, 41, 59, .85);
    border-radius: 50%;
    background: #0F172A;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6), 0 0 0 8px rgba(var(--gold-rgb), .06);
}
.about-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; }

.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.timeline::before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: .5rem;
    inset-inline-start: .6875rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--gold), rgba(var(--cyan-rgb), .5), transparent);
}
.timeline-item { position: relative; padding-inline-start: 2.75rem; }
.timeline-dot {
    position: absolute;
    top: 1.75rem;
    inset-inline-start: .25rem;
    width: 1rem;
    height: 1rem;
    border: 3px solid var(--tone);
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 0 0 4px rgba(var(--tone-rgb), .15);
}
.timeline-card { display: flex; flex-direction: column; gap: .875rem; }
.timeline-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.timeline-role { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.timeline-role .card-title { font-size: 1.0625rem; }
.timeline-period { color: var(--ink-3); font-size: .8125rem; }

.skill-card { display: flex; flex-direction: column; gap: .875rem; }
.skill-rows { display: flex; flex-direction: column; margin: .25rem 0 0; padding: 0; list-style: none; }
.skill-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem 0;
    border-top: 1px solid var(--line);
    font-size: .875rem;
}
.skill-name { color: #E2E8F0; font-weight: 600; }

.value-card { display: flex; flex-direction: column; gap: .75rem; overflow: hidden; }
.value-num {
    color: rgba(var(--gold-rgb), .32);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    transition: color .3s;
}
.value-card:hover .value-num { color: var(--gold-light); }

.edu-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
}
@media (min-width: 992px) {
    .edu-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* one of the two switched off: the other takes the row */
.edu-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.edu-col { min-width: 0; }
.edu-col .section-head { margin-bottom: 1.5rem; }
.edu-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.edu-row { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; }
.edu-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.edu-title { color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.6; }
/* a certificate or a talk with a link: the title is the link, in its own colour */
.edu-title a,
.community-title a,
.card-title-link { color: inherit; text-decoration: none; transition: color .2s; }
.edu-title a:hover,
.community-title a:hover,
.card-title-link:hover { color: var(--tone-light, var(--gold-light)); }
a.tag-soft { text-decoration: none; }
a.tag-soft:hover { border-color: rgba(var(--tone-rgb), .5); }
.edu-text { color: var(--ink-2); font-size: .8125rem; }
.edu-period { color: var(--ink-3); font-size: .75rem; white-space: nowrap; }
.community-card { display: flex; flex-direction: column; gap: 1.25rem; }
.community-list { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.community-list li { display: flex; align-items: flex-start; gap: .875rem; }
.community-title { display: block; margin-bottom: .25rem; color: #fff; font-size: .9375rem; font-weight: 700; }
.community-text { display: block; color: var(--ink-2); font-size: .8125rem; line-height: 1.9; }
.community-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: .8125rem;
}

/* -------------------------------------------------------------- contact --- */
.availability {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}
.availability li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: .8125rem;
}
.availability li:first-child { color: var(--ink); font-weight: 600; }

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}
@media (min-width: 992px) {
    .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.contact-main,
.contact-side { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
/* one column: the form, the page's reason to exist, comes before the channels */
@media (max-width: 991.98px) {
    .contact-main { order: -1; }
}

.channel-card { display: flex; flex-direction: column; gap: .875rem; }
.channel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.copy-field {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding-block: .5rem;
    padding-inline: .875rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-0);
}
.copy-field > .bi { color: var(--ink-3); }
.copy-field-value {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--ink);
    font-size: .875rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: end;
}
[dir="ltr"] .copy-field-value { text-align: start; }
@media (max-width: 575.98px) {
    .copy-field-btn span { display: none; }
}
.copy-field-value:hover { color: var(--gold-soft); }
.copy-field-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-family: inherit;
    font-size: .75rem;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.copy-field-btn:hover,
.copy-field-btn.is-done { border-color: rgba(var(--green-rgb), .4); color: var(--green-light); }

.network-list { display: flex; flex-direction: column; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.network-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.network-row:hover { border-color: rgba(var(--cyan-rgb), .35); background: var(--surface-3); }
.network-row > .bi { color: var(--ink-3); }
.network-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.45; }
.network-name { color: #fff; font-size: .875rem; font-weight: 700; }
.network-handle { color: var(--ink-3); font-size: .75rem; }

.response-foot { display: flex; justify-content: space-between; gap: .5rem; color: var(--ink-3); font-size: .75rem; }

.nda-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.nda-copy { min-width: 14rem; flex: 1; display: flex; flex-direction: column; gap: .375rem; }
.principle-card { display: flex; flex-direction: column; gap: .875rem; }

/* ----------------------------------------------------------------- blog --- */
.blog-head { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 992px) {
    .blog-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.blog-head-copy { max-width: 52rem; }
.blog-head-copy > .kicker { margin-bottom: 1.25rem; }
.blog-stats {
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    list-style: none;
}
@media (min-width: 992px) {
    .blog-stats { align-self: auto; }
}
.blog-stats li { min-width: 4.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.blog-stats .metric-value { font-size: 1.5rem; }
.blog-stats .metric-label { font-size: .75rem; }

.blog-toolbar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 2rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(19, 28, 46, .7);
}
@media (min-width: 992px) {
    .blog-toolbar { flex-direction: row; align-items: center; }
}
.blog-toolbar .filter-chips { min-width: 0; flex: 1; }
.search-field { position: relative; width: 100%; display: flex; align-items: center; }
@media (min-width: 992px) {
    .search-field { width: 22rem; flex-shrink: 0; }
}
.search-field > .bi { position: absolute; color: var(--ink-3); pointer-events: none; }
.search-kbd {
    position: absolute;
    padding: .125rem .375rem;
    border: 1px solid var(--line);
    border-radius: .375rem;
    background: var(--surface-3);
    color: var(--ink-3);
    font-size: .75rem;
    line-height: 1.4;
}
[dir="rtl"] .search-field > .bi { right: 1rem; }
[dir="ltr"] .search-field > .bi { left: 1rem; }
[dir="rtl"] .search-kbd { left: .75rem; }
[dir="ltr"] .search-kbd { right: .75rem; }
[dir="rtl"] .search-field .site-input { padding-right: 2.75rem; padding-left: 4rem; }
[dir="ltr"] .search-field .site-input { padding-left: 2.75rem; padding-right: 4rem; }

.filter-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: .875rem;
}
.filter-note strong { color: var(--ink); }

.grid-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 3.5rem 0 1.5rem;
}
.grid-head-title {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}
.grid-head-title .bi { color: var(--gold); }

.post-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
    transition: transform .3s var(--ease), border-color .3s;
}
.post-card:hover { transform: translateY(-4px); border-color: rgba(var(--cyan-rgb), .35); }
.post-card-cover {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--surface-1);
}
.post-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(19, 28, 46, .9), transparent 50%);
    pointer-events: none;
}
.post-card-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.post-card:hover .post-card-cover img,
.post-card:hover .cover { transform: scale(1.05); }
.post-card-cat {
    position: absolute;
    top: .75rem;
    inset-inline-start: .75rem;
    z-index: 1;
    padding: .25rem .625rem;
    border-radius: .375rem;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    color: var(--cyan-light);
    font-size: .75rem;
    font-weight: 700;
}
.post-card-time {
    position: absolute;
    bottom: .75rem;
    inset-inline-end: .75rem;
    z-index: 1;
    padding: .125rem .5rem;
    border-radius: .375rem;
    background: rgba(0, 0, 0, .5);
    color: #E2E8F0;
    font-size: .75rem;
}
.post-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1.25rem 1.5rem 1.5rem;
}
.post-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .875rem;
    color: var(--ink-3);
    font-size: .75rem;
}
.post-card-date { display: inline-flex; align-items: center; gap: .375rem; }
.post-card-tag { color: var(--cyan-light); direction: ltr; }
.post-card-title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.75; }
.post-card-title a { color: #fff; text-decoration: none; transition: color .2s; }
.post-card-title a:hover { color: var(--gold-soft); }
.post-card-text {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--ink-2);
    font-size: .875rem;
    line-height: 1.9;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.post-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    margin-top: auto;
    padding-top: .875rem;
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: .75rem;
}
.post-card-author,
.post-card-views { display: inline-flex; align-items: center; gap: .375rem; }

.post-card.is-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-color: rgba(var(--gold-rgb), .25);
    background: linear-gradient(135deg, rgba(26, 34, 50, .96), rgba(19, 28, 46, .96));
}
.post-card.is-spotlight::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 2;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), var(--cyan), transparent);
}
.post-card.is-spotlight:hover { transform: none; border-color: rgba(var(--gold-rgb), .4); }
.post-card.is-spotlight .post-card-body { justify-content: center; gap: 1rem; padding: 2rem 1.5rem; }
.post-card.is-spotlight .post-card-title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.6; }
.post-card.is-spotlight .post-card-text { font-size: .9375rem; -webkit-line-clamp: 4; }
@media (min-width: 992px) {
    .post-card.is-spotlight { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .post-card.is-spotlight .post-card-cover { order: 2; aspect-ratio: auto; min-height: 22rem; }
    .post-card.is-spotlight .post-card-body { padding: 2.5rem; }
}

.insight {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    background: var(--surface-2);
}
@media (min-width: 992px) {
    .insight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.insight-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.insight-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}
.insight-metrics li { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; }
.insight-metrics .bench-value { font-size: 1.5rem; }
.insight-chart {
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(14, 20, 32, .9);
}
.insight-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
    color: var(--ink-3);
    font-size: .75rem;
}
.trace-chart { display: block; width: 100%; height: auto; }
.trace-grid { stroke: #31353D; stroke-dasharray: 3 3; }
.trace-line { fill: none; stroke: var(--tone-light); stroke-width: 3; stroke-linecap: round; }
.trace-line.is-dashed { stroke-width: 2; stroke-dasharray: 4 4; }
.trace-dot { fill: var(--tone-light); }
.insight-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    margin-top: .75rem;
    color: var(--ink-3);
    font-size: .75rem;
}
.insight-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.legend-swatch {
    width: .75rem;
    height: .25rem;
    display: inline-block;
    border-radius: 1px;
    background: var(--tone-light);
}

.tag-cloud { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 992px) {
    .tag-cloud { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
}
.tag-cloud-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}
.tag-cloud-title .bi { color: var(--gold); }
.tag-cloud-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tag-cloud-list.is-inline { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.tag-link {
    display: inline-flex;
    gap: .25rem;
    padding: .375rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: .75rem;
    text-decoration: none;
    direction: ltr;
    transition: color .2s, border-color .2s;
}
.tag-link span { color: var(--ink-3); }
.tag-link:hover,
.tag-link.is-active { border-color: rgba(var(--gold-rgb), .35); color: var(--gold-soft); }

/* the public paginator (`main/v3/includes/components/paginator.html`) */
.site-body .pagination-brand {
    --bs-pagination-bg: var(--surface-2);
    --bs-pagination-color: var(--ink-2);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-bg: var(--surface-3);
    --bs-pagination-hover-color: var(--ink);
    --bs-pagination-hover-border-color: var(--line-strong);
    --bs-pagination-focus-bg: var(--surface-3);
    --bs-pagination-focus-color: var(--ink);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .25);
    --bs-pagination-active-bg: var(--gold);
    --bs-pagination-active-color: #0B0F17;
    --bs-pagination-active-border-color: var(--gold);
    --bs-pagination-disabled-bg: var(--surface-1);
    --bs-pagination-disabled-color: var(--ink-3);
    --bs-pagination-disabled-border-color: var(--line);
    gap: .375rem;
    margin-top: 1.5rem;
}
.site-body .pagination-brand .page-link {
    min-width: 2.5rem;
    margin: 0;
    border-radius: .625rem !important;
    font-family: var(--font-mono);
    text-align: center;
}

/* -------------------------------------------------------------- article --- */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0 0 1.75rem;
    padding: 0;
    color: var(--ink-3);
    font-size: .8125rem;
    list-style: none;
}
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: .375rem; opacity: .6; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--gold-soft); }

.article-head { max-width: 56rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.article-head .page-title { margin: 0; }
.post-author { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 600; }
.post-author-avatar {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
}
.post-author-avatar img { width: 100%; height: 100%; object-fit: cover; }

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
}
@media (min-width: 992px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.article-main { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.article-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    object-fit: cover;
}
.article-body-card { padding: 1.5rem; }
@media (min-width: 768px) {
    .article-body-card { padding: 2.5rem; }
}
.article-rail { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 992px) {
    .article-rail { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.rail-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.rail-title .bi { color: var(--gold); }
.rail-list { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.rail-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: -.5rem;
    padding: .5rem;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: background-color .2s;
}
.rail-item:hover { background: var(--surface-3); }
.rail-thumb {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: .625rem;
    background: var(--surface-1);
    color: var(--cyan-light);
}
.rail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rail-copy { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.rail-item-title {
    display: -webkit-box;
    overflow: hidden;
    color: #E2E8F0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.65;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rail-item-date { color: var(--ink-3); font-size: .75rem; }

.share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.share-label { margin-inline-end: .5rem; color: var(--ink-2); font-size: .875rem; font-weight: 600; }

/* CKEditor's HTML, as reading copy */
.prose {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 2.05;
    overflow-wrap: anywhere;
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.25em; }
.prose h2, .prose h3, .prose h4 {
    margin: 2em 0 .75em;
    color: #fff;
    font-weight: 800;
    line-height: 1.55;
}
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.0625rem; }
.prose a { color: var(--cyan-light); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-soft); }
.prose strong { color: #fff; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-inline-start: 1.5rem; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--gold); }
.prose blockquote {
    margin: 1.5em 0;
    padding: 1rem 1.25rem;
    border-inline-start: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    background: rgba(var(--gold-rgb), .06);
    color: #E2E8F0;
}
.prose code {
    padding: .15em .4em;
    border: 1px solid var(--line);
    border-radius: .375rem;
    background: var(--surface-0);
    color: var(--gold-soft);
    font-family: var(--font-mono);
    font-size: .875em;
    direction: ltr;
    unicode-bidi: isolate;
}
.prose pre {
    margin: 1.5em 0;
    padding: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0A0E15;
    font-size: .875rem;
    line-height: 1.75;
    direction: ltr;
    text-align: left;
}
.prose pre code { padding: 0; border: 0; background: none; color: #E2E8F0; }
.prose img { height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.prose figure { margin: 1.5em 0; }
.prose figcaption { margin-top: .5rem; color: var(--ink-3); font-size: .8125rem; text-align: center; }
.prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 1.5em 0;
    border-collapse: collapse;
    font-size: .9375rem;
}
.prose th, .prose td { padding: .625rem .875rem; border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--surface-1); color: #fff; }
.prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); opacity: 1; }

/* ------------------------------------------------------------ animation --- */
@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), .55); }
    70% { box-shadow: 0 0 0 8px rgba(var(--pulse-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0); }
}
@keyframes dot-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}
@keyframes twinkle {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes spin {
    to { rotate: 360deg; }
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .site-body *,
    .site-body *::before,
    .site-body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}