/* Résumé: one paper sheet that reads well on screen and prints to a two-page Letter PDF.
   Same type family as showcase.faisal.one, restrained to ink + one chili accent. */
:root {
  --canvas: #EFEAE3;
  --canvas-ink: #2A231D;
  --canvas-muted: #6F655B;
  --paper: #FFFFFF;
  --ink: #17120E;
  --ink-2: #3A322B;
  --muted: #6E645A;
  --rule: #E7DFD4;
  --accent: #B8361F;
  --btn: #17120E;
  --btn-ink: #FFFFFF;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --canvas: #0E0B09; --canvas-ink: #F5EEE6; --canvas-muted: #B3A595; --btn: #FFB81C; --btn-ink: #1A1200; }
}
:root[data-theme="dark"] { --canvas: #0E0B09; --canvas-ink: #F5EEE6; --canvas-muted: #B3A595; --btn: #FFB81C; --btn-ink: #1A1200; }

* { box-sizing: border-box }
html { background: var(--canvas) }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased }
a { color: inherit }
h1, h2, h3, p, ul, dl, dd { margin: 0 }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px }

/* ---------- screen chrome */
.bar { max-width: 940px; margin: 0 auto; padding: 28px 20px 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; justify-content: space-between; color: var(--canvas-ink) }
.bar-name { font: 400 26px/1 var(--serif); text-decoration: none; padding-top: 8px }
.bar-name span { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--canvas-muted); margin-left: 8px; vertical-align: 4px }
.bar-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start }
.bar-link { font: 600 14px var(--sans); text-decoration: none; padding: 12px 4px; color: var(--canvas-ink) }
.bar-link:hover { text-decoration: underline }
.dl { display: grid; justify-items: end; gap: 7px }
.btn { display: inline-flex; gap: 8px; align-items: center; background: var(--btn); color: var(--btn-ink); text-decoration: none; font: 600 14px var(--sans); padding: 12px 20px; border-radius: 999px; transition: transform .2s ease }
.btn:hover { transform: translateY(-1px) }
.dl-stat { font: 500 11px/1.4 var(--mono); color: var(--canvas-muted); min-height: 15px; text-align: right }
.foot { max-width: 940px; margin: 0 auto; padding: 26px 20px 56px; color: var(--canvas-muted); font-size: 13px; text-align: center }

/* ---------- the sheet */
.sheet { max-width: 900px; margin: 0 auto; background: var(--paper); padding: 64px 72px 72px; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(23, 18, 14, .06), 0 30px 70px -30px rgba(23, 18, 14, .35) }

.cv-head { border-bottom: 1px solid var(--rule); padding-bottom: 22px; margin-bottom: 22px }
.cv-head h1 { font: 400 54px/.95 var(--serif); letter-spacing: -.01em }
.role { font: 600 15px/1.3 var(--sans); color: var(--accent); margin-top: 10px }
.links, .contact { font-size: 13.5px; color: var(--ink-2); margin-top: 8px }
.links { margin-top: 14px }
.links a { font-weight: 600; text-decoration-color: rgba(184, 54, 31, .45); text-underline-offset: 3px }
.contact a { text-decoration: none }
.sheet i { font-style: normal; color: var(--muted); margin: 0 .2em }
.cv-head i { margin: 0 .35em }
.label { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px }

.summary p { font-size: 15px; line-height: 1.6; color: var(--ink-2) }
.summary strong { color: var(--ink); font-weight: 600 }

.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 24px 0 6px; border-block: 1px solid var(--rule) }
.numbers div { padding: 16px 16px 16px 0; display: grid; gap: 4px; align-content: start }
.numbers div:not(:nth-child(3n+1)) { padding-left: 16px; border-left: 1px solid var(--rule) }
.numbers div:nth-child(n+4) { border-top: 1px solid var(--rule) }
.numbers b { font: 400 34px/1 var(--serif); color: var(--ink) }
.numbers span { font-size: 12px; line-height: 1.4; color: var(--muted) }

.block { margin-top: 30px }
.block h2 { display: flex; align-items: center; gap: 12px; font: 600 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px }
.block h2::after { content: ""; flex: 1; height: 1px; background: var(--rule) }
h3 { font: 600 15px/1.35 var(--sans); color: var(--ink) }
h3 span, .meta { font-weight: 500; color: var(--muted) }
.meta { font: 500 11px var(--mono); letter-spacing: .02em; margin-left: 8px; white-space: nowrap }

.proj { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 18px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--rule) }
.proj:last-child { border-bottom: 0 }
.thumb { display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--rule) }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.proj p { font-size: 14px; color: var(--ink-2); margin-top: 3px }
.proj p b { font-weight: 600; color: var(--ink) }
.case { font: 600 11px var(--mono); color: var(--accent); text-decoration: none; white-space: nowrap; padding-top: 3px }
.case:hover { text-decoration: underline }

