/* ==========================================================================
   mashharawi.com — shared stylesheet
   Extracted verbatim from the original inline <style> block in index.html,
   so that additional pages (/ar/, project pages) share one cached source
   of truth instead of duplicating it.
   Additions made during the SEO pass are marked "SEO PASS".
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* --------------------------------------------------------------------
     COLOUR PASS. The neutrals used to sit on two different hues: the light
     end was green (OKLCH hue ~122-139) and the dark end blue (~238-248), a
     105 degree split inside what is meant to read as one material. They are
     now all on hue 240, at the same lightness they had before, so nothing
     shifts in weight and everything agrees. Galvanized and blued steel are
     both cool, and amber is then a true complement rather than a colour
     fighting a green ground.
     -------------------------------------------------------------------- */

  /* surfaces: ground, raised plate, recess inside a plate */
  --mill:#E2E6EA;      /* galvanized sheet, page ground */
  --sheet:#F1F4F6;     /* raised surface */
  --sunk:#DCE1E5;      /* recessed: inputs, chips, wells inside a panel */

  /* ink */
  --ink:#101418;       /* graphite */
  --lead:#252B31;      /* lead paragraph */
  --scale:#5A656D;     /* mill scale grey. Darkened from #68727A, which
                          failed AA at 3.91:1 on the page ground. */

  /* rules: a hairline that only divides, and one that bounds a control */
  --line:#C6CDD2;      /* decorative hairline */
  --edge:#757F86;      /* UI boundary: input, button, chip. Needs 3:1. */

  /* accent, one hue at two lightnesses */
  --hot:#D8600F;       /* hot-rolled amber. FILL AND GRAPHIC ONLY. */
  --hot-ink:#AF4100;   /* the same amber as text: 4.68:1, where #D8600F
                          was 2.99:1 and should never have been type. */
  --hot-wash:#F6EDE5;

  /* the one inverted room */
  --blued:#1F3B4D;     /* blued steel */
  --ai-line:#486172;
  --ai-text:#E9EEF1;
  --ai-body:#CFDCE3;
  --ai-scale:#9FB4C0;

  --display:"Archivo",system-ui,sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1120px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(64px,8.5vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--mill);color:var(--ink);
  font-family:var(--body);font-size:clamp(17px,1.05vw,19px);line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);border-top:1px solid var(--line);scroll-margin-top:72px}
#journey{scroll-margin-top:72px}
.sec:first-of-type{border-top:0}

/* ---------- type ---------- */
h1,h2,h3,.dsp{font-family:var(--display);font-weight:600;font-stretch:112%;letter-spacing:-.015em;line-height:1.06;margin:0}
h2{font-size:clamp(30px,4.4vw,50px)}
h3{font-size:clamp(20px,2.1vw,25px);font-stretch:104%;line-height:1.2}
p{margin:0 0 1.1em}
.lead{font-size:clamp(19px,1.55vw,23px);line-height:1.55;color:var(--lead);max-width:62ch}
.muted{color:var(--scale)}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--scale);display:flex;align-items:center;gap:10px;margin:0 0 18px
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--hot);flex:none}
.sec-head{max-width:66ch;margin-bottom:clamp(32px,4vw,52px)}
.sec-head p{margin-top:20px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(226,230,234,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--display);font-weight:700;font-stretch:118%;font-size:15px;letter-spacing:.02em;text-decoration:none}
.brand span{color:var(--hot)}
.brand-mark{width:26px;height:26px;border-radius:50%;display:block;flex:0 0 auto}
nav ul{display:flex;gap:clamp(12px,1.6vw,26px);list-style:none;margin:0;padding:0}
nav a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--scale);padding:6px 0;display:block;position:relative
}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--hot);transition:right .25s}
nav a:hover,nav a[aria-current="true"]{color:var(--ink)}
nav a:hover::after,nav a[aria-current="true"]::after{right:0}
.menu-btn{display:none}

/* ---------- hero ---------- */
.hero{padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px)}
.hero h1{font-size:clamp(38px,6.4vw,80px);font-stretch:118%;max-width:15ch}
.hero .lead{margin-top:28px}
.loc{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--scale);margin-bottom:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:14px 22px;border:1px solid var(--ink);display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--mill);transition:background .2s,color .2s,border-color .2s,transform .2s
}
.btn:hover{background:var(--blued);border-color:var(--blued);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn.hot{background:var(--hot);border-color:var(--hot);color:#fff}
.btn.hot:hover{background:var(--hot-ink);border-color:var(--hot-ink)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* SEO PASS: status pill replacing dead href="#" links.
   Same visual weight as a disabled button, but not a link, so crawlers
   are not fed placeholder anchors that resolve to the page itself. */
.btn.is-soon{opacity:.45;cursor:default;pointer-events:none}

/* SEO PASS: masthead line inside the h1, so the page's single top-level
   heading carries the entity name. It replaces the separate .loc paragraph
   that used to sit above the h1, rather than adding a second mono line. */
.hero h1 .h1-name{
  display:block;
  font-family:var(--mono);font-weight:500;font-stretch:normal;
  font-size:clamp(11px,1vw,13px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hot);
  margin-bottom:clamp(16px,1.8vw,24px);
}
.hero h1 .h1-name i,
.hero h1 .h1-name b{font-style:normal;font-weight:500;color:var(--scale)}
/* Keep the masthead line on one row on small phones. */
@media (max-width:560px){
  .hero h1 .h1-name{font-size:10.5px;letter-spacing:.1em;line-height:1.5}
}

/* signature: material transition strip (rolled rib -> data grid) */
.strip{position:relative;height:clamp(84px,11vw,132px);margin-top:clamp(44px,6vw,72px);border-block:1px solid var(--line);overflow:hidden}
.strip::before,.strip::after{content:"";position:absolute;inset:0}
.strip::before{
  background:
    repeating-linear-gradient(102deg,transparent 0 13px,var(--scale) 13px 14.5px),
    linear-gradient(var(--scale),var(--scale)) 0 34% / 100% 1px no-repeat,
    linear-gradient(var(--scale),var(--scale)) 0 66% / 100% 1px no-repeat;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,#000 0 30%,transparent 62%);
  mask-image:linear-gradient(90deg,#000 0 30%,transparent 62%)
}
.strip::after{
  background:radial-gradient(circle at center,var(--blued) 1.1px,transparent 1.2px) 0 0 / 16px 16px;
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 72%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 72%)
}
.strip b{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--mill);padding:8px 16px;border:1px solid var(--line);color:var(--scale);white-space:nowrap
}
.strip b i{font-style:normal;color:var(--hot)}

/* ---------- spec sheet ---------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--sheet)}
.spec div{padding:22px;border-right:1px solid var(--line)}
.spec div:last-child{border-right:0}
.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--scale);margin-bottom:10px}
.spec dd{margin:0;font-family:var(--display);font-stretch:106%;font-weight:600;font-size:clamp(17px,1.7vw,21px);line-height:1.25}

/* ---------- portrait ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start}
.portrait{margin:0;position:relative}
.portrait::before{
  content:"";position:absolute;left:-10px;top:-10px;width:64px;height:64px;
  border-left:1px solid var(--hot);border-top:1px solid var(--hot)
}
.portrait img{width:100%;height:auto;border:1px solid var(--line);background:var(--sheet);display:block}
.portrait figcaption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--scale);
  border:1px solid var(--line);border-top:0;padding:12px 14px;background:var(--sheet);line-height:1.5
}
.about-text .spec{margin-top:clamp(28px,3.2vw,40px)}

/* ---------- automation / governance block ---------- */
.auto{border:1px solid var(--line);background:var(--sheet);margin-top:clamp(36px,4.5vw,60px)}
.auto .body{padding:clamp(24px,3vw,40px)}
.auto .body p{max-width:64ch}
.auto .body p:last-of-type{margin-bottom:0}
.flow{border-top:1px solid var(--line);padding:clamp(18px,2.4vw,26px) clamp(24px,3vw,40px);background:var(--sunk);overflow-x:auto}
.flow svg{display:block;width:100%;min-width:560px;height:auto}
.flow .node{fill:var(--sheet);stroke:var(--edge)}
.flow .node-key{fill:var(--hot-wash);stroke:var(--hot)}
.flow .lbl{font-family:var(--mono);font-size:12px;fill:var(--ink);letter-spacing:.04em}
.flow .sub{font-family:var(--mono);font-size:10px;fill:var(--scale);letter-spacing:.12em;text-transform:uppercase}
.flow .wire{stroke:var(--scale);stroke-width:1.2;fill:none}
.gov{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.gov div{padding:20px clamp(18px,2vw,24px);border-right:1px solid var(--line)}
.gov div:last-child{border-right:0}
.gov h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--scale);margin:0 0 9px;font-weight:500}
.gov p{margin:0;font-size:.95em;line-height:1.5}
@media (max-width:900px){
  .gov{grid-template-columns:1fr 1fr}
  .gov div{border-bottom:1px solid var(--line)}
  .gov div:nth-child(2n){border-right:0}
  .gov div:nth-last-child(-n+2){border-bottom:0}
}

/* ---------- generic layout helpers ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px)}
.card{background:var(--sheet);border:1px solid var(--line);padding:clamp(22px,2.6vw,32px)}
.card h3{margin-bottom:12px}
.card p:last-child{margin-bottom:0}

/* ---------- experience ---------- */
.role{display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,3vw,48px);padding-block:34px;border-top:1px solid var(--line)}
.role:first-of-type{border-top:0;padding-top:0}
.role .when{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--scale);padding-top:6px}
.role .co{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--hot);margin:8px 0 14px}
.role ul{margin:0;padding-left:1.15em}
.role li{margin-bottom:7px}
.role li::marker{color:var(--scale)}

