:root{
    --paper:#EDEEE2;
    --paper-dim:#E2E2D0;
    --ink:#1C231F;
    --ink-soft:#565F55;
    --rule:#B9B39A;
    --accent:#24586A;
    --accent-soft:#DCE6E5;
    --stamp:#A6402F;
    --shadow-rgb:28,35,31;
    --radius:3px;
    --max:1120px;
    color-scheme:light;
  }

  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; }
  section, footer{ scroll-margin-top:76px; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  html[dir="rtl"] body{ font-family:'IBM Plex Sans Arabic', sans-serif; }

  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(var(--rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity:0.12;
    pointer-events:none;
    z-index:0;
  }

  .mono{font-family:'IBM Plex Mono', monospace;}
  .display{font-family:'Fraunces', serif; font-optical-sizing:auto;}
  html[dir="rtl"] .display{font-family:'Amiri', serif;}
  a{color:inherit;}

  [data-i18n="ar"]{ display:none; }
  html[data-lang="ar"] [data-i18n="en"]{ display:none; }
  html[data-lang="ar"] [data-i18n="ar"]{ display:block; }
  [data-i18n="en"].inline{ display:inline-flex; }
  html[data-lang="ar"] [data-i18n="ar"].inline{ display:inline-flex; }

  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px; position:relative; z-index:1;}

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--rule);
  }
  /* header layout is pinned RTL (logo right, toggle left) so nothing swaps sides on language change */
  .nav-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; direction:rtl; }
  .nav-tags .inline[lang="en"]{ direction:ltr; }
  .mark{
    font-family:'Amiri', serif; font-weight:700; font-size:21px; line-height:1;
    border:1px solid var(--ink); padding:3px 11px 6px; border-radius:var(--radius);
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .mark .swash{ display:block; width:24px; height:5px; color:var(--accent); }
  .nav-controls{ display:flex; align-items:center; gap:10px; }
  .nav-tags{
    display:flex; gap:18px; font-family:'IBM Plex Mono', monospace; font-size:11.5px;
    letter-spacing:0.06em; color:var(--ink-soft); text-transform:uppercase;
  }
  .nav-tags .inline{ gap:18px; }
  .nav-tags a{ color:var(--ink-soft); text-decoration:none; transition:color .2s ease; }
  .nav-tags a:hover{ color:var(--ink); }
  @media (max-width: 720px){ .nav-tags{display:none;} }

  /* ---------- LANG TOGGLE ---------- */
  .lang-toggle{
    position:relative; display:inline-flex; align-items:center; width:104px; height:34px;
    background:var(--ink); border-radius:999px; padding:3px; cursor:pointer; border:none;
    font-family:'IBM Plex Mono', monospace; direction:ltr;
  }
  .lang-toggle .thumb{
    position:absolute; top:3px; left:3px; width:50px; height:28px;
    background:var(--paper); border-radius:999px; transition:transform .32s cubic-bezier(.65,0,.35,1); z-index:1;
  }
  html[data-lang="ar"] .lang-toggle .thumb{ transform:translateX(48px); }
  .lang-toggle .opt{ position:relative; z-index:2; width:50px; text-align:center; font-size:12px; letter-spacing:0.04em; color:var(--paper); transition:color .3s ease; }
  html[data-lang="en"] .lang-toggle .opt.en{ color:var(--ink); }
  html[data-lang="ar"] .lang-toggle .opt.ar{ color:var(--ink); }

  /* ---------- HERO ---------- */
  .hero{ padding:96px 0 72px; }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--accent); margin:0 0 18px;
  }
  h1.name{ font-size:clamp(42px, 7vw, 76px); line-height:1.02; margin:0 0 14px; font-weight:500; }
  html[dir="rtl"] h1.name{ line-height:1.4; margin-bottom:30px; }
  .role{ font-size:clamp(17px, 2.2vw, 21px); color:var(--ink-soft); max-width:640px; margin:0 0 28px; font-weight:500; }
  .lede{ max-width:620px; font-size:16.5px; color:var(--ink); margin:0 0 34px; }
  .stamps{ display:flex; flex-wrap:wrap; gap:12px; }
  .stamp{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
    padding:7px 13px; border:1px dashed var(--ink-soft); border-radius:999px; color:var(--ink-soft);
  }
  .stamp.red{ border-color:var(--stamp); color:var(--stamp); transform:rotate(-2deg); }

  /* stamp-down: pills land like rubber stamps once their row reveals */
  .reveal.in .stamp{ animation:stamp-down .45s cubic-bezier(.2,1.4,.4,1) backwards; }
  .reveal.in .stamp:nth-child(2){ animation-delay:.13s; }
  .reveal.in .stamp:nth-child(3){ animation-delay:.26s; }
  @keyframes stamp-down{ from{ opacity:0; transform:scale(1.7) rotate(-8deg); } }

  /* pen-written name */
  h1.name{ width:max-content; max-width:100%; position:relative; }
  .name-ink{ display:inline-block; }
  /* quill — tip anchored at the ink edge, driven by JS */
  .qalam{ position:absolute; top:0.66em; left:0; width:0; height:0; opacity:0; color:var(--ink); pointer-events:none; transition:opacity .35s ease; }
  .qalam .pen{ position:absolute; left:-0.10em; bottom:-0.06em; width:1.05em; height:1.05em; }
  html[dir="rtl"] .qalam .pen{ transform:scaleX(-1); left:-0.95em; }
  .qalam svg{ width:100%; height:100%; display:block; transform-origin:10% 90%; }
  .writing .qalam svg{ animation:pen-jig .16s ease-in-out infinite alternate; }
  @keyframes pen-jig{ from{ transform:rotate(-1.2deg); } to{ transform:rotate(2.2deg); } }
  .sec-head h2, footer h2{ position:relative; width:max-content; max-width:100%; }
  .h2-ink{ display:inline-block; }

  /* ink ruling scroll line */
  #inkline{ position:fixed; top:0; inset-inline-start:0; height:2px; width:0; background:var(--accent); z-index:60; }

  /* hero portrait */
  .hero-grid{ display:flex; gap:56px; align-items:flex-start; justify-content:space-between; }
  .hero-text{ flex:1; min-width:0; }
  .hero-photo{ flex:0 0 250px; margin-top:20px; }
  .photo-frame{
    border:1px solid var(--ink); border-radius:var(--radius); background:var(--paper-dim);
    padding:10px 10px 8px; box-shadow:0 16px 34px -18px rgba(var(--shadow-rgb),0.4);
    transform:rotate(1.4deg);
  }
  html[dir="rtl"] .photo-frame{ transform:rotate(-1.4deg); }
  .photo-frame img{ display:block; width:100%; height:auto; border-radius:2px; filter:saturate(0.94); }
  .photo-caption{
    text-align:center; font-family:'IBM Plex Mono', monospace; font-size:11px;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:12px;
  }
  @media (max-width:860px){ .hero-photo{ display:none; } }

  /* connected Arabic script must not be letter-spaced */
  html[dir="rtl"] .photo-caption, html[dir="rtl"] .phone-caption,
  html[dir="rtl"] .stamp, html[dir="rtl"] .eyebrow, html[dir="rtl"] .stat .l,
  .nav-tags .inline[lang="ar"]{ letter-spacing:0; }

  /* ---------- SECTION SCAFFOLDING ---------- */
  section{ padding:64px 0; border-top:1px solid var(--rule); }
  .sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:36px; flex-wrap:wrap; }
  .sec-head h2{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(26px,3.6vw,34px); margin:0; }
  html[dir="rtl"] .sec-head h2{ font-family:'Amiri', serif; }
  .sec-num{ font-family:'IBM Plex Mono', monospace; color:var(--ink-soft); font-size:13px; }

  /* ---------- LEDGER ---------- */
  .ledger-row{ display:flex; align-items:baseline; gap:10px; padding:14px 0; border-bottom:1px solid var(--rule); }
  .ledger-row .label{ font-size:16px; font-weight:500; white-space:nowrap; }
  .ledger-row .dots{ flex:1; border-bottom:2px dotted var(--rule); height:0; margin-bottom:6px; }
  /* dotted leaders draw themselves in */
  .ledger-row.reveal .dots{ transform:scaleX(0); transform-origin:left; transition:transform .8s ease .15s; }
  html[dir="rtl"] .ledger-row.reveal .dots{ transform-origin:right; }
  .ledger-row.reveal.in .dots{ transform:scaleX(1); }
  .ledger-row .value{ font-family:'IBM Plex Mono', monospace; font-size:13.5px; color:var(--accent); white-space:nowrap; text-align:right; }
  html[dir="rtl"] .ledger-row .value{ text-align:left; }
  @media (max-width:600px){
    .ledger-row .label{ white-space:normal; }
    .ledger-row .value{ white-space:normal; }
  }

  /* ---------- FEATURED PROJECT ---------- */
  .feature-card{ background:var(--paper-dim); border:1px solid var(--rule); border-radius:var(--radius); padding:40px; }
  @media (max-width:600px){ .feature-card{ padding:24px 18px; } }
  .feature-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
  .feature-card h3{ font-family:'Fraunces', serif; font-size:clamp(24px,3vw,30px); margin:0 0 6px; font-weight:500; }
  html[dir="rtl"] .feature-card h3{ font-family:'Amiri', serif; }
  .feature-sub{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }

  .feature-desc{ max-width:700px; margin:18px 0 30px; color:var(--ink); }
  .demo-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--paper); background:var(--accent); border-radius:999px; padding:11px 20px;
    text-decoration:none; white-space:nowrap; align-self:flex-start;
    box-shadow:0 10px 20px -12px rgba(var(--shadow-rgb),0.55);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .demo-link:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px -12px rgba(var(--shadow-rgb),0.6);
    background:color-mix(in srgb, var(--accent) 85%, var(--ink));
  }
  html[dir="rtl"] .demo-link{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; }

  /* browser + phone mockups */
  .showcase-main{ margin-bottom:20px; }
  .showcase-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin-bottom:24px; }
  @media (max-width:700px){ .showcase-row{ grid-template-columns:1fr; } }

  .browser-frame{
    border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:#fff;
    box-shadow:0 18px 40px -20px rgba(var(--shadow-rgb),0.35);
  }
  .browser-bar{
    display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--paper-dim); border-bottom:1px solid var(--rule);
  }
  .browser-dots{ display:flex; gap:5px; }
  .browser-dots span{ width:8px; height:8px; border-radius:50%; background:var(--rule); }
  .browser-url{
    flex:1; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-soft);
    background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:4px 12px; text-align:center;
  }
  .browser-frame img{ display:block; width:100%; height:auto; }

  .showcase-phones{ display:flex; gap:24px; justify-content:center; margin-bottom:32px; }
  .phone-block{ display:flex; flex-direction:column; align-items:center; }
  .phone-block .phone-frame{ max-width:210px; }
  /* four phones: one row on desktop, two-by-two on small screens */
  .showcase-phones.four{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:700px){ .showcase-phones.four{ grid-template-columns:1fr 1fr; gap:16px; } }
  .phone-frame{
    width:100%; max-width:230px; border:8px solid var(--ink); border-radius:30px; overflow:hidden;
    background:var(--ink); box-shadow:0 18px 40px -18px rgba(var(--shadow-rgb),0.4);
    position:relative;
  }
  .phone-frame img{ display:block; width:100%; height:auto; border-radius:22px; }
  .phone-caption{ text-align:center; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; }

  .receipt-list{ margin:0 0 30px; }
  /* receipt rows ink in one by one */
  .reveal .receipt-row{ opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease; }
  .reveal.in .receipt-row{ opacity:1; transform:none; }
  .reveal.in .receipt-row:nth-child(2){ transition-delay:.08s; }
  .reveal.in .receipt-row:nth-child(3){ transition-delay:.16s; }
  .reveal.in .receipt-row:nth-child(4){ transition-delay:.24s; }
  .reveal.in .receipt-row:nth-child(5){ transition-delay:.32s; }
  .reveal.in .receipt-row:nth-child(6){ transition-delay:.40s; }
  .receipt-row{ display:flex; gap:10px; align-items:baseline; padding:10px 0; border-bottom:1px dotted var(--rule); font-size:14.5px; }
  .receipt-row:last-child{ border-bottom:none; }
  .receipt-row .k{ font-weight:500; white-space:nowrap; }
  .receipt-row .d{ flex:1; border-bottom:1px dotted var(--rule); height:0; margin-bottom:5px; }
  .receipt-row .v{ color:var(--ink-soft); text-align:right; max-width:56%; }
  html[dir="rtl"] .receipt-row .v{ text-align:left; }

  .stat-row{ display:flex; gap:28px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--rule); }
  .stat{ font-family:'IBM Plex Mono', monospace; }
  .stat .n{ font-size:22px; color:var(--accent); font-weight:500; display:block; }
  .stat .l{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; }

  /* ---------- OTHER WORK ---------- */
  .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
  @media (max-width:860px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .grid{ grid-template-columns:1fr; } }
  .card{
    border:1px solid var(--rule); border-radius:var(--radius); padding:24px; background:transparent;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .card:hover{ transform:translateY(-3px); background:var(--paper-dim); box-shadow:0 8px 22px -12px rgba(var(--shadow-rgb),0.35); }
  .card .tag{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--accent); text-transform:uppercase; letter-spacing:0.06em; }
  .card h4{ font-size:17px; margin:10px 0 8px; font-weight:600; }
  .card p{ font-size:14px; color:var(--ink-soft); margin:0; }
  .card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
  .card-tags span{
    font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.04em;
    border:1px solid var(--rule); border-radius:999px; padding:3px 8px; color:var(--ink-soft);
  }

  /* ---------- SKILLS ---------- */
  .tag-sheet{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag-sheet span{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; padding:8px 14px; border:1px solid var(--ink); border-radius:999px; }
  .tag-sheet.reveal span{ opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .3s ease; }
  .tag-sheet.reveal.in span{ opacity:1; transform:none; }

  /* ---------- FOOTER ---------- */
  footer{ padding:56px 0 70px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
  footer h2{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(26px,4vw,40px); margin:0 0 6px; max-width:520px; }
  html[dir="rtl"] footer h2{ font-family:'Amiri', serif; }
  .contact-block{ margin:26px 0 0; }
  .contact-line{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--ink-soft); margin-bottom:8px;
  }
  .contact-line a{ color:var(--ink); border-bottom:1px solid transparent; transition:border-color .2s ease; }
  .contact-line a:hover{ border-bottom-color:var(--ink); }
  .contact-line .sep{ color:var(--rule); }
  .foot-note{ margin-top:40px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .lang-toggle .thumb{ transition:none; }
    .reveal.in .stamp{ animation:none; }
    .qalam{ display:none; }
    .ledger-row.reveal .dots{ transform:none; transition:none; }
    .reveal .receipt-row{ opacity:1; transform:none; transition:none; }
    .tag-sheet.reveal span{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- PROJECT CARDS (home) ---------- */
  .proj-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px; }
  .proj-card{
    display:flex; flex-direction:column; text-decoration:none; color:inherit; overflow:hidden;
    background:var(--paper-dim); border:1px solid var(--rule); border-radius:var(--radius);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .proj-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(var(--shadow-rgb),0.5); }
  .proj-card .browser-frame{ border:none; border-bottom:1px solid var(--rule); border-radius:0; box-shadow:none; }
  .proj-card .browser-frame img{ aspect-ratio:16 / 10; object-fit:cover; object-position:top; }
  .proj-body{ flex:1; display:flex; flex-direction:column; gap:6px; padding:18px 20px 20px; }
  .proj-body .feature-sub{ margin:0; font-size:11px; }
  .proj-body h3{ font-family:'Fraunces', serif; font-weight:500; font-size:21px; line-height:1.3; margin:0; }
  html[dir="rtl"] .proj-body h3{ font-family:'Amiri', serif; font-size:23px; }
  .proj-line{ margin:4px 0 14px; font-size:14px; color:var(--ink-soft); }
  .proj-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-top:12px; border-top:1px solid var(--rule); font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft); }
  .proj-stat b{ font-size:16px; font-weight:500; color:var(--accent); margin-inline-end:4px; }
  .proj-more{ color:var(--accent); white-space:nowrap; }
  html[dir="rtl"] .proj-more{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:13px; font-weight:600; }

  /* flagship: the one live project, a wide split card above the others */
  .flagship{ display:grid; grid-template-columns:1.25fr 1fr; gap:30px; align-items:center; padding:22px; background:var(--paper-dim); border:1px solid var(--rule); border-radius:var(--radius); }
  .flagship > .browser-frame{ display:block; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
  .flagship > .browser-frame:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -20px rgba(var(--shadow-rgb),0.5); }
  .flagship-body{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
  .flagship-body .stamp{ margin-bottom:6px; }
  .flagship-body .feature-sub{ margin:0; font-size:11.5px; }
  .flagship-body h3{ font-family:'Fraunces', serif; font-weight:500; font-size:clamp(24px, 3vw, 30px); line-height:1.25; margin:0; }
  html[dir="rtl"] .flagship-body h3{ font-family:'Amiri', serif; font-size:clamp(26px, 3.2vw, 32px); }
  .flagship-body .proj-line{ margin:2px 0 6px; font-size:15px; }
  .flagship-stats{ display:flex; flex-wrap:wrap; gap:6px 18px; padding:12px 0; margin-bottom:6px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); align-self:stretch; font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft); }
  .flagship-stats b{ font-size:18px; font-weight:500; color:var(--accent); margin-inline-end:5px; }
  .flagship-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
  .flagship-actions .proj-more{ text-decoration:none; font-family:'IBM Plex Mono', monospace; font-size:12.5px; }
  /* the mono face has no Arabic letters; its fallback breaks the joins apart */
  html[dir="rtl"] .flagship-body .stamp, html[dir="rtl"] .flagship-stats{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:13px; text-transform:none; }
  html[dir="rtl"] .flagship-actions .proj-more{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:13.5px; }
  @media (max-width:860px){ .flagship{ grid-template-columns:1fr; gap:22px; padding:16px; } }

  /* ---------- PROJECT PAGE ---------- */
  a.mark{ text-decoration:none; color:inherit; }
  section.project{ border-top:none; padding-top:44px; }
  .back-link{ display:inline-block; margin:0 0 26px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
  html[dir="rtl"] .back-link{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:13.5px; letter-spacing:0; }
  .back-link:hover{ color:var(--ink); }
  .project-nav{ display:flex; gap:16px; margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); }
  .project-nav a{ display:flex; flex-direction:column; gap:4px; max-width:48%; text-decoration:none; color:inherit; }
  .project-nav a.next{ margin-inline-start:auto; text-align:end; }
  .pn-k{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
  html[dir="rtl"] .pn-k{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:12.5px; letter-spacing:0; }
  .pn-t{ font-family:'Fraunces', serif; font-size:19px; }
  html[dir="rtl"] .pn-t{ font-family:'Amiri', serif; font-size:21px; }
  .project-nav a:hover .pn-t{ color:var(--accent); }

  /* ---------- ENGINEERING NOTES (project pages) ---------- */
  .note-cap{ margin:0 0 10px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
  html[dir="rtl"] .note-cap{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:12.5px; letter-spacing:0; }

  /* architecture sketch — drawn in ink when it scrolls into view */
  .arch{ margin:4px 0 32px; }
  .arch-scroll{ overflow-x:auto; }
  .arch-hint{ display:none; margin:6px 0 0; font-size:12px; color:var(--ink-soft); }
  @media (max-width:600px){ .arch-hint{ display:block; } }
  .arch svg{ display:block; width:100%; min-width:560px; height:auto; }
  .arch .ln{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
  .arch .edge{ stroke:var(--accent); stroke-width:1.3; }
  .arch text{ text-anchor:middle; fill:var(--ink); font-family:'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif; }
  .arch .t1{ font-size:14px; font-weight:600; }
  .arch .t2{ font-size:11px; fill:var(--ink-soft); font-family:'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; }
  .arch .lbl{ font-size:10px; fill:var(--accent); font-family:'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace; }
  html.js .arch .ln{ stroke-dasharray:1; stroke-dashoffset:1; }
  html.js .arch.run .ln{ stroke-dashoffset:0; transition:stroke-dashoffset .7s ease calc(var(--d) * 90ms); }
  html.js .arch text{ opacity:0; }
  html.js .arch.run text{ opacity:1; transition:opacity .5s ease .7s; }

  /* printouts pasted into the notebook: test run and code excerpt */
  .test-run, .snippet{
    position:relative; background:#FBFAF2; border:1px solid var(--rule);
    box-shadow:0 12px 24px -18px rgba(var(--shadow-rgb),0.55);
  }
  .test-run::before, .snippet::before{
    content:""; position:absolute; top:-9px; width:86px; height:18px; background:rgba(214,203,170,0.62);
  }
  .test-run{ margin:26px 0 0; padding:16px 18px 14px; border-style:dashed; transform:rotate(-0.3deg); font-family:'IBM Plex Mono', monospace; font-size:12.5px; }
  .test-run::before{ left:50%; margin-left:-43px; transform:rotate(-2deg); }
  .tr-run + .tr-run{ margin-top:12px; padding-top:12px; border-top:1px dotted var(--rule); }
  .tr-cmd{ margin:0 0 6px; color:var(--ink-soft); }
  .tr-dots{ margin:0; display:flex; flex-wrap:wrap; gap:0 1px; color:#2F7A47; line-height:1.2; }
  .tr-dots i{ font-style:normal; width:7px; text-align:center; }
  .tr-res{ margin:6px 0 0; color:var(--ink); }
  .tr-res b{ color:#2F7A47; font-weight:500; }
  html.js .tr-dots i{ opacity:0.12; }
  html.js .test-run.run .tr-dots i{ opacity:1; transition:opacity .05s linear calc(var(--i) * 16ms); }
  html.js .tr-res{ opacity:0; }
  html.js .test-run.run .tr-res{ opacity:1; transition:opacity .3s ease 1.1s; }
  .snippet{ margin:30px 0 0; padding:16px 18px 14px; transform:rotate(0.25deg); }
  .snippet::before{ inset-inline-end:28px; transform:rotate(3deg); }
  .snippet figcaption{ margin:0 0 10px; font-size:13.5px; color:var(--ink-soft); }
  .snippet figcaption code{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink); }
  .snippet pre{ margin:0; overflow-x:auto; direction:ltr; text-align:left; font-family:'IBM Plex Mono', monospace; font-size:12px; line-height:1.65; color:var(--ink); }
  .snippet .c{ color:#7A8577; font-style:italic; }
  .snippet mark{ color:inherit; background:linear-gradient(transparent 55%, rgba(246,214,92,0.75) 55%); padding:0 1px; }
  @media (prefers-reduced-motion: reduce){
    html.js .arch .ln{ stroke-dashoffset:0; }
    html.js .arch text, html.js .tr-dots i, html.js .tr-res{ opacity:1; }
  }

  /* ---------- QUICK SEARCH (Ctrl/⌘ + K) ---------- */
  .kbd-chip{
    height:34px; padding:0 12px; border-radius:999px; cursor:pointer; direction:ltr;
    border:1px solid var(--rule); background:transparent; color:var(--ink-soft);
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.04em;
  }
  .kbd-chip:hover{ color:var(--ink); border-color:var(--ink-soft); }
  @media (hover:none), (max-width:720px){ .kbd-chip{ display:none; } }
  .palette{
    width:min(560px, calc(100vw - 32px)); margin:14vh auto auto; padding:0; overflow:hidden;
    background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:8px;
    box-shadow:0 30px 70px -20px rgba(var(--shadow-rgb),0.6);
  }
  .palette::backdrop{ background:rgba(var(--shadow-rgb),0.45); backdrop-filter:blur(2px); }
  .palette input{
    width:100%; border:none; border-bottom:1px solid var(--rule); background:transparent; color:var(--ink);
    padding:16px 18px; font:inherit; font-size:16px; outline:none;
  }
  .palette ul{ list-style:none; margin:0; padding:6px; max-height:min(52vh, 420px); overflow-y:auto; }
  .palette li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 12px; border-radius:5px; cursor:pointer; }
  .palette li[aria-selected="true"]{ background:var(--accent-soft); }
  .palette .pl-t{ font-size:14.5px; }
  .palette .pl-k{ flex:0 0 auto; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
  .palette[dir="rtl"] .pl-k{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:12px; letter-spacing:0; }
  .palette .pl-empty{ color:var(--ink-soft); cursor:default; }
  .palette-foot{ margin:0; padding:9px 18px; border-top:1px solid var(--rule); font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); }
  .palette[dir="rtl"] .palette-foot{ font-family:'IBM Plex Sans Arabic', sans-serif; font-size:12px; }