/* ==========================================================================
   Maya Alrahabi — Design System
   RTL-first. Every directional property uses CSS logical properties, so this
   one stylesheet serves Arabic (rtl) and English / French (ltr) unchanged.
   ========================================================================== */

:root {
  /* --- Surfaces: warm paper, not clinical white --------------------------- */
  --c-bg:            #FBFAF7;
  --c-bg-alt:        #F5F2EC;
  --c-surface:       #FFFFFF;
  --c-surface-sunk:  #F8F6F1;

  /* --- Text (ratios measured against --c-bg) ------------------------------ */
  --c-fg:            #1F2124;  /* 15.8:1 */
  --c-fg-muted:      #5A5F66;  /*  6.2:1 */
  --c-fg-subtle:     #6E747B;  /*  4.8:1 — still AA for body text */
  --c-on-dark:       #F7F5F1;

  /* --- Brand -------------------------------------------------------------- */
  --c-primary:       #2F4858;  /* deep slate-teal: footer, section marks */
  --c-primary-soft:  #E2EAEF;
  --c-accent:        #9C5A66;  /* dusty rose, deepened to 5.2:1 for links */
  --c-accent-hover:  #7E4550;
  --c-accent-soft:   #F5E7E9;

  /* --- Pastel section accents --------------------------------------------- */
  --p-rose:   #EBC9CD;   /* أدب        literature  */
  --p-sage:   #C3D5BC;   /* دراسات     studies     */
  --p-sand:   #EFDFC2;   /* كتب        books       */
  --p-sky:    #C2D8E4;   /* مؤتمرات    conferences */
  --p-lilac:  #D5C9E0;   /* تدريبات    training    */
  --p-clay:   #E8CDBE;   /* إدارة      management  */

  /* --- Lines & depth ------------------------------------------------------ */
  --c-border:        #E7E2D9;
  --c-border-strong: #D3CCC0;
  --shadow-sm: 0 1px 2px rgba(31, 33, 36, .04), 0 1px 3px rgba(31, 33, 36, .05);
  --shadow-md: 0 4px 8px rgba(31, 33, 36, .04), 0 8px 24px rgba(31, 33, 36, .06);
  --shadow-lg: 0 8px 16px rgba(31, 33, 36, .05), 0 24px 48px rgba(31, 33, 36, .08);

  /* --- Type ---------------------------------------------------------------- */
  --font-display: "Amiri", "Lora", "Noto Naskh Arabic", Georgia, serif;
  --font-body:    "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:    0.8125rem;
  --fs-sm:    0.9375rem;
  --fs-base:  1.0625rem;                                /* 17px — Arabic reads small */
  --fs-md:    1.1875rem;
  --fs-lg:    clamp(1.25rem,  0.6vw + 1.1rem, 1.5rem);
  --fs-xl:    clamp(1.5rem,   1.2vw + 1.2rem, 2rem);
  --fs-2xl:   clamp(1.875rem, 2vw   + 1.3rem, 2.75rem);
  --fs-3xl:   clamp(2.25rem,  3.4vw + 1.4rem, 4rem);

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-body:  1.85;   /* Arabic needs more leading than Latin */

  /* --- Space (4pt rhythm) --------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;   --s-11: 6.5rem;  --s-12: 8rem;

  /* --- Shape ---------------------------------------------------------------- */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-xl: 22px;  --r-full: 999px;

  /* --- Motion --------------------------------------------------------------- */
  --e-out:   cubic-bezier(.16, .84, .44, 1);
  --e-inout: cubic-bezier(.65, .05, .36, 1);
  --t-fast:  140ms;
  --t-base:  240ms;
  --t-slow:  420ms;

  /* --- Layout ---------------------------------------------------------------- */
  --w-prose:   68ch;
  --w-content: 72rem;
  --w-wide:    84rem;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --header-h:  72px;

  /* --- Layers ---------------------------------------------------------------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 40;
  --z-header: 100; --z-overlay: 500; --z-modal: 1000;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--s-5));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  min-block-size: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-inline-size: 100%; height: auto; }

/* Inline icons carry a 24×24 viewBox and no width/height attribute, so without
   a base size they take the replaced-element reset above and stretch to the
   full width of their container. Contextual rules (.btn svg, .empty svg …)
   are one point more specific and still override this. */
.icon { inline-size: 1.15em; block-size: 1.15em; flex: none; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, .u-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-fg);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 600; }