/* ---------- journey ---------- */
.journey{border-left:2px solid var(--line);padding-left:clamp(22px,3vw,40px);max-width:70ch}
.journey p{margin-bottom:1.2em}
.equation{
  font-family:var(--display);font-stretch:118%;font-weight:700;
  font-size:clamp(26px,3.6vw,40px);line-height:1.15;margin:34px 0 0
}
.equation em{font-style:normal;color:var(--hot)}

/* ---------- skills ---------- */
.skills{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.skills h3{margin-bottom:20px}
.tags{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.tags li{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  border:1px solid var(--line);background:var(--sheet);padding:8px 13px
}
.tags.tech li{border-color:var(--line);border-left:2px solid var(--blued)}

/* ---------- projects ---------- */
.pquote{
  font-size:clamp(20px,2.3vw,27px);line-height:1.45;max-width:52ch;
  border-left:2px solid var(--hot);padding-left:22px;margin:0 0 clamp(32px,4vw,48px)
}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,26px)}
.project{border:1px solid var(--line);background:var(--sheet);display:flex;flex-direction:column}
.project .body{padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column;flex:1}
.project .cta-row{margin-top:auto;padding-top:4px}
.pmeta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--scale);margin-bottom:16px}
.todo{
  font-family:var(--mono);font-size:13px;color:var(--scale);
  border:1px dashed var(--edge);padding:3px 9px;display:inline-block;background:var(--sunk)
}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 clamp(22px,2.8vw,32px) clamp(22px,2.8vw,32px)}
.shot{
  aspect-ratio:9/16;border:1px solid var(--line);background:var(--mill);
  overflow:hidden
}
.shot.empty{
  border-style:dashed;border-color:var(--edge);background:
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(90,101,109,.13) 9px 10px);
  display:grid;place-items:center;text-align:center
}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--scale)}
.slot{border:1px dashed var(--edge);padding:clamp(22px,2.6vw,32px);margin-top:22px}

/* ---------- AI section ---------- */
#ai{background:var(--blued);color:var(--ai-text);border-top:0}
#ai .eyebrow{color:var(--ai-scale)}
#ai .eyebrow::before{background:var(--ai-text)}
#ai .lead{color:var(--ai-body)}
#ai .card{background:rgba(255,255,255,.05);border-color:rgba(233,238,241,.18)}
#ai .card p{color:var(--ai-body);margin-bottom:0}
#ai .card h3{color:#fff}
#ai .rule{height:1px;background:rgba(233,238,241,.2);margin:clamp(32px,4vw,48px) 0}
#ai .note{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--ai-scale);max-width:60ch;margin:0}

/* ---------- github ---------- */
.gh{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
.gh-panel{border:1px solid var(--line);background:var(--sheet);padding:clamp(24px,3vw,34px)}
.gh-panel ul{list-style:none;margin:0 0 22px;padding:0}
.gh-panel li{font-family:var(--mono);font-size:13px;padding:11px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--scale)}
.gh-panel li b{color:var(--ink);font-weight:500}

/* ---------- contact ---------- */
.contact-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line);max-width:760px}
.contact-list li{border-bottom:1px solid var(--line)}
.contact-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:20px 0;
  text-decoration:none;font-family:var(--display);font-stretch:106%;font-weight:600;font-size:clamp(19px,2.2vw,26px)
}
.contact-list span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--scale);font-weight:400}
.contact-list a:hover span{color:var(--hot)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:34px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--scale)}
footer .bar{height:auto;flex-wrap:wrap;gap:10px}

/* SEO PASS: language switch in the footer. A crawlable link between the
   English and Arabic versions, reinforcing the hreflang pair. */
footer a.lang{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
footer a.lang:hover{color:var(--ink);border-color:var(--hot)}

/* ---------- a11y ---------- */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--mill);padding:10px 14px;font-family:var(--mono);font-size:13px}
:focus-visible{outline:2px solid var(--hot-ink);outline-offset:3px}

/* ---------- motion ---------- */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .rise.in{opacity:1;transform:none}
.hero .rise{transition-delay:calc(var(--i,0) * 90ms)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cols,.skills,.gh,.about-grid,.project-grid{grid-template-columns:1fr}
  .portrait{max-width:420px}
  .cols-3{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr 1fr}
  .spec div{border-bottom:1px solid var(--line)}
  .spec div:nth-child(2n){border-right:0}
  .spec div:nth-last-child(-n+2){border-bottom:0}
  .role{grid-template-columns:1fr;gap:10px}
  .role .when{padding-top:0}
}
@media (max-width:920px){
  .menu-btn{
    display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--edge);
    font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
    padding:9px 13px;cursor:pointer
  }
  nav{display:none;position:absolute;left:0;right:0;top:64px;z-index:59;background:var(--mill);border-bottom:1px solid var(--line)}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:8px var(--gut) 20px}
  nav a{padding:12px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .shots{grid-template-columns:repeat(3,1fr);gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
}

/* ==========================================================================
   SEO PASS — RTL overrides for /ar/
   Scoped to [dir="rtl"] so the English page is untouched.
   ========================================================================== */
[dir="rtl"] body{
  font-family:var(--body);
  line-height:1.85;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .dsp,[dir="rtl"] .equation{
  font-family:var(--body);
  font-stretch:normal;letter-spacing:0;line-height:1.35;
}
[dir="rtl"] .hero h1{line-height:1.3;max-width:20ch}
[dir="rtl"] .eyebrow,[dir="rtl"] .loc,[dir="rtl"] .pmeta,[dir="rtl"] .gov h4,
[dir="rtl"] .spec dt,[dir="rtl"] nav a,[dir="rtl"] .btn,[dir="rtl"] .contact-list span,
[dir="rtl"] footer,[dir="rtl"] .portrait figcaption,[dir="rtl"] .tags li,
[dir="rtl"] .role .when,[dir="rtl"] .role .co,[dir="rtl"] .gh-panel li{
  font-family:var(--body);
  letter-spacing:0;text-transform:none;
}
[dir="rtl"] .brand{font-family:var(--body);font-stretch:normal;letter-spacing:0}
[dir="rtl"] .journey{border-left:0;border-right:2px solid var(--line);padding-left:0;padding-right:clamp(22px,3vw,40px)}
[dir="rtl"] .pquote{border-left:0;border-right:2px solid var(--hot);padding-left:0;padding-right:22px}
[dir="rtl"] .role ul{padding-left:0;padding-right:1.15em}
[dir="rtl"] .tags.tech li{border-left:1px solid var(--line);border-right:2px solid var(--blued)}
[dir="rtl"] .spec div{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .spec div:last-child{border-left:0}
[dir="rtl"] .gov div{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .gov div:last-child{border-left:0}
[dir="rtl"] .portrait::before{left:auto;right:-10px;border-left:0;border-right:1px solid var(--hot)}
[dir="rtl"] .flow{direction:ltr}
[dir="rtl"] nav a::after{left:auto;right:0;transition:left .25s}
[dir="rtl"] nav a::after{right:0;left:100%}
[dir="rtl"] nav a:hover::after,[dir="rtl"] nav a[aria-current="true"]::after{left:0}
[dir="rtl"] .hero h1 .h1-name{letter-spacing:0}
@media (max-width:900px){
  [dir="rtl"] .spec div:nth-child(2n){border-left:0}
  [dir="rtl"] .gov div:nth-child(2n){border-left:0}
}

/* RTL flips the inline start side, so the .skip link parked at left:-9999px stops being clipped and stretches the document to ~11,200px wide, which opens the page scrolled into empty space. Park it on the right instead. */
[dir="rtl"] .skip{left:auto;right:-9999px}
[dir="rtl"] .skip:focus{left:auto;right:12px}

/* ==========================================================================
   PASS 2 — header language switch, and nav sizing for mid-width screens
   ========================================================================== */
.lang-switch{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-decoration:none;color:var(--scale);border:1px solid var(--line);
  padding:6px 12px;white-space:nowrap;flex:none;
  transition:color .2s,border-color .2s
}
.lang-switch:hover{color:var(--ink);border-color:var(--hot)}
/* The nav has to carry one more item now; tighten it before it can collide. */
@media (max-width:1080px){
  nav a{font-size:11.5px;letter-spacing:.04em}
  nav ul{gap:11px}
}
@media (max-width:920px){
  nav ul{gap:0}
  nav a{font-size:14px;letter-spacing:.07em}
}

/* ==========================================================================
   NOTES — used by the pages generated from notes/*.md
   ========================================================================== */
.note h1{font-size:clamp(30px,4.4vw,52px);max-width:22ch;margin:0}
.note .eyebrow{margin-bottom:16px}
.note .lead{margin-top:22px}

.prose{max-width:66ch;margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,36px)}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin:1.6em 0 .5em}
.prose h3{font-size:clamp(18px,2vw,22px);margin:1.5em 0 .45em}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--scale)}
.prose blockquote{margin:1.4em 0;padding-left:20px;border-left:2px solid var(--hot);color:var(--scale)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--sheet);border:1px solid var(--line);padding:1px 5px}
.prose pre{background:var(--sheet);border:1px solid var(--line);padding:16px;overflow-x:auto}
.prose pre code{border:0;padding:0;background:none}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hot);text-underline-offset:3px}
.prose img{margin:1.4em 0;border:1px solid var(--line)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

.note-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.note-list li{border-bottom:1px solid var(--line)}
.note-list a{display:grid;grid-template-columns:118px 1fr;gap:clamp(14px,2.4vw,32px);
  align-items:baseline;padding:24px 0;text-decoration:none}
.note-date{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--scale);font-variant-numeric:tabular-nums}
.note-text b{display:block;font-family:var(--display);font-weight:600;font-stretch:106%;
  font-size:clamp(19px,2.1vw,25px);line-height:1.22;margin-bottom:8px}