.job { padding: 4px 0 14px }
.job + .job { padding-top: 14px; border-top: 1px solid var(--rule) }
.job header, .edu { display: flex; justify-content: space-between; gap: 6px 18px; align-items: baseline; flex-wrap: wrap }
.job h3 span, .edu h3 span { margin-left: .4em }
.job h3 span::before, .edu h3 span::before { content: "·"; color: var(--muted); margin-right: .45em }
.when { font: 500 11px var(--mono); color: var(--muted); white-space: nowrap }
.where { font-size: 12.5px; color: var(--muted); margin-top: 1px }
.job ul { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 5px }
.job li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ink-2) }
.job li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 1.5px; background: var(--accent) }

.skills { display: grid; gap: 9px }
.skills div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px }
.skills dt { font-weight: 600; font-size: 13.5px }
.skills dd { font-size: 13.5px; color: var(--ink-2) }
.edu { padding: 4px 0 8px }
.edu + .edu { padding-top: 8px; border-top: 1px solid var(--rule) }

/* ---------- small screens */
@media (max-width: 760px) {
  .bar { padding: 22px 16px 16px }
  .bar-actions, .dl { width: 100%; justify-items: start }
  .bar-actions { justify-content: space-between }
  .dl-stat { text-align: left }
  .sheet { padding: 34px 20px 40px; border-radius: 0; box-shadow: none }
  .cv-head h1 { font-size: 42px }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .numbers div { padding-left: 0 !important; border-left: 0 !important; border-top: 0 }
  .numbers div:nth-child(even) { padding-left: 16px !important; border-left: 1px solid var(--rule) !important }
  .numbers div:nth-child(n+3) { border-top: 1px solid var(--rule) }
  .proj { grid-template-columns: 52px minmax(0, 1fr) }
  .thumb { width: 52px; height: 52px }
  .case { grid-column: 2 }
  .meta { display: block; margin: 2px 0 0; white-space: normal }
  .skills div { grid-template-columns: minmax(0, 1fr); gap: 2px }
}

/* ---------- print: two US Letter pages, text only */
@page { size: Letter; margin: .5in .58in .5in }
@media print {
  html, body { background: #fff }
  body { font-size: 9.4pt; line-height: 1.42; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .screen-only { display: none !important }
  .sheet { max-width: none; padding: 0; box-shadow: none; border-radius: 0 }
  a { text-decoration: none }
  .cv-head { padding-bottom: 12pt; margin-bottom: 12pt }
  .cv-head h1 { font-size: 34pt }
  .role { font-size: 10.5pt; margin-top: 6pt }
  .links, .contact { font-size: 9pt; margin-top: 5pt }
  .links { margin-top: 9pt }
  .links a { text-decoration: underline; text-decoration-color: rgba(184, 54, 31, .45) }
  .label { font-size: 7pt; letter-spacing: .06em }
  .summary p { font-size: 9.6pt; line-height: 1.5 }
  .numbers { margin: 13pt 0 2pt }
  .numbers div { padding: 6pt 10pt 6pt 0 } .numbers div:not(:nth-child(3n+1)) { padding-left: 10pt }
  .numbers b { font-size: 21pt }
  .numbers span { font-size: 7.8pt }
  .block { margin-top: 15pt }
  .block h2 { font-size: 7.8pt; letter-spacing: .07em; margin-bottom: 7pt }
  h3 { font-size: 9.8pt }
  .meta, .when, .case { font-size: 7.2pt }
  .proj { grid-template-columns: minmax(0, 1fr) auto; padding: 6pt 0; break-inside: avoid }
  .proj p { font-size: 9pt }
  .exp { break-before: page; margin-top: 0 }
  .job { padding: 1pt 0 6.5pt; break-inside: avoid }
  .job + .job { padding-top: 6.5pt }
  .where { font-size: 8.3pt }
  .job ul { margin-top: 3.5pt; gap: 2pt }
  .job li { font-size: 9pt; padding-left: 11pt }
  .skills { gap: 3.5pt }
  .skills div { grid-template-columns: 96pt minmax(0, 1fr); gap: 10pt }
  .skills dt, .skills dd { font-size: 8.8pt }
  .edu { padding: 2pt 0 5pt } .edu + .edu { padding-top: 5pt }
  .skills, .edu { break-inside: avoid }
  h2 { break-after: avoid }
}

/* printed copy: QR to the showcase in the header's top-right corner */
.print-only { display: none }
.cv-head { position: relative }
.qr { position: absolute; right: 0; top: 2px; width: 76px; text-align: center }
.qr img { display: block; width: 72px; height: 72px; margin: 0 auto }
.qr span { display: block; margin-top: 5px; font: 600 7px/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
@media print { .print-only { display: block } }