[dir="ltr"] h1, [dir="ltr"] h2 { letter-spacing: -0.02em; }

/* Arabic headings need looser leading than Latin ones: vowel marks and the
   shadda sit well above the em box — the double mark on ميّة is the worst
   case — and at --lh-tight they collide with whatever sits on the line above. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .u-display { line-height: 1.5; }

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--t-fast) var(--e-out);
}
a:hover { color: var(--c-accent-hover); }
strong, b { font-weight: 600; }

.u-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-subtle);
}
.u-eyebrow::after { content: ""; flex: 1; block-size: 1px; background: var(--c-border-strong); }
[dir="rtl"] .u-eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }

.u-lede {
  font-size: var(--fs-md);
  color: var(--c-fg-muted);
  max-inline-size: var(--w-prose);
  line-height: 1.75;
}
.u-muted  { color: var(--c-fg-muted); }
.u-subtle { color: var(--c-fg-subtle); font-size: var(--fs-sm); }
.u-nums   { font-variant-numeric: tabular-nums; }
.u-center { text-align: center; }

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */
.screen-reader-text {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: var(--z-modal);
  transform: translateY(-250%);
  background: var(--c-primary);
  color: var(--c-on-dark);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--t-base) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--c-on-dark); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap        { inline-size: min(100% - var(--gutter) * 2, var(--w-content)); margin-inline: auto; }
.wrap--wide  { inline-size: min(100% - var(--gutter) * 2, var(--w-wide));    margin-inline: auto; }
.wrap--prose { inline-size: min(100% - var(--gutter) * 2, var(--w-prose));   margin-inline: auto; }

.section         { padding-block: var(--s-10); }
.section--tight  { padding-block: var(--s-8); }
.section--alt    { background: var(--c-bg-alt); }

.stack    > * + * { margin-block-start: var(--s-4); }
.stack-lg > * + * { margin-block-start: var(--s-6); }

.grid     { display: grid; gap: var(--s-6); }
.grid--2  { grid-template-columns: repeat(auto-fit,  minmax(min(100%, 22rem), 1fr)); }
.grid--3  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.grid--4  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 44px;                 /* touch target */
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-base) var(--e-out),
              color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
.btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }

.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hover); color: #fff; box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--c-fg); border-color: var(--c-border-strong); }
.btn--ghost:hover { background: var(--c-surface); color: var(--c-fg); border-color: var(--c-fg-subtle); }

.btn--quiet { background: var(--c-surface); color: var(--c-fg); border-color: var(--c-border); box-shadow: var(--shadow-sm); }
.btn--quiet:hover { color: var(--c-accent); border-color: var(--c-accent); }

.btn--sm { min-block-size: 38px; padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* External-link arrow flips with direction */
.btn .icon-ext { transform: rotate(0deg); }
[dir="rtl"] .btn .icon-ext { transform: scaleX(-1); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.site-header.is-stuck { border-block-end-color: var(--c-border); box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-block-size: var(--header-h);
}

.site-brand { display: flex; align-items: baseline; gap: var(--s-3); text-decoration: none; color: var(--c-fg); }
.site-brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.site-brand__role { font-size: var(--fs-xs); color: var(--c-fg-subtle); white-space: nowrap; }
@media (max-width: 30rem) { .site-brand__role { display: none; } }

/* An uploaded logo replaces the wordmark. Height-capped rather than
   width-capped so any aspect ratio sits on the same baseline as the nav. */
.site-brand--logo { align-items: center; }
.site-brand__logo { block-size: 2.5rem; inline-size: auto; max-inline-size: 15rem; object-fit: contain; }
@media (max-width: 48rem) { .site-brand__logo { block-size: 2.1rem; } }

/* The nav holds the link list and the language switcher side by side. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-inline-start: auto;
}
.nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; padding: 0; margin: 0; }

.nav__list a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.nav__list a:hover { background: var(--c-bg-alt); color: var(--c-fg); }

.nav__list .current-menu-item > a,
.nav__list .current-menu-ancestor > a,
.nav__list .current_page_item > a {
  color: var(--c-accent);
  font-weight: 600;
}
.nav__list .current-menu-item > a::after,
.nav__list .current-menu-ancestor > a::after,
.nav__list .current_page_item > a::after {
  content: "";
  position: absolute;
  inset-block-end: 10px;
  inset-inline: var(--s-3);
  block-size: 2px;
  border-radius: 2px;
  background: var(--c-accent);
}
.nav__list > li { position: relative; }

/* --- Dropdowns ------------------------------------------------------------ */
.nav__list .menu-item-has-children > a::before {
  content: "";
  inline-size: 0; block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  opacity: .5;
  order: 2;
  transition: transform var(--t-fast) var(--e-out);
}
.nav__list .sub-menu {
  position: absolute;
  inset-block-start: calc(100% - 6px);
  inset-inline-start: 0;
  min-inline-size: 15rem;
  list-style: none;
  margin: 0;
  padding: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  /* visibility is deliberately not transitioned: animating it produces a
     visible flash of the open menu while the stylesheet is still settling. */
  transition: opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out);
}
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu,
.nav__list > li.is-open > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav__list .sub-menu a { min-block-size: 40px; padding: var(--s-2) var(--s-3); font-weight: 400; }
.nav__list .sub-menu a::after { display: none; }

/* --- Language switcher ---------------------------------------------------- */
.lang-switch { display: flex; align-items: center; gap: var(--s-1); padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--c-border); }
.lang-switch a, .lang-switch span {
  display: grid;
  place-items: center;
  min-inline-size: 38px;
  min-block-size: 38px;
  padding-inline: var(--s-2);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--c-fg-subtle);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.lang-switch a:hover { background: var(--c-bg-alt); color: var(--c-fg); }
