/* =============================================================
   LAYOUT · editorial  —  شيماء · Shaima
   -------------------------------------------------------------
   Loaded AFTER theme.css, which is loaded after the engine. This
   file changes WHERE THINGS ARE, not what colour they are:

     · the navigation is a vertical rail down the side of the page,
       not a bar across the top
     · the hero is portrait-first: the photo leads, the words follow
     · every section title sits in its own narrow side column,
       beside the content instead of centred above it
     · a CV reads as a magazine CV: dates in a gutter, hairlines
       between entries, no timeline dots and no boxes
     · research reads as a bibliography: hanging numerals, rules
       between entries, no cards
     · almost nothing is a bordered box — this look is built out of
       whitespace and hairlines

   Compare people/abu-mohammed/layout.css, which does the opposite
   on purpose: top bar, dark banner, and everything in bordered,
   numbered, striped boxes.

   THE PREFIX: every rule is html[data-layout="editorial"] — the
   value comes from site.json → look.layout.
   ============================================================= */

html[data-layout="editorial"] {
  /* Width of the side rail. Referenced by the rail and by the body
     padding that makes room for it, so they can never disagree. */
  --rail-w: 264px;
  /* Width of the section-title column. */
  --sidehead-w: 190px;
}

/* =============================================================
   1 · THE SIDE RAIL
   -------------------------------------------------------------
   The engine ships a sticky top bar and hides its links below
   1300px in favour of the drawer. Above 1200px this turns that
   same markup into a fixed vertical rail; below it, the engine's
   top bar and drawer are left exactly as they are, because a rail
   on a phone is just a bar that stole the screen.
   ============================================================= */
@media (min-width: 1200px) {
  html[data-layout="editorial"] body {
    /* make room for the fixed rail */
    padding-inline-start: var(--rail-w);
  }

  html[data-layout="editorial"] .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--rail-w);
    block-size: 100vh;
    height: auto;                    /* engine pins this to --nav-h */
    border-bottom: none;
    border-inline-end: 1px solid var(--border);
    background: var(--bg);
    backdrop-filter: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html[data-layout="editorial"] .nav.scrolled { box-shadow: none; }

  /* .container and .nav-inner are the SAME element — the engine emits
     <div class="container nav-inner">. It used to be pinned to
     block-size: 100%, which is why the rail never scrolled: the content
     could not grow past the rail, so there was no overflow for
     `overflow-y: auto` to act on — the tail was just unreachable.
     min-block-size lets it grow instead, and 100% resolves because the
     rail itself has a definite height (100vh). */
  html[data-layout="editorial"] .nav .container {
    max-width: none;
    min-block-size: 100%;
    block-size: auto;
    /* Measured: at 34px/26px padding and a 30px gap the rail came to
       823px against an 813px viewport on a 900px-tall window — a
       scrollbar on one of the commonest window sizes, for ten pixels.
       This fits without one and still scrolls when it has to. */
    padding: 30px 26px 22px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
  }

  /* Brand: stacked, and the position line is allowed to wrap onto as
     many lines as it needs (the engine truncates it in a bar). */
  html[data-layout="editorial"] .nav .brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  html[data-layout="editorial"] .nav .brand .mono {
    inline-size: 54px; block-size: 54px;
    font-size: 1.2rem;
  }
  html[data-layout="editorial"] .nav .brand .btxt {
    white-space: normal;
    font-size: 1.12rem;
    line-height: 1.3;
  }
  html[data-layout="editorial"] .nav .brand .btxt small {
    display: block;
    white-space: normal;
    max-width: none;
    overflow: visible;
    margin-block-start: 5px;
    font-size: .74rem;
    line-height: 1.5;
  }

  /* Links: a vertical list. The engine's underline marker makes no
     sense in a column, so the current item is marked at its start
     edge instead. */
  html[data-layout="editorial"] .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
  }
  html[data-layout="editorial"] .burger { display: none; }

  html[data-layout="editorial"] .nav-links a {
    padding: 9px 0 9px 12px;
    padding-inline: 12px 0;
    font-size: .98rem;
    border-inline-start: 2px solid transparent;
    border-radius: 0;
  }
  html[data-layout="editorial"] .nav-links a:hover {
    background: none;
    border-inline-start-color: var(--border);
  }
  html[data-layout="editorial"] .nav-links a.active {
    border-inline-start-color: var(--accent);
  }
  html[data-layout="editorial"] .nav-links a.active::after { content: none; }

  /* The "Research ▾" dropdown becomes a plain nested block: in a rail
     there is room to show all three, so nothing needs opening. */
  html[data-layout="editorial"] .nav-group {
    display: block;
    margin-block: 6px;
  }
  html[data-layout="editorial"] .nav-group-btn {
    display: block;
    inline-size: 100%;
    padding: 9px 12px 4px;
    padding-inline: 12px 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: var(--eyebrow-tracking);
    text-transform: var(--eyebrow-case);
    color: var(--muted);
    background: none;
    pointer-events: none;               /* it is a label now, not a control */
  }
  html[data-layout="editorial"] .nav-group-btn svg { display: none; }
  html[data-layout="editorial"] .nav-group .nav-group-menu {
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    inline-size: auto;
    min-inline-size: 0;
    max-inline-size: none;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 1px;
  }
  html[data-layout="editorial"] .nav-group .nav-group-menu a {
    padding: 8px 0 8px 12px;
    padding-inline: 12px 0;
    border-inline-start: 2px solid transparent;
    border-radius: 0;
    font-size: .95rem;
  }
  html[data-layout="editorial"] .nav-group .nav-group-menu a:hover {
    background: none;
    border-inline-start-color: var(--border);
  }
  html[data-layout="editorial"] .nav-group .nav-group-menu a.active {
    background: none;
    border-inline-start-color: var(--accent);
  }
  html[data-layout="editorial"] .nav-group .nav-group-menu a svg { display: none; }

  /* Language / theme buttons drop to the foot of the rail. */
  html[data-layout="editorial"] .nav-actions {
    margin-block-start: auto;
    justify-content: flex-start;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--border);
  }

  /* A rail eats horizontal room, so the reading column gets narrower. */
  html[data-layout="editorial"] { --maxw: 1000px; }
}