.note-text span{color:var(--scale);font-size:.97em}
.note-list a:hover .note-text b{color:var(--hot)}

.note-back{font-family:var(--mono);font-size:13px;margin-top:clamp(28px,3.5vw,44px)}
.note-back a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.note-back a:hover{border-color:var(--hot)}

@media (max-width:620px){ .note-list a{grid-template-columns:1fr;gap:8px} }

[dir="rtl"] .prose ul,[dir="rtl"] .prose ol{padding-left:0;padding-right:1.2em}
[dir="rtl"] .prose blockquote{padding-left:0;padding-right:20px;border-left:0;border-right:2px solid var(--hot)}

/* An Arabic note listed on the English index still needs the Arabic face,
   because the page root is dir="ltr" and the global RTL rules do not apply. */
.note-list a[dir="rtl"] .note-text b,
.note-list a[dir="rtl"] .note-text span{
  font-family:var(--body);
  letter-spacing:0;line-height:1.65
}
.note-list a[dir="rtl"] .note-text b{line-height:1.4}

/* ==========================================================================
   MOTION PASS — the mill band
   The static .strip is kept exactly as it was. When mill.js successfully
   attaches a canvas it adds .live, and only then does the band grow and the
   static rib pattern step aside. No JavaScript, no change.
   ========================================================================== */
.strip.live{height:clamp(190px,26vw,300px);background:var(--sheet)}
.strip.live::before,
.strip.live::after{display:none}
.mill-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.strip.live b{z-index:2;background:color-mix(in srgb,var(--sheet) 86%,transparent)}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .strip.live b{background:var(--sheet)}
}
.mill-axis{
  position:absolute;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--scale);
  pointer-events:none;opacity:.85
}
.mill-axis-a{inset-inline-start:14px}
.mill-axis-b{inset-inline-end:14px;color:var(--hot)}
@media (max-width:560px){
  .strip.live{height:clamp(150px,44vw,200px)}
  .mill-axis{font-size:9px;letter-spacing:.14em;bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  .mill-axis{opacity:.7}
}

/* ==========================================================================
   MOTION PASS — rebar weight calculator
   Same material vocabulary as the rest of the page: hairline borders, the
   raised --sheet surface, mono for anything an engineer would read off a
   sheet, amber reserved for the one figure that matters.
   ========================================================================== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.calc{border:1px solid var(--line);background:var(--sheet)}

.calc-main{display:grid;grid-template-columns:210px 1fr;align-items:stretch}
.calc-dial{
  margin:0;padding:clamp(18px,2.2vw,26px);
  border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:
    radial-gradient(circle at center,rgba(216,96,15,.05),transparent 62%),
    repeating-linear-gradient(45deg,transparent 0 7px,rgba(16,20,24,.05) 7px 8px)
}
.calc-svg{width:100%;max-width:158px;height:auto;overflow:visible}
.calc-ref{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.calc-bar{transform-box:view-box;transform-origin:100px 100px;
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
.calc-bar-body{fill:rgba(31,59,77,.09);stroke:var(--ink);stroke-width:2.2}
.calc-bar-ribs{fill:none;stroke:var(--hot);stroke-width:7;stroke-dasharray:5 13;opacity:.72}
.calc-bar-lug{fill:var(--ink)}
.calc-dial-cap{
  margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--scale);text-align:center
}
.calc-dial-cap b{font-weight:500;color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}

.calc-ctl{padding:clamp(20px,2.6vw,30px)}
.calc-lbl{
  margin:0 0 12px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--scale)
}
.calc-chips{display:flex;flex-wrap:wrap;gap:7px}
.calc-chip{
  font-family:var(--mono);font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;
  min-width:46px;padding:9px 8px;cursor:pointer;
  border:1px solid var(--line);background:var(--mill);color:var(--scale);
  transition:background .16s,color .16s,border-color .16s,transform .16s
}
.calc-chip:hover{border-color:var(--ink);color:var(--ink)}
.calc-chip[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:var(--mill);transform:translateY(-2px)
}
.calc-custom{
  font-family:var(--mono);font-size:13px;width:74px;padding:9px 10px;
  border:1px dashed var(--line);background:transparent;color:var(--ink)
}
.calc-hint{
  margin:12px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--scale)
}

.calc-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(20px,2.4vw,28px)}
.calc-field{display:flex;flex-direction:column;gap:7px;position:relative}
.calc-field>span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--scale)
}
.calc-field input{
  font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;
  padding:11px 12px;width:100%;
  border:1px solid var(--line);background:var(--mill);color:var(--ink);
  transition:border-color .18s,box-shadow .18s
}
.calc-field input:focus{outline:0;border-color:var(--hot-ink);box-shadow:inset 0 -2px 0 var(--hot-ink)}
.calc-field-rev input{border-style:dashed}
.calc-revhint{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--hot);
  min-height:1.3em;line-height:1.3
}

/* ---- the four figures ---- */
.calc-figs{
  display:grid;grid-template-columns:repeat(4,1fr);margin:0;
  border-top:1px solid var(--line);background:var(--mill)
}
.calc-figs>div{padding:clamp(18px,2.2vw,24px);border-inline-end:1px solid var(--line)}
.calc-figs>div:last-child{border-inline-end:0}
.calc-figs dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--scale);margin-bottom:12px
}
.calc-figs dd{margin:0;display:flex;align-items:baseline;gap:7px}
.calc-figs dd b{
  font-family:var(--display);font-weight:600;font-stretch:108%;
  font-size:clamp(26px,3.2vw,38px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums
}
.calc-figs dd span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--scale)}
.calc-fig-key{background:var(--sheet);box-shadow:inset 0 2px 0 var(--hot)}
.calc-fig-key dd b{color:var(--hot)}

/* ---- order builder ---- */
.calc-order{border-top:1px solid var(--line);padding:clamp(20px,2.6vw,30px)}
.calc-order-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.calc-order-head .calc-lbl{margin:0;margin-inline-end:auto}
.calc-btn{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;padding:10px 16px;
  border:1px solid var(--ink);background:var(--ink);color:var(--sheet);
  transition:background .18s,color .18s,border-color .18s,transform .18s
}
.calc-btn:hover{transform:translateY(-1px)}
.calc-btn.ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.calc-btn.ghost:hover{border-color:var(--ink)}
.calc-btn.ok{background:var(--hot);border-color:var(--hot);color:#fff}

.calc-empty{
  margin:18px 0 0;font-family:var(--mono);font-size:12px;color:var(--scale);
  border:1px dashed var(--line);padding:18px;text-align:center
}

.calc-table{width:100%;border-collapse:collapse;margin-top:18px;font-family:var(--mono);font-size:13px}
.calc-table th,.calc-table td{
  padding:11px 10px;border-bottom:1px solid var(--line);text-align:start;
  font-weight:400;font-variant-numeric:tabular-nums
}
.calc-table thead th{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--scale);
  border-bottom:1px solid var(--ink)
}
.calc-table .num{text-align:end}
.calc-table .strong{color:var(--hot)}
.calc-table tfoot th,.calc-table tfoot td{
  border-bottom:0;border-top:1px solid var(--ink);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--scale)
}
.calc-table tfoot b{font-size:14px;font-weight:500;color:var(--ink)}
.calc-table tfoot .strong b{color:var(--hot)}
.calc-table tbody tr:hover{background:var(--mill)}
.calc-x{
  border:0;background:transparent;cursor:pointer;color:var(--scale);
  font-size:17px;line-height:1;padding:2px 6px;transition:color .16s
}
.calc-x:hover{color:var(--hot)}

.calc-row-in{animation:calcRow .34s cubic-bezier(.22,1,.36,1) both}
@keyframes calcRow{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.calc-foot{
  margin:0;border-top:1px solid var(--line);padding:clamp(18px,2.2vw,24px);
  font-size:.88em;color:var(--scale);line-height:1.6
}
.calc-foot b{color:var(--ink)}
.calc-formula{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  color:var(--ink);background:var(--mill);border:1px solid var(--line);
  padding:5px 10px;margin-inline-end:10px;white-space:nowrap
}
.calc-foot a{color:var(--ink);border-bottom:1px solid var(--line)}
.calc-foot a:hover{border-color:var(--hot)}

/* ---- responsive ---- */
@media (max-width:900px){
  .calc-main{grid-template-columns:1fr}
  .calc-dial{border-inline-end:0;border-bottom:1px solid var(--line);flex-direction:row;gap:20px}
  .calc-svg{max-width:104px}
  .calc-figs{grid-template-columns:repeat(2,1fr)}
  .calc-figs>div{border-bottom:1px solid var(--line)}
  .calc-figs>div:nth-child(2n){border-inline-end:0}
}
@media (max-width:620px){
  .calc-fields{grid-template-columns:1fr 1fr}
  .calc-field-rev{grid-column:1 / -1}
  .calc-chip{min-width:42px;padding:8px 6px;font-size:13px}
  .calc-table{font-size:12px}
  .calc-table th,.calc-table td{padding:9px 5px}
}
@media (prefers-reduced-motion:reduce){
  .calc-bar{transition:none}
  .calc-row-in{animation:none}
  .calc-chip,.calc-btn{transition:none}
  .calc-chip[aria-pressed="true"],.calc-btn:hover{transform:none}
}

/* Arabic: the mono face has no Arabic glyphs, so the labels that are Arabic
   words fall back to the Kufi face while the figures stay mono and tabular. */
[dir="rtl"] .calc-lbl,
[dir="rtl"] .calc-hint,
[dir="rtl"] .calc-field>span,
[dir="rtl"] .calc-figs dt,
[dir="rtl"] .calc-btn,
[dir="rtl"] .calc-empty,
[dir="rtl"] .calc-table thead th,
[dir="rtl"] .calc-table tfoot th,
[dir="rtl"] .calc-table tfoot td{
  font-family:var(--body);letter-spacing:0
}
[dir="rtl"] .calc-figs dd b,
[dir="rtl"] .calc-table td,
[dir="rtl"] .calc-dial-cap b{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .calc-figs dd span,
[dir="rtl"] .calc-revhint{font-family:var(--body);letter-spacing:0}
[dir="rtl"] .calc-figs dd span[dir="ltr"]{font-family:var(--mono);letter-spacing:.1em}

/* ==========================================================================
   TASTE PASS
   Applied after auditing the page against the taste-skill ruleset.
   ========================================================================== */

/* A second, lighter hairline. --line is now reserved for the edge of a
   "sheet" (a panel, a plate, a framed image); divisions WITHIN a group use
   --line-2, so 50 identical 1px rules stop competing for the same weight. */
:root{ --line-2:rgba(16,20,24,.075) }

.gh-panel li,
.contact-list li,
.calc-table td{border-color:var(--line-2)}
.calc-table tbody tr:last-child td{border-bottom-color:var(--line)}

/* Text-only cards were a bordered box inside a bordered section inside a
   bordered page. The raised surface alone is enough separation. */
.card{border:0}
.cols-3 .card{border-top:2px solid var(--line)}
.tags li{border-color:transparent;background:var(--sheet)}

/* A status line, replacing three amber pills that sat at 45% opacity and so
   failed contrast badly. Plain text at full strength reads, and says more. */
.status{
  margin:0;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--scale);
  padding-inline-start:13px;position:relative;line-height:1.6
}
.status::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:5px;height:5px;background:var(--hot)
}

