/* ==========================================================================
   PORTFOLIO — EDITORIAL BOOK DESIGN SYSTEM
   Color tokens, type tokens and layout rules are centralised here so the
   site can be restyled later without touching structure.
   ========================================================================== */

@font-face {
  font-family: 'Ruqah Wind Longo';
  src: url('assets/fonts/RuqahWindLongo.woff2') format('woff2'),
       url('assets/fonts/RuqahWindLongo.ttf') format('truetype');
  font-display: swap;
  /* If this file is missing, the poem falls back to 'Aref Ruqaa' below.
     Drop the real font file at assets/fonts/RuqahWindLongo.woff2 to activate it. */
}

:root {
  /* ---- Color system -------------------------------------------------------
     Palette: French Blue #2947A0 · Purple #916EB4 · Pink #EBA0C4 ·
     Background #F6F5F6 · Slate Grey #79889C
     The pre-palette original is backed up in _backup-original-palette/.
     Token names are kept as-is so nothing else in the file had to move.  */
  --snow: #F6F5F6;     /* main page / light surface background            */
  --pink: #EBA0C4;     /* main pink — playful accent                      */
  --cornsilk: #DACFE4; /* background washed with the purple — the second
                          light surface that keeps the two-tone rhythm    */
  --aqua: #916EB4;     /* main purple — secondary accent                  */
  --taupe: #2947A0;    /* French Blue — ink & strong accent               */
  --slate: #79889C;    /* Slate Grey — muted text, borders, neutral UI    */

  /* Darker shades of the pink and purple, used ONLY where the accent
     carries small text — the pure tones fail contrast on the background. */
  --pink-ink: #9C4A73;
  --wisteria-ink: #5E4875;

  --ink: var(--taupe);
  --bg: var(--snow);
  --accent: var(--pink);

  /* ---- Type ---- */
  --font-ar: 'Tajawal', sans-serif;
  --font-poem: 'Ruqah Wind Longo', 'Aref Ruqaa', serif;
  --font-display: 'Love Ya Like A Sister', cursive;
  --font-body: 'PT Serif', serif;

  /* ---- Rhythm ---- */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --chapter-pad: clamp(4rem, 12vh, 8rem);
  --max-line: 62ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ar);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html[lang="en"] body { font-family: var(--font-body); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

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

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  background: rgba(246, 245, 246, 0.82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(121, 136, 156, 0.12);
}

.nav-mark {
  font-family: var(--font-poem);
  font-size: 1.15rem;
  color: var(--pink-ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(0.85rem, 1.8vw, 1.75rem);
  font-size: 0.9rem;
  font-weight: 500;
}

@media (max-width: 1080px) {
  .nav-links { gap: 0.7rem; font-size: 0.82rem; }
}

.nav-links a {
  text-decoration: none;
  position: relative;
  padding-block: 2px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--pink);
  transition: width 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after { width: 100%; }

.nav-controls { display: flex; align-items: center; gap: 1rem; }

.lang-switch {
  font-family: var(--font-ar);
  background: none;
  border: 1px solid var(--taupe);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--taupe);
  display: flex;
  gap: 0.35rem;
}

.lang-switch [data-active] { color: var(--pink-ink); font-weight: 700; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--taupe); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset-inline: 0;
    top: 60px;
    background: var(--snow);
    flex-direction: column;
    padding: 1.5rem var(--gutter) 2rem;
    gap: 1.1rem;
    font-size: 1rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-bottom: 1px solid rgba(121, 136, 156, 0.12);
  }
  .nav-links.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

/* ==========================================================================
   SHARED CHAPTER RHYTHM
   ========================================================================== */

.chapter {
  padding: var(--chapter-pad) var(--gutter);
  position: relative;
}

.chapter-tag {
  display: block;
  font-size: 0.85rem;
  color: var(--pink-ink);
  margin-block-end: 0.75rem;
  font-weight: 700;
}

.chapter-title {
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin: 0 0 2rem;
  max-width: 20ch;
}
html[lang="en"] .chapter-title { font-family: var(--font-display); font-weight: 400; }

/* ==========================================================================
   01 HERO
   ========================================================================== */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  background: var(--snow);
}

.hero-eyebrow {
  font-family: var(--font-ar);
  font-weight: 500;
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--pink-ink);
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
  position: relative;
  padding-bottom: 0.6rem;
  max-width: fit-content;
}
.hero-eyebrow::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--pink);
  animation: draw-line 1.1s 0.3s ease-out forwards;
}
@keyframes draw-line { to { width: 100%; } }

.hero-title-wrap {
  position: relative;
  display: block;
  margin: 0 auto clamp(2.5rem, 8vh, 5rem);
  width: fit-content;
  max-width: 100%;
}

.title-deco {
  position: absolute;
  inset: -20% -12%;
  width: 124%;
  height: 140%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.title-deco path,
.title-deco circle { opacity: 0.85; }
.deco-curve { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw-curve 1.6s 0.6s ease-out forwards; }
@keyframes draw-curve { to { stroke-dashoffset: 0; } }
.deco-star { animation: twinkle 3.4s ease-in-out 1.8s infinite; transform-origin: 600px 33px; }
.deco-dot:nth-of-type(1) { animation: drift-dot 6s ease-in-out infinite; }
.deco-dot:nth-of-type(2) { animation: drift-dot 7s ease-in-out infinite 0.4s; }
@keyframes twinkle { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
@keyframes drift-dot { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(3px, -4px); } }

.hero-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-ar);
  font-weight: 900;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  line-height: 1.02;
  color: var(--taupe);
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.8s 0.5s ease-out forwards;
}
html[lang="en"] .hero-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
/* Arabic only: a hard-edged, offset duplicate of the lettering itself (no box). */
html[lang="ar"] .hero-title { text-shadow: 0.05em 0.055em 0 var(--pink); }

.hero-period { color: var(--pink-ink); }

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .deco-curve { stroke-dashoffset: 0; animation: none; }
  .deco-star, .deco-dot { animation: none; }
}

/* ---- Poem: three explicit staircase steps, each a two-line block ----
   Positions are physical (translateX/Y), not logical, so the staircase
   reads identically — right-to-left, descending — in both AR and EN. */
.poem-stair {
  font-family: var(--font-poem);
  color: var(--taupe);
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  line-height: 1.85;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}

.poem-step {
  text-align: center;
  opacity: 0;
  animation: rise 0.8s ease-out forwards;
}
.poem-step p { margin: 0; }

/* Staggered internally, centered externally: each line steps an equal
   distance to either side of the container's own center, so the whole
   two-line bounding box sits in the middle of the hero rather than
   drifting toward one edge. */
.step-1 { transform: translate(calc(var(--stair-x1, 150px) / 2), 0); animation-delay: 1.0s; }
.step-2 { transform: translate(calc(-1 * var(--stair-x1, 150px) / 2), var(--stair-y2, 32px)); animation-delay: 1.55s; }

/* keep the final resting position (animation fill is 'forwards', so
   translateY(0) inside @keyframes rise would fight the step transform —
   rise only animates opacity+a small lift, layered on top) */
.poem-step { --lift: 10px; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
.step-1, .step-2 { transform-origin: center; }

:root { --stair-x1: 160px; --stair-y2: 34px; }

@media (max-width: 900px) {
  :root { --stair-x1: 96px; --stair-y2: 24px; }
}
@media (max-width: 560px) {
  :root { --stair-x1: 48px; --stair-y2: 18px; }
  .poem-stair { font-size: 0.95rem; }
}

.motif-wrap {
  position: relative;
  display: inline-block;
}
.motif { color: var(--taupe); }

/* ---- Orbiting star with a soft comet tail ----
   One main star plus three fading, shrinking duplicates trailing behind
   it on the same path — an elegant trail, not a glow/blur effect. */
.orbit-wrap {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
}

.orbit-star {
  position: absolute;
  top: 0; left: 0;
  width: 15px;
  height: 15px;
  fill: var(--pink);
  offset-path: ellipse(72px 27px at 0px 0px);
  opacity: 0;
}

.orbit-main { animation: orbit 10s linear 2.6s infinite, spin 4s linear infinite, fade-in 0.4s 2.6s forwards; }
.orbit-trail { fill: var(--pink); }
.orbit-trail.t1 { width: 11px; height: 11px; animation: orbit 10s linear 2.72s infinite, fade-trail 0.4s 2.72s forwards; opacity: 0; }
.orbit-trail.t2 { width: 8px; height: 8px; animation: orbit 10s linear 2.84s infinite, fade-trail 0.4s 2.84s forwards; opacity: 0; }
.orbit-trail.t3 { width: 5px; height: 5px; animation: orbit 10s linear 2.96s infinite, fade-trail 0.4s 2.96s forwards; opacity: 0; }
.orbit-trail.t1 { --trail-o: 0.55; }
.orbit-trail.t2 { --trail-o: 0.3; }
.orbit-trail.t3 { --trail-o: 0.12; }

@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-trail { to { opacity: var(--trail-o); } }

@supports not (offset-path: ellipse(1px 1px)) {
  .orbit-wrap { position: static; display: inline-flex; margin-inline-start: 4px; }
  .orbit-star { position: static; animation: spin 4s linear infinite !important; opacity: 1 !important; }
  .orbit-trail { display: none; }
}

.hero-scroll-cue {
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  width: 1px;
  height: 40px;
  background: rgba(41, 71, 160, 0.3);
  position: relative;
}
.hero-scroll-cue span {
  position: absolute;
  top: 0; inset-inline-start: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%,100% { top: 0; opacity: 1; } 100% { top: 34px; opacity: 0; } }

/* ==========================================================================
   02 ABOUT
   ========================================================================== */

.about-title-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.about-title-wrap > .chapter-tag {
  position: relative;
  z-index: 1;
}

.about-star {
  position: absolute;
  width: clamp(180px, 22vw, 260px);
  height: clamp(180px, 22vw, 260px);
  top: 60%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  fill: var(--aqua);
  fill-opacity: 0.14;
  z-index: 0;
  pointer-events: none;
  animation: about-star-spin 34s linear infinite;
}
@keyframes about-star-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.about-heading {
  position: relative;
  z-index: 1;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-family: var(--font-ar);
  font-weight: 800;
  color: var(--taupe);
  margin: 0.2rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
html[lang="en"] .about-heading { font-family: var(--font-display); font-weight: 400; }

/* The emphasised word ("عني" / "Me") gets one small, clearly-visible
   accent star of its own — distinct from the large transparent one. */
.about-emphasis {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.about-accent-star {
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  top: -0.35em;
  inset-inline-end: -0.55em;
  fill: var(--aqua);
  animation: accent-star-pulse 3.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes accent-star-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.18) rotate(14deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .about-star,
  .about-accent-star { animation: none; }
}

/* Two balanced columns on desktop — heading + main text on the leading side,
   the highlighted line and education on the trailing side. No boxes, no
   backgrounds: just two columns of type with room to breathe between them. */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1100px;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 4rem; }
  .about-col-secondary { padding-top: 0.5rem; }
}
.about-col-primary .about-title-wrap { margin-bottom: 1.5rem; }

.about-lead {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.5;
  margin: 0;
  max-width: 18ch;
}
html[lang="en"] .about-lead { font-family: var(--font-display); font-weight: 400; text-transform: none; max-width: 22ch; }

.about-col p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  max-width: var(--max-line);
}
html[lang="ar"] .about-col p { font-family: var(--font-ar); font-weight: 400; }