/* =============================================================
   2 · HERO — portrait first, words second
   -------------------------------------------------------------
   The engine puts the copy first and the photo second. Here the
   order is reversed and the copy is split by a hairline into a
   masthead (name + role) and a stand-first (lead + buttons), the
   way a feature opener is set.
   ============================================================= */
html[data-layout="editorial"] .hero { padding-block: 64px 44px; }

@media (min-width: 961px) {
  html[data-layout="editorial"] .hero-grid {
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
  html[data-layout="editorial"] .hero-portrait { order: -1; justify-self: start; }
  html[data-layout="editorial"] .hero-copy { order: 1; padding-block-start: 8px; }
}

/* The two portrait figures are hidden outright — see §15. They carried
   "PhD · in progress" and a paper count, and both facts are already in
   the figure line under the hero, so on this site they were a duplicate
   AND one of the atoms that made the two sites look related. */

/* The masthead rule: everything from the lead down sits below a
   hairline that runs the width of the copy column. */
html[data-layout="editorial"] .hero .lead {
  border-inline-start: none;
  padding-inline-start: 0;
  border-block-start: 1px solid var(--border);
  padding-block-start: 20px;
  margin-block-start: 24px;
  max-width: 46ch;
}
html[data-layout="editorial"] .hero-badge {
  border: none;
  padding: 0 0 4px;
  background: none;
  font-size: .72rem;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-case);
  color: var(--muted);
}
html[data-layout="editorial"] .hero-badge .dot { display: none; }

/* =============================================================
   3 · STATS — a masthead figure row, not a filled band
   ============================================================= */