.lang-switch .is-current { background: var(--c-primary-soft); color: var(--c-primary); }

/* --- Mobile nav ------------------------------------------------------------ */
.nav-toggle { display: none; inline-size: 44px; block-size: 44px; margin-inline-start: auto; border-radius: var(--r-md); }
.nav-toggle span { display: block; inline-size: 20px; block-size: 2px; margin-inline: auto; background: var(--c-fg); border-radius: 2px; transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) var(--e-out); }
.nav-toggle span + span { margin-block-start: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-toggle { display: block; }

  /* A backdrop-filter makes an element the containing block for its
     fixed-position descendants — so the menu panel below was resolving
     inset-block-end against the 73px header rather than the viewport, and
     opened one item tall. The panel is opaque and covers the screen here, so
     the frosted header buys nothing on mobile. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--c-bg);
  }

  .nav {
    display: block;
    position: fixed;
    inset-block: var(--header-h) 0;
    inset-inline: 0;
    margin: 0;
    padding: var(--s-3) var(--gutter) var(--s-4);
    background: var(--c-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out), visibility var(--t-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-block-end: 1px solid var(--c-border); }
  .nav__list > li:last-child { border-block-end: 0; }
  /* 48px and 44px keep every row above the 44px touch-target minimum while
     fitting the whole menu — 15 links and the language switcher — on a
     common phone without scrolling. */
  .nav__list a { min-block-size: 48px; font-size: var(--fs-md); padding-inline: 0; border-radius: 0; }
  .nav__list a::after { display: none !important; }
  /* Collapsed by default. Expanded, the two groups add seven rows and turn
     the menu into a 13-item wall that no short phone can show at once.
     initNav() already puts .is-open on a parent at the first tap and lets a
     second tap follow the link, so this turns that into a real accordion. */
  .nav__list .sub-menu {
    position: static;
    display: none;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 var(--s-2);
    padding-inline-start: var(--s-4);
    border-inline-start: 2px solid var(--c-border);
    margin-block-end: var(--s-2);
  }
  .nav__list > li.is-open > .sub-menu { display: block; }
  .nav__list > li.is-open > a::before { transform: rotate(180deg); }
  .nav__list .sub-menu a { min-block-size: 44px; font-size: var(--fs-base); color: var(--c-fg-muted); }
  .lang-switch { border: 0; padding: 0; margin-block-start: var(--s-4); justify-content: center; gap: var(--s-2); }
  .lang-switch a, .lang-switch span { min-inline-size: 56px; min-block-size: 44px; border: 1px solid var(--c-border); }
  body.nav-open { overflow: hidden; }
}

/* ==========================================================================
   Hero — CV homepage
   ========================================================================== */