/* Justified body copy: balanced edges without ballooning word-gaps. */
.about-col p.justified {
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
  max-width: 58ch;
}

/* The main About paragraph sits a notch below the section title in weight:
   smaller than the lead, justified in both scripts. */
/* The whole main paragraph is bold — stated at the same weight as the
   language rules above so it isn't out-specified by them. */
html[lang="ar"] .about-col p.about-main,
html[lang="en"] .about-col p.about-main { font-size: 0.95rem; line-height: 1.95; font-weight: 700; }

/* Accent sentence — pink, smaller than the body copy, introduced by an
   oversized editorial exclamation mark rather than a rule. */
.about-accent {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.75rem 0 0;
}
.about-bang {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  line-height: 0.8;
  color: var(--pink-ink);
  opacity: 0.9;
  transform: rotate(-6deg);
  align-self: flex-start;
}
html[dir="rtl"] .about-bang { transform: rotate(6deg); }

.about-annot {
  color: var(--pink-ink);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.75;
  text-align: start;
  margin: 0;
  max-width: 40ch;
}

/* Editorial Education block, folded into About — typography and a thin
   rule instead of a card container. */
.about-education {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(121, 136, 156, 0.2);
  max-width: 42ch;
}
.edu-heading {
  color: var(--wisteria-ink);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  font-family: var(--font-ar);
  font-weight: 800;
  margin: 0 0 0.6rem;
}
html[lang="en"] .edu-heading { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--wisteria-ink); }
.edu-major {
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 0.15rem;
  color: var(--taupe);
}
html[lang="ar"] .edu-uni { font-family: var(--font-ar); }
.edu-uni { font-family: var(--font-body); font-size: 0.85rem; margin: 0 0 0.55rem; color: var(--taupe); opacity: 0.8; }
.edu-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.78rem;
  opacity: 0.9;
  color: var(--taupe);
  font-family: var(--font-body);
}
html[lang="ar"] .edu-meta { font-family: var(--font-ar); }

@media (max-width: 640px) {
  .about-star { width: 150px; height: 150px; opacity: 0.9; }
}

/* ==========================================================================
   03 CAREER INTERESTS — floating paper cards
   ========================================================================== */

.interests {
  background: var(--cornsilk);
  padding-top: clamp(2rem, 5vh, 3.5rem);
}

.interests-grid {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-block: 1rem 2rem;
}

/* One shared card body: white, portrait, rounded, soft shadow. A single
   colour blob sits in one corner at rest and expands to fill the card
   on hover — no wave divider anymore. */
.interest-card {
  --card-color: var(--aqua);
  --card-text: var(--taupe);
  position: relative;
  overflow: hidden;
  width: 230px;
  height: 330px;
  border-radius: 26px;
  border: 1px solid rgba(121, 136, 156, 0.12);
  background: var(--snow);
  box-shadow: 0 14px 28px -10px rgba(41, 71, 160, 0.28), 0 4px 10px rgba(121, 136, 156, 0.12);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.interest-card:focus-visible { outline-offset: 4px; }

/* The corner blob: small at rest, clipped by the card's rounded
   corners, expanding from its own corner on hover. */
.card-corner {
  position: absolute;
  top: -18%;
  inset-inline-end: -18%;
  width: 60%;
  height: 45%;
  border-radius: 50%;
  background: var(--card-color);
  transform: scale(1);
  transform-origin: top right;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
html[dir="rtl"] .card-corner { transform-origin: top left; }

.interest-card:hover .card-corner { transform: scale(4.2); }

.card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  height: 100%;
  padding: 2rem 1.5rem 1.75rem;
  color: var(--taupe);
  transition: color 0.4s ease;
}
.interest-card:hover .card-content { color: var(--card-text); }

.card-illus { width: 50px; height: 50px; color: currentColor; margin-bottom: 0.2rem; transition: transform 0.3s ease, color 0.4s ease; }
.interest-card:hover .card-illus { transform: translateY(-3px) scale(1.08); }

.card-code {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: currentColor;
}
html[lang="ar"] .card-code { font-family: var(--font-ar); font-weight: 800; }

.card-content h3 { font-family: var(--font-ar); margin: 0.2rem 0 0.35rem; font-size: 1.15rem; line-height: 1.25; color: currentColor; }
html[lang="en"] .card-content h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.card-content p { font-family: var(--font-body); font-size: 0.85rem; line-height: 1.5; margin: 0; color: currentColor; opacity: 0.85; }
html[lang="ar"] .card-content p { font-family: var(--font-ar); }

/* The longest label (Creative Design & Digital Marketing) gets smaller
   type instead of a taller card — every card stays exactly 330px. */
.card-cdm .card-content h3 { font-size: 1rem; }
html[lang="en"] .card-cdm .card-content h3 { font-size: 1.05rem; }
.card-cdm .card-content p { font-size: 0.78rem; line-height: 1.42; }

/* With the descriptions gone, the illustration + title sit optically
   centred and the arrow stays anchored at the foot of the card. */
.card-content { justify-content: center; gap: 0.75rem; }
.card-content h3 { margin: 0; }

/* A drawn SVG arrow, not a text glyph — crisp at any size and it takes the
   card's colour through currentColor. */
.card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 0.2rem;
  color: currentColor;
  opacity: 0.6;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.card-arrow svg { width: 100%; height: 100%; display: block; }
/* Travels along the reading direction: up-and-right in LTR, up-and-left in RTL. */
.interest-card:hover .card-arrow,
.interest-card:focus-visible .card-arrow { transform: translate(8px, -8px); opacity: 1; }
html[dir="rtl"] .card-arrow { transform: scaleX(-1); }
html[dir="rtl"] .interest-card:hover .card-arrow,
html[dir="rtl"] .interest-card:focus-visible .card-arrow { transform: scaleX(-1) translate(8px, -8px); }

@media (prefers-reduced-motion: reduce) {
  .card-arrow { transition: opacity 0.3s ease; }
  .interest-card:hover .card-arrow { transform: none; }
  html[dir="rtl"] .interest-card:hover .card-arrow { transform: scaleX(-1); }
}

/* Per-card accent colour. Text colour flips to whichever reads best
   once that colour fills the whole card. */
/* The purple is deep enough that blue text on it is unreadable once the
   corner fills the card on hover — this card flips to the light tone. */
.card-ux { --card-color: var(--aqua); --card-text: var(--snow); }
.card-ba { --card-color: var(--pink); --card-text: var(--snow); }
.card-cdm { --card-color: var(--taupe); --card-text: var(--snow); }

.interest-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 34px -10px rgba(41, 71, 160, 0.4), 0 8px 14px rgba(121, 136, 156, 0.18);
}

@media (max-width: 860px) {
  .interests-grid { max-width: 560px; }
}

@media (max-width: 560px) {
  .interests-grid { flex-direction: column; align-items: center; gap: 1.5rem; }
  .interest-card { width: min(280px, 84vw); }
}

/* ==========================================================================
   04 SELECTED WORK
   ========================================================================== */

.project-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--wisteria-ink);
  line-height: 1;
  display: block;
}

.project-frame {
  aspect-ratio: 4/3;
  background: var(--cornsilk);
  border: 1.5px solid var(--taupe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  color: var(--taupe);
  /* Offset "printed piece" shadow — a flat block behind the frame plus a
     soft lift, rather than a uniform SaaS drop shadow. */
  box-shadow: 7px 7px 0 var(--aqua), 10px 12px 18px -8px rgba(41, 71, 160, 0.4);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
html[dir="rtl"] .project-frame { box-shadow: -7px 7px 0 var(--aqua), -10px 12px 18px -8px rgba(41, 71, 160, 0.4); }
.project:hover .project-frame { transform: translateY(-4px); }
.project:hover .project-frame { box-shadow: 9px 10px 0 var(--pink), 12px 16px 22px -8px rgba(41, 71, 160, 0.45); }
html[dir="rtl"] .project:hover .project-frame { box-shadow: -9px 10px 0 var(--pink), -12px 16px 22px -8px rgba(41, 71, 160, 0.45); }
@media (prefers-reduced-motion: reduce) { .project:hover .project-frame { transform: none; } }
.project-cat { font-size: 0.9rem; color: var(--pink-ink); font-weight: 600; margin: 0 0 0.4rem; }
.project-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 0.75rem; }
html[lang="ar"] .project-title { font-family: var(--font-ar); font-weight: 800; }
.project-desc { font-family: var(--font-body); max-width: var(--max-line); line-height: 1.8; }
html[lang="ar"] .project-desc { font-family: var(--font-ar); }
.project-link {
  display: inline-block;
  margin-top: 1rem;
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
  font-weight: 700;
  padding-bottom: 2px;
}
.project-link.muted { border-color: var(--taupe); opacity: 0.65; }

/* Three equal columns — same width, height, proportions and weight. */
.project-row {
  display: grid;
  gap: 3rem 2.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
  align-items: start;
}
@media (min-width: 720px) { .project-row { grid-template-columns: repeat(3, 1fr); } }
.project-side .project-frame.small { aspect-ratio: 4/3; margin-bottom: 1.25rem; }
.project-num { margin-bottom: 0.6rem; }

/* ==========================================================================
   04 EXPERIENCE — horizontal milestone timeline
   ========================================================================== */

/* Vertical order per milestone: date → dot (sitting exactly on the rail)
   → rule → content. The rail is pinned at a fixed offset and the date and
   dot are positioned against that same offset, so they always line up. */
.milestones {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: 980px;
  margin-top: 3rem;
  margin-inline: auto;
  padding-top: 0;
  --rail-y: 3.2rem;   /* distance from the top of the row to the line */
}
.experience .chapter-tag { text-align: center; }
.milestones::before {
  content: '';
  position: absolute;
  top: var(--rail-y);
  inset-inline: 6%;
  height: 0;
  border-top: 2px dashed var(--taupe);
  opacity: 0.4;
}

.milestone {
  position: relative;
  flex: 1;
  text-align: center;
  /* Clears the date, the rail, and leaves breathing room under the line. */
  padding-top: calc(var(--rail-y) + 2rem);
  transition: transform 0.3s ease;
}
.milestone:hover { transform: translateY(-4px); }

/* Centred exactly on the rail: same offset, then pulled back by half its
   own size in both axes. */
.milestone-node {
  position: absolute;
  top: var(--rail-y);
  /* physical 50%, matching the date above it, so the two share one axis
     in both writing directions */
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--snow);
}
.milestone-node.node-pink { background: var(--pink); }
.milestone-node.node-aqua { background: var(--aqua); }

