/* bibisipra.com — /resume/ page styles. Loaded after site.css; reuses its
   palette (near-black, Roboto/Poppins, #4c64e9 blue) and .btn / .eyebrow / .wrap. */

body.resume { background: var(--black); }
body.resume .wrap { max-width: calc(1080px + 48px); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.topbar__brand { font: 700 16px/1.2 var(--poppins); color: var(--white); text-decoration: none; letter-spacing: -.2px; }
.topbar__brand:hover { color: var(--blue-text); }
.topbar__nav { display: flex; align-items: center; gap: 22px; }
.topbar__nav a:not(.btn) { color: var(--text); font-size: 14px; text-decoration: none; }
.topbar__nav a:not(.btn):hover { color: var(--white); }
.btn--sm { padding: 9px 18px; font-size: 14px; }

/* ---------- header ---------- */
.rhead { padding-block: 64px 48px; border-bottom: 1px solid var(--rule); }
.rhead .wrap { display: grid; grid-template-columns: 128px 1fr; gap: 32px; align-items: start; }
.rhead__photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--rule); }
.rhead h1 { font-size: clamp(36px, 4.6vw, 52px); line-height: 1.08; margin-bottom: 10px; }
.rhead__title { font: 300 clamp(19px, 2.2vw, 24px)/1.35 var(--roboto); letter-spacing: -.4px; color: var(--text-strong); margin-bottom: 18px; max-width: 760px; }
.rhead__meta { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 15px; }
.rhead__meta li { display: inline-block; }
.rhead__meta li + li::before { content: "·"; color: var(--blue-text); margin-inline: 12px; }
.rhead__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- body: sticky aside + main ---------- */
.rbody { padding-block: 48px 80px; }
.rbody .wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.rside { position: sticky; top: 84px; }
.rside h2 { font: 700 13px/1.4 var(--poppins); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-text); margin: 0 0 12px; }
.rside > div + div { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.rside__nav { list-style: none; margin: 0; padding: 0; }
.rside__nav li { padding: 5px 0; }
.rside__nav a { color: var(--text); text-decoration: none; font-size: 15px; }
.rside__nav a:hover { color: var(--white); }
.facts { margin: 0; }
.facts dt { font: 700 14px/1.4 var(--roboto); color: var(--white); margin-top: 14px; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.6; }
.rside .btn { width: 100%; }
.rside .btn + .btn { margin-top: 10px; }

/* ---------- sections ---------- */
.rsec { padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--rule); scroll-margin-top: 84px; }
.rsec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rsec > h2 { font-size: clamp(27px, 3.2vw, 34px); line-height: 1.12; margin-bottom: 22px; padding-top: 16px; position: relative; }
.rsec > h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 2px; background: var(--blue); }
.rsec h3 { font-size: 20px; letter-spacing: -.4px; line-height: 1.3; margin: 0 0 8px; }
.rsec ul { margin: 0 0 1em; padding-left: 22px; }
.rsec li { margin-bottom: 8px; }
.rsec li::marker { color: var(--blue-text); }
.lead { font-size: 18px; color: var(--text-strong); line-height: 1.7; }

/* key-value groups (roles, industries) */
.kv { margin-bottom: 26px; }
.kv:last-child { margin-bottom: 0; }
.kv h3 { font-size: 17px; margin-bottom: 10px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { margin: 0; padding: 6px 13px; border: 1px solid var(--field-border); border-radius: 100px; font-size: 14px; line-height: 1.4; color: var(--text-strong); }

/* expertise blocks: two columns on desktop */
.xp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; }
.xp h3 { font-size: 19px; }
.xp p { font-size: 15.5px; line-height: 1.7; margin: 0; }

/* experience entries */
.job { margin-bottom: 36px; }
.job:last-child { margin-bottom: 0; }
.job__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; margin-bottom: 6px; }
.job__head h3 { margin: 0; font-size: 22px; }
.job__dates { font: 700 13px/1.4 var(--poppins); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-text); white-space: nowrap; }
.job__org { font-size: 16px; color: var(--text-strong); margin-bottom: 8px; }
.job__note { font-size: 15.5px; margin-bottom: 10px; }
.job--sub { margin-left: 0; padding-left: 22px; border-left: 2px solid var(--rule); }
.job--sub .job__head h3 { font-size: 19px; }
.job--sub .job__head h4 { margin: 0; font: 600 19px/1.3 var(--roboto); letter-spacing: -.4px; color: var(--white); }
.job ul { padding-left: 20px; }
.job li { font-size: 15.5px; line-height: 1.7; }
.job__ladder { font-size: 15px; color: var(--text-strong); margin-bottom: 8px; }
.job__ladder b { color: var(--white); font-weight: 600; }