/* Custom diameter: a real visible label, not a placeholder pretending to be
   one, and a boundary that actually meets contrast. */
.calc-other{display:inline-flex;flex-direction:column;gap:5px}
.calc-other>span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--scale)
}
.calc-custom{border-color:var(--edge)}
.calc-field-rev input{border-color:var(--edge)}
.calc-empty{border-color:var(--edge)}

/* The one dark section on an otherwise light page now has a boundary that
   makes it read as a deliberate switch rather than an accident. */
#ai{border-top:2px solid var(--hot)}

/* Hero: two lines at every width, so the opening screen is the headline and
   the band, not a wall of display type. */
.hero h1{max-width:24ch;font-size:clamp(36px,5.4vw,64px)}

/* ==========================================================================
   COLOUR AND LAYOUT PASS
   Two jobs. First, accent discipline: --hot was appearing in about thirty
   places, including a rule above every eyebrow and every hover state, which
   is enough repetition that it stopped meaning anything. It now marks only
   things that are live, hot, or the single figure that matters. Second,
   layout variety: two pairs of sections were running the same grid twice,
   so the page repeated itself.
   Everything below uses logical properties, so /ar/ inherits it unchanged.
   ========================================================================== */

/* ---- accent discipline ---- */
.eyebrow::before{background:var(--edge)}
.strip b i{color:inherit}
nav a::after{background:var(--ink)}
.lang-switch:hover{color:var(--ink);border-color:var(--ink)}
.note-back a:hover,.calc-foot a:hover{border-color:var(--ink)}
/* The one mark kept: the full stop after the name. It is how the site signs
   itself, it appears once, and one instance is not repetition. */
.brand span{color:var(--hot-ink)}

/* amber that is TEXT has to be the darker one */
.hero h1 .h1-name,.role .co,.equation em,
.calc-revhint,.calc-table .strong,.calc-table tfoot .strong b{color:var(--hot-ink)}
.calc-x:hover{color:var(--hot-ink)}
.btn.hot,.calc-btn.ok{background:var(--hot-ink);border-color:var(--hot-ink);color:#fff}

/* control boundaries need 3:1, the decorative hairline never met it */
.btn.ghost,.menu-btn,.calc-btn.ghost,
.calc-chip,.calc-custom,.calc-field input,.calc-field-rev input,.calc-empty{border-color:var(--edge)}

/* recessed surfaces, so a control reads as set INTO the plate */
.calc-figs,.calc-chip,.calc-field input,.calc-formula,.flow{background:var(--sunk)}
.calc-table tbody tr:hover{background:var(--sunk)}
.calc-fig-key{background:var(--sheet)}
.tags li{background:var(--sheet)}
.calc-dial{background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(16,20,24,.05) 7px 8px)}
.lead{color:var(--lead)}

/* the inverted room, on tokens rather than white at 5% opacity, which was
   drifting the surface off the hue everything else agrees on */
#ai .eyebrow::before{background:var(--hot)}
#ai .lead{color:var(--ai-body)}
#ai .eyebrow,#ai .note{color:var(--ai-scale)}

/* ---- layout: stop the page repeating itself ---- */

/* #technology was three equal cards. Now one wide plus two, which is a
   different shape from anything else on the page and lets the first idea
   carry more weight than the other two. */
#technology .cols-3{grid-template-columns:1.35fr 1fr}
#technology .cols-3 .card{border-top:2px solid var(--edge)}
/* The first idea gets height rather than width: a full-width card leaves a
   paragraph stranded in the middle of a wide empty box. */
#technology .cols-3 .card:first-child{
  grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end
}
#technology .cols-3 .card:first-child h3{font-size:clamp(24px,2.6vw,32px)}
#technology .cols-3 .card:first-child p{margin-bottom:0}
@media (max-width:760px){
  #technology .cols-3{grid-template-columns:1fr}
  #technology .cols-3 .card:first-child{grid-row:auto}
}

/* #ai was the SAME three equal cards, inside the one inverted section: a new
   room with the old furniture. The cards are gone; the dark ground is the
   variation, and the content becomes label-and-text rows. */
#ai .cols-3{display:block}
#ai .card{
  background:none;border:0;padding:0;
  border-top:1px solid var(--ai-line);
  padding-block:clamp(22px,2.6vw,30px);
  display:grid;
  /* px, not ch: the ch unit here resolves against the grid container's body
     font, not the heading's, so 22ch was far too narrow for a 25px display
     face and every second label wrapped. */
  grid-template-columns:minmax(0,272px) minmax(0,60ch);
  gap:clamp(16px,3vw,48px);align-items:baseline
}
#ai .card h3{margin:0}
#ai .card p{margin:0;color:var(--ai-body)}
@media (max-width:760px){#ai .card{grid-template-columns:1fr;gap:10px}}

/* #github and #linkedin were byte-for-byte the same split. #linkedin now
   reads as a continuation of #github rather than a second copy of it. */
#linkedin{border-top:0;padding-block-start:var(--sec-tight)}
#linkedin .gh{display:block;max-inline-size:80ch}
#linkedin .gh-panel{
  border:0;background:none;padding:0;
  margin-block-start:clamp(24px,3vw,36px);border-top:1px solid var(--line)
}
#linkedin .gh-panel ul{display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px);padding-block-start:18px}
#linkedin .gh-panel li{border-bottom:0;display:block;padding:0}
#linkedin .gh-panel li span{display:block;margin-bottom:3px}

/* ---- vertical rhythm: three step sizes instead of one metronome ---- */
:root{
  --sec-tight:clamp(40px,5vw,64px);
  --sec-loose:clamp(96px,13vw,176px);
  --wrap-wide:1288px
}
#about,#projects,#ai{padding-block:var(--sec-loose)}
#contact{padding-block:var(--sec-loose) var(--sec)}

/* ---- two deliberate breaks from the single 1120px measure ---- */

/* The band is material. Material runs to the edge of the sheet. */
html{overflow-x:clip}
.hero .strip{margin-inline:calc(50% - 50vw);border-inline:0}

/* The calculator is an instrument, not prose, so it gets more width than a
   column of text should ever have. Its heading and intro stay readable. */
#calculator .wrap{max-width:var(--wrap-wide)}
#calculator .sec-head,#calculator > .wrap > .lead{max-inline-size:66ch}

/* And where the text IS the point, a narrower measure. */
.journey{max-inline-size:62ch}

/* Arabic sets wider than Latin at the same point size, and Noto Kufi is
   visually heavier than Archivo, so the same headline that lands on two
   lines in English ran to three here. Its own size and measure, not a
   translation of the English one. */
[dir="rtl"] .hero h1{max-inline-size:27ch;font-size:clamp(31px,4.5vw,53px);line-height:1.22}
[dir="rtl"] .hero .lead{max-inline-size:58ch}

/* ==========================================================================
   SECTION CALCULATOR, /steelcalc/
   The rebar calculator already carries most of these controls. What is new
   here: a size list long enough to need a select rather than chips, a
   cross-section that changes shape and not only size, and a notice for the
   families whose dimensions are not yet checked against an official table.
   ========================================================================== */
#steelcalc .wrap{max-width:var(--wrap-wide)}
#steelcalc .sec-head,#steelcalc > .wrap > .lead{max-inline-size:66ch}

/* One path per section, drawn from its own dimensions. evenodd is what cuts
   the bore out of a pipe or a tube; the stroke keeps its width while the
   group is scaled, so a 6 mm bar and a 300 mm beam are drawn with the same
   line weight. */
.calc-sec-body{
  fill:rgba(31,59,77,.09);stroke:var(--ink);stroke-width:2.2;
  fill-rule:evenodd;vector-effect:non-scaling-stroke
}