/* Upcoming milestone: nothing to fabricate yet, so the node stays open
   (dashed outline, no fill) and gently pulses instead of sitting solid. */
.milestone-node.node-upcoming {
  background: var(--snow);
  border: 2px dashed var(--pink);
  animation: node-pulse 2.4s ease-in-out infinite;
}
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--snow); opacity: 0.75; }
  50% { box-shadow: 0 0 0 4px var(--snow), 0 0 0 8px rgba(235, 160, 196, 0.12); opacity: 1; }
}
.milestone.upcoming h3 { opacity: 0.55; }
.milestone.upcoming p { opacity: 0.55; }
.milestone-soon {
  color: var(--pink-ink) !important;
  font-style: italic;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .milestone-node.node-upcoming { animation: none; }
}

/* Dates read as a separate register from the body copy: aqua, spaced
   small caps on a thin cornsilk strip — same palette, different voice. */
/* The date sits above its own dot, centred on the same axis. */
.milestone-date {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wisteria-ink);
  background: var(--cornsilk);
  padding: 0.22rem 0.6rem;
  border-radius: 2px;
  margin-bottom: 0.9rem;
  font-weight: 700;
}
html[lang="ar"] .milestone-date { font-family: var(--font-ar); letter-spacing: 0; font-size: 0.78rem; }

.milestone h3 { font-family: var(--font-ar); margin: 0 0 0.6rem; font-size: 1.15rem; color: var(--taupe); }
html[lang="en"] .milestone h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
.milestone p { font-family: var(--font-body); margin: 0; line-height: 1.75; color: rgba(41, 71, 160, 0.8); max-width: 26ch; margin-inline: auto; }
html[lang="ar"] .milestone p { font-family: var(--font-ar); }

/* Club names: one running line in parentheses, smaller and in the accent. */
.milestone-clubs {
  font-size: 0.8rem !important;
  line-height: 1.7 !important;
  color: var(--pink-ink) !important;
  margin-top: 0.45rem !important;
  max-width: 28ch !important;
}

@media (max-width: 760px) {
  .experience .chapter-tag { text-align: start; }
  .milestones {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.25rem;
    padding-top: 0;
  }
  .milestones::before {
    top: 0;
    bottom: 0;
    inset-inline-start: 6px;
    inset-inline-end: auto;
    width: 0;
    height: auto;
    border-top: none;
    border-inline-start: 2px dashed var(--taupe);
  }
  /* Vertical rail: the date leads, the dot sits on the line beside it,
     and the content follows underneath. */
  .milestone {
    text-align: start;
    padding-top: 0;
    padding-inline-start: 2.75rem;
    width: 100%;
  }
  .milestone-date {
    position: static;
    transform: none;
    white-space: normal;
  }
  .milestone-node {
    top: 0.7rem;
    left: auto;
    right: auto;
    inset-inline-start: 6px;
    transform: translate(-50%, -50%);
  }
  html[dir="rtl"] .milestone-node { transform: translate(50%, -50%); }
  .milestone p, .milestone-clubs { margin-inline: 0 !important; max-width: none !important; }
}

/* ==========================================================================
   06 HIGHLIGHTS / مختارات — scrapbook-style placeholders
   ========================================================================== */

.highlights { background: var(--cornsilk); }

.highlights-note {
  font-family: var(--font-body);
  color: var(--taupe);
  opacity: 0.85;
  max-width: var(--max-line);
  margin: 0 0 2.5rem;
}
html[lang="ar"] .highlights-note { font-family: var(--font-ar); }

.highlights-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.highlight-ticket {
  position: relative;
  width: 240px;
  padding: 1.5rem 1.25rem;
  background: var(--snow);
  border: 1.5px dashed var(--taupe);
  border-radius: 4px;
}
.highlight-ticket:nth-child(2) { transform: rotate(-1deg); }
.highlight-ticket:nth-child(3) { transform: rotate(1.2deg); }

/* Hand-drawn paper clip: the card reads as physically clipped to the page.
   Drawn as an open stroke so it looks sketched, not rendered. */
.ticket-clip {
  position: absolute;
  top: -19px;
  inset-inline-end: 22px;
  width: 22px;
  height: 36px;
  fill: none;
  stroke: var(--taupe);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  transform: rotate(-9deg);
  transform-origin: top center;
}
html[dir="rtl"] .ticket-clip { transform: rotate(9deg); }
.highlight-ticket:nth-child(2) .ticket-clip { stroke: var(--pink); opacity: 0.8; }
.highlight-ticket:nth-child(3) .ticket-clip { transform: rotate(6deg); }
html[dir="rtl"] .highlight-ticket:nth-child(3) .ticket-clip { transform: rotate(-6deg); }

.highlight-ticket h3 { font-family: var(--font-ar); font-size: 1.05rem; margin: 0.4rem 0 0.5rem; color: var(--taupe); }
html[lang="en"] .highlight-ticket h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.ticket-meta { font-family: var(--font-body); font-size: 0.82rem; color: var(--pink-ink); margin: 0 0 0.6rem; }
html[lang="ar"] .ticket-meta { font-family: var(--font-ar); }
.ticket-note { font-family: var(--font-body); font-size: 0.9rem; color: rgba(41, 71, 160, 0.75); margin: 0; }
html[lang="ar"] .ticket-note { font-family: var(--font-ar); }

@media (max-width: 640px) {
  .highlights-row { flex-direction: column; align-items: center; }
  .highlight-ticket { width: min(300px, 86vw); transform: none !important; }
}

/* ==========================================================================
   12 CONTACT
   ========================================================================== */

.contact {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--taupe);
  color: var(--snow);
  position: relative;
  overflow: hidden;
}
.contact-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  margin: 0 0 2rem;
}
html[lang="ar"] .contact-title { font-family: var(--font-ar); font-weight: 900; }
.contact-links { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: center; }
.contact-links a,
.contact-cv-btn {
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid var(--pink);
  font-size: 1.1rem;
  padding-bottom: 2px;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
/* ---------- CV language modal ---------- */
.cv-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(30, 44, 92, 0.55);
  backdrop-filter: blur(2px);
}
.cv-modal-backdrop[hidden] { display: none; }
body.cv-modal-open { overflow: hidden; }

.cv-modal {
  position: relative;
  width: min(380px, 100%);
  padding: 2.25rem 1.75rem 1.9rem;
  background: var(--snow);
  border: 1.5px solid var(--taupe);
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 24px 48px -16px rgba(41, 71, 160, 0.45);
  animation: cvModalIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cvModalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cv-modal { animation: none; } }

.cv-modal-close {
  position: absolute;
  top: 0.6rem;
  inset-inline-end: 0.6rem;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--taupe);
  cursor: pointer;
}
.cv-modal-close svg { width: 100%; height: 100%; }

.cv-modal-title {
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--taupe);
  margin: 0 0 1.4rem;
}
html[lang="en"] .cv-modal-title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; }

.cv-modal-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.cv-choice {
  flex: 1 1 130px;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--taupe);
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--taupe);
  background: var(--cornsilk);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cv-choice:hover { background: var(--pink); color: var(--snow); transform: translateY(-2px); }

/* ---------- Experience: volunteer club list ---------- */
.milestone-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  font-family: var(--font-ar);
  font-size: 0.92rem;
  line-height: 1.9;
  color: rgba(41, 71, 160, 0.8);
}
html[lang="en"] .milestone-list { font-family: var(--font-body); }

/* ---------- Highlights: index number + image slot ---------- */
.ticket-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--pink-ink);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.ticket-photo {
  aspect-ratio: 4/3;
  margin-bottom: 0.8rem;
  background: var(--cornsilk);
  border: 1px solid rgba(121, 136, 156, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(41, 71, 160, 0.6);
}
.ticket-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Highlight scrapbook photos (Barmajan item) ----------
   Three printed photos pinned into the card: one lead print with two
   smaller ones tucked under it, each tilted a touch off-square. */
/* A wide, shallow spread rather than a tall stack: the lead print sits on one
   side and the two smaller ones lap its lower outer corner, so the whole
   composition is only as tall as the lead print itself. */
.ticket-scrapbook {
  position: relative;
  margin: 0 0 1rem;
  padding-bottom: 8%;
}
.snap {
  display: block;
  margin: 0;
  padding: 0;
  cursor: zoom-in;
  background: var(--snow);
  border: 3px solid var(--snow);
  outline: 1px solid rgba(121, 136, 156, 0.18);
  box-shadow: 2px 3px 0 rgba(121, 136, 156, 0.1), 3px 5px 10px -4px rgba(41, 71, 160, 0.35);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
/* Each print keeps the ratio of the file itself — portrait or landscape —
   so nothing is cropped and nothing is letterboxed into empty bands. */
.snap img {
  display: block;
  width: 100%;
  height: auto;
  /* `auto` first: a real photo uses its own ratio; the 5/4 only kicks in as a
     placeholder box for an image file that isn't in place yet. */
  aspect-ratio: auto 5 / 4;
  object-fit: contain;
  background: var(--cornsilk);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.snap-main { width: 62%; transform: rotate(-1.8deg); position: relative; z-index: 1; }
html[dir="rtl"] .snap-main { transform: rotate(1.8deg); }

/* The pair is pinned to the opposite lower corner, overlapping the lead. */
.snap-row {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  width: 54%;
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}
.snap-row .snap { flex: 1 1 0; min-width: 0; }
.snap-b { transform: rotate(2.4deg); }
.snap-c { transform: rotate(-1.4deg); }
html[dir="rtl"] .snap-b { transform: rotate(-2.4deg); }
html[dir="rtl"] .snap-c { transform: rotate(1.4deg); }

/* Hover: a small lift only — the tilt lives on the figure, the lift on the
   image inside it, so the two never fight over `transform`. */
.snap:hover {
  box-shadow: 3px 5px 0 rgba(121, 136, 156, 0.12), 5px 9px 16px -5px rgba(41, 71, 160, 0.42);
  z-index: 3;
}
.snap:hover img { transform: translateY(-3px) scale(1.03); }

.snap:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .snap:hover img { transform: none; }
}

/* ---------- Shared photo lightbox ---------- */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(14, 20, 44, 0.82);
}
.photo-lightbox[hidden] { display: none; }
.photo-lightbox-frame {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--snow);
  padding: 8px;
  border-radius: 2px;
  box-shadow: 0 28px 60px -20px rgba(14, 20, 44, 0.8);
}
/* The frame hugs the photo: the image keeps its own ratio, nothing is cropped. */
.photo-lightbox-frame img {
  display: block;
  max-width: min(100%, 92vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
}
.photo-lightbox-close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 3vw, 1.5rem);
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1.5px solid var(--snow);
  border-radius: 50%;
  background: transparent;
  color: var(--snow);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.photo-lightbox-close:hover { background: var(--snow); color: var(--taupe); }
