/* ==========================================================================
   fadielkawkabani.com
   Built to site-design-law. Grey and white, full ink, one accent on links only.
   No animation, no gradient, no shadow, no radius, no monospace.
   ========================================================================== */

/* ---------- fonts, self hosted, no third party requests ---------- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  --paper:    #FFFFFF;
  --paper-2:  #F4F5F6;
  --ink:      #17181B;
  --ink-2:    #5E6167;
  --rule:     #E2E4E5;
  --accent:   #235A4B;
  --accent-h: #1A4437;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s7: 64px; --s8: 80px; --s9: 96px;

  --measure: 62ch;  /* measures at 66 real characters in Source Serif 4 at 19px */
  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 14px;
  padding: 12px 18px; z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- shell ---------- */
html { scroll-padding-top: 76px; }
.page { width: 100%; }

/* full width bands, contained content */
.band { padding: var(--s7) 0; }
.band--tint { background: var(--paper-2); }
.band--tint + .band--tint { padding-top: 0; }

.inner {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--s4);
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s6); align-items: start;
}
.side {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-2);
  margin: 10px 0 0; position: sticky; top: 92px;
}
.col { min-width: 0; }
.side:empty { display: none; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--accent); color: #FFFFFF;
}
.topbar-in {
  max-width: 1240px; margin: 0 auto; padding: 0 var(--s4);
  height: 56px; display: flex; align-items: center; gap: var(--s4);
  font-family: var(--sans);
}
.topbar-name {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  letter-spacing: -0.015em; color: #FFFFFF; white-space: nowrap;
  opacity: 0; margin-right: auto;
}
.topbar.is-on .topbar-name { opacity: 1; }
.js .topbar-name { transition: opacity 200ms ease; }
.nav { display: flex; gap: var(--s4); font-size: 13.5px; }
.nav a {
  color: rgba(255, 255, 255, 0.82); text-decoration: none;
  border-bottom: 1px solid transparent; padding: 3px 0;
}
.nav a:hover, .nav a:focus-visible { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.topbar .lang-sw { font-size: 13px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.topbar .lang-sw [aria-current="true"] { color: #FFFFFF; font-weight: 600; }
.topbar .lang-sw a {
  padding: 4px 3px; display: inline-block; color: #FFFFFF;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.topbar .lang-sw a:hover { text-decoration-color: #FFFFFF; }
.topbar .sep { color: rgba(255, 255, 255, 0.4); }
.topbar a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ---------- footer ---------- */
.footer { background: var(--accent); color: #FFFFFF; padding: var(--s7) 0 var(--s6); }
.footer .inner { grid-template-columns: 150px minmax(0, 1fr); }
.footer .side { color: rgba(255,255,255,0.66); }
.footer h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var(--s3); color: #FFFFFF;
}
.footer p { color: rgba(255,255,255,0.86); max-width: 54ch; }
.footer a { color: #FFFFFF; text-decoration-color: rgba(255,255,255,0.55); }
.footer a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.footer a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 0 var(--s4);
  font-family: var(--sans); font-size: 15px; margin: var(--s3) 0 0;
}
.footer-links a { display: inline-block; padding: 5px 0; }
.footer-foot {
  border-top: 1px solid rgba(255,255,255,0.22); margin-top: var(--s6); padding-top: var(--s3);
  font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,0.72);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); justify-content: space-between;
}

/* ---------- hero ---------- */
.band--hero { padding-top: var(--s6); }
.band--hero .inner { grid-template-columns: 150px minmax(0, 1fr) 280px; }
/* explicit placement: the hero's label cell is empty and collapses, so
   auto placement would otherwise drop the content into the 150px gutter */
.band--hero .side { grid-column: 1; }
.band--hero .col { grid-column: 2; grid-row: 1; }
.band--hero .hero-portrait { grid-column: 3; grid-row: 1; width: 280px; }
.portrait { width: 280px; height: 280px; }

/* not enough room for a label gutter and a portrait, drop the gutter */
@media (max-width: 1180px) {
  .band--hero .inner { grid-template-columns: minmax(0, 1fr) 260px; }
  .band--hero .col { grid-column: 1; }
  .band--hero .hero-portrait { grid-column: 2; width: 260px; }
  .band--hero .portrait { width: 260px; height: 260px; }
}
.name {
  font-weight: 300; font-size: clamp(38px, 6.4vw, 52px);
  letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 var(--s3);
}
.pitch {
  font-weight: 300; font-size: clamp(22px, 3.4vw, 27px);
  letter-spacing: -0.02em; line-height: 1.35;
  margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty;
}
.pitch > span { display: block; }
.ask { font-weight: 600; margin: 0 0 6px; }
.alt { font-size: 16px; color: var(--ink-2); margin: 0 0 var(--s4); }

.facts { background: var(--paper-2); padding: var(--s3); margin: 0 0 var(--s4); }
.facts table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 14px; }
.facts th { font-weight: 600; text-align: left; white-space: nowrap; }
.facts th, .facts td { padding: 6px var(--s2) 6px 0; vertical-align: baseline; }
.facts td:first-of-type { color: var(--ink-2); }
.facts td:last-child { padding-right: 0; text-align: right; white-space: nowrap; color: var(--ink-2); }

.inline-links {
  font-family: var(--sans); font-size: 15px;
  display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin: 0;
}
.inline-links a, .files a, .files span { display: inline-block; padding: 4px 0; }

/* ---------- links ---------- */
a {
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-thickness 120ms ease;
}
a:hover { color: var(--accent-h); text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- section headings ---------- */
.head {
  position: relative; font-weight: 400; font-size: clamp(28px, 4.4vw, 36px);
  letter-spacing: -0.02em; line-height: 1.12;
  margin: 0 0 var(--s4); padding-bottom: 14px;
}
.head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink); transform-origin: left center;
}
.standfirst {
  font-family: var(--sans); font-size: 14px; color: var(--ink-2);
  margin: calc(var(--s4) * -1 + 4px) 0 var(--s4); max-width: var(--measure);
}
.sub { font-weight: 600; font-size: 22px; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 var(--s2); }
.label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s1);
}
p { margin: 0 0 var(--s2); max-width: var(--measure); }

