/* CV: A4 pages that look like the Website_inspo references.
   Frame: IE-window profile page. Page 1 left: JTA character-select panel. Experience/side boxes:
   Golf Channel 2002. Page 3: Xfire 2005 header, tabs, 3-column boxes and table.
   Section order/format: CV_example_formats (Harshal header+education columns, MY RESUME windows). */

@font-face { font-family: "DejaVu Sans"; src: url("../fonts/DejaVuSans.cc596b57e205.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "DejaVu Sans"; src: url("../fonts/DejaVuSans-Bold.7a03034a2505.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "VT323"; src: url("../fonts/VT323.9cb03ff10174.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-400.5eef6cee3f3d.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-700.658004a4448e.woff2") format("woff2"); font-weight: 700; }

:root {
  --font-body: "DejaVu Sans", Verdana, sans-serif;
  --font-pixel: "VT323", monospace;
  --font-jta: "Silkscreen", "VT323", monospace;

  --ie-navy: #0e1a6e;
  --ie-ground: #c3c3c3;
  --ie-panel: #d8d8d8;
  --ie-light: #f0f0f0;
  --ie-dark: #7d7d7d;
  --ie-label: #10208a;

  --gc-navy: #0b1a78;
  --gc-line: #9aa3c7;
  --gc-link: #0b2aa8;

  --xf-blue-1: #9cc3ef;
  --xf-blue-2: #3a6fb8;
  --xf-blue-3: #173f80;
  --xf-line: #7f9fcb;
  --xf-zebra: #edf3fb;
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; background: #59687b; font: 8.3pt/1.38 var(--font-body); color: #111; }
a { color: var(--gc-link); }
p { margin: 0; }
.muted { color: #555; }

/* screen-only toolbar */
.cv-toolbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: #d4d0c8; border-bottom: 1px solid #808080; font: 12px var(--font-body);
}
.cv-toolbar__spacer { flex: 1; }
.cv-toolbar a, .cv-toolbar button {
  font: inherit; color: #111; text-decoration: none; padding: 4px 12px; background: #d4d0c8; border: 0; cursor: pointer;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}

/* ---------- A4 page + IE window frame ---------- */
@page { size: A4; margin: 0; }
.page { width: 210mm; height: 297mm; margin: 12px auto; padding: 6mm; background: #fff; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.ie { height: 100%; display: flex; flex-direction: column; border: 2px solid #2a2a2a; background: var(--ie-ground); box-shadow: inset 1px 1px 0 #fff; }
.ie__title {
  display: flex; justify-content: space-between; align-items: center; padding: 1mm 2.5mm;
  background: var(--ie-navy); color: #fff; font: 15pt/1 var(--font-pixel); letter-spacing: .6px;
}
.ie__boxes { display: flex; gap: 1.2mm; }
.ie__boxes i { display: grid; place-items: center; width: 5mm; height: 4.4mm; font: normal 11pt/1 var(--font-pixel); color: #111; background: var(--ie-panel); box-shadow: inset -1px -1px #333, inset 1px 1px #fff; }
.ie__menu, .ie__addr { display: flex; border-bottom: 2px solid var(--ie-dark); font: 13pt/1 var(--font-pixel); }
.ie__menu span { flex: 1; padding: 1.2mm 3mm; text-align: center; background: var(--ie-panel); border-right: 2px solid var(--ie-dark); }
.ie__menu span:first-child { text-align: left; }
.ie__menu span:last-child { border-right: 0; text-align: right; }
.ie__addr { background: var(--ie-panel); }
.ie__addr-label { padding: 1.2mm 3mm; border-right: 2px solid var(--ie-dark); }
.ie__addr-field { flex: 1; margin: .8mm 1.2mm; padding: .4mm 2mm; background: #fff; box-shadow: inset 1px 1px #555, inset -1px -1px #eee; }
.ie__body { flex: 1; min-height: 0; padding: 2.4mm; display: flex; flex-direction: column; gap: 2.4mm; }

/* IE-profile style grey boxes */
.ie-box { background: var(--ie-panel); border: 2px solid var(--ie-light); outline: 1px solid var(--ie-dark); padding: 2mm 2.6mm; }
.ie-box__head { margin: 0 0 1.2mm; padding-bottom: 1mm; border-bottom: 2px solid #555; font: 700 8.6pt/1.2 var(--font-body); letter-spacing: .8px; }
.ie-box__text { text-align: justify; }

/* ---------- Page 1: JTA panel + profile ---------- */
.p1-top { display: grid; grid-template-columns: 52mm 1fr; gap: 2.4mm; }
.jta { background: #fff; border: 2px solid #111; padding: 2.4mm; display: flex; flex-direction: column; gap: 1.8mm; }
.jta__title { margin: 0; text-align: center; font: 700 9.6pt/1.1 var(--font-jta); font-style: italic; transform: skewX(-8deg); letter-spacing: .5px; }
.jta__portrait { margin: 0; padding: 1.6mm; background: #ededed; border: 1px solid #999; box-shadow: inset 1px 1px #fff; }
.jta__portrait img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 22%; border: 1px solid #777; }
.jta__portrait figcaption { margin-top: 1.4mm; text-align: center; font: 700 9pt/1 var(--font-jta); font-style: italic; color: #777; transform: skewX(-8deg); }
.jta__stats { margin: 0; padding: 1.4mm 0; border-top: 2px solid #111; border-bottom: 2px solid #111; }
.jta__stats div { display: flex; justify-content: space-between; font: 7.6pt/1.6 var(--font-jta); }
.jta__stats dd { margin: 0; }
.jta__inv-title { margin: 0; text-align: center; font: 700 10pt/1 var(--font-jta); font-style: italic; transform: skewX(-8deg); }
.jta__inv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid #111; }
.jta__inv li { display: flex; flex-direction: column; align-items: center; gap: .8mm; padding: 1.6mm .8mm; border: 1px solid #111; font: 6.8pt/1.1 var(--font-jta); text-align: center; }
.jta__inv img { width: 9mm; height: 9mm; image-rendering: pixelated; }

.p1-right { display: flex; flex-direction: column; gap: 2.4mm; }
.profile { background: var(--ie-panel); border: 2px solid var(--ie-light); outline: 1px solid var(--ie-dark); padding: 2.4mm 3mm; }
.profile__name { margin: 0; font: 700 16pt/1.1 var(--font-body); color: var(--ie-label); }
.profile__headline { margin-top: .6mm; font-size: 9pt; }
.profile__ceo { margin: 1.2mm 0 1.6mm; padding: 1mm 2mm; background: #fff; border-left: 3px solid var(--ie-label); font-size: 9pt; }
.profile__facts { margin: 0; display: grid; gap: .5mm; }
.profile__facts div { display: grid; grid-template-columns: 18mm 1fr; }
.profile__facts dt { font-weight: 700; color: var(--ie-label); }
.profile__facts dd { margin: 0; }

/* education: three columns (Harshal format) */
.edu { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 3mm; }
.edu__col { padding-right: 2mm; border-right: 1px solid #999; }
.edu__col:last-child { border-right: 0; }
.edu__title { font-weight: 700; color: var(--ie-label); }

/* small window (MY RESUME format) in IE style */
.mini-win { background: var(--ie-panel); border: 2px solid #2a2a2a; }
.mini-win__bar { padding: .8mm 2.4mm; background: var(--ie-navy); color: #fff; font: 12pt/1 var(--font-pixel); letter-spacing: .6px; }
.mini-win__body { padding: 2mm 2.6mm; }
.skills { margin: 0; padding: 2mm 2.6mm; display: grid; grid-template-columns: 1fr 1fr; gap: .6mm 5mm; }
.skills div { display: grid; grid-template-columns: 34mm 1fr; }
.skills dt { font-weight: 700; color: var(--ie-label); }
.skills dd { margin: 0; }

/* ---------- Golf Channel boxes ---------- */
.gc-section { margin: .4mm 0 -1mm; font: 700 9pt/1.1 var(--font-body); color: var(--gc-navy); letter-spacing: 1px; }
.gc-box { background: #fff; border: 1px solid var(--gc-navy); }
.gc-box__head {
  display: flex; justify-content: space-between; align-items: stretch; margin: 0; padding: 0 0 0 2.4mm;
  background: var(--gc-navy); color: #fff; font: 700 8.2pt/1.2 var(--font-body);
}
.gc-box__head > span:first-child { padding: .9mm 0; }
.gc-box__right { display: flex; align-items: center; padding: 0 2.4mm 0 6mm; background: #b9bfd8; color: var(--gc-navy); font-weight: 400; white-space: nowrap; }
.gc-box__body { padding: 1.6mm 2.4mm 2mm; }
.job__org { color: #444; }
.job__role { margin-top: .4mm; color: var(--gc-navy); }
.job__role--sub { padding-left: 3mm; font-size: 7.8pt; }
.tri-list { list-style: none; margin: 1.2mm 0 0; padding: 0; }
.tri-list li { position: relative; padding-left: 3mm; margin-bottom: .5mm; }
.tri-list li::before { content: "‣"; position: absolute; left: 0; color: var(--gc-navy); font-weight: 700; }
.gc-cols { display: grid; grid-template-columns: 1fr 50mm; gap: 2.4mm; flex: 1; min-height: 0; }
.gc-main { display: flex; flex-direction: column; gap: 2.4mm; }
.gc-side { display: flex; flex-direction: column; gap: 2.4mm; }
.gc-side .gc-box__head { background: var(--gc-navy); justify-content: center; padding: .9mm 1.6mm; font-size: 7.6pt; letter-spacing: .2px; }
.pub { margin-bottom: 1.6mm; }
.pub__venue { color: var(--gc-link); font-weight: 700; }
.gc-dates { width: 100%; border-collapse: collapse; font-size: 7.5pt; }
.gc-dates th, .gc-dates td { text-align: left; vertical-align: top; padding: .5mm .6mm; border-bottom: 1px dotted var(--gc-line); }
.gc-dates th { white-space: nowrap; color: var(--gc-navy); padding-right: 2mm; }

/* ---------- Page 3: Xfire ---------- */
.xf-head { background: linear-gradient(#e9f2fc, var(--xf-blue-1) 45%, #6f9ad6); border: 1px solid var(--xf-blue-3); }
.xf-head__name { padding: 2.4mm 3mm .4mm; font: italic 700 17pt/1 var(--font-body); color: var(--xf-blue-3); letter-spacing: -.3px; text-shadow: 1px 1px 0 #fff; }
.xf-head__tag { padding: 0 3mm 1.6mm 3.4mm; font: italic 700 8pt/1 var(--font-body); color: #fff; text-shadow: 0 1px 1px var(--xf-blue-3); }
.xf-tabs { display: flex; gap: 1mm; padding: 0 2mm; background: linear-gradient(var(--xf-blue-2), var(--xf-blue-3)); border-top: 1px solid #c6dbf5; }
.xf-tabs span { padding: 1mm 5mm; margin-top: 1mm; background: linear-gradient(#5d8fd2, #2d5ea6); color: #fff; font: 700 7.8pt/1.2 var(--font-body); letter-spacing: .5px; border-radius: 2mm 2mm 0 0; box-shadow: inset 0 1px 0 #a9c8f0; }
.xf-tabs span:first-child { background: linear-gradient(#fff, #dfe9f6); color: var(--xf-blue-3); }
.xf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4mm; }
.xf-box { background: #fff; border: 1px solid var(--xf-line); }
.xf-box__head { margin: 0; padding: .9mm 2.4mm .9mm 4.4mm; position: relative; background: linear-gradient(#f4f8fd, #c9dbf2); border-bottom: 1px solid var(--xf-line); font: 700 8.6pt/1.2 var(--font-body); color: var(--xf-blue-3); }
.xf-box__head::before { content: ""; position: absolute; left: 1.6mm; top: 50%; margin-top: -1.1mm; border: 1.1mm solid transparent; border-left: 1.6mm solid var(--xf-blue-2); }
.xf-box__body { padding: 1.4mm 2.2mm 1.8mm; font-size: 7.7pt; }
.xf-box__sub { font-weight: 700; color: var(--xf-blue-2); margin-bottom: .8mm; }
.xf-box__tags { margin-top: 1mm; color: #555; font-size: 7pt; }
.dot-list { list-style: disc; margin: 0; padding-left: 3.4mm; }
.dot-list li { margin-bottom: .4mm; }
.xf-table-wrap { border: 1px solid var(--xf-blue-3); background: #fff; }
.xf-table-title { margin: 0; padding: 1mm 2.4mm; background: linear-gradient(var(--xf-blue-2), var(--xf-blue-3)); color: #fff; font: 700 8.4pt/1.2 var(--font-body); text-align: center; letter-spacing: .6px; }
.xf-table { width: 100%; border-collapse: collapse; font-size: 7.9pt; }
.xf-table th { padding: .8mm 2.4mm; text-align: left; background: linear-gradient(#fafcfe, #dbe6f3); border-bottom: 1px solid var(--xf-line); font-size: 7.2pt; letter-spacing: .4px; }
.xf-table td { padding: .7mm 2.4mm; border-bottom: 1px solid #dde7f4; }
.xf-table tbody tr:nth-child(even) { background: var(--xf-zebra); }
.xf-table td img { width: 3.6mm; height: 3.6mm; object-fit: contain; vertical-align: -0.8mm; margin-right: 1.6mm; }

@media print {
  body { background: none; }
  .cv-toolbar { display: none; }
  .page { margin: 0; box-shadow: none; page-break-after: always; break-after: page; }
  .page:last-child { page-break-after: auto; break-after: auto; }
}

/* narrow screens: scale the fixed A4 pages down instead of scrolling sideways */
@media screen and (max-width: 820px) { .page { zoom: .9; } }
@media screen and (max-width: 720px) { .page { zoom: .78; } }
@media screen and (max-width: 620px) { .page { zoom: .66; } }
@media screen and (max-width: 520px) { .page { zoom: .55; } }
@media screen and (max-width: 430px) { .page { zoom: .46; } }
@media screen and (max-width: 360px) { .page { zoom: .42; } }