.hero {
  position: relative;
  padding-block: var(--s-10) var(--s-9);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -22%;
  inset-inline-end: -12%;
  inline-size: 46rem; block-size: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--p-rose), transparent 62%);
  opacity: .5;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset-block-end: -30%;
  inset-inline-start: -14%;
  inline-size: 38rem; block-size: 38rem;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, var(--p-sky), transparent 65%);
  opacity: .42;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: var(--s-9);
  align-items: center;
}
@media (max-width: 54rem) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero { padding-block: var(--s-8) var(--s-7); }
}

.hero__name { font-size: var(--fs-3xl); margin-block-end: var(--s-3); }
/* At hero size the marks on ميّة overrun even the looser RTL leading, so the
   name gets its own breathing room below the eyebrow. */
[dir="rtl"] .hero__name { padding-block-start: 0.14em; margin-block-start: var(--s-2); }
.hero__role {
  font-size: var(--fs-md);
  color: var(--c-fg-muted);
  margin-block-end: var(--s-5);
}
.hero__bio { max-inline-size: 52ch; color: var(--c-fg-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }

.hero__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: var(--shadow-lg);
}
.hero__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 54rem) {
  .hero__portrait { max-inline-size: 20rem; margin-inline: auto; }
}

/* Placeholder shown until a real portrait is uploaded */
.portrait-placeholder {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  block-size: 100%;
  padding: var(--s-6);
  text-align: center;
  background: linear-gradient(150deg, var(--p-rose) 0%, var(--p-lilac) 55%, var(--p-sky) 100%);
  color: var(--c-primary);
}
.portrait-placeholder svg { inline-size: 3rem; block-size: 3rem; opacity: .55; }
.portrait-placeholder p { font-size: var(--fs-sm); font-weight: 600; max-inline-size: 22ch; }

/* --- Key facts strip ------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  background: var(--c-border);
  border-block: 1px solid var(--c-border);
}
.facts__item { background: var(--c-bg); padding: var(--s-5) var(--s-4); text-align: center; }
.facts__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  display: block;
}
.facts__label { font-size: var(--fs-xs); color: var(--c-fg-subtle); }

/* ==========================================================================
   CV body — sticky index + prose
   ========================================================================== */
.cv { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-9); align-items: start; }
@media (max-width: 62rem) { .cv { grid-template-columns: 1fr; gap: var(--s-6); } }

.cv-index { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-5)); }
@media (max-width: 62rem) {
  .cv-index {
    position: static;
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
  }
  .cv-index__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .cv-index a { border-inline-start: 0 !important; padding: var(--s-2) var(--s-3) !important; background: var(--c-bg-alt); border-radius: var(--r-full); font-size: var(--fs-xs); }
}
.cv-index__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-fg-subtle); margin-block-end: var(--s-3); }
[dir="rtl"] .cv-index__title { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.cv-index__list { list-style: none; margin: 0; padding: 0; }
.cv-index a {
  display: block;
  padding: var(--s-2) var(--s-4);
  border-inline-start: 2px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.cv-index a:hover { color: var(--c-fg); border-inline-start-color: var(--c-border-strong); }
.cv-index a.is-active { color: var(--c-accent); border-inline-start-color: var(--c-accent); font-weight: 600; }

.cv-section + .cv-section { margin-block-start: var(--s-9); }
.cv-section__head { display: flex; align-items: center; gap: var(--s-4); margin-block-end: var(--s-5); }
.cv-section__mark {
  flex: none;
  inline-size: 2.75rem; block-size: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--p-sand);
  color: var(--c-primary);
}
.cv-section__mark svg { inline-size: 1.4rem; block-size: 1.4rem; }
.cv-section h2 { font-size: var(--fs-xl); }

.prose { max-inline-size: var(--w-prose); }
.prose > * + * { margin-block-start: var(--s-4); }
.prose p { color: var(--c-fg-muted); }
.prose h3 { margin-block-start: var(--s-7); color: var(--c-fg); }
.prose ul, .prose ol { padding-inline-start: var(--s-5); color: var(--c-fg-muted); }
.prose li + li { margin-block-start: var(--s-2); }
.prose blockquote {
  padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--p-rose);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-fg);
}