.photo-lightbox-close svg { width: 100%; height: 100%; }
body.photo-lightbox-open { overflow: hidden; }

/* ---------- Selected Projects: one shared type scale ---------- */
.project-side .project-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 0.6rem; }
.project-num { font-size: clamp(2.2rem, 4vw, 3rem); }

.project-side .project-desc {
  font-family: var(--font-ar);
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(41, 71, 160, 0.82);
  margin: 0 0 1rem;
  text-align: justify;
  text-align-last: start;
}
html[lang="en"] .project-side .project-desc { font-family: var(--font-body); }
.project-side .project-link { margin-top: 0; font-size: 0.95rem; }

/* ---------- Two-slide image area ----------
   A wide presentation frame: slide 01 sits in view, slide 02 slides in
   horizontally on hover (or via the dots / a swipe on touch devices). */
.project-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--cornsilk);
  border: 1.5px solid var(--taupe);
  /* same offset editorial shadow the old frames used */
  box-shadow: 7px 7px 0 var(--aqua), 10px 12px 18px -8px rgba(41, 71, 160, 0.4);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
html[dir="rtl"] .project-slider { box-shadow: -7px 7px 0 var(--aqua), -10px 12px 18px -8px rgba(41, 71, 160, 0.4); }

.project-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The slides are presentation-shaped: shown whole, never cropped. */
.project-slide {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  object-fit: contain;
  background: var(--cornsilk);
  cursor: zoom-in;   /* click opens the full image in the lightbox */
}
.project-slide:focus-visible { outline: 2px solid var(--taupe); outline-offset: -4px; }

/* The slide changes ONLY through the arrows, the dots or a swipe — never on
   hover. RTL flips the direction the track travels. */
.project-slider.show-second .project-track { transform: translateX(-50%); }
html[dir="rtl"] .project-slider.show-second .project-track { transform: translateX(50%); }

.project:hover .project-slider {
  box-shadow: 9px 10px 0 var(--pink), 12px 16px 22px -8px rgba(41, 71, 160, 0.45);
}
html[dir="rtl"] .project:hover .project-slider { box-shadow: -9px 10px 0 var(--pink), -12px 16px 22px -8px rgba(41, 71, 160, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .project-track { transition: none; }
}

/* Arrows sit along the left and right edges of the frame, always available. */
.project-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 6px;
  border: 1.5px solid var(--taupe);
  border-radius: 50%;
  background: var(--snow);
  color: var(--taupe);
  cursor: pointer;
  opacity: 0.92;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.project-nav svg { width: 100%; height: 100%; display: block; }
.project-nav:hover { background: var(--pink); color: var(--snow); opacity: 1; }
.project-nav:focus-visible { outline: 2px solid var(--taupe); outline-offset: 2px; }
.project-nav.is-prev { left: 6px; right: auto; }
.project-nav.is-next { right: 6px; left: auto; }
/* Each chevron points outward, away from the image — the left one left, the
   right one right — in both writing directions. */

@media (max-width: 600px) {
  /* Still an easy tap target on a phone. */
  .project-nav { width: 36px; height: 36px; padding: 8px; }
  .project-nav.is-prev { left: 4px; }
  .project-nav.is-next { right: 4px; }
}

/* Two small indicators so it's clear which of the two images is showing. */
.project-dots {
  display: flex;
  position: absolute;
  bottom: 8px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  gap: 0.4rem;
  z-index: 2;
}
html[dir="rtl"] .project-dots { transform: translateX(50%); }
.project-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1.5px solid var(--taupe);
  border-radius: 50%;
  background: var(--snow);
  cursor: pointer;
  transition: background 0.25s ease;
}
.project-dot.is-active { background: var(--taupe); }

.contact-star {
  position: absolute;
  width: 60px; height: 60px;
  fill: var(--pink);
  opacity: 0.9;
  bottom: 8%;
  animation: spin 12s linear infinite;
}

.site-footer {
  text-align: center;
  padding: 2rem;
  font-family: var(--font-poem);
  color: var(--pink-ink);
  background: var(--taupe);
}

/* ==========================================================================
   REVEAL-ON-SCROLL UTILITY (applied via JS IntersectionObserver)
   ========================================================================== */

[data-reveal] { opacity: 1; }
.chapter:not(.hero) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.chapter.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .chapter:not(.hero) { opacity: 1; transform: none; }
}

/* ==========================================================================
   PAGE TRANSITIONS (cross-page navigation fade)
   ========================================================================== */
body.page-fade {
  opacity: 0;
  transition: opacity 0.22s ease;
}
body.page-fade.page-ready { opacity: 1; }
body.page-fade.page-leaving { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body.page-fade { opacity: 1; transition: none; }
}

/* ==========================================================================
   STANDALONE FIELD PAGES (ux.html, business-analysis.html, etc.)
   ========================================================================== */
.field-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--chapter-pad) + 3rem) var(--gutter) var(--chapter-pad);
}
.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  text-decoration: none;
  color: var(--pink-ink);
  font-weight: 700;
  border-bottom: 2px solid transparent;
  width: fit-content;
  transition: border-color 0.2s ease;
}
.back-link:hover { border-color: var(--pink); }
.field-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--taupe);
  margin: 0 0 2rem;
  max-width: 16ch;
}
html[lang="ar"] .field-title { font-family: var(--font-ar); font-weight: 900; }
.field-placeholder {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: rgba(41, 71, 160, 0.75);
  border-inline-start: 2px dashed var(--aqua);
  padding-inline-start: 1.25rem;
  max-width: var(--max-line);
}
html[lang="ar"] .field-placeholder { font-family: var(--font-ar); }

/* ==========================================================================
   BUSINESS ANALYSIS FIELD PAGE ONLY (business-analysis.html)
   Purely additive — nothing above this point is touched. Everything on
   this page draws from ONE colour family (the BA card's pink) plus its
   own light tint and dark shade, defined once below — no other portfolio
   accent (aqua, cornsilk, etc.) appears anywhere on this page.
   ========================================================================== */

.ba-page {
  overflow-x: hidden;
  --ba-accent: #EBA0C4;       /* Pink Carnation — same as the homepage BA card */
  --ba-accent-dark: #9C4A73;  /* deepened carnation, for text/hover/active states */
  --ba-accent-light: #F4E8EF; /* light tint of the same carnation, for subtle backgrounds */
}

/* ---- Hero ---- */
.ba-hero {
  position: relative;
  padding-top: calc(var(--chapter-pad) + 3rem);
  overflow: hidden;
}
.ba-hero-blob {
  position: absolute;
  top: -12%;
  inset-inline-end: -10%;
  width: clamp(220px, 34vw, 420px);
  height: clamp(220px, 34vw, 420px);
  border-radius: 50%;
  background: var(--ba-accent);
  opacity: 0.12;
  pointer-events: none;
}
.ba-hero-star {
  position: absolute;
  top: 14%;
  inset-inline-end: 12%;
  width: 26px;
  height: 26px;
  fill: var(--ba-accent);
  opacity: 0.5;
  animation: about-star-spin 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ba-hero-star { animation: none; } }

.ba-eyebrow {
  position: relative;
  z-index: 1;
  color: var(--ba-accent-dark);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-ar);
}
html[lang="en"] .ba-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }

.ba-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-ar);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--taupe);
  margin: 0;
}
html[lang="en"] .ba-title { font-family: var(--font-display); font-weight: 400; }

.ba-underline {
  position: relative;
  z-index: 1;
  display: block;
  width: 84px;
  height: 4px;
  background: var(--ba-accent);
  border-radius: 2px;
  margin: 1.1rem 0 1.6rem;
}

.ba-intro {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--taupe);
  max-width: var(--max-line);
}
html[lang="ar"] .ba-intro { font-family: var(--font-ar); }

/* ---- Shared section scaffolding ---- */
.ba-section { }
.ba-alt-bg { background: var(--ba-accent-light); }
.ba-section-note {
  font-family: var(--font-body);
  color: rgba(41, 71, 160, 0.75);
  max-width: var(--max-line);
  margin: -0.5rem 0 2.25rem;
}
html[lang="ar"] .ba-section-note { font-family: var(--font-ar); }

/* Section tag/title/back-link on THIS page pick up the BA accent
   instead of the site-wide pink token, so a future page using a
   different field colour stays independent of this one. */
.ba-page .chapter-tag { color: var(--ba-accent-dark); }
.ba-page .back-link { color: var(--ba-accent-dark); }
.ba-page .back-link:hover { border-color: var(--ba-accent-dark); color: var(--ba-accent-dark); }