/* ---------- work entries ---------- */
.entry { padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.entry:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.mrow {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--s2);
  font-size: 16.5px; color: var(--ink-2); margin: 0 0 var(--s2); max-width: var(--measure);
}
.mrow dt {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase; padding-top: 5px;
}
.mrow dd { margin: 0; }
.files {
  font-family: var(--sans); font-size: 15px; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin: var(--s2) 0 0;
}
.caveat { font-family: var(--sans); font-size: 13px; font-style: italic; color: var(--ink-2); margin: var(--s2) 0 0; }

/* ---------- about ---------- */
/* ---------- stat row ---------- */
.stats {
  background: var(--paper-2); padding: 22px var(--s3); margin: 0 0 var(--s3);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stats div { margin: 0; }
.stats dt {
  font-family: var(--serif); font-weight: 400; font-size: 29px;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums; margin: 0 0 6px;
}
.stats dd {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
  line-height: 1.45; margin: 0;
}

/* ---------- sticky contact bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: 8px var(--s4); font-family: var(--sans); font-size: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  visibility: hidden; opacity: 0; transform: translateY(-100%);
}
.bar.is-on { visibility: visible; opacity: 1; transform: translateY(0); }
.bar .bar-in {
  width: 100%; max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}
.bar .bar-name { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.bar .bar-rt { display: flex; align-items: center; gap: var(--s3); font-size: 13px; color: var(--ink-2); }
.bar a { display: inline-block; padding: 5px 0; }
.bar .bar-rt [aria-current="true"] { color: var(--ink); font-weight: 600; }
html { scroll-padding-top: 64px; }

/* ---------- entries: education, experience ---------- */
.item { margin: 0 0 var(--s4); }
.item:last-child { margin-bottom: 0; }
.item h3 { font-weight: 600; font-size: 19px; margin: 0 0 2px; letter-spacing: -0.01em; }
.meta { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); margin: 0 0 var(--s1); }
.item p { font-size: 17.5px; margin: 0; }
.item ul { margin: var(--s1) 0 0; padding-left: 20px; max-width: var(--measure); }
.item li { font-size: 17.5px; margin-bottom: var(--s1); }