.calc-field select{
  font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;
  padding:11px 12px;width:100%;
  border:1px solid var(--edge);background:var(--mill);color:var(--ink);
  border-radius:0;cursor:pointer;
  transition:border-color .18s,box-shadow .18s
}
.calc-field select:focus{outline:0;border-color:var(--hot-ink);box-shadow:inset 0 -2px 0 var(--hot-ink)}

/* The unverified-data notice, and the message when a wall is thicker than the
   section it is meant to line. Both are the interface telling the truth about
   a figure rather than printing it and moving on. */
.calc-note{
  margin:16px 0 0;padding-inline-start:12px;
  border-inline-start:2px solid var(--hot);
  font-size:.88em;line-height:1.6;color:var(--lead)
}
.calc-warn{margin:12px 0 0;font-family:var(--mono);font-size:12px;color:var(--hot-ink)}
.calc-fail{margin:0;padding:clamp(20px,2.6vw,30px);font-size:.92em;color:var(--hot-ink)}

/* Until the tables have loaded there is nothing to show; dimming the figures
   is more honest than four zeros that look computed. */
.calc[data-loading] .calc-figs dd b{opacity:.3}

/* A designation is a name, not a label: "L 70x70x6" should not come back as
   "L 70X70X6" from the caption's uppercasing. */
.calc-dial-cap b{text-transform:none;letter-spacing:.04em}

/* ---- commercial weight, on the section calculator ----
   The nominal row answers "what does this weigh"; this one answers "what will
   be delivered and invoiced", which is a band, not a number. It is a second
   figure row rather than four more cells, because the two questions are not
   the same question. */
.calc-comm{border-top:1px solid var(--line);padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px) 0}
.calc-comm-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.calc-comm-head .calc-lbl{margin:0;margin-inline-end:auto}
.calc-comm-tol{display:inline-flex;align-items:center;gap:9px}
.calc-comm-tol>span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--scale)
}
.calc-comm-tol input{
  font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;
  width:82px;padding:9px 10px;
  border:1px dashed var(--edge);background:transparent;color:var(--ink)
}
.calc-comm-tol input:focus{outline:0;border-color:var(--hot-ink);border-style:solid}
.calc-comm .calc-hint{margin:10px 0 clamp(18px,2.2vw,24px);max-inline-size:88ch}
.calc-figs-comm{border-top:1px solid var(--line)}

/* A note-list row that is not a link: a feature list rather than an index of
   pages. Same two columns, no hover. */
.note-list li.note-static{
  display:grid;grid-template-columns:118px 1fr;
  gap:clamp(14px,2.4vw,32px);align-items:baseline;padding:24px 0
}
@media (max-width:620px){ .note-list li.note-static{grid-template-columns:1fr;gap:8px} }

/* ==========================================================================
   MOBILE HEADER — brand, menu and language switch on one line
   At 375px the bar needed ~450px: the wide brand, two bordered controls and
   16px gaps pushed the language switch off-screen and the page scrolled
   sideways. Narrow the brand and the controls instead of dropping any of
   them; the brand clips as a last resort rather than widening the page.
   ========================================================================== */
@media (max-width:520px){
  .bar{gap:10px}
  .brand{font-size:13px;font-stretch:100%;gap:7px;min-width:0;overflow:hidden}
  .brand-mark{width:24px;height:24px}
  .menu-btn{padding:8px 10px;letter-spacing:.06em;margin-inline-start:auto}
  .lang-switch{padding:7px 9px;letter-spacing:.04em}
}

/* ==========================================================================
   ARABIC TYPE — no tracking, and an Arabic face for every family
   Letter-spacing pulls apart the joins Arabic letters depend on, and the
   mono and display families carry no Arabic glyphs, so labels fell through
   to whatever the system had. Every family on /ar/ now starts with
   IBM Plex Sans Arabic.
   ========================================================================== */
[dir="rtl"]{
  --mono:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --display:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
}
[dir="rtl"] *{letter-spacing:0 !important}
@media (max-width:400px){
  .brand{font-size:12px;letter-spacing:0}
  .bar{gap:8px}
}
/* The contact rows put a long handle and its label side by side; on a phone
   "linkedin.com/in/mashharawi" alone fills the line. Let the row wrap. */
@media (max-width:420px){
  .contact-list a{flex-wrap:wrap;gap:4px 14px}
}
/* The header's "العربية" link sits on the English page, where the mono face
   and tracking apply; give it an Arabic face and untracked letters. */
.lang-switch[lang="ar"]{font-family:"Noto Kufi Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;letter-spacing:0;font-size:12.5px}

/* ==========================================================================
   NOIR — black and white, cinematic
   Everything above was built on a galvanized-grey ground with one amber
   accent. This layer re-points the same tokens at a monochrome dark scheme,
   so every page that uses them (home, tools, calculators, writing) follows
   without its own rewrite. Amber is retired: the accent is now plain white,
   carried by weight and space instead of hue. Type moves to Inter (Latin)
   and IBM Plex Sans Arabic, both at light weights.
   ========================================================================== */
:root{
  color-scheme:dark;
  --mill:#0A0A0A;--sheet:#121212;--sunk:#181818;
  --ink:#F2F2F0;--lead:#C9C9C5;--scale:#8F8F8B;
  --line:#232323;--edge:#5C5C59;--line-2:rgba(255,255,255,.06);
  --hot:#F2F2F0;--hot-ink:#F2F2F0;--hot-wash:#161616;
  --blued:#000;--ai-line:#262626;--ai-text:#F2F2F0;--ai-body:#C9C9C5;--ai-scale:#8F8F8B;
  --display:"Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"Inter",system-ui,sans-serif;
}
[dir="rtl"]{
  --display:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --body:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --mono:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
}
.lang-switch[lang="ar"]{font-family:"IBM Plex Sans Arabic","Geeza Pro",Tahoma,sans-serif}

::selection{background:var(--ink);color:var(--mill)}
body{font-weight:300;color:var(--lead);line-height:1.75}
strong,b{font-weight:500}
header{background:rgba(10,10,10,.78)}

/* headings: light, quiet, no width axis */
h1,h2,h3,.dsp,.brand,.spec dd,.note-text b,.contact-list a{font-stretch:normal}
h1,h2,h3,.dsp{font-weight:300;letter-spacing:-.01em;color:var(--ink)}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25}
h3{font-weight:400;font-size:clamp(19px,1.8vw,22px)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-weight:300;line-height:1.5}
.brand{font-weight:500;font-size:15px;letter-spacing:.01em}
.brand-mark{filter:grayscale(1)}
.brand span{color:var(--scale)}
.spec dd{font-weight:400}
.contact-list a{font-weight:300}

/* labels: small, wide-tracked, quiet */
.eyebrow,.pmeta,.spec dt,.gov h4,.contact-list span,.role .when,.calc-lbl,nav a{font-weight:400}
nav a{color:var(--scale)}
nav a:hover,nav a[aria-current="true"]{color:var(--ink)}
.role .co{color:var(--scale)}

/* buttons: an outlined primary and a text link, no fills competing */
.btn{background:transparent;color:var(--ink);border:1px solid var(--ink);font-weight:400;letter-spacing:.06em;padding:15px 28px}
.btn:hover{background:var(--ink);color:var(--mill);border-color:var(--ink);transform:none}
.btn.ghost{border-color:transparent;padding-inline:4px;color:var(--scale)}
.btn.ghost:hover{background:transparent;color:var(--ink);border-color:transparent}
.btn.hot,.calc-btn.ok{background:var(--ink);border-color:var(--ink);color:var(--mill)}
.btn.hot:hover,.calc-btn.ok:hover{background:#fff;border-color:#fff;color:var(--mill)}
[dir="rtl"] .btn{letter-spacing:0}

/* the inverted AI room is now one step lighter, not a blue */
#ai{background:var(--sheet)}
#ai .card{background:rgba(255,255,255,.03);border-color:var(--line)}
#ai .rule{background:var(--line)}

/* images are monochrome site-wide */
.shot img,.project img,.note img{filter:grayscale(1)}
.calc-bar-body,.calc-shape{fill:rgba(255,255,255,.05)}
.calc-dial{background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(255,255,255,.04) 7px 8px)}

/* ---------- the cinematic hero ---------- */
.noir-hero{
  position:relative;overflow:hidden;border-top:0;
  min-height:calc(100svh - 64px);display:flex;align-items:center;
  padding-block:clamp(72px,10vw,120px);
}
.noir-hero .wrap{position:relative;z-index:2;width:100%}
.hero-photo{position:absolute;inset-block:0;inset-inline-end:0;width:62%;z-index:0;overflow:hidden}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.35) brightness(.55);
  animation:noir-zoom 16s cubic-bezier(.2,.6,.2,1) both
}
/* the photo dissolves into the ground on the side the text is on */
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--mill) 0%,rgba(10,10,10,.85) 22%,rgba(10,10,10,0) 62%),
             linear-gradient(to top,var(--mill) 0%,rgba(10,10,10,0) 30%)
}
[dir="rtl"] .hero-photo::after{
  background:linear-gradient(to left,var(--mill) 0%,rgba(10,10,10,.85) 22%,rgba(10,10,10,0) 62%),
             linear-gradient(to top,var(--mill) 0%,rgba(10,10,10,0) 30%)
}
.noir-hero h1{font-weight:200;font-size:clamp(34px,4.1vw,54px);line-height:1.3;max-width:21ch;letter-spacing:-.015em}
[dir="rtl"] .noir-hero h1{font-size:clamp(32px,3.9vw,50px);line-height:1.55;max-inline-size:16ch}
.noir-hero h1 strong{font-weight:500}
.noir-hero h1 .h1-name{color:var(--scale);font-weight:400;letter-spacing:.32em;font-size:11px;margin-bottom:28px}
.noir-hero h1 .h1-name b,.noir-hero h1 .h1-name i{color:var(--edge);font-weight:400}
[dir="rtl"] .noir-hero h1 .h1-name{font-size:13px}
.noir-hero .lead{max-width:44ch;color:var(--scale);font-size:clamp(16px,1.25vw,18px);line-height:1.9;margin-top:24px}
.noir-hero .cta-row{margin-top:40px;gap:22px;align-items:center}
.hero-foot{
  display:flex;justify-content:space-between;gap:16px;margin:clamp(56px,9vw,120px) 0 0;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--edge)
}
.hero-foot span+span{display:none}
[dir="rtl"] .hero-foot{font-size:12.5px;letter-spacing:0}
@keyframes noir-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}