html[data-layout="editorial"] .stats {
  background: transparent;
  border-block: 1px solid var(--border);
}
html[data-layout="editorial"] .stat {
  text-align: start;
  padding: 26px 0;
  border-inline-start: none;
}
html[data-layout="editorial"] .stats-grid { gap: 0 34px; }
html[data-layout="editorial"] .stat .num { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
html[data-layout="editorial"] .stat .lbl {
  margin-block-start: 4px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: var(--eyebrow-case);
  color: var(--muted);
}

/* =============================================================
   4 · SECTION TITLES IN A SIDE COLUMN
   -------------------------------------------------------------
   Every content page becomes a two-column grid: the heading in a
   narrow column at the start edge, everything else in a wide one.
   This is the single biggest structural difference from the engine
   default, where the heading is centred above the content.

   Placement note: the FIRST .section-head goes to column 1; any
   later one (Education's "Training & Development") stays in the
   content column, where it reads as a sub-heading.
   ============================================================= */
@media (min-width: 900px) {
  html[data-layout="editorial"] .section > .container {
    display: grid;
    grid-template-columns: var(--sidehead-w) minmax(0, 1fr);
    column-gap: 54px;
    row-gap: 30px;
    align-items: start;
  }
  html[data-layout="editorial"] .section > .container > * { grid-column: 2; }
  html[data-layout="editorial"] .section > .container > .section-head:first-child {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    text-align: start;
  }
  html[data-layout="editorial"] .section > .container > .section-head:first-child h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    line-height: 1.25;
  }
  html[data-layout="editorial"] .section > .container > .section-head:first-child .rule {
    width: 34px;
    height: 2px;
    margin: 14px 0 0;
    background: var(--accent);
  }
  html[data-layout="editorial"] .section > .container > .section-head:first-child p {
    margin: 14px 0 0;
    max-width: none;
    font-size: .9rem;
  }
}

/* =============================================================
   5 · CARDS → PAGES
   -------------------------------------------------------------
   The engine's unit of content is a bordered card. This look has
   almost no boxes: content sits on the page, separated by rules.
   ============================================================= */
html[data-layout="editorial"] .card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
html[data-layout="editorial"] .card:hover {
  border: none;
  box-shadow: none;
  transform: none;
}
html[data-layout="editorial"] .tl-card { padding: 0; }

/* About: one column, the summary set larger, the facts as a
   definition list under it. */
@media (min-width: 900px) {
  html[data-layout="editorial"] .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
}
html[data-layout="editorial"] .about-summary {
  font-size: 1.18rem;
  line-height: 1.85;
  max-width: 62ch;
  color: var(--text);
}
html[data-layout="editorial"] .card-title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-case);
  color: var(--muted);
  padding-block-end: 12px;
  margin-block-end: 20px;
  border-block-end: 1px solid var(--border);
}
html[data-layout="editorial"] .card-title .ci { display: none; }
html[data-layout="editorial"] .facts { max-width: 62ch; }
html[data-layout="editorial"] .fact {
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
html[data-layout="editorial"] .fact .fi { display: none; }
html[data-layout="editorial"] .fact .fx {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  inline-size: 100%;
  align-items: baseline;
}
html[data-layout="editorial"] .fact .fx small {
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: var(--eyebrow-case);
}
html[data-layout="editorial"] .lang-row { max-width: 46ch; }

/* =============================================================
   6 · THE CV — dates in a gutter, no dots, no line
   ============================================================= */
html[data-layout="editorial"] .timeline { padding-inline-start: 0; }
html[data-layout="editorial"] .timeline::before { display: none; }
html[data-layout="editorial"] .tl-dot { display: none; }

html[data-layout="editorial"] .tl-item {
  margin-bottom: 0;
  padding-block: 30px;
  border-block-start: 1px solid var(--border);
}
html[data-layout="editorial"] .tl-item:first-child { border-block-start: none; padding-block-start: 0; }

/* The period moves out of the heading row into a gutter column. */
@media (min-width: 760px) {
  html[data-layout="editorial"] .tl-head {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
  }
  html[data-layout="editorial"] .tl-head > h3 { grid-column: 2; grid-row: 1; }
  html[data-layout="editorial"] .tl-period { grid-column: 1; grid-row: 1; }
  /* the rest of the entry lines up with the heading, not the gutter */
  html[data-layout="editorial"] .tl-org,
  html[data-layout="editorial"] .tl-intro,
  html[data-layout="editorial"] .tl-points,
  html[data-layout="editorial"] .tl-note,
  html[data-layout="editorial"] .tl-item > .cert-btn {
    margin-inline-start: 164px;
  }
}
html[data-layout="editorial"] .tl-period {
  background: none;
  padding: 0;
  border-radius: 0;
  font-family: var(--ff-num);
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
  white-space: normal;
}
html[data-layout="editorial"] .tl-head > h3 { font-size: 1.3rem; font-weight: 700; }
html[data-layout="editorial"] .tl-points { max-width: 62ch; }
html[data-layout="editorial"] .tl-note { background: none; border: none; padding: 0; max-width: 62ch; }

/* Training chips → a comma-free inline list with hairline separators. */
html[data-layout="editorial"] .chip-list { display: block; columns: 2; column-gap: 44px; }
html[data-layout="editorial"] .chip {
  display: block;
  break-inside: avoid;
  background: none;
  border: none;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 0;
}
html[data-layout="editorial"] .chip .ci { display: none; }

/* =============================================================
   7 · SKILLS — text, not instrumentation
   -------------------------------------------------------------
   The percentage is kept (it is information), the bar is not: a
   row of loading bars is the opposite of this look. Two text
   columns instead of three cards.
   ============================================================= */
@media (min-width: 900px) {
  html[data-layout="editorial"] #page-skills .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 54px;
  }
}
/* No `.bar` rule here any more: skills and languages no longer carry a
   percentage at all, so the engine emits no bar to hide. */