/* Bibliography list inside the CV */
.biblio { list-style: none; padding: 0; margin: 0; }
.biblio li {
  display: flex;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-block-end: 1px dashed var(--c-border);
}
.biblio__year {
  flex: none;
  inline-size: 4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-primary);
  font-size: var(--fs-sm);
}
.biblio__title { color: var(--c-fg); }
.biblio__meta { display: block; font-size: var(--fs-sm); color: var(--c-fg-subtle); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-border-strong); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__title { font-size: var(--fs-lg); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }   /* whole-card click target */
.card__meta { font-size: var(--fs-xs); color: var(--c-fg-subtle); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.card__excerpt { font-size: var(--fs-sm); color: var(--c-fg-muted); }
.card__foot { margin-block-start: auto; padding-block-start: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Links inside the footer must sit above the card-wide click overlay */
.card__foot a { position: relative; z-index: var(--z-raised); }

/* A footer built around a call to action: the button leads, the read-only
   note sits under it rather than competing for the same row. */
.card__foot--cta { align-items: center; gap: var(--s-3); padding-block-start: var(--s-5); }
.card__note { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); }

/* --- Book / cover card ------------------------------------------------------ */
.book { display: flex; flex-direction: column; gap: var(--s-4); }
.book__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.book:hover .book__cover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-lg); }
.book__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.book__title { font-size: var(--fs-md); line-height: var(--lh-snug); }
.book__meta { font-size: var(--fs-sm); color: var(--c-fg-subtle); }
.book__links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-2); }

/* Fallback cover generated from the title when no image exists */
.cover-fallback {
  display: grid;
  place-content: center;
  gap: var(--s-3);
  block-size: 100%;
  padding: var(--s-5);
  text-align: center;
  background: linear-gradient(160deg, var(--cover-a, var(--p-sand)), var(--cover-b, var(--p-clay)));
  color: var(--c-primary);
}
.cover-fallback__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
.cover-fallback__rule { inline-size: 2.5rem; block-size: 2px; background: currentColor; opacity: .4; margin-inline: auto; }