/* about loses its portrait to the hero; the text takes the full measure */
.about-solo{grid-template-columns:minmax(0,1fr)}
.about-solo .about-text{max-width:72ch}

/* slower, softer reveal */
.js .rise{transition-duration:1.1s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.hero .rise{transition-delay:calc(var(--i,0) * 160ms)}

@media (max-width:820px){
  .noir-hero{align-items:flex-end;min-height:calc(100svh - 64px);padding-top:44svh}
  .hero-photo{inset:0 0 auto 0;width:100%;height:70%}
  .hero-photo::after,[dir="rtl"] .hero-photo::after{
    background:linear-gradient(to top,var(--mill) 4%,rgba(10,10,10,.6) 40%,rgba(10,10,10,0) 75%)
  }
  .hero-foot{flex-direction:column;gap:6px;margin-top:44px}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo img{animation:none}
}

/* noir: one column edge for every section on the home page; the tools list
   no longer carries a wide calculator, so it lines up with the rest */
#calculator .wrap{max-width:var(--wrap)}
#ai{border-top:1px solid var(--line)}
.note-text b{font-weight:400}
.equation{font-weight:300}
.equation em{color:var(--scale)}

/* ==========================================================================
   SMALL FIXES, October 2026
   ========================================================================== */
/* Two greys under the hero (the masthead's location and the role line) sat
   at #5C5C59 on the near-black ground, 2.95:1. --dim is the quietest grey
   that still reads at small sizes: 4.99:1 on the ground, 4.72:1 on --sheet. */
:root{--dim:#80807C}
.noir-hero h1 .h1-name b,.noir-hero h1 .h1-name i,.hero-foot{color:var(--dim)}

/* Calculator figures on a 320px phone: two columns of 1fr cannot shrink
   below a number like "3.600 tonnes", so the grid pushed the page sideways.
   Let the tracks shrink, let the unit drop under the number, and tighten
   the padding and the figure size on the narrowest screens. */
.calc-figs{grid-template-columns:repeat(4,minmax(0,1fr))}
.calc-figs dd{flex-wrap:wrap;row-gap:2px}
@media (max-width:900px){ .calc-figs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:360px){
  .calc-figs>div{padding:14px 12px}
  .calc-figs dd b{font-size:24px}
  .calc-figs dt{letter-spacing:.08em}
}

/* ---- projects: one featured app, published work, then what is in build ----
   The featured card puts its text beside the three screenshots on wide
   screens. Unfinished projects drop from full cards to a short list, and
   the empty "next project" placeholder is gone. */
.project-feature{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.project-feature .shots{padding:clamp(22px,2.8vw,32px)}
.project-grid > .project:not(.project-feature):last-child:nth-child(even){grid-column:1 / -1}
.in-build{margin-top:clamp(36px,4.5vw,56px)}
.in-build ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.in-build li{
  display:grid;grid-template-columns:minmax(150px,.7fr) minmax(170px,.8fr) minmax(0,2fr);
  gap:8px clamp(16px,2.4vw,32px);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)
}
.in-build li b{font-weight:400;color:var(--ink)}
.in-build li .pmeta{margin:0}
.in-build li span:last-child{color:var(--scale)}
@media (max-width:900px){
  .project-feature{grid-template-columns:minmax(0,1fr)}
  .project-feature .shots{padding-top:0}
  .in-build li{grid-template-columns:minmax(0,1fr)}
}

/* Phones: the hero headline was held at opacity 0 until site.js ran and then
   faded in over 1.1s with staggered delays, so on a phone the first second
   or two showed only black. The hero text now paints with the page; the
   slow reveal stays for sections further down. */
.js .noir-hero .rise{opacity:1;transform:none;transition:none}

/* ==========================================================================
   PAGE TRANSITIONS — a short cross-fade between pages of the site, with the
   header held still. Browsers without cross-document view transitions just
   navigate as before; reduced-motion users get no animation.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* ==========================================================================
   PRINT — the calculators print as a clean light sheet: inputs, figures,
   the order table and the method note, with the date and the site address.
   Everything interactive or decorative is left off the page.
   ========================================================================== */
@page{margin:14mm}
@media print{
  :root,[dir="rtl"]{
    color-scheme:light;
    --mill:#fff;--sheet:#fff;--sunk:#f2f2f2;
    --ink:#000;--lead:#111;--scale:#444;--dim:#444;
    --line:#bbb;--edge:#777;--hot:#000;--hot-ink:#000;--hot-wash:#f2f2f2
  }
  html,body{background:#fff!important;color:#000}
  body{font-size:10.5pt;line-height:1.45}
  header,footer,nav,.skip,.menu-btn,.lang-switch,.cta-row,.note-back,
  .calc-order-head .calc-btn,.calc-x,.calc-fail,.hero-photo,
  ins.adsbygoogle,iframe{display:none!important}
  .sec{padding-block:0;border:0}
  .wrap{max-width:none;padding-inline:0}
  .js .rise{opacity:1!important;transform:none!important}
  main .lead{display:none}
  h1{font-size:18pt}
  .calc{border:1px solid #bbb}
  .calc-main,.calc-figs,.calc-comm{break-inside:avoid}
  .calc[data-printed]::before{
    content:"mashharawi.com  ·  " attr(data-printed);
    display:block;padding:8px 12px;border-bottom:1px solid #bbb;font-size:9pt;color:#444;
    direction:ltr;unicode-bidi:isolate;text-align:start
  }
  [dir="rtl"] .calc[data-printed]::before{text-align:end}
  .calc-figs dd b{font-size:16pt}
  .calc-table{break-inside:auto}
  .calc-table tr{break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* ==========================================================================
   FAQ — on the calculator pages. Native <details>, so it opens without
   JavaScript and reads in full to search and answer engines (the same text
   is in the page's FAQPage JSON-LD).
   ========================================================================== */
.faq{margin-top:clamp(48px,6vw,80px);max-width:78ch}
.faq h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:clamp(14px,1.6vw,20px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:18px 0;color:var(--ink);font-weight:400;font-size:clamp(16px,1.3vw,18px)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--scale);font-weight:300;font-size:20px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--lead);max-width:70ch}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media print{ .faq{display:none} }

/* ---- tables inside notes (Markdown tables from notes/*.md) ---- */
.note table{width:100%;border-collapse:collapse;margin:18px 0 30px;font-variant-numeric:tabular-nums}
.note th,.note td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:center}
.note th{font-weight:400;font-size:13px;line-height:1.4;color:var(--scale);border-bottom-color:var(--edge);vertical-align:bottom}
.note td{color:var(--ink)}
.note tbody tr:hover{background:var(--sheet)}
@media (max-width:520px){
  .note th,.note td{padding:9px 5px;font-size:14px}
  .note th{font-size:11.5px}
}

/* ==========================================================================
   CINEMA — redesign phase 1 (Claude Design handoff, 2026-10-15)
   Warm black and white. Type stays on the site's own faces: Inter for
   Latin and IBM Plex Sans Arabic, both at light weights (Omar preferred
   them to the Bodoni/Amiri pairing in the handoff). Placed last so it re-points the NOIR tokens
   above; the old token names stay as aliases so every existing rule
   (calculators, writing, tools) follows without its own rewrite.
   ========================================================================== */
:root{
  --bg:#0B0B0A;--bg-2:#151514;
  --fg:#EFEDE8;--fg-2:#D0CEC8;--fg-3:#A5A39D;--fg-4:#8A8883;
  --fg-5:#5A5955;            /* decorative numerals only, never reading text */
  --c-line:#2A2927;--c-line-2:#1F1E1C;
  --btn-bg:#EFEDE8;--btn-fg:#0B0B0A;
  --f-display:"Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"Inter",system-ui,sans-serif;
  --f-ar-display:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --f-ar-body:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  --pad-x:clamp(20px,4.4vw,56px);
  --sec-y:clamp(56px,7vw,96px);
  --s-6:48px;
  --max:1320px;
  --t-hero:clamp(40px,6.6vw,86px);
  --t-hero-ar:clamp(38px,6vw,80px);
  --t-h2:clamp(30px,3.4vw,46px);
  --t-h3:26px;
  --t-label:11px;
}
@media screen{
  :root{
    --mill:var(--bg);--sheet:#151514;--sunk:#1B1B19;
    --ink:var(--fg);--lead:var(--fg-2);--scale:var(--fg-3);
    --line:var(--c-line);--edge:#6A6863;--line-2:var(--c-line-2);
    --hot:var(--fg);--hot-ink:var(--fg);--hot-wash:#151514;
    --blued:#000;--ai-line:var(--c-line);--ai-text:var(--fg);--ai-body:var(--fg-2);--ai-scale:var(--fg-3);
    --display:var(--f-display);--body:var(--f-body);--mono:var(--f-mono);
  }
  [dir="rtl"]{--display:var(--f-ar-display);--body:var(--f-ar-body);--mono:var(--f-ar-body)}
  html,body{background:var(--bg)}
  body{font-family:var(--f-body)}
  html[lang="ar"] body{font-family:var(--f-ar-body)}
  ::selection{background:var(--fg);color:var(--bg)}
}
/* Latin product names keep a Latin face inside Arabic text */
.c-latin{font-family:var(--f-body)}

/* ---------- header ---------- */
.c-header{position:absolute;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:24px;
  height:auto;padding:clamp(20px,3vw,34px) var(--pad-x);background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.c-header--solid{position:sticky;top:0;background:rgba(11,11,10,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--c-line-2)}
.c-header__name{font:300 clamp(17px,1.8vw,22px) var(--f-display);letter-spacing:.02em;color:var(--fg);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:12px}
.c-header__mark{flex:none;width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:transform .6s var(--ease,ease)}
.c-header__name:hover .c-header__mark{transform:rotate(-8deg) scale(1.06)}
@media (max-width:760px){.c-header__mark{width:28px;height:28px}}
html[lang="ar"] .c-header__name{font:400 clamp(19px,1.9vw,24px) var(--f-ar-display)}
.c-header .c-header__nav{display:flex;align-items:center;gap:34px;position:static;background:none;border:0;font:400 13px var(--f-body);color:var(--fg-2)}
html[lang="ar"] .c-header .c-header__nav{font:400 15px var(--f-ar-body)}
.c-header__nav a{display:inline;padding:0;font:inherit;letter-spacing:0;text-transform:none;color:inherit;text-decoration:none;border:0}
.c-header__nav a::after{content:none}
.c-header__nav a:hover{color:var(--fg)}
.c-header__nav [aria-current="page"]{color:var(--fg);border-bottom:1px solid var(--fg);padding-bottom:2px}
.c-header__nav .c-header__lang{font-family:var(--f-ar-body)}
html[lang="ar"] .c-header__nav .c-header__lang{font:400 13px var(--f-body)}
.c-header__menu{display:none;background:none;border:0;padding:12px;margin:-12px;cursor:pointer;flex-direction:column;gap:6px;width:46px;position:relative;z-index:2}
.c-header__menu span{display:block;height:1px;width:22px;background:var(--fg);transition:transform .2s}
.c-header.is-open .c-header__menu span:first-child{transform:translateY(3.5px) rotate(45deg)}
.c-header.is-open .c-header__menu span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:760px){
  .c-header .c-header__nav{display:none}
  .c-header__menu{display:flex}
  .c-header.is-open .c-header__nav{display:flex;flex-direction:column;align-items:flex-start;gap:22px;position:fixed;inset:0;z-index:1;background:var(--bg);padding:96px var(--pad-x);font-size:22px}
}

/* ---------- hero ---------- */
.c-hero{position:relative;height:760px;overflow:hidden;background:var(--bg-2);color:#EFEDE8}
.c-hero__img{position:absolute;top:0;inset-inline-end:0;width:58%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(1) contrast(1.1) brightness(.85);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 45%);mask-image:linear-gradient(to right,transparent 0,#000 45%)}
html[dir="rtl"] .c-hero__img{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 45%);mask-image:linear-gradient(to left,transparent 0,#000 45%)}
.c-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,.55) 0,rgba(11,11,10,0) 22%,rgba(11,11,10,0) 55%,#0B0B0A 100%)}
.c-hero__body{position:absolute;inset-inline:var(--pad-x);bottom:clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.c-hero__text{display:flex;flex-direction:column;gap:18px;max-width:46%}
.c-hero__title{margin:0;font:300 var(--t-hero)/1.08 var(--f-display);letter-spacing:-.02em;text-wrap:balance;color:#EFEDE8;max-width:none}
.c-hero__title em{font-style:normal;color:var(--fg-3)}
html[lang="ar"] .c-hero__title{font:400 var(--t-hero-ar)/1.35 var(--f-ar-display);letter-spacing:0}
html[lang="ar"] .c-hero__title em{font-style:normal;font-weight:300}
.c-hero__lead{margin:0;max-width:52ch;font:300 17px/1.65 var(--f-body);color:var(--fg-2)}
html[lang="ar"] .c-hero__lead{font:300 17px/1.9 var(--f-ar-body)}
.c-hero__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.c-hero--full{height:720px}
.c-hero--full .c-hero__img{width:100%;-webkit-mask-image:none;mask-image:none;object-position:center 40%;filter:grayscale(1) contrast(1.1) brightness(.8)}
html[dir="rtl"] .c-hero--full .c-hero__img{-webkit-mask-image:none;mask-image:none}
.c-hero--full .c-hero__shade{background:linear-gradient(180deg,rgba(11,11,10,.6) 0,rgba(11,11,10,.1) 25%,rgba(11,11,10,.35) 50%,rgba(11,11,10,.97) 100%)}
.c-hero--full .c-hero__text{max-width:760px}
.c-hero__title--app,html[lang="ar"] .c-hero__title--app{font:300 clamp(56px,9vw,120px)/1 var(--f-display);letter-spacing:-.02em}
@media (max-width:760px){
  .c-hero{height:700px}
  .c-hero--full{height:640px}
  .c-hero__img{width:100%;height:62%;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
  html[dir="rtl"] .c-hero__img{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
  .c-hero--full .c-hero__img,html[dir="rtl"] .c-hero--full .c-hero__img{height:60%}
  .c-hero__shade{background:linear-gradient(180deg,rgba(11,11,10,.6) 0,rgba(11,11,10,0) 22%,rgba(11,11,10,.85) 50%,#0B0B0A 62%)}
  .c-hero__text{max-width:100%}
}

/* ---------- buttons, links, labels ---------- */
.c-btn{display:inline-flex;gap:14px;align-items:center;min-height:48px;padding:0 24px;background:var(--btn-bg);color:var(--btn-fg);font:500 14px var(--f-body);text-decoration:none;border:0}
html[lang="ar"] .c-btn{font:500 15px var(--f-ar-body)}
.c-btn small{font:400 12px var(--f-mono);direction:ltr;unicode-bidi:isolate}
.c-btn:hover,.c-link:hover,.c-row:hover,.c-footer a:hover{opacity:.65}
.c-btn,.c-link,.c-row,.c-footer a{transition:opacity .2s}
.c-link{font:400 14px var(--f-body);color:var(--fg-2);border-bottom:1px solid var(--fg-5);padding-bottom:3px;text-decoration:none}
.c-label{margin:0;font:400 var(--t-label) var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-4);text-decoration:none}
.c-hero .c-label{color:#B5B3AD}
html[lang="ar"] .c-label{font:400 14px var(--f-ar-body);letter-spacing:0;text-transform:none}

/* ---------- sections and tool rows ---------- */
.c-section{padding:var(--sec-y) var(--pad-x);max-width:var(--max);margin:0 auto}
.c-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,56px)}
.c-split__head{display:flex;flex-direction:column;gap:12px}
.c-split > .c-rows{grid-column:span 2;min-width:0}
@media (max-width:760px){.c-split > .c-rows{grid-column:auto}}
.c-h2{margin:0;font:300 var(--t-h2)/1.1 var(--f-display);text-wrap:balance;color:var(--fg);letter-spacing:0}
.c-h2 em{font-style:normal;color:var(--fg-3)}
html[lang="ar"] .c-h2{font:400 var(--t-h2)/1.4 var(--f-ar-display)}
html[lang="ar"] .c-h2 em{font-style:normal;font-weight:300}
.c-rows{display:flex;flex-direction:column;border-top:1px solid var(--c-line)}
.c-row{display:grid;grid-template-columns:48px minmax(0,1fr) 168px;gap:16px;align-items:center;padding:24px 0;border-bottom:1px solid var(--c-line);color:var(--fg);text-decoration:none}
.c-row__num{font:200 24px/1 var(--f-display);color:var(--fg-5);align-self:start;padding-top:4px}
.c-row__title{display:block;font:300 var(--t-h3) var(--f-display)}
html[lang="ar"] .c-row__title{font:400 25px/1.4 var(--f-ar-display)}
html[lang="ar"] .c-row__title.c-latin{font:300 var(--t-h3) var(--f-display)}
.c-row__desc{display:block;margin-top:4px;font:300 15px/1.6 var(--f-body);color:var(--fg-3)}
html[lang="ar"] .c-row__desc{font:300 15px/1.8 var(--f-ar-body)}
.c-row__thumb{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.c-row__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .6s}
.c-row:hover .c-row__thumb img{transform:scale(1.04)}
@media (max-width:760px){.c-row{grid-template-columns:40px minmax(0,1fr) 84px}}

/* ---------- downloads (RebarPlan) ---------- */
.c-downloads{border-bottom:1px solid var(--c-line)}
.c-downloads__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--c-line);border-block:1px solid var(--c-line)}
.c-dl{background:var(--bg);padding:28px 28px 32px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.c-dl:first-child{padding-inline-start:0}
.c-dl:last-child{padding-inline-end:0}
@media (max-width:760px){.c-dl{padding-inline:0}}
.c-dl__note{margin:0;font:300 14px/1.6 var(--f-body);color:var(--fg-3)}
html[lang="ar"] .c-dl__note{font:300 14px/1.8 var(--f-ar-body)}
.c-dl__repo{font:300 clamp(18px,2.2vw,28px) var(--f-display);overflow-wrap:anywhere;direction:ltr;color:var(--fg);text-decoration:none}
.c-sticky-dl{display:none}
@media (max-width:760px){
  .c-sticky-dl{display:flex;position:fixed;inset-inline:0;top:auto;bottom:0;z-index:20;border-bottom:0;gap:1px;background:var(--c-line);border-top:1px solid var(--c-line);padding-bottom:env(safe-area-inset-bottom)}
  .c-sticky-dl a{flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--fg);font:500 14px var(--f-body);text-decoration:none}
  html[lang="ar"] .c-sticky-dl a{font:500 15px var(--f-ar-body)}
  .c-sticky-dl a::after{content:none}
  .c-sticky-dl a:first-child{background:var(--btn-bg);color:var(--btn-fg)}
  body.has-sticky-dl{padding-bottom:64px}
}

/* ---------- features (RebarPlan) ---------- */
.c-features{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));column-gap:24px;border-top:1px solid var(--c-line)}
.c-feature{padding:28px 0 32px;border-bottom:1px solid var(--c-line);display:flex;flex-direction:column;gap:10px}
.c-feature h3{margin:0;font:300 24px var(--f-display);color:var(--fg)}
html[lang="ar"] .c-feature h3{font:400 23px/1.4 var(--f-ar-display)}
.c-feature p{margin:0;font:300 15px/1.6 var(--f-body);color:var(--fg-3)}
html[lang="ar"] .c-feature p{font:300 15px/1.8 var(--f-ar-body)}
.c-shot{margin:var(--s-6) 0 0;border:1px solid var(--c-line);aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.c-shot img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- footer ---------- */
.c-footer{padding:0 var(--pad-x) clamp(40px,5vw,64px);max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:32px;border-top:0;font:inherit;letter-spacing:0;color:var(--fg-2)}
.c-footer__quote{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--c-line);padding-top:40px}
.c-footer__quote p{margin:0;max-width:640px;font:300 clamp(22px,2.4vw,32px)/1.3 var(--f-display);color:var(--fg-2)}
html[lang="ar"] .c-footer__quote p{font:400 clamp(22px,2.4vw,32px)/1.6 var(--f-ar-display)}
.c-footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--c-line-2);font:400 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4)}
.c-footer__base a{color:inherit;text-decoration:none}
html[lang="ar"] .c-footer__base{font:400 13px var(--f-ar-body);letter-spacing:0;text-transform:none}
html[lang="ar"] .c-footer__base a[href^="mailto"]{font:400 11px var(--f-mono);direction:ltr;letter-spacing:.12em}

/* ---------- phase 2: tool pages ---------- */
/* a shorter photo hero for tools, so the calculator is one short scroll away */
.c-hero--short{height:auto;min-height:520px;display:flex;align-items:flex-end}
.c-hero--short .c-hero__body{position:relative;inset:auto;bottom:auto;width:100%;padding:clamp(120px,14vw,170px) var(--pad-x) clamp(32px,5vw,56px)}
.c-hero--short .c-hero__text{max-width:680px}
.c-after-hero{padding-top:clamp(28px,3.5vw,48px)}
@media (max-width:760px){
  .c-hero--short{min-height:460px}
  .c-hero--short .c-hero__body{padding-top:230px}
  .c-hero--short .c-hero__img,html[dir="rtl"] .c-hero--short .c-hero__img{height:300px}
}
/* clean head for tools without a fitting photo */
.c-tool{padding-top:clamp(40px,5vw,72px)}
.c-tool__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;padding-bottom:clamp(24px,3vw,36px);margin-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--c-line)}
.c-tool__title{margin:12px 0 0;font:300 clamp(36px,5vw,64px)/1.05 var(--f-display);letter-spacing:-.02em;color:var(--fg)}
html[lang="ar"] .c-tool__title{font:400 clamp(34px,4.6vw,58px)/1.3 var(--f-ar-display);letter-spacing:0}
html[lang="ar"] .c-tool__title .c-latin{font:300 clamp(36px,5vw,64px)/1.05 var(--f-display)}
.c-tool__lead{margin:0;font:300 16px/1.7 var(--f-body);color:var(--fg-3)}
html[lang="ar"] .c-tool__lead{font:300 16px/1.9 var(--f-ar-body)}
@media (max-width:760px){.c-tool__head{grid-template-columns:1fr}}
/* printed calculator sheets keep the title, drop the photo */
@media print{
  .c-hero{height:auto;background:none;color:#000}
  .c-hero__img,.c-hero__shade,.c-hero .c-label,.c-hero__lead{display:none!important}
  .c-hero__body{position:static}
  .c-hero__title{color:#000;font-size:18pt}
}
.c-row__meta{display:block;margin-bottom:6px}

/* ---------- phase 2: writing ---------- */
.c-note .wrap{max-width:760px}
.c-note{padding-top:clamp(40px,5vw,72px)}
.c-note__title{margin:14px 0 0;font:300 clamp(34px,4.6vw,56px)/1.12 var(--f-display);letter-spacing:-.02em;color:var(--fg);max-width:none}
html[lang="ar"] .c-note__title{font:400 clamp(30px,4.2vw,50px)/1.45 var(--f-ar-display);letter-spacing:0}
.c-note__lead{margin:20px 0 0;padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--c-line);font:300 19px/1.7 var(--f-body);color:var(--fg-2)}
html[lang="ar"] .c-note__lead{font:300 19px/1.95 var(--f-ar-body)}
.c-prose{margin-top:clamp(28px,3.5vw,44px);font:300 17.5px/1.85 var(--f-body);color:var(--fg-2)}
html[lang="ar"] .c-prose{font:300 18px/2 var(--f-ar-body)}
.c-prose h2{margin:2.2em 0 .6em;font:400 clamp(22px,2.4vw,28px)/1.3 var(--f-display);color:var(--fg)}
html[lang="ar"] .c-prose h2{font:500 clamp(22px,2.4vw,27px)/1.6 var(--f-ar-display)}
.c-prose strong{color:var(--fg);font-weight:500}
.c-prose a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--fg-5);text-underline-offset:3px}
.c-prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px}
.c-prose th{font:400 12px var(--f-mono);letter-spacing:.06em;color:var(--fg-4);border-bottom:1px solid var(--c-line);padding:10px 8px}
html[lang="ar"] .c-prose th{font:400 13px var(--f-ar-body);letter-spacing:0}
.c-prose td{padding:10px 8px;border-bottom:1px solid var(--c-line-2);font-variant-numeric:tabular-nums;color:var(--fg)}
.c-prose tr:hover td{background:var(--bg-2)}
@media (max-width:760px){.c-prose{overflow-x:auto}.c-prose table{font-size:14px}}
/* notes list */
.c-notes{border-top:1px solid var(--c-line)}
.c-notes li a{padding:22px 0;border-bottom:1px solid var(--c-line)}
.c-notes .note-text b{font:300 clamp(20px,2.2vw,24px)/1.35 var(--f-display);color:var(--fg)}
html[lang="ar"] .c-notes .note-text b,.c-notes a[lang="ar"] .note-text b{font:400 clamp(20px,2.2vw,24px)/1.6 var(--f-ar-display)}
/* one hairline under a head, not two */
.c-prose{border-top:0;padding-top:0;max-width:none}
.c-tool__head + .c-rows,.c-tool__head + .c-notes{border-top:0}
.c-notes li{border-bottom:0}