html[data-layout="editorial"] .skill {
  margin-bottom: 0;
  padding-block: 11px;
  border-block-end: 1px solid var(--border);
}
html[data-layout="editorial"] .skill .top { margin-bottom: 0; font-size: 1rem; font-weight: 600; }
html[data-layout="editorial"] .skill .top .pv { font-family: var(--ff-num); color: var(--accent); }

/* =============================================================
   8 · RESEARCH — a bibliography
   ============================================================= */
html[data-layout="editorial"] #page-publications .grid-2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
html[data-layout="editorial"] .pub-group { margin-block-end: 44px; }
html[data-layout="editorial"] .pub-group-t {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-case);
  color: var(--muted);
}
html[data-layout="editorial"] .pub-group-ic { display: none; }
html[data-layout="editorial"] .pub {
  gap: 22px;
  padding-block: 22px;
  border-block-end: 1px solid var(--border);
  align-items: baseline;
}
/* A hanging numeral in the margin — the signature of a set bibliography. */
html[data-layout="editorial"] .pub .pn {
  inline-size: auto;
  block-size: auto;
  min-inline-size: 2.2rem;
  background: none;
  color: var(--muted);
  border-radius: 0;
  font-family: var(--ff-num);
  font-size: 1.5rem;
  font-weight: 400;
  display: block;
  text-align: start;
}
html[data-layout="editorial"] .pub h3 { font-size: 1.15rem; font-weight: 600; max-width: 58ch; }

/* =============================================================
   9 · PROPOSAL · JOURNEY — the same hanging-numeral treatment
   ============================================================= */
html[data-layout="editorial"] .prop-list { gap: 0; }
html[data-layout="editorial"] .prop-item {
  background: none;
  border: none;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 0;
  gap: 22px;
  align-items: baseline;
}
html[data-layout="editorial"] .prop-item:hover { border-color: var(--border); box-shadow: none; }
html[data-layout="editorial"] .prop-n,
html[data-layout="editorial"] .jr-n {
  background: none;
  color: var(--muted);
  border: none;
  border-radius: 0;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 2.2rem;
  font-family: var(--ff-num);
  font-size: 1.5rem;
  font-weight: 400;
}
html[data-layout="editorial"] .prop-t { font-size: 1.2rem; font-weight: 700; }
html[data-layout="editorial"] .prop-p { max-width: 64ch; }

html[data-layout="editorial"] .jr-card {
  border-inline-start: none;
  border-block-end: 1px solid var(--border);
  padding-block: 28px;
}
html[data-layout="editorial"] .jr-head { align-items: baseline; gap: 18px; }
html[data-layout="editorial"] .jr-t { font-size: 1.2rem; font-weight: 700; }
html[data-layout="editorial"] .jr-body { max-width: 64ch; }

/* =============================================================
   10 · COMMUNITY · CONTACT — lists, not card grids
   ============================================================= */