/* ---------- skills ---------- */
.skills { margin: 0; }
.skills div { display: grid; grid-template-columns: 112px 1fr; gap: var(--s2); margin-bottom: var(--s2); max-width: var(--measure); }
.skills dt {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-2); padding-top: 6px;
}
.skills dd { margin: 0; font-size: 17.5px; }

/* ---------- footer ---------- */
footer a { display: inline-block; padding: 5px 0; }
footer {
  margin-top: var(--s8); padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 13px; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: space-between;
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .inner { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: 0 var(--s4); }
  .side { position: static; margin: 0 0 var(--s2); }
  .footer .inner { grid-template-columns: minmax(0, 1fr); }
  .band--hero .inner { grid-template-columns: minmax(0, 1fr); }
  .band--hero .inner { display: flex; flex-direction: column; }
  .band--hero .inner { display: flex; flex-direction: column; }
  .hero-portrait, .band--hero .hero-portrait { order: -1; width: 140px; margin-bottom: var(--s1); }
  .portrait, .band--hero .portrait { width: 140px; height: 140px; }
  .nav { display: none; }
  .topbar-in { padding: 0 var(--s4); gap: var(--s2); }
  .topbar-name { opacity: 1; }
  .band { padding: var(--s6) 0; }
}

@media (max-width: 700px) {
    .facts table, .facts tbody, .facts tr, .facts th, .facts td { display: block; }
  .facts tr { padding: var(--s1) 0; border-bottom: 1px solid var(--rule); }
  .facts tr:last-child { border-bottom: none; }
  .facts th, .facts td { padding: 1px 0; }
  .facts td:last-child { text-align: left; }
  .mrow, .skills div { grid-template-columns: 1fr; gap: 2px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; padding: 18px var(--s2); }
  .stats dt { font-size: 25px; }
  .bar { padding: 6px var(--s3); }
  .bar .bar-name { font-size: 15px; }
  .bar .bar-rt { gap: var(--s2); font-size: 12px; }
  .mrow dt, .skills dt { padding-top: 0; }
  .files, .inline-links { flex-direction: column; gap: 0; }
  .files a, .files span, .inline-links a { padding: 7px 0; }
}

/* ---------- print ---------- */
@media print {
  @page { margin: 16mm; }
  body { font-size: 10.5pt; line-height: 1.4; color: #000; background: #fff; }
  .page { max-width: none; padding: 0; }
  .lang, .skip, footer, .bar { display: none; }
  .stats { background: none; border: 1px solid #999; padding: 6pt; }
  .head { border-bottom: 1px solid #000; }
  section { padding-top: 18pt; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after, a[href^="mailto"]::after {
    content: " (" attr(href) ")"; font-family: var(--sans); font-size: 8pt; color: #444;
  }
  a[href^="#"]::after { content: ""; }
  .facts { background: none; border: 1px solid #999; padding: 8pt; }
  .entry, .item, .about { break-inside: avoid; page-break-inside: avoid; }
  .head { break-after: avoid; page-break-after: avoid; }
  .name { font-size: 22pt; }
  .pitch { font-size: 13pt; }
}

/* ---------- visually hidden ---------- */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ==========================================================================
   Motion. Applies only when JavaScript is present, and never under
   prefers-reduced-motion. Nothing here hides, delays or moves content:
   the only animated thing is a decorative rule and the sticky bar.
   ========================================================================== */
.js .head::after { transform: scaleX(0); }
.js .head.seen::after {
  transform: scaleX(1);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .bar { transition: transform 200ms ease, opacity 200ms ease, visibility 200ms; }

@media (prefers-reduced-motion: reduce) {
  .js .head::after,
  .js .head.seen::after { transform: scaleX(1); transition: none; }
  .js .bar, .bar { transition: none; }
  a { transition: none; }
  * { animation: none !important; scroll-behavior: auto !important; }
}