/* ---- Tools ---- */
.ba-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  max-width: 760px;
}
.ba-tool-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  background: var(--snow);
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 16px;
  box-shadow: 0 10px 20px -14px rgba(41, 71, 160, 0.28);
  text-align: center;
  color: var(--taupe);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ba-tool-slot:hover { border-color: var(--ba-accent); box-shadow: 0 14px 24px -12px rgba(156, 74, 115, 0.3); transform: translateY(-3px); }
html[lang="ar"] .ba-tool-slot { font-family: var(--font-ar); }
.ba-tool-icon { width: 50px; height: 50px; color: var(--ba-accent-dark); background: transparent; }
.ba-tool-slot { padding: 1.1rem 0.9rem; gap: 0.5rem; }
@media (max-width: 600px) {
  .ba-tools-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.75rem; }
  .ba-tool-slot { padding: 0.75rem 0.5rem; gap: 0.35rem; font-size: 0.8rem; border-radius: 12px; }
  .ba-tool-icon { width: 34px; height: 34px; }
}
.ba-tool-icon svg { width: 100%; height: 100%; }
.ba-tool-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Skills ---- */
.ba-skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  max-width: 1100px;
}
.ba-skills-list li {
  padding: 0.55rem 1.2rem;
  border: 1.5px solid var(--ba-accent);
  border-radius: 999px;
  color: var(--ba-accent-dark);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--snow);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ba-skills-list li:hover { background: var(--ba-accent); color: var(--snow); }
html[lang="ar"] .ba-skills-list li { font-family: var(--font-ar); }

/* ---- Projects ---- */
/* Three equal cards side by side on desktop, stepping down to two and
   then one as the screen narrows. No card is weighted above another. */
.ba-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1.75rem;
  max-width: 1100px;
}
@media (max-width: 900px) { .ba-projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ba-projects-grid { grid-template-columns: 1fr; } }
/* Every card fills its cell, so the row stays level whatever the text length. */
.ba-projects-grid .ba-project-card { height: 100%; }
.ba-projects-grid .ba-card-open { height: 100%; }
.ba-projects-grid .ba-project-body { flex: 1; }
.ba-projects-grid .ba-project-link { margin-top: auto; }
.ba-project-card {
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 20px;
  overflow: hidden;
  background: var(--snow);
  box-shadow: 0 14px 28px -14px rgba(41, 71, 160, 0.3);
  display: flex;
  flex-direction: column;
}
.ba-project-cover {
  aspect-ratio: 16/9;
  background: var(--ba-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ba-accent-dark);
  font-family: var(--font-body);
}
.ba-project-body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.ba-project-body h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 0.5rem; color: var(--taupe); }
html[lang="ar"] .ba-project-body h3 { font-family: var(--font-ar); font-weight: 800; }
.ba-project-body p { font-family: var(--font-body); line-height: 1.7; color: var(--taupe); margin: 0 0 1.25rem; }
html[lang="ar"] .ba-project-body p { font-family: var(--font-ar); }
.ba-project-link {
  text-decoration: none;
  color: var(--ba-accent-dark);
  font-weight: 700;
  border-bottom: 2px solid var(--ba-accent);
  padding-bottom: 2px;
  margin-top: auto;
  width: fit-content;
}
.ba-project-link:hover { color: var(--ba-accent-dark); border-color: var(--ba-accent-dark); }
/* No dedicated case-study page yet: shown as an inert label, never a dead "#" link. */
.ba-project-link.is-disabled {
  color: rgba(41, 71, 160, 0.55);
  border-bottom-style: dashed;
  border-color: rgba(41, 71, 160, 0.35);
  font-weight: 500;
  cursor: default;
}

/* ---- Mini work ---- */
.ba-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap: 1.5rem;
  max-width: 900px;
}
.ba-mini-item {
  /* button reset */
  appearance: none;
  font: inherit;
  text-align: start;
  cursor: pointer;

  background: var(--snow);
  border: 1px solid rgba(121, 136, 156, 0.12);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ba-mini-item:hover, .ba-mini-item:focus-visible { border-color: var(--ba-accent); box-shadow: 0 10px 20px -12px rgba(156, 74, 115, 0.35); }
.ba-mini-preview {
  aspect-ratio: 4/3;
  background: var(--ba-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ba-accent-dark);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.ba-mini-item h4 { font-family: var(--font-ar); font-size: 1rem; margin: 0.9rem 1rem 0.2rem; color: var(--taupe); }
html[lang="en"] .ba-mini-item h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.ba-mini-view {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ba-accent-dark);
  margin: 0 1rem 1rem;
  font-weight: 600;
}
html[lang="ar"] .ba-mini-view { font-family: var(--font-ar); }

/* ---- Mini Work modal ---- */
body.ba-modal-open { overflow: hidden; }

.ba-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(30, 44, 92, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 1.25rem;
}
.ba-modal-backdrop[hidden] { display: none; }

.ba-modal {
  position: relative;
  background: var(--snow);
  border-radius: 22px;
  max-width: 640px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 2.25rem 2rem;
  box-shadow: 0 30px 60px -20px rgba(30, 44, 92, 0.45);
}
.ba-modal[hidden] { display: none; }

.ba-modal-close {
  position: absolute;
  top: 1.1rem;
  inset-inline-end: 1.1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(121, 136, 156, 0.2);
  background: var(--snow);
  color: var(--ba-accent-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ba-modal-close svg { width: 16px; height: 16px; }
.ba-modal-close:hover { background: var(--ba-accent-light); color: var(--ba-accent-dark); }

.ba-modal-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--taupe);
  margin: 0 2.5rem 1.5rem 0;
}
html[lang="ar"] .ba-modal-title { font-family: var(--font-ar); font-weight: 800; margin: 0 0 1.5rem 2.5rem; }

.ba-modal-section { margin-bottom: 1.5rem; }
.ba-modal-section:last-child { margin-bottom: 0; }
.ba-modal-section h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ba-accent-dark);
  font-family: var(--font-body);
  margin: 0 0 0.6rem;
}
html[lang="ar"] .ba-modal-section h4 { font-family: var(--font-ar); font-weight: 800; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
.ba-modal-section p {
  font-family: var(--font-body);
  color: var(--taupe);
  line-height: 1.7;
  margin: 0;
}
html[lang="ar"] .ba-modal-section p { font-family: var(--font-ar); }
.ba-modal-empty { color: rgba(41, 71, 160, 0.55); }

.ba-modal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ba-modal-list li {
  font-family: var(--font-body);
  color: var(--taupe);
  padding-inline-start: 1rem;
  position: relative;
}
html[lang="ar"] .ba-modal-list li { font-family: var(--font-ar); }
.ba-modal-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ba-accent);
}

.ba-deliverables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}
.ba-deliverable-slot {
  aspect-ratio: 4/3;
  border: 1.5px dashed rgba(41, 71, 160, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(41, 71, 160, 0.55);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-align: center;
  padding: 0.5rem;
}

/* ---------- Modal image gallery: one simple carousel ----------
   Slides keep their own proportions (contain), so diagrams and dashboards
   are never cropped. Arrows + dots + swipe. */
.ba-gallery { position: relative; }
.ba-gal-viewport {
  overflow: hidden;
  border: 1px solid rgba(121, 136, 156, 0.2);
  border-radius: 12px;
  background: var(--ba-accent-light);
}
.ba-gal-track {
  display: flex;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) { .ba-gal-track { transition: none; } }
.ba-gal-slide {
  flex: 0 0 100%;
  min-width: 100%;
  margin: 0;
  padding: 0.75rem;
  box-sizing: border-box;
}
.ba-gal-slide img {
  display: block;
  width: 100%;
  max-height: 46vh;
  height: auto;
  /* `auto` first: the real image uses its own proportions; the 16/9 is only a
     placeholder box for a file that hasn't been added yet. */
  aspect-ratio: auto 16 / 9;
  object-fit: contain;
  border-radius: 6px;
  background: var(--snow);
}

.ba-gal-arrow {
  position: absolute;
  top: 40%;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(121, 136, 156, 0.3);
  border-radius: 50%;
  background: var(--snow);
  color: var(--ba-accent-dark);
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, color 0.2s ease;
}
.ba-gal-arrow svg { width: 100%; height: 100%; }
.ba-gal-arrow:hover { background: var(--ba-accent); color: var(--snow); }
.ba-gal-arrow.is-prev { inset-inline-start: -6px; }
.ba-gal-arrow.is-next { inset-inline-end: -6px; }
/* The chevrons point along the reading direction. */
html[dir="rtl"] .ba-gal-arrow svg { transform: scaleX(-1); }

.ba-gal-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.75rem; }
.ba-gal-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--ba-accent-dark);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ba-gal-dot.is-active { background: var(--ba-accent-dark); }

/* ---------- Cards: whole card opens its modal ---------- */
.ba-card-open {
  appearance: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* A card whose details aren't written yet: same shape, no click affordance. */
.ba-card-open.is-pending { cursor: default; }
.ba-project-cover {
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.ba-project-cover img,
.ba-mini-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-card-title {
  display: block;
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--taupe);
  margin-bottom: 0.5rem;
}
html[lang="en"] .ba-card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.ba-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-ar);
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(41, 71, 160, 0.82);
  margin-bottom: 1rem;
}
html[lang="en"] .ba-card-desc { font-family: var(--font-body); }
.ba-mini-item .ba-card-title,
.ba-mini-item .ba-card-desc { padding-inline: 1rem; }
.ba-mini-item .ba-card-title { margin-top: 0.9rem; }

/* ---------- Modal extras ---------- */
.ba-modal-notice {
  font-family: var(--font-ar);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ba-accent-dark);
  background: var(--ba-accent-light);
  border-inline-start: 3px solid var(--ba-accent);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.5rem;
}
html[lang="en"] .ba-modal-notice { font-family: var(--font-body); }

.ba-method-list { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ba-method-list div { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.ba-method-list dt {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ba-accent-dark);
  flex: none;
}
.ba-method-list dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--taupe);
}