html[data-layout="editorial"] #page-community .grid-3 {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
html[data-layout="editorial"] .comm-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding-block: 26px;
  border-block-end: 1px solid var(--border);
  text-align: start;
}
html[data-layout="editorial"] .comm-card .ci {
  margin: 0;
  inline-size: 40px; block-size: 40px;
  grid-row: 1 / span 3;
}
html[data-layout="editorial"] .comm-card .ci svg { inline-size: 19px; block-size: 19px; }
html[data-layout="editorial"] .comm-card p { max-width: 64ch; }

html[data-layout="editorial"] .contact-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
html[data-layout="editorial"] .contact-card {
  padding-block: 20px;
  border-block-end: 1px solid var(--border);
  gap: 22px;
}
html[data-layout="editorial"] .contact-card .ci {
  inline-size: 40px; block-size: 40px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
html[data-layout="editorial"] .contact-card .ci svg { inline-size: 19px; block-size: 19px; }

/* =============================================================
   11 · CALL TO ACTION · FOOTER · EMPTY STATES
   ============================================================= */
html[data-layout="editorial"] .cta-band {
  padding: 52px 0 44px;
  margin-block-start: 56px;
  text-align: start;
  border-radius: 0;
  border-block-start: 1px solid var(--border);
  border-block-end: none;
}
html[data-layout="editorial"] .cta-band h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 30ch; }
html[data-layout="editorial"] .cta-band p { margin-inline: 0; max-width: 52ch; }

html[data-layout="editorial"] .sec-next { justify-content: flex-start; }

/* The "nothing here yet" panels: a rule and a line of text, not a
   dashed box marooned in the middle of the page. */
html[data-layout="editorial"] .cms-empty {
  justify-items: start;
  text-align: start;
  padding: 30px 0;
  background: none;
  border: none;
  border-block-start: 1px solid var(--border);
  border-radius: 0;
}
html[data-layout="editorial"] .cms-empty .cms-state-ic { display: none; }

html[data-layout="editorial"] .footer { padding-block: 54px 32px; }
html[data-layout="editorial"] .footer-inner { align-items: flex-start; }
/* The footer's own composition is in §15 — it is a masthead here, not a
   grid of link columns, because the column grid was the same component
   the other site was using. */
html[data-layout="editorial"] .footer-bottom { text-align: start; }

/* =============================================================
   12 · SMALL SCREENS
   -------------------------------------------------------------
   Everything above that changes a column count is already inside a
   min-width query, so the phone keeps the engine's single-column
   layout. These are the few things still worth relaxing.
   ============================================================= */
@media (max-width: 759px) {
  html[data-layout="editorial"] .tl-head { display: flex; }
  html[data-layout="editorial"] .chip-list { columns: 1; }
  html[data-layout="editorial"] .fact .fx { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* =============================================================
   13 · LOOSE ENDS
   -------------------------------------------------------------
   Places the engine centres or boxes that this look does not, and
   which only show up on a page nobody had filled in yet.
   ============================================================= */

/* Education's "Training & Development" sub-heading stays in the content
   column (only the FIRST heading moves to the side column), so it has
   to be start-aligned like everything around it. */
html[data-layout="editorial"] .section-head-sub {
  text-align: start;
  margin-block: 44px 22px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--border);
}
html[data-layout="editorial"] .section-head-sub .rule { display: none; }

/* certRow() centres its button; nothing else here is centred. */
html[data-layout="editorial"] .cert-row { text-align: start; justify-content: flex-start; }

/* Documents, blog posts and file cards: the same hairline rows as
   everything else, for when these pages get content. */
html[data-layout="editorial"] .dl-grid,
html[data-layout="editorial"] .blog-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
html[data-layout="editorial"] .dl-card,
html[data-layout="editorial"] .blog-card {
  background: none;
  border: none;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 0;
}
html[data-layout="editorial"] .dl-card:hover,
html[data-layout="editorial"] .blog-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}
html[data-layout="editorial"] .dl-cat,
html[data-layout="editorial"] .pub-group-t { border-block-end-color: var(--border); }

/* The gallery keeps its grid — a photo wall is a photo wall — but loses
   the rounded corners so it matches the rest. */