/* --- Featured book (the two she authored) ----------------------------------- */
.book-feature {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
  padding: var(--s-7);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 48rem) {
  .book-feature { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5); }
  .book-feature .book__cover { max-inline-size: 13rem; }
}
.book-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--p-sage);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ==========================================================================
   Filters (articles)
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-7); }
.filters__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 40px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-fg-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.filters__chip:hover { color: var(--c-fg); border-color: var(--c-border-strong); }
.filters__chip[aria-current="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-dark); font-weight: 600; }
.filters__count { font-size: var(--fs-xs); opacity: .7; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Secure document viewer
   ========================================================================== */
.docviewer {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface-sunk);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.docviewer__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border-block-end: 1px solid var(--c-border);
}
.docviewer__title { font-size: var(--fs-sm); font-weight: 600; margin-inline-end: auto; }
.docviewer__pager { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.docviewer__btn {
  display: grid; place-items: center;
  inline-size: 40px; block-size: 40px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-fg);
  transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.docviewer__btn:hover:not([disabled]) { background: var(--c-bg-alt); border-color: var(--c-border-strong); }
.docviewer__btn[disabled] { opacity: .35; cursor: not-allowed; }
.docviewer__btn svg { inline-size: 1.15rem; block-size: 1.15rem; }
[dir="rtl"] .docviewer__btn--prev svg,
[dir="rtl"] .docviewer__btn--next svg { transform: scaleX(-1); }

.docviewer__stage {
  position: relative;
  min-block-size: 30rem;
  max-block-size: 82vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--s-5);
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(47,72,88,.012) 12px, rgba(47,72,88,.012) 24px),
    var(--c-surface-sunk);
  /* Copy protection: the canvas is an image, but block selection anyway */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.docviewer__page {
  position: relative;
  max-inline-size: 100%;
  box-shadow: var(--shadow-md);
  border-radius: 2px;
  background: #fff;
  pointer-events: none;   /* nothing to right-click-save meaningfully */
}
.docviewer__status {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  min-block-size: 20rem;
  color: var(--c-fg-subtle);
  font-size: var(--fs-sm);
  text-align: center;
}
.docviewer__spinner {
  inline-size: 2rem; block-size: 2rem;
  border: 2px solid var(--c-border);
  border-block-start-color: var(--c-accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .docviewer__spinner { animation-duration: 2s; } }

.docviewer__note {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-xs);
  color: var(--c-fg-subtle);
  background: var(--c-surface);
  border-block-start: 1px solid var(--c-border);
  display: flex; align-items: center; gap: var(--s-2);
}
.docviewer__note svg { inline-size: 1rem; block-size: 1rem; flex: none; }

/* Printing a protected document prints nothing useful */
@media print {
  .docviewer__stage { display: none !important; }
  .docviewer::after { content: attr(data-print-notice); display: block; padding: 2rem; text-align: center; }
}

/* ==========================================================================
   Timeline (conferences)
   ========================================================================== */
.timeline { position: relative; padding-inline-start: var(--s-7); }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: var(--s-2) var(--s-2);
  inset-inline-start: 7px;
  inline-size: 2px;
  background: linear-gradient(var(--p-sky), var(--p-lilac));
  border-radius: 2px;
}
.timeline__item { position: relative; padding-block-end: var(--s-7); }
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s-7) * -1 + 2px);
  inset-block-start: .55em;
  inline-size: 12px; block-size: 12px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-primary);
}
.timeline__year { font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.timeline__title { font-size: var(--fs-md); margin-block: var(--s-1); }
.timeline__place { font-size: var(--fs-sm); color: var(--c-fg-subtle); display: flex; align-items: center; gap: var(--s-2); }
.timeline__place svg { inline-size: .95rem; block-size: .95rem; }

/* ==========================================================================
   Gallery (TV series stills, Dar Al-Rahba shelf)
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s-4); }
.gallery__item {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: var(--shadow-sm);
}
.gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t-slow) var(--e-out); }
.gallery__item:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .gallery__item:hover img { transform: none; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: var(--s-5); max-inline-size: 34rem; }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field .req { color: var(--c-accent); margin-inline-start: 2px; }
.field input, .field textarea, .field select {
  min-block-size: 48px;                 /* ≥44px touch target */
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-base);            /* ≥16px stops iOS auto-zoom */
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.field textarea { min-block-size: 9rem; resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
  outline: none;
}
.field__hint { font-size: var(--fs-xs); color: var(--c-fg-subtle); }
.field__error { font-size: var(--fs-sm); color: #A02A37; display: flex; align-items: center; gap: var(--s-2); }
.field__error svg { inline-size: 1rem; block-size: 1rem; flex: none; }
.field.has-error input, .field.has-error textarea { border-color: #A02A37; }

/* Honeypot — hidden from people, visible to bots */
.hp-field { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--fs-sm);
}
.notice svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; margin-block-start: .15em; }
.notice--ok   { background: #EEF6EC; border-color: #B9D5B0; color: #2C5A25; }
.notice--err  { background: #FBEDEE; border-color: #E3B7BC; color: #8C2733; }
.notice--info { background: var(--c-primary-soft); border-color: #BCD0DB; color: var(--c-primary); }

.error-summary { margin-block-end: var(--s-5); }
.error-summary ul { margin: var(--s-2) 0 0; padding-inline-start: var(--s-5); }
.error-summary a { color: inherit; }

/* ==========================================================================
   Page header
   ========================================================================== */
.page-head {
  position: relative;
  padding-block: var(--s-9) var(--s-7);
  background: var(--c-bg-alt);
  border-block-end: 1px solid var(--c-border);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset-block-start: -55%;
  inset-inline-end: -8%;
  inline-size: 30rem; block-size: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--page-accent, var(--p-sand)), transparent 66%);
  opacity: .55;
  pointer-events: none;
}
.page-head__inner { position: relative; z-index: var(--z-raised); }
.page-head h1 { font-size: var(--fs-2xl); margin-block: var(--s-3); }
.page-head .u-lede { margin-block-start: var(--s-4); }

.breadcrumb { font-size: var(--fs-xs); color: var(--c-fg-subtle); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.breadcrumb a { color: var(--c-fg-subtle); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent); text-decoration: underline; }
.breadcrumb__sep { opacity: .5; }
[dir="rtl"] .breadcrumb__sep { transform: scaleX(-1); display: inline-block; }

/* ==========================================================================
   Single article
   ========================================================================== */
.article-head { padding-block: var(--s-8) var(--s-5); }
.article-head h1 { font-size: var(--fs-2xl); margin-block: var(--s-4); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-sm); color: var(--c-fg-subtle); }
.article-meta > * { display: flex; align-items: center; gap: var(--s-2); }
.article-meta svg { inline-size: 1rem; block-size: 1rem; }