.ba-modal-cta {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--ba-accent);
  color: var(--taupe);
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
html[lang="en"] .ba-modal-cta { font-family: var(--font-body); font-weight: 700; }
.ba-modal-cta:hover { background: var(--ba-accent-dark); color: var(--snow); transform: translateY(-2px); }
.ba-gallery-thumb {
  appearance: none;
  aspect-ratio: 1;
  border: 1px solid rgba(121, 136, 156, 0.18);
  border-radius: 10px;
  background: var(--ba-accent-light);
  color: var(--ba-accent-dark);
  font-family: var(--font-body);
  font-size: 0.72rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ba-gallery-thumb:hover, .ba-gallery-thumb:focus-visible { border-color: var(--ba-accent); transform: scale(1.04); }

.ba-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(14, 20, 44, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 1.5rem;
}
.ba-lightbox[hidden] { display: none; }
.ba-lightbox-content {
  max-width: 640px;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--ba-accent-light);
  color: var(--ba-accent-dark);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1.1rem;
}
.ba-lightbox-close {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(246, 245, 246, 0.15);
  color: var(--snow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ba-lightbox-close svg { width: 18px; height: 18px; }
.ba-lightbox-close:hover { background: rgba(246, 245, 246, 0.3); }

@media (max-width: 640px) {
  .ba-modal { padding: 1.75rem 1.35rem; border-radius: 16px; }
}

/* ---- Certifications ---- */
.ba-cert-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 560px;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 14px;
  background: var(--snow);
  transition: border-color 0.25s ease;
}
.ba-cert-item:hover { border-color: var(--ba-accent); }
.ba-cert-badge { width: 34px; height: 34px; flex-shrink: 0; fill: var(--ba-accent); color: var(--ba-accent-dark); }
.ba-cert-badge svg { width: 100%; height: 100%; }
.ba-cert-info h4 { font-family: var(--font-ar); margin: 0 0 0.3rem; font-size: 1rem; color: var(--taupe); }
html[lang="en"] .ba-cert-info h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.ba-cert-meta { font-family: var(--font-body); font-size: 0.85rem; color: rgba(41, 71, 160, 0.7); margin: 0; }
html[lang="ar"] .ba-cert-meta { font-family: var(--font-ar); }

@media (max-width: 640px) {
  .ba-hero-blob { width: 260px; height: 260px; }
  .ba-project-body { padding: 1.25rem 1.25rem 1.5rem; }
}

/* ==========================================================================
   USER EXPERIENCE FIELD PAGE ONLY (ux.html)
   Same structure/quality bar as the Business Analysis page, but its own
   colour family built only from the UX card's aqua — a proper dark shade
   is used for text/borders since raw aqua is too pale for contrast.
   ========================================================================== */

/* ==========================================================================
   ONE ACCENT PER SPECIALIZATION PAGE
   The shared chrome (nav underline, language switch, focus rings, back link)
   reads the global --pink / --aqua tokens. Re-pointing those tokens at the
   page's own accent keeps each field page on a single colour family, without
   touching the homepage or any shared rule.
   ========================================================================== */
  Every global accent token is re-pointed at the page's own colour, including
  --taupe (the site ink), which is itself the CDM accent. Neutrals stay neutral.

  BA #EBA0C4, UX #916EB4, CDM #2947A0 are the exact homepage card colours. */
body.page-ba {
  --pink: #EBA0C4;        /* the BA pink, matching its homepage card */
  --pink-ink: #9C4A73;
  --aqua: #EBA0C4;
  --wisteria-ink: #9C4A73;
  --cornsilk: #F4E8EF;    /* light tint of the same pink */
  --taupe: #3B2430;       /* near-black derived from the same pink */
}
body.page-ux {
  --pink: #916EB4;        /* the UX purple, matching its homepage card */
  --pink-ink: #5E4875;
  --aqua: #916EB4;
  --wisteria-ink: #5E4875;
  --cornsilk: #E7E1EC;    /* light tint of the same purple */
  --taupe: #2C2338;       /* near-black derived from the same purple */
  /* The project-card components are shared with the BA page and read these,
     so the same markup renders in this page's colour. */
  --ba-accent: #916EB4;
  --ba-accent-dark: #5E4875;
  --ba-accent-light: #E7E1EC;
}
body.page-cdm {
  --pink: #2947A0;        /* the CDM French Blue, matching its homepage card */
  --pink-ink: #1C3273;
  --aqua: #2947A0;
  --wisteria-ink: #1C3273;
  --cornsilk: #E3E8F5;    /* light tint of the same blue */
  --taupe: #1C3273;       /* the same blue, darkened, as ink */
  /* Shared project-card components, in this page's colour. */
  --ba-accent: #2947A0;
  --ba-accent-dark: #1C3273;
  --ba-accent-light: #E3E8F5;
}

.ux-page {
  overflow-x: hidden;
  --ux-accent: #916EB4;       /* Wisteria — same as the homepage UX card */
  --ux-accent-dark: #5E4875;  /* deep wisteria derived from it, for text/borders/hover */
  --ux-accent-light: #E7E1EC; /* light tint of the same wisteria, for subtle backgrounds */
}

.ux-hero {
  position: relative;
  padding-top: calc(var(--chapter-pad) + 3rem);
  overflow: hidden;
}
/* Two soft aqua shapes instead of BA's single blob — a small compositional
   difference so the pages don't read as one duplicated template. */
.ux-hero-blob {
  position: absolute;
  border-radius: 50%;
  background: var(--ux-accent);
  pointer-events: none;
}
.ux-hero-blob.b1 {
  top: -16%;
  inset-inline-end: -8%;
  width: clamp(200px, 30vw, 380px);
  height: clamp(200px, 30vw, 380px);
  opacity: 0.14;
}
.ux-hero-blob.b2 {
  top: 30%;
  inset-inline-end: 4%;
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  opacity: 0.18;
}
.ux-hero-star {
  position: absolute;
  top: 12%;
  inset-inline-end: 20%;
  width: 24px;
  height: 24px;
  fill: var(--ux-accent-dark);
  opacity: 0.6;
  animation: about-star-spin 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ux-hero-star { animation: none; } }

.ux-eyebrow {
  position: relative; z-index: 1;
  color: var(--ux-accent-dark);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-ar);
}
html[lang="en"] .ux-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }

.ux-title {
  position: relative; z-index: 1;
  font-family: var(--font-ar);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--taupe);
  margin: 0;
}
html[lang="en"] .ux-title { font-family: var(--font-display); font-weight: 400; }

.ux-underline {
  position: relative; z-index: 1;
  display: block;
  width: 84px;
  height: 4px;
  background: var(--ux-accent-dark);
  border-radius: 2px;
  margin: 1.1rem 0 1.6rem;
}

.ux-intro {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--taupe);
  max-width: var(--max-line);
}
html[lang="ar"] .ux-intro { font-family: var(--font-ar); }

.ux-alt-bg { background: var(--ux-accent-light); }
.ux-section-note {
  font-family: var(--font-body);
  color: color-mix(in srgb, var(--ux-accent-dark) 75%, transparent);
  max-width: var(--max-line);
  margin: -0.5rem 0 2.25rem;
}
html[lang="ar"] .ux-section-note { font-family: var(--font-ar); }
.ux-page .chapter-tag { color: var(--ux-accent-dark); }
.ux-page .back-link { color: var(--ux-accent-dark); }
.ux-page .back-link:hover { border-color: var(--ux-accent-dark); }

/* ---- Tools ---- */
.ux-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  max-width: 760px;
}
.ux-tool-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  background: var(--snow);
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 16px;
  box-shadow: 0 10px 20px -14px rgba(41, 71, 160, 0.28);
  text-align: center;
  color: var(--taupe);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ux-tool-slot:hover { border-color: var(--ux-accent-dark); box-shadow: 0 14px 24px -12px rgba(94, 72, 117, 0.3); transform: translateY(-3px); }
html[lang="ar"] .ux-tool-slot { font-family: var(--font-ar); }
.ux-tool-icon { width: 50px; height: 50px; color: var(--ux-accent-dark); background: transparent; }
.ux-tool-slot { padding: 1.1rem 0.9rem; gap: 0.5rem; }
@media (max-width: 600px) {
  .ux-tools-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.75rem; }
  .ux-tool-slot { padding: 0.75rem 0.5rem; gap: 0.35rem; font-size: 0.8rem; border-radius: 12px; }
  .ux-tool-icon { width: 34px; height: 34px; }
}
.ux-tool-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ux-tool-icon svg { width: 100%; height: 100%; }

/* ---- Skills: squared tags (vs BA's pills) — a small structural,
   research-y distinction rather than a copy of the BA component. ---- */
.ux-skills-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  max-width: 1100px;
}
.ux-skills-list li {
  padding: 0.55rem 1.2rem;
  border: 1.5px solid var(--ux-accent-dark);
  border-radius: 10px;
  color: var(--ux-accent-dark);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--snow);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ux-skills-list li:hover { background: var(--ux-accent-dark); color: var(--snow); }
html[lang="ar"] .ux-skills-list li { font-family: var(--font-ar); }

/* ---- Projects ---- */
.ux-project-card {
  max-width: 760px;
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 20px;
  overflow: hidden;
  background: var(--snow);
  box-shadow: 0 14px 28px -14px rgba(41, 71, 160, 0.3);
}
.ux-project-cover {
  aspect-ratio: 16/9;
  background: var(--ux-accent-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--ux-accent-dark);
  font-family: var(--font-body);
}
.ux-project-body { padding: 1.5rem 1.75rem 1.75rem; }
.ux-project-tags { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.ux-project-tags span {
  font-size: 0.75rem;
  color: var(--ux-accent-dark);
  border: 1px solid var(--ux-accent-dark);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}
.ux-project-body h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 0.5rem; color: var(--ux-accent-dark); }
html[lang="ar"] .ux-project-body h3 { font-family: var(--font-ar); font-weight: 800; }
.ux-project-body p { font-family: var(--font-body); line-height: 1.7; color: var(--taupe); margin: 0 0 1.25rem; }
html[lang="ar"] .ux-project-body p { font-family: var(--font-ar); }
.ux-project-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.ux-project-year { font-size: 0.85rem; color: rgba(41, 71, 160, 0.7); }
.ux-project-link {
  text-decoration: none;
  color: var(--ux-accent-dark);
  font-weight: 700;
  border-bottom: 2px solid var(--ux-accent-dark);
  padding-bottom: 2px;
}
.ux-project-link.is-disabled {
  color: color-mix(in srgb, var(--ux-accent-dark) 55%, transparent);
  border-bottom-style: dashed;
  border-color: color-mix(in srgb, var(--ux-accent-dark) 35%, transparent);
  font-weight: 500;
  cursor: default;
}