html[data-layout="editorial"] .gal-item { border-radius: 2px; }


/* =============================================================
   14 · REVIEW FIXES  (audit of the full page matrix, 2026-08-22)
   -------------------------------------------------------------
   Eight reviewers read all 13 pages in both languages and both
   colour schemes. Everything below is a defect they named, kept in
   its own section so it is obvious what was a considered decision
   and what was a correction.
   ============================================================= */

/* --- The call-to-action band was the only filled, bordered box on a
   site built out of whitespace and hairlines — and with zero inline
   padding its heading ran into its own edge. It is now a ruled
   closing band like every other block here. -------------------- */
html[data-layout="editorial"] .cta-band {
  background: none;
  padding: 48px 0 40px;
}
html[data-layout="editorial"] .cta-band::before { display: none; }
html[data-layout="editorial"] .cta-band .btn { margin-inline-end: 10px; }

/* --- "Training & Development" is a SUBsection, but it was being set
   at page-title size in the content column, so it out-shouted the
   real page title sitting in the side column. ------------------ */
html[data-layout="editorial"] .section-head-sub h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-case);
  color: var(--muted);
}

/* --- The bibliography numerals were smaller than the titles they
   index, so they read as faint labels rather than hanging figures. */
html[data-layout="editorial"] .pub .pn {
  font-size: 2.1rem;
  line-height: 1;
  min-inline-size: 2.9rem;
  align-self: start;
  margin-block-start: -2px;
}
html[data-layout="editorial"] .prop-n,
html[data-layout="editorial"] .jr-n {
  font-size: 2.1rem;
  line-height: 1;
  min-inline-size: 2.9rem;
  align-self: start;
}
/* The counter beside each group heading was the only filled pill here. */
html[data-layout="editorial"] .pub-group-n,
html[data-layout="editorial"] .dl-cat-n {
  background: none;
  padding: 0;
  color: var(--muted);
  font-weight: 600;
}

/* --- Community entries carried bordered square icon tiles in the
   gutter, where the CV and the bibliography put plain text. ----- */
html[data-layout="editorial"] .comm-card .ci {
  border: none;
  background: none;
  inline-size: 26px;
  block-size: 26px;
  margin-block-start: 3px;
}
html[data-layout="editorial"] .comm-card {
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 16px;
}

/* --- One ragged column edge: the section rules ran the full column
   width while the fact rows and the language meters each stopped
   somewhere else. They now share one measure. ------------------- */
html[data-layout="editorial"] .facts,
html[data-layout="editorial"] .lang-row,
html[data-layout="editorial"] .about-summary { max-width: 68ch; }
html[data-layout="editorial"] .card-title { max-width: 68ch; }

/* --- Three skill groups in a two-column grid left the left column
   dead a third of the way down. auto-fit gives three columns when
   there is room for three and never leaves a hole. ------------- */
@media (min-width: 900px) {
  html[data-layout="editorial"] #page-skills .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
  }
}

/* --- The group label in the navigation rail was floating inboard of
   every item beside it. ---------------------------------------- */
@media (min-width: 1200px) {
  html[data-layout="editorial"] .nav-group-btn { text-align: start; }
}

/* --- The plate behind the arched portrait overhung what was below it. --- */
html[data-layout="editorial"] .portrait-ring::after { inset: 16px -16px -8px 16px; }

/* --- A journey entry with a title and no body yet drew two hairlines
   a few pixels apart around nothing. One rule per entry. ------- */
html[data-layout="editorial"] .jr-head { border-block-end: none; padding-block-end: 0; }
html[data-layout="editorial"] .jr-card:last-child { border-block-end: none; }

/* --- Small alignment debts ----------------------------------- */
html[data-layout="editorial"] .cms-empty { margin-block-start: 8px; }
html[data-layout="editorial"] .stats { margin-block-end: 8px; }
@media (min-width: 760px) {
  /* "…— حتى الآن" was wrapping and orphaning the last word */
  html[data-layout="editorial"] .tl-head { grid-template-columns: 158px minmax(0, 1fr); }
  html[data-layout="editorial"] .tl-org,
  html[data-layout="editorial"] .tl-intro,
  html[data-layout="editorial"] .tl-points,
  html[data-layout="editorial"] .tl-note,
  html[data-layout="editorial"] .tl-item > .cert-btn { margin-inline-start: 182px; }
}