/* education / tools list */
.edu li b { color: var(--white); font-weight: 600; }

/* FAQ as plain headings (visible to crawlers and in print) */
.rfaq h3 { font-size: 18px; margin-top: 22px; }
.rfaq h3:first-of-type { margin-top: 0; }
.rfaq p { font-size: 15.5px; line-height: 1.7; }

/* availability panel */
.avail { border-left: 3px solid var(--blue); background: rgba(76,100,233,.07); padding: 20px 24px; }
.avail dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; }
.avail dt { font: 700 14px/1.6 var(--roboto); color: var(--white); }
.avail dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.avail .btn { margin-top: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .rbody .wrap { grid-template-columns: 1fr; gap: 40px; }
  .rside { position: static; }
  .rside__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .rside .btn { width: auto; }
  .rside .btn + .btn { margin: 0 0 0 10px; }
}
@media (max-width: 767px) {
  .topbar__nav a:not(.btn) { display: none; }
  .rhead { padding-block: 40px 32px; }
  .rhead .wrap { grid-template-columns: 1fr; gap: 20px; }
  .rhead__photo { width: 96px; height: 96px; }
  .rhead__meta li { display: block; }
  .rhead__meta li + li::before { content: none; }
  .xp-grid { grid-template-columns: 1fr; }
  .job__head { flex-direction: column; }
  .job--sub { padding-left: 16px; }
  .avail dl { grid-template-columns: 1fr; gap: 2px 0; }
  .avail dt { margin-top: 10px; }
  .avail dt:first-child { margin-top: 0; }
  .rsec { padding-bottom: 40px; margin-bottom: 40px; }
}

/* ---------- print: a clean one-column résumé ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  body.resume, body.resume .rhead, body.resume .rbody { background: #fff !important; color: #222; }
  .topbar, .rhead__actions, .rside__navwrap, .rside .btn, .site-footer, .skip-link, .avail .btn { display: none !important; }
  body.resume { font-size: 10.5pt; line-height: 1.4; }
  body.resume p, body.resume li, body.resume dd, body.resume dt, .lead { color: #222; }
  .lead { font-size: 11pt; }
  .rsec li { margin-bottom: 3pt; }
  .job { margin-bottom: 12pt; }
  .xp-grid { gap: 8pt 18pt; }
  .wrap { max-width: none; padding: 0; }
  .rhead { padding: 0 0 14pt; border-bottom: 1px solid #999; }
  .rhead .wrap { grid-template-columns: 72pt 1fr; gap: 16pt; }
  .rhead__photo { width: 72pt; height: 72pt; border-color: #ccc; }
  .rhead h1 { font-size: 24pt; color: #000; }
  .rhead__title { font-size: 13pt; color: #222; }
  .rhead__meta { font-size: 10pt; color: #333; margin-bottom: 0; }
  .rhead__meta li + li::before { color: #666; }
  .rbody { padding: 12pt 0 0; }
  .rbody .wrap { grid-template-columns: 1fr; gap: 0; }
  .rside { position: static; margin-bottom: 12pt; padding-bottom: 10pt; border-bottom: 1px solid #ccc; }
  .rside > div + div { margin-top: 8pt; padding-top: 0; border-top: 0; }
  .rside h2 { color: #333; font-size: 9pt; margin-bottom: 4pt; }
  .facts { display: grid; grid-template-columns: 90pt 1fr; gap: 3pt 12pt; }
  .facts dt { color: #000; margin-top: 4pt; font-size: 10pt; }
  .facts dd { font-size: 10pt; color: #333; }
  h1, h2, h3, h4 { color: #000 !important; }
  .rsec { padding-bottom: 10pt; margin-bottom: 12pt; border-bottom: 1px solid #ddd; break-inside: auto; }
  .rsec > h2 { font-size: 15pt; padding-top: 8pt; margin-bottom: 8pt; }
  .rsec > h2::before { background: #000; }
  .rsec h3, .job__head h3, .job--sub .job__head h4 { font-size: 11.5pt; }
  .job__dates { color: #444; }
  .job__org, .job__note, .job li, .xp p, .rfaq p, .avail dd, .facts dd, .edu li, .kv li { color: #222; font-size: 10.5pt; }
  .job--sub { border-left-color: #ccc; }
  .job { break-inside: avoid; }
  .chips li { border-color: #999; color: #222; font-size: 9.5pt; padding: 2pt 8pt; }
  .avail { border-left-color: #000; background: #f3f3f3; }
  .avail dt { color: #000; }
  a { color: #222; text-decoration: none; }
  .rfaq, .rsec--faq { break-before: page; }
}