/* ---- Mini work ---- */
.ux-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
}
.ux-mini-item {
  background: var(--snow);
  border: 1px solid rgba(121, 136, 156, 0.12);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ux-mini-item:hover { border-color: var(--ux-accent-dark); box-shadow: 0 10px 20px -12px rgba(94, 72, 117, 0.35); }
.ux-mini-preview {
  aspect-ratio: 4/3;
  background: var(--ux-accent-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--ux-accent-dark);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.ux-mini-item h4 { font-family: var(--font-ar); font-size: 1rem; margin: 0.9rem 1rem 0.3rem; color: var(--ux-accent-dark); }
html[lang="en"] .ux-mini-item h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.ux-mini-item p { font-family: var(--font-body); font-size: 0.85rem; color: color-mix(in srgb, var(--ux-accent-dark) 75%, transparent); margin: 0 1rem 1rem; }
html[lang="ar"] .ux-mini-item p { font-family: var(--font-ar); }

/* ---- Certifications ---- */
.ux-certs-grid { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
.ux-cert-item {
  display: flex; align-items: flex-start; gap: 1.1rem;
  max-width: 640px;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 14px;
  background: var(--snow);
  transition: border-color 0.25s ease;
}
.ux-cert-item:hover { border-color: var(--ux-accent-dark); }
.ux-cert-badge { width: 34px; height: 34px; flex-shrink: 0; fill: var(--ux-accent-dark); color: var(--ux-accent-dark); margin-top: 0.2rem; }
.ux-cert-badge svg { width: 100%; height: 100%; }
.ux-cert-info h4 { font-family: var(--font-ar); margin: 0 0 0.3rem; font-size: 1rem; color: var(--ux-accent-dark); }
html[lang="en"] .ux-cert-info h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.ux-cert-meta { font-family: var(--font-body); font-size: 0.85rem; color: rgba(41, 71, 160, 0.7); margin: 0; }
html[lang="ar"] .ux-cert-meta { font-family: var(--font-ar); }
.ux-cert-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.ux-cert-action {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  text-decoration: none;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--ux-accent-dark);
  color: var(--ux-accent-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}
html[lang="ar"] .ux-cert-action { font-family: var(--font-ar); }
.ux-cert-action:hover { background: var(--ux-accent-dark); color: var(--snow); }
.ux-cert-action.is-primary { background: var(--ux-accent); border-color: var(--ux-accent); color: var(--snow); }
.ux-cert-action.is-primary:hover { background: var(--ux-accent-dark); border-color: var(--ux-accent-dark); }

@media (max-width: 640px) {
  .ux-hero-blob.b1 { width: 220px; height: 220px; }
  .ux-hero-blob.b2 { display: none; }
  .ux-project-body { padding: 1.25rem 1.25rem 1.5rem; }
}

/* ==========================================================================
   CREATIVE DESIGN & DIGITAL MARKETING FIELD PAGE ONLY
   (creative-design-marketing.html)
   Same structure/quality bar again, colour family built only from the CDM
   card's taupe. A rotated square in the hero (instead of a circle) and
   slightly tilted skill tags give this page its own playful character.
   ========================================================================== */

.cdm-page {
  overflow-x: hidden;
  --cdm-accent: #2947A0;       /* French Blue — same as the homepage CDM card */
  --cdm-accent-dark: #1C3273;  /* darker blue, for hover/emphasis */
  --cdm-accent-light: #E3E8F5; /* light tint of the same blue, for subtle backgrounds */
}

.cdm-hero {
  position: relative;
  padding-top: calc(var(--chapter-pad) + 3rem);
  overflow: hidden;
}
.cdm-hero-shape {
  position: absolute;
  top: -8%;
  inset-inline-end: -6%;
  width: clamp(200px, 30vw, 360px);
  height: clamp(200px, 30vw, 360px);
  background: var(--cdm-accent);
  opacity: 0.1;
  border-radius: 30% 70% 65% 35% / 40% 35% 65% 60%;
  transform: rotate(12deg);
  pointer-events: none;
}
.cdm-hero-star {
  position: absolute;
  top: 16%;
  inset-inline-end: 18%;
  width: 24px;
  height: 24px;
  fill: var(--cdm-accent);
  opacity: 0.6;
  animation: about-star-spin 22s linear infinite reverse;
}
@media (prefers-reduced-motion: reduce) { .cdm-hero-star { animation: none; } }

.cdm-eyebrow {
  position: relative; z-index: 1;
  color: var(--cdm-accent);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-ar);
}
html[lang="en"] .cdm-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }

.cdm-title {
  position: relative; z-index: 1;
  font-family: var(--font-ar);
  font-weight: 900;
  font-size: clamp(2.2rem, 5.6vw, 3.7rem);
  color: var(--taupe);
  margin: 0;
  max-width: 16ch;
}
html[lang="en"] .cdm-title { font-family: var(--font-display); font-weight: 400; }

.cdm-underline {
  position: relative; z-index: 1;
  display: block;
  width: 84px;
  height: 4px;
  background: var(--cdm-accent);
  border-radius: 2px;
  margin: 1.1rem 0 1.6rem;
}

.cdm-intro {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--taupe);
  max-width: var(--max-line);
}
html[lang="ar"] .cdm-intro { font-family: var(--font-ar); }

.cdm-alt-bg { background: var(--cdm-accent-light); }
.cdm-section-note {
  font-family: var(--font-body);
  color: rgba(41, 71, 160, 0.75);
  max-width: var(--max-line);
  margin: -0.5rem 0 2.25rem;
}
html[lang="ar"] .cdm-section-note { font-family: var(--font-ar); }
.cdm-page .chapter-tag { color: var(--cdm-accent); }
.cdm-page .back-link { color: var(--cdm-accent); }
.cdm-page .back-link:hover { border-color: var(--cdm-accent-dark); color: var(--cdm-accent-dark); }

/* ---- Tools ---- */
.cdm-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  max-width: 720px;
}
.cdm-tool-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  background: var(--snow);
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 16px;
  box-shadow: 0 10px 20px -14px rgba(41, 71, 160, 0.28);
  text-align: center;
  color: var(--taupe);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.cdm-tool-slot:hover { border-color: var(--cdm-accent); box-shadow: 0 14px 24px -12px rgba(30, 44, 92, 0.3); transform: translateY(-3px); }
html[lang="ar"] .cdm-tool-slot { font-family: var(--font-ar); }
.cdm-tool-icon { width: 36px; height: 36px; color: var(--cdm-accent); }
.cdm-tool-icon svg { width: 100%; height: 100%; }
.cdm-tool-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Skills: slightly tilted tags, like little sticky notes — the
   page's own playful personality. ---- */
.cdm-skills-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1100px;
}
.cdm-skills-list li {
  padding: 0.55rem 1.2rem;
  border: 1.5px solid var(--cdm-accent);
  border-radius: 6px;
  color: var(--cdm-accent);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--snow);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cdm-skills-list li:nth-child(odd) { transform: rotate(-1.4deg); }
.cdm-skills-list li:nth-child(even) { transform: rotate(1.2deg); }
.cdm-skills-list li:hover { background: var(--cdm-accent); color: var(--snow); transform: rotate(0deg); }
html[lang="ar"] .cdm-skills-list li { font-family: var(--font-ar); }

/* ---- Projects ---- */
.cdm-project-card {
  max-width: 760px;
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 20px;
  overflow: hidden;
  background: var(--snow);
  box-shadow: 0 14px 28px -14px rgba(41, 71, 160, 0.3);
}
.cdm-project-cover {
  aspect-ratio: 16/9;
  background: var(--cdm-accent-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--cdm-accent);
  font-family: var(--font-body);
}
.cdm-project-body { padding: 1.5rem 1.75rem 1.75rem; }
.cdm-project-tags { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.cdm-project-tags span {
  font-size: 0.75rem;
  color: var(--cdm-accent);
  border: 1px solid var(--cdm-accent);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}
.cdm-project-body h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 0.5rem; color: var(--taupe); }
html[lang="ar"] .cdm-project-body h3 { font-family: var(--font-ar); font-weight: 800; }
.cdm-project-body p { font-family: var(--font-body); line-height: 1.7; color: var(--taupe); margin: 0 0 1.25rem; }
html[lang="ar"] .cdm-project-body p { font-family: var(--font-ar); }
.cdm-project-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.cdm-project-year { font-size: 0.85rem; color: rgba(41, 71, 160, 0.7); }
.cdm-project-link {
  text-decoration: none;
  color: var(--cdm-accent);
  font-weight: 700;
  border-bottom: 2px solid var(--cdm-accent);
  padding-bottom: 2px;
}
.cdm-project-link.is-disabled {
  color: rgba(41, 71, 160, 0.55);
  border-bottom-style: dashed;
  border-color: rgba(41, 71, 160, 0.35);
  font-weight: 500;
  cursor: default;
}

/* ---- Mini work ---- */
.cdm-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
}
.cdm-mini-item {
  background: var(--snow);
  border: 1px solid rgba(121, 136, 156, 0.12);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cdm-mini-item:hover { border-color: var(--cdm-accent); box-shadow: 0 10px 20px -12px rgba(30, 44, 92, 0.35); }
.cdm-mini-preview {
  aspect-ratio: 4/3;
  background: var(--cdm-accent-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--cdm-accent);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.cdm-mini-item h4 { font-family: var(--font-ar); font-size: 1rem; margin: 0.9rem 1rem 0.3rem; color: var(--taupe); }
html[lang="en"] .cdm-mini-item h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.cdm-mini-item p { font-family: var(--font-body); font-size: 0.85rem; color: rgba(41, 71, 160, 0.75); margin: 0 1rem 1rem; }
html[lang="ar"] .cdm-mini-item p { font-family: var(--font-ar); }

/* ---- Certifications ---- */
.cdm-cert-item {
  display: flex; align-items: center; gap: 1.1rem;
  max-width: 560px;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(121, 136, 156, 0.15);
  border-radius: 14px;
  background: var(--snow);
  transition: border-color 0.25s ease;
}
.cdm-cert-item:hover { border-color: var(--cdm-accent); }
.cdm-cert-badge { width: 34px; height: 34px; flex-shrink: 0; fill: var(--cdm-accent); color: var(--cdm-accent); }
.cdm-cert-badge svg { width: 100%; height: 100%; }
.cdm-cert-info h4 { font-family: var(--font-ar); margin: 0 0 0.3rem; font-size: 1rem; color: var(--taupe); }
html[lang="en"] .cdm-cert-info h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; }
.cdm-cert-meta { font-family: var(--font-body); font-size: 0.85rem; color: rgba(41, 71, 160, 0.7); margin: 0; }
html[lang="ar"] .cdm-cert-meta { font-family: var(--font-ar); }

@media (max-width: 640px) {
  .cdm-hero-shape { width: 220px; height: 220px; }
  .cdm-project-body { padding: 1.25rem 1.25rem 1.5rem; }
}

/* Specialization pages keep shared component chrome inside their own accent family. */
body.page-ba :focus-visible { outline-color: var(--ba-accent); }
body.page-ux :focus-visible { outline-color: var(--ux-accent); }
body.page-cdm :focus-visible { outline-color: var(--cdm-accent); }

body.page-ba .site-nav,
body.page-ba .nav-links,
body.page-ux .site-nav,
body.page-ux .nav-links,
body.page-cdm .site-nav,
body.page-cdm .nav-links {
  border-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

body.page-ba .ba-project-card,
body.page-ux .ba-project-card,
body.page-cdm .ba-project-card {
  border-color: color-mix(in srgb, var(--ba-accent) 15%, transparent);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--ba-accent) 30%, transparent);
}