/* =============================================================
   15 · THE SHARED ATOMS
   -------------------------------------------------------------
   A second review compared the two sites side by side and scored
   them 5–6 out of 10 on "are these two different websites?". The
   verdict was consistent and worth quoting: the CHROME is genuinely
   re-architected, but every reusable ATOM underneath is the same
   component in a different colour — the footer, the four-up stat
   strip, the contact row with its icon tile, the next-page pill, the
   monogram lock-up, the toggle pair, the accent dash under every
   title, the gradient language meter, the icon in the same seven
   slots, the two portrait chips, the matched button pair.

   Recolouring those is what makes two sites read as one template
   filled in twice. This section takes them apart on THIS site, and
   leaves them alone on the other — so the difference is the
   components, not the palette.
   ============================================================= */

/* --- 1. The stats band was a full-bleed 4-up grid in the same slot on
   both sites, down to the same y position. Here it becomes a single
   masthead line of figures, read across, separated by middots. --- */
@media (min-width: 700px) {
  html[data-layout="editorial"] .stats-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 30px;
  }
  html[data-layout="editorial"] .stat {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 22px 0;
    border: none;
  }
  html[data-layout="editorial"] .stat + .stat::before {
    content: "·";
    color: var(--border);
    margin-inline-end: 30px;
  }
  html[data-layout="editorial"] .stat .num { font-size: 1.5rem; }
  html[data-layout="editorial"] .stat .lbl { margin-block-start: 0; }
}

/* --- 2. The footer was effectively the same component: monogram +
   name + subtitle at one end, a grid of link columns at the other, a
   hairline, a centred copyright. Here it is a masthead: wordmark, one
   inline run of links separated by rules, copyright underneath. --- */
html[data-layout="editorial"] .footer-inner { display: block; }
html[data-layout="editorial"] .footer .brand .mono { display: none; }
html[data-layout="editorial"] .footer .brand .btxt {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  line-height: 1.25;
}
html[data-layout="editorial"] .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-block-start: 26px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(255, 255, 255, .14);
}
html[data-layout="editorial"] .footer-links a { padding-inline-end: 14px; }
html[data-layout="editorial"] .footer-links a + a {
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(255, 255, 255, .18);
}
html[data-layout="editorial"] .footer-bottom { border-block-start: none; margin-block-start: 14px; padding-block-start: 0; }

/* --- 3. The brand lock-up — a filled rounded square holding two Latin
   initials — appeared at the same scale in the header AND the footer of
   both sites. A name set in the display serif carries this one. ---- */
@media (min-width: 1200px) {
  html[data-layout="editorial"] .nav .brand .mono { display: none; }
  html[data-layout="editorial"] .nav .brand .btxt {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    padding-block-end: 14px;
    border-block-end: 2px solid var(--accent);
  }
  html[data-layout="editorial"] .nav .brand .btxt small { font-family: var(--ff); }
}

/* --- 4. The theme and language controls were the same two bordered
   pills, same order, same glyphs, on both. Text, not chrome. ------ */
@media (min-width: 1200px) {
  html[data-layout="editorial"] .nav-actions { gap: 20px; }
  html[data-layout="editorial"] .nav .icon-btn {
    border: none;
    background: none;
    inline-size: auto;
    block-size: auto;
    padding: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--muted);
  }
  html[data-layout="editorial"] .nav .icon-btn:hover { color: var(--accent); }
  html[data-layout="editorial"] .nav .icon-btn svg { inline-size: 15px; block-size: 15px; }
}

/* --- 5. Every page header on both sites ran eyebrow → title → a short
   accent dash → subtitle. The dash was the single clearest fingerprint
   of a shared builder. Gone here; the side column is the signal. --- */
html[data-layout="editorial"] .section-head .rule { display: none; }
html[data-layout="editorial"] .section-head:first-child .eyebrow {
  display: block;
  padding-block-end: 10px;
  margin-block-end: 12px;
  border-block-end: 1px solid var(--border);
}