.entry-content { max-inline-size: var(--w-prose); margin-inline: auto; }
.entry-content > * + * { margin-block-start: var(--s-4); }
.entry-content p { color: var(--c-fg); line-height: var(--lh-body); }
.entry-content h2 { font-size: var(--fs-xl); margin-block-start: var(--s-7); }
.entry-content h3 { font-size: var(--fs-lg); margin-block-start: var(--s-6); }
.entry-content img { border-radius: var(--r-md); margin-inline: auto; }
.entry-content ul, .entry-content ol { padding-inline-start: var(--s-6); }

.term-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.term-list a {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--c-accent-soft);
  color: var(--c-accent-hover);
  font-size: var(--fs-xs);
  text-decoration: none;
}
.term-list a:hover { background: var(--c-accent); color: #fff; }

.post-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s-4); margin-block-start: var(--s-9); }
.post-nav a {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-decoration: none;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.post-nav a:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }
.post-nav__dir { font-size: var(--fs-xs); color: var(--c-fg-subtle); }
.post-nav__title { font-family: var(--font-display); font-weight: 700; color: var(--c-fg); line-height: var(--lh-snug); }

/* ==========================================================================
   Pagination
   ========================================================================== */
/* the_posts_pagination() renders <nav class="pagination"> → <h2 class="screen-
   reader-text"> + <div class="nav-links">, so the row has to be laid out on
   .nav-links. Laying it out on the <nav> only spaces the hidden heading away
   from the block of links, and leaves every page number on its own line. */
.pagination { margin-block-start: var(--s-9); }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}
.pagination .page-numbers {
  display: grid; place-items: center;
  min-inline-size: 44px; min-block-size: 44px;
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-fg);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
}
.pagination a.page-numbers:hover { border-color: var(--c-accent); background: var(--c-surface); color: var(--c-accent); }
.pagination .current { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-dark); font-weight: 600; }
.pagination .dots { border: 0; background: transparent; min-inline-size: 1.5rem; padding-inline: 0; color: var(--c-fg-subtle); }
.pagination .prev, .pagination .next { padding-inline: var(--s-2); }
.pagination .page-numbers svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-10) var(--s-5);
  text-align: center;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface-sunk);
}
.empty svg { inline-size: 2.75rem; block-size: 2.75rem; color: var(--c-fg-subtle); opacity: .6; }
.empty h3 { font-size: var(--fs-lg); }
.empty p { color: var(--c-fg-muted); max-inline-size: 42ch; font-size: var(--fs-sm); }

/* Editorial to-do marker for content she still needs to supply */
.todo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: #FFF6E0;
  border: 1px dashed #E0C56B;
  color: #6B5410;
  font-size: var(--fs-sm);
}
.todo svg { inline-size: 1rem; block-size: 1rem; flex: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { margin-block-start: var(--s-11); background: var(--c-primary); color: var(--c-on-dark); }
.site-footer a { color: var(--c-on-dark); text-decoration-color: rgba(247, 245, 241, .4); }
.site-footer a:hover { color: #fff; text-decoration-color: currentColor; }
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-7);
  padding-block: var(--s-9) var(--s-7);
}
.site-footer__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.site-footer__tag { font-size: var(--fs-sm); color: rgba(247, 245, 241, .72); margin-block-start: var(--s-2); max-inline-size: 34ch; }
.site-footer h3 { font-size: var(--fs-sm); font-weight: 700; color: rgba(247, 245, 241, .62); letter-spacing: .1em; text-transform: uppercase; margin-block-end: var(--s-3); }
[dir="rtl"] .site-footer h3 { letter-spacing: 0; text-transform: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer ul a { font-size: var(--fs-sm); text-decoration: none; color: rgba(247, 245, 241, .85); }
.site-footer ul a:hover { color: #fff; text-decoration: underline; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-5);
  border-block-start: 1px solid rgba(247, 245, 241, .16);
  font-size: var(--fs-xs);
  color: rgba(247, 245, 241, .62);
}
.social { display: flex; gap: var(--s-2); }
.social a {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--r-md);
  background: rgba(247, 245, 241, .08);
  transition: background-color var(--t-fast) var(--e-out);
}
.social a:hover { background: rgba(247, 245, 241, .18); }
.social svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* ==========================================================================
   Scroll reveal — progressive, and off under reduced motion
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header, .site-footer, .nav, .skip-link, .filters, .post-nav, .cv-index { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero::before, .hero::after, .page-head::before { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 1rem; }
}