/* ---- Rebar supply blocks: quote band, spec grid, WhatsApp button (2026-10-18).
   Contact for rebar quotations from Al Rajhi Steel. Green is used only on
   the WhatsApp actions, so it reads as "message me" and nowhere else. ---- */
.q-band{background:var(--ink);color:#E6E8EA;padding-block:clamp(40px,5vw,68px)}
.q-band .wrap{display:grid;gap:18px}
.q-band .q-eyebrow{margin:0;font:400 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#B5B3AD}
html[lang="ar"] .q-band .q-eyebrow{font:400 14px var(--f-ar-body);letter-spacing:0}
.q-band h2{margin:0;font:300 clamp(28px,3.2vw,40px)/1.2 var(--f-display);color:#EFEDE8;text-wrap:balance}
html[lang="ar"] .q-band h2{font:400 clamp(26px,3vw,36px)/1.5 var(--f-ar-display)}
.q-band p{margin:0;max-width:66ch;color:#C9CDD1;font-size:clamp(16px,1.3vw,19px);line-height:1.7}
.q-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.q-facts li{border:1px solid rgba(255,255,255,.24);padding:5px 11px;font-size:14px;color:#E6E8EA}
.q-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.q-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;font-size:16px;line-height:1.2;text-decoration:none;border:1px solid transparent;transition:background .18s,border-color .18s}
.q-btn--wa{background:#1F7A4D;color:#fff}
.q-btn--wa:hover{background:#17623D;color:#fff}
.q-btn--line{border-color:rgba(255,255,255,.45);color:#fff}
.q-btn--line:hover{border-color:#fff;color:#fff}
.sec .q-btn--line{border-color:var(--edge);color:var(--ink)}
.sec .q-btn--line:hover{border-color:var(--ink);color:var(--ink)}
.q-num{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;letter-spacing:.02em}
.q-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.q-spec>div{background:var(--sheet);padding:16px 18px}
.q-spec dt{font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--scale)}
html[lang="ar"] .q-spec dt{font:400 14px var(--f-ar-body);letter-spacing:0;text-transform:none}
.q-spec dd{margin:6px 0 0;font-size:17px;line-height:1.55;color:var(--ink)}
.q-steps{margin:0;padding-inline-start:1.4em;display:grid;gap:12px;max-width:66ch;font-size:17px;line-height:1.65}
.q-table-wrap{overflow-x:auto;margin-top:8px}
.q-table-wrap .calc-table{min-width:520px}
.q-zh{margin-top:clamp(24px,3vw,40px);padding:18px 20px;background:var(--sheet);max-width:70ch;line-height:1.9}
.q-fab{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline-end:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;background:#1F7A4D;color:#fff;text-decoration:none;font-size:15px;line-height:1;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.q-fab:hover{background:#17623D;color:#fff}
.q-fab:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media print{.q-fab,.q-band,#cQuote{display:none!important}}