/* --- 6. The language meter used to be byte-identical on both sites.
   It is gone from both now — a language is described by its level in
   words, not by a percentage — so there is nothing left to un-share. */

/* --- 7. One icon vocabulary appeared in the same seven slots on both.
   This site spends its icons only where they carry meaning (the
   contact channels, the community roles) and drops them from buttons,
   tags and meta lines. --------------------------------------------- */
html[data-layout="editorial"] .hero-cta .btn > svg,
html[data-layout="editorial"] .cta-band .btn > svg,
html[data-layout="editorial"] .sec-next .btn > svg,
html[data-layout="editorial"] .pub .tag > svg { display: none; }
html[data-layout="editorial"] .pub .tag { display: none; }

/* --- 8. Both hung exactly two mini-stat chips off the portrait,
   carrying the same two facts in the same order — and both facts are
   already in the figure line under the hero. ---------------------- */
html[data-layout="editorial"] .float-chip { display: none; }
html[data-layout="editorial"] .portrait-ring { margin-block-end: 0; }

/* --- 9. The hero closed with the same matched pair of buttons, filled
   then outlined, on both. Here the second one is a text link. ----- */
html[data-layout="editorial"] .hero-cta { gap: 26px; align-items: baseline; }
html[data-layout="editorial"] .hero-cta .btn-ghost,
html[data-layout="editorial"] .cta-band .btn-on-cta {
  border: none;
  background: none;
  padding: 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  color: var(--text);
}
html[data-layout="editorial"] .hero-cta .btn-ghost:hover,
html[data-layout="editorial"] .cta-band .btn-on-cta:hover {
  background: none;
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* --- 10. The contact channel was the same object on both: a filled
   rounded-square icon tile pinned to the leading edge, label above
   value. The WhatsApp glyph in the same box in the same slot was, in
   one reviewer's words, the most damning single element. Here each
   channel is a definition row. ----------------------------------- */
html[data-layout="editorial"] .contact-card { gap: 0; align-items: baseline; }
html[data-layout="editorial"] .contact-card .ci { display: none; }
html[data-layout="editorial"] .contact-card > span:last-child {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  inline-size: 100%;
  align-items: baseline;
}
html[data-layout="editorial"] .contact-card small {
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: var(--eyebrow-case);
}
html[data-layout="editorial"] .contact-card b { font-weight: 600; }

/* --- 11. The closing call to action was a centred panel with a
   matched button pair on both. Split it: words at the start, the one
   action at the end. --------------------------------------------- */
@media (min-width: 760px) {
  html[data-layout="editorial"] .cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 44px;
    row-gap: 14px;
  }
  html[data-layout="editorial"] .cta-band h3 { grid-column: 1; grid-row: 1; }
  html[data-layout="editorial"] .cta-band p { grid-column: 1; grid-row: 2; margin-block-end: 0; }
  /* The actions stack in the second column, one per row.
     Two earlier drafts got this wrong and both hid a control:
       · spanning every .btn across one cell piled all three on top of
         each other, so only the last one was visible;
       · then :nth-of-type() — which counts per ELEMENT TYPE, and these
         are two <a>s and one <button>, so the <button> matched "1" and
         landed back under the primary.
     The band's children are h3, p, then the actions, so addressing them
     by child position and letting grid auto-place the rows is the version
     that cannot mis-stack, however many actions there turn out to be. */
  html[data-layout="editorial"] .cta-band > :nth-child(n + 3) {
    grid-column: 2;
    justify-self: start;
  }
}

/* --- 12. The next-page control was the same bordered pill with the
   same icon+label+arrow innards on both. A plain ruled link here. -- */
html[data-layout="editorial"] .sec-next .btn {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
}
html[data-layout="editorial"] .sec-next .btn:hover { background: none; color: var(--accent); }

/* --- 13. The personal-details block was the same label/value table
   with row separators on both. Here the label hangs in the margin and
   the rows are not ruled at all. --------------------------------- */
html[data-layout="editorial"] .fact { border-bottom: none; padding-block: 7px; }
html[data-layout="editorial"] .fact .fx small { color: var(--muted); }