/* Readability layer, loaded after the compiled theme.
   Display fonts (rader / formula) stay for headlines; all reading text moves to Inter
   with comfortable size, line-height and full-contrast colors (WCAG AA on --bg). */

:root {
  --ink: #141414;        /* primary text, ~16:1 on --bg */
  --ink-2: #2e312c;      /* body copy, ~12:1 */
  --ink-3: #4f544b;      /* labels / meta, ~7:1 */
  --read: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--accent2); color: var(--ink); }

/* ---------- reading text ---------- */
p {
  font-family: var(--read);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: inherit;
}
p.ss {
  font-family: var(--read);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--ink-2);
}

/* ---------- mono labels: keep the identity, drop the fading ---------- */
/* (not global: the menu toggle label animates inside a fixed .875rem clip) */
.section-header p.mn, .timeline p.mn, .case-study p.mn, .credentials p.mn, .about-hero-bio p.mn { letter-spacing: .06em; line-height: 1.4; }

/* menu overlay keeps the display face */
.nav-overlay .nav-items .nav-item p { font-family: formula-narrow, sans-serif; font-weight: 600; line-height: 1.125; }
.section-header .mn,
.case-study .case-study-item .mn,
.timeline .timeline-meta,
.credentials .credentials-item .mn { opacity: 1; color: var(--ink-3); }
.case-study .case-study-item:nth-child(4) .mn { color: var(--accent3); }
.timeline .timeline-role span { opacity: 1; color: var(--ink-3); }
.engagements .engagement-row .engagement-detail { opacity: 1; color: var(--ink-3); font-size: 1rem; }
.engagements .engagement-row .engagement-name { font-weight: 600; }
footer .footer-col p:not(:first-child) { opacity: .75; }
footer .footer-col p:first-child { font-weight: 600; }

/* ---------- section headers ---------- */
.section-header { gap: .9em; }
.section-header .ss { max-width: 40rem; }

/* ---------- about ---------- */
.about-hero .about-hero-bio { width: min(46rem, 100%); }
.about-hero .about-hero-bio .ss { font-size: 1.25rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- case study cards ---------- */
.case-study .case-study-item p:not(.mn) { font-size: 1.05rem; line-height: 1.6; }

/* ---------- timeline ---------- */
.timeline .timeline-list-items p {
  font-family: var(--read);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.timeline .timeline-list-items p::before { opacity: .55; }
.timeline .timeline-card { box-shadow: .4em .4em 0 var(--fg); }

/* ---------- expertise ---------- */
.expertise .expertise-card h3 { font-size: 1.3rem; letter-spacing: .01em; }
.pill-list.pills span { font-family: var(--read); font-weight: 500; font-size: .85rem; color: var(--ink); }

/* ---------- credentials ---------- */
.credentials .credentials-item p:not(.mn) { font-weight: 600; line-height: 1.4; }

/* ---------- additions from geek.css ---------- */
.hero-intro .hero-role { font-family: var(--read); font-weight: 600; font-size: 1.3rem; line-height: 1.4; letter-spacing: -.01em; }
.code-note { font-family: var(--read); font-weight: 400; font-size: 1rem; line-height: 1.6; }
.code-note p { color: var(--term-fg); }

/* ---------- contact page ---------- */
.contact-card-header-main p { font-family: var(--read); font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); max-width: 34rem; }
.contact-info-item p:not(.label), .contact-info-item a { font-family: var(--read); font-size: 1.05rem; font-weight: 600; }

@media (max-width: 700px) {
  /* long centered paragraphs are hard to scan on phones */
  .about-hero .about-hero-bio .ss, .section-header .ss { text-align: left; }
}

@media (max-width: 1000px) {
  p { font-size: 1rem; }
  p.ss { font-size: 1.08rem; }
  .about-hero .about-hero-bio .ss { font-size: 1.08rem; }
  .hero-intro .hero-role { font-size: 1.05rem; }
}

/* About: strong opening line */
.about-hero .about-hero-bio .about-lead { font-family: var(--read); font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 700;
  line-height: 1.25; letter-spacing: -.02em; color: var(--ink); margin-bottom: -.4em; }

/* ---------- About: portrait + text, side by side ---------- */
.about-portrait { margin: 0; position: relative; width: min(340px, 78vw); }
.about-portrait::before { /* offset accent block behind the photo */
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 22px;
  background: linear-gradient(140deg, #2563EB 0%, #14B8A6 100%); opacity: .9; z-index: 0; }
.about-portrait__frame { position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #E8F0FE;
  box-shadow: 0 0 0 6px #fff, 0 30px 60px -24px rgba(11, 27, 51, .45); }
.about-portrait__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.about-portrait__tag { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: .7em .9em; border-radius: 12px;
  background: rgba(11, 27, 51, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
  font-family: var(--read); line-height: 1.25; }
.about-portrait__tag b { display: block; font-size: .98rem; font-weight: 700; }
.about-portrait__tag span { display: block; font-size: .8rem; color: #C3CFE0; margin-top: .15em; }

@media (min-width: 1001px) {
  .about-hero { display: grid !important; grid-template-columns: minmax(280px, 360px) minmax(0, 640px);
    justify-content: center; align-items: center; column-gap: clamp(3rem, 6vw, 6rem); row-gap: 3.5rem; }
  .about-hero .about-hero-header { grid-column: 1 / -1; }
  .about-hero .about-portrait { grid-column: 1; grid-row: 2; width: 100%; }
  .about-hero .about-hero-bio { grid-column: 2; grid-row: 2; width: 100%; text-align: left; align-items: flex-start; }
  .about-hero .about-hero-bio .about-lead, .about-hero .about-hero-bio .ss { text-align: left; }
}
@media (max-width: 1000px) {
  .about-hero .about-portrait { order: 1; margin: .5rem auto 1.5rem; }
  .about-hero .about-hero-header { order: 0; }
  .about-hero .about-hero-bio { order: 2; }
}