body.page-ba .ba-project-link.is-disabled,
body.page-ux .ba-project-link.is-disabled,
body.page-cdm .ba-project-link.is-disabled {
  color: color-mix(in srgb, var(--ba-accent-dark) 55%, transparent);
  border-color: color-mix(in srgb, var(--ba-accent-dark) 35%, transparent);
}

body.page-ux .ux-section-note,
body.page-ux .ux-project-year,
body.page-ux .ux-cert-meta,
body.page-ux .ux-mini-item p {
  color: color-mix(in srgb, var(--ux-accent-dark) 75%, transparent);
}
body.page-ux .ux-tool-slot,
body.page-ux .ux-mini-item,
body.page-ux .ux-cert-item {
  border-color: color-mix(in srgb, var(--ux-accent-dark) 15%, transparent);
  box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--ux-accent-dark) 28%, transparent);
}

body.page-cdm .cdm-section-note,
body.page-cdm .cdm-project-year,
body.page-cdm .cdm-cert-meta,
body.page-cdm .cdm-mini-item p {
  color: color-mix(in srgb, var(--cdm-accent-dark) 75%, transparent);
}
body.page-cdm .cdm-tool-slot,
body.page-cdm .cdm-mini-item,
body.page-cdm .cdm-cert-item {
  border-color: color-mix(in srgb, var(--cdm-accent-dark) 15%, transparent);
  box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--cdm-accent-dark) 28%, transparent);
}

/* Strict monochrome treatment for the live BA and UX pages. */
body.page-ba,
body.page-ux {
  --slate: var(--page-accent-dark);
  --ink: var(--page-ink);
  --taupe: var(--page-ink);
  --pink-ink: var(--page-accent-dark);
  --wisteria-ink: var(--page-accent-dark);
}
body.page-ba {
  --page-accent: #EBA0C4;
  --page-accent-dark: #9C4A73;
  --page-accent-light: #F4E8EF;
  --page-ink: #3B2430;
  --ba-accent: var(--page-accent);
  --ba-accent-dark: var(--page-accent-dark);
  --ba-accent-light: var(--page-accent-light);
  --pink: var(--page-accent);
  --aqua: var(--page-accent);
  --cornsilk: var(--page-accent-light);
  --accent: var(--page-accent);
}
body.page-ux {
  --page-accent: #916EB4;
  --page-accent-dark: #5E4875;
  --page-accent-light: #E7E1EC;
  --page-ink: #2C2338;
  --ba-accent: var(--page-accent);
  --ba-accent-dark: var(--page-accent-dark);
  --ba-accent-light: var(--page-accent-light);
  --pink: var(--page-accent);
  --aqua: var(--page-accent);
  --cornsilk: var(--page-accent-light);
  --accent: var(--page-accent);
  --ux-accent: var(--page-accent);
  --ux-accent-dark: var(--page-accent-dark);
  --ux-accent-light: var(--page-accent-light);
}

body.page-ba .site-nav,
body.page-ux .site-nav,
body.page-ba .nav-links,
body.page-ux .nav-links,
body.page-ba .lang-switch,
body.page-ux .lang-switch {
  border-color: color-mix(in srgb, var(--page-accent-dark) 18%, transparent);
}
body.page-ba .nav-mark,
body.page-ux .nav-mark,
body.page-ba .lang-switch [data-active],
body.page-ux .lang-switch [data-active],
body.page-ba .chapter-tag,
body.page-ux .chapter-tag,
body.page-ba .back-link,
body.page-ux .back-link {
  color: var(--page-accent-dark);
}
body.page-ba .nav-links a::after,
body.page-ux .nav-links a::after,
body.page-ba .nav-toggle span,
body.page-ux .nav-toggle span {
  background-color: var(--page-accent-dark);
}
body.page-ba .lang-switch,
body.page-ux .lang-switch {
  color: var(--page-accent-dark);
}
body.page-ba :focus-visible,
body.page-ux :focus-visible {
  outline-color: var(--page-accent);
}

body.page-ba .ba-section-note,
body.page-ba .ba-project-body p,
body.page-ba .ba-project-link.is-disabled,
body.page-ba .ba-modal-empty,
body.page-ba .ba-cert-meta,
body.page-ux .ux-section-note,
body.page-ux .ux-project-body p,
body.page-ux .ux-project-year,
body.page-ux .ux-project-link.is-disabled,
body.page-ux .ux-mini-item p,
body.page-ux .ux-cert-meta {
  color: color-mix(in srgb, var(--page-accent-dark) 75%, transparent);
}

body.page-ba .ba-tool-slot,
body.page-ba .ba-project-card,
body.page-ba .ba-mini-item,
body.page-ba .ba-modal,
body.page-ba .ba-modal-close,
body.page-ba .ba-gallery-thumb,
body.page-ba .ba-cert-item,
body.page-ux .ux-tool-slot,
body.page-ux .ba-project-card,
body.page-ux .ux-mini-item,
body.page-ux .ux-cert-item {
  border-color: color-mix(in srgb, var(--page-accent-dark) 18%, transparent);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--page-accent-dark) 30%, transparent);
}
body.page-ba .ba-tool-slot:hover,
body.page-ba .ba-project-card:hover,
body.page-ba .ba-mini-item:hover,
body.page-ba .ba-mini-item:focus-visible,
body.page-ba .ba-gallery-thumb:hover,
body.page-ba .ba-gallery-thumb:focus-visible,
body.page-ba .ba-cert-item:hover,
body.page-ux .ux-tool-slot:hover,
body.page-ux .ba-project-card:hover,
body.page-ux .ux-mini-item:hover,
body.page-ux .ux-cert-item:hover {
  border-color: var(--page-accent);
}

body.page-ba .ba-project-cover,
body.page-ba .ba-mini-preview,
body.page-ba .ba-modal-close:hover,
body.page-ba .ba-modal-callout,
body.page-ba .ba-gallery-thumb,
body.page-ux .ba-project-cover,
body.page-ux .ux-mini-preview,
body.page-ux .ba-modal-close:hover {
  background: var(--page-accent-light);
  color: var(--page-accent-dark);
}
body.page-ux .ba-modal-close {
  color: var(--page-accent-dark);
}
body.page-ba .ba-project-link,
body.page-ba .ba-modal-title,
body.page-ba .ba-modal-section h4,
body.page-ba .ba-method-list dt,
body.page-ba .ba-modal-cta,
body.page-ba .ba-gallery-dot.is-active,
body.page-ux .ux-project-link,
body.page-ux .ux-project-body h3,
body.page-ux .ux-mini-item h4,
body.page-ux .ux-cert-info h4,
body.page-ux .ba-modal-section h4,
body.page-ux .ba-method-list dt {
  color: var(--page-accent-dark);
  border-color: var(--page-accent-dark);
}
body.page-ba .ba-modal-cta,
body.page-ba .ba-gal-arrow:hover,
body.page-ux .ux-skills-list li:hover,
body.page-ux .ba-modal-cta {
  background: var(--page-accent);
  color: #FFFFFF;
}
body.page-ux .ba-modal-list li::before { background: var(--page-accent); }
body.page-ba .ba-skills-list li,
body.page-ux .ux-skills-list li {
  border-color: var(--page-accent-dark);
  color: var(--page-accent-dark);
}
body.page-ba .ba-skills-list li:hover {
  background: var(--page-accent);
  color: #FFFFFF;
}
body.page-ba .ba-modal-backdrop,
body.page-ux .ba-modal-backdrop {
  background: color-mix(in srgb, var(--page-ink) 55%, transparent);
}
body.page-ba .ba-modal-cta:hover,
body.page-ux .ba-project-link:hover,
body.page-ux .ba-modal-cta:hover {
  background: var(--page-accent-dark);
  color: #FFFFFF;
}
body.page-ba .ba-gallery-dot,
body.page-ux .ux-project-link,
body.page-ux .ux-skills-list li,
body.page-ux .ux-cert-badge,
body.page-ux .ux-tool-icon,
body.page-ux .ux-hero-star {
  color: var(--page-accent-dark);
  fill: var(--page-accent-dark);
  border-color: var(--page-accent-dark);
}
body.page-ba .ba-cert-badge,
body.page-ba .ba-hero-star,
body.page-ba .ba-hero-blob {
  color: var(--page-accent-dark);
  fill: var(--page-accent-dark);
  background-color: var(--page-accent);
}
body.page-ba .ba-tool-icon {
  color: var(--page-accent-dark);
  fill: var(--page-accent-dark);
  background: transparent;
}
body.page-ba .ba-hero-blob { opacity: 0.14; }
body.page-ux .ux-hero-blob { background: var(--page-accent); }
body.page-ux .ux-underline { background: var(--page-accent-dark); }
body.page-ba .ba-underline { background: var(--page-accent-dark); }
body.page-ba .ba-modal-title,
body.page-ux .ux-title,
body.page-ba .ba-title,
body.page-ux .ux-intro,
body.page-ba .ba-intro {
  color: var(--page-ink);
}
body.page-ba ::-webkit-scrollbar-thumb,
body.page-ux ::-webkit-scrollbar-thumb {
  background: var(--page-accent-dark);
}
body.page-ba ::-webkit-scrollbar-track,
body.page-ux ::-webkit-scrollbar-track {
  background: var(--page-accent-light);
}