/* Old-school notebook résumé on one scrolling page: cloth-bound spine, ruled sheets, blue ballpoint, red margin.
   Writing rule: every line box is 32px (headings 64px) and every vertical gap is a
   multiple of 32px, so all writing sits on the printed lines. No top/bottom borders,
   margins or padding that break the 32px rhythm inside a page; decorative lines use
   box-shadow or pseudo-elements, which take no space. */
@font-face{font-family:"Kalam";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/kalam-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Kalam";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/kalam-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Kalam";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/kalam-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-latin-600-normal.woff2) format("woff2")}

:root{
  --desk:#ECEEF2;
  --paper:#FFFFFF; --paper-edge:#E9ECF2;
  --ink:#1D3C9E;            /* blue ballpoint */
  --ink-soft:#4A63B3;       /* lighter pressure */
  --print:#8A9CC4;          /* printed labels on the page */
  --rule:#B7CDEB;           /* printed blue lines */
  --margin:#DD7373;         /* red margin */
  --u:28px;
  --n1:7px; --n-h2:20px; --n-name:17px; --n-stat:12px; --n-sign:0px; --n-corner:7px; --n-lbl:5px;  /* measured: puts each size of writing on its rule */
  --hand:"Kalam","Segoe Print","Bradley Hand","Comic Neue",cursive;
  --sign:"Caveat","Segoe Script","Bradley Hand",cursive;
  --printface:"Helvetica Neue",Arial,sans-serif;
  --pad-left:104px; --margin-x:80px;
    color-scheme:light;
}
@media (max-width:640px){:root{--pad-left:50px;--margin-x:36px}}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--desk);color:var(--ink);font-family:var(--hand);font-weight:300;font-size:16.5px;line-height:var(--u);
  padding-block:20px 28px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
@media (max-width:640px){body{font-size:15.5px;padding-block:8px 16px;padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}}
h1,h2,h3,p,ul,ol,dl,dd,dt{margin:0;padding:0}
ul,ol{list-style:none}
b,strong,h1,h2,h3{font-weight:700}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
mark{background:none;color:inherit;font-weight:400;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
button{font:inherit;color:inherit}

/* ---------- the notebook: white sheets held by a spiral wire binding on the left ---------- */
.notebook{position:relative;max-width:860px;margin:0 auto;padding-left:20px;
  filter:drop-shadow(0 1px 2px rgba(20,30,60,.12)) drop-shadow(0 14px 22px rgba(20,30,60,.12))}
/* one silver loop through a punched hole on every ruled line */
.binding{position:absolute;left:0;top:0;bottom:0;width:44px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='28' viewBox='0 0 44 28'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.4' stop-color='%23b3bac7'/%3E%3Cstop offset='1' stop-color='%234f586b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='31.5' cy='15' r='3.8' fill='%23c3c9d4'/%3E%3Ccircle cx='31.5' cy='15.8' r='2.9' fill='%238d96a6'/%3E%3Cpath d='M32.2 14 C 23 9.6, 9 8.6, 4.6 12.6 C 2.2 14.9, 3.8 18.4, 8.6 18.9' fill='none' stroke='rgba(20,30,60,.22)' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M31.5 12.6 C 22 8.4, 8.4 7.8, 3.9 11.8 C 1.6 14, 3.1 17.4, 7.9 17.9' fill='none' stroke='url(%23m)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/44px 28px repeat-y}
@media (max-width:640px){.notebook{padding-left:18px}.binding{width:42px;background-position:-2px 0}}
.book{position:relative}
/* the edges of the pages underneath, on the right */
.book::after{content:"";position:absolute;top:3px;bottom:-3px;right:-4px;width:4px;border-radius:0 3px 3px 0;z-index:-1;
  background:repeating-linear-gradient(to right,var(--paper) 0 1px,var(--paper-edge) 1px 2px)}

/* ---------- a page ---------- */
.page{position:relative;background-color:var(--paper);border-radius:2px 5px 5px 2px;
  padding:var(--u) 28px var(--u) var(--pad-left);
  background-image:
    linear-gradient(to right,transparent calc(var(--margin-x) - 6px),var(--margin) calc(var(--margin-x) - 6px) calc(var(--margin-x) - 4.5px),transparent calc(var(--margin-x) - 4.5px) calc(var(--margin-x) - 1.5px),var(--margin) calc(var(--margin-x) - 1.5px) var(--margin-x),transparent var(--margin-x)),
    linear-gradient(to bottom,transparent calc(var(--u) - 1px),var(--rule) calc(var(--u) - 1px));
  background-size:100% 100%,100% var(--u);background-attachment:local,local}
.page + .page{margin-top:var(--u)}
/* ---------- notebook view (script on): fixed-size pages, never scrolled ---------- */
@media (max-width:640px){.page{padding-right:12px}}

/* Sit the ink on the printed line: Kalam's baseline lands 20px into a 32px line box,
   so text is nudged 9px down (visual only). 64px items get a larger nudge. */
.page :is(p,li,dt,dd,.idx-row > span,.stat span){position:relative;top:var(--n1)}
.page h2{position:relative;top:var(--n-h2)}
.page .name{position:relative;top:var(--n-name)}
.page .scrawl{position:relative;top:var(--n-sign)}

/* corner box printed on every page: Page No. ___ Date ___ */
.corner{display:flex;justify-content:flex-end;gap:18px;height:var(--u);margin-right:0}
.corner span{position:relative;top:var(--n-corner);font-size:15px}
.corner .lbl{font-family:var(--printface);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--print);top:var(--n-lbl)}
.corner .val{min-width:56px;white-space:nowrap;text-align:center;font-weight:400;box-shadow:0 1px 0 var(--print)}

h2{font-size:21px;line-height:calc(var(--u)*2);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
h2 small{font-size:16px;line-height:1;font-weight:300;margin-left:6px;color:var(--ink-soft)}
.sub{color:var(--ink-soft);font-style:italic}
.para{text-indent:2.2em}

.pts li{position:relative;padding-left:26px}
.pts li::before{content:"•";position:absolute;left:5px;font-weight:700}
.tech{color:var(--ink-soft)}
.contd{text-align:right;color:var(--ink-soft)}
.gap{height:var(--u)}

/* index page: the printed table at the front of every school notebook */
.idx{margin-top:var(--u)}
.idx-row{display:grid;grid-template-columns:64px 1fr 86px 112px;column-gap:0;text-decoration:none;color:inherit}
a.idx-row:hover{background:rgba(29,60,158,.05)}
.idx-row > span{padding:0 8px;box-shadow:inset 1px 0 0 var(--print);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx-row > span:first-child{box-shadow:none;text-align:center}
.idx-row > span:nth-of-type(3){text-align:center}
.idx-head > span{font-family:var(--printface);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--print);top:var(--n-lbl);text-overflow:clip}
.idx-head .sh{display:none}
.idx-head i,.idx-row i{font-style:normal}
/* text kept for machines and screen readers, hidden on screen */
.sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:pre}
.idx-head .sh::before{content:attr(data-t)}
@media (max-width:640px){.idx-sub .lg{display:none}}
.idx-head{box-shadow:inset 0 1px 0 var(--print),inset 0 -1px 0 var(--print)}
.idx-body{box-shadow:inset 0 -1px 0 var(--print)}
@media (max-width:640px){.idx-row{grid-template-columns:38px 1fr 48px}.idx-row > span:nth-of-type(4){display:none}.idx-row > span{padding:0 4px}.idx-head .lg{display:none}.idx-head .sh{display:inline}}

/* work authorization, inked like a rubber stamp (outline takes no space, so the line stays on its rule) */
.visa{white-space:normal}
@media (max-width:640px){.hl-rest{display:none}}
.lead a[href^="tel:"]{white-space:nowrap}
.stamp{display:inline-block;font-family:var(--printface);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);outline:1.5px solid var(--ink);outline-offset:2px;border-radius:2px;padding:0 6px;line-height:18px;
  margin:0 8px 0 3px}
.visa-note{font-style:italic}
.dl a{font-weight:700;text-decoration-thickness:1.5px}
.dl a:hover{text-decoration-style:wavy}

/* about page, and the photo + name at the top of the index */
.about,.lead{position:relative}
.about::after,.lead::after{content:"";display:block;clear:both}
.lead .photo{position:relative;top:14px}
/* with the bar under the page, the links at the foot of each page are only for no-JavaScript readers */
.photo{float:right;margin:4px 4px 0 16px;width:104px;height:130px;object-fit:cover;object-position:50% 25%;
  border:4px solid #fff;box-shadow:0 0 0 1px rgba(29,60,158,.25),0 4px 10px -4px rgba(0,0,0,.3);transform:rotate(2deg)}
@media (max-width:640px){.photo{width:80px;height:100px;border-width:3px}}
.name{font-size:30px;line-height:calc(var(--u)*2);font-weight:700}
@media (max-width:640px){.name{font-size:24px}}
.about p{overflow-wrap:anywhere}

/* highlights */
.stats{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;row-gap:0}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--sign);font-size:42px;line-height:calc(var(--u)*2);position:relative;top:var(--n-stat)}

/* projects */
.projects li{position:relative;padding-left:32px}
.box{position:absolute;left:2px;top:calc(var(--n1) + 5px);width:18px;height:18px;border:2px solid var(--ink);border-radius:3px 6px 4px 5px}
.box.done::after{content:"";position:absolute;left:3px;top:-7px;width:8px;height:16px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(40deg)}

/* skills */
.kv{display:grid;grid-template-columns:150px 1fr;column-gap:12px}
.kv dt::after{content:" :"}
@media (max-width:640px){.kv{grid-template-columns:1fr}.kv dt{font-weight:700}.kv dd{padding-left:16px}}

/* education table */
.edu{min-width:520px}
.table-wrap{overflow-x:auto;margin-top:var(--u)}
.edu-row{display:grid;grid-template-columns:1.2fr 2fr .55fr .75fr}
.edu-row > span{padding:0 8px;box-shadow:inset 1px 0 0 var(--print)}
.edu-row > span:first-child{padding-left:0;box-shadow:none}
.edu-row > span > i{font-style:normal;position:relative;top:var(--n1)}
.edu-head{box-shadow:inset 0 1px 0 var(--print),inset 0 -1px 0 var(--print);font-weight:700}
.edu{box-shadow:inset 0 -1px 0 var(--print)}

/* cover note: signed at the foot, on the right */
.note-sign{text-align:right;margin-top:var(--u)}
.note-sign .scrawl{display:inline-block}

/* declaration */
.sign{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:0 24px}
.sig{text-align:center}
.scrawl{font-family:var(--sign);font-weight:600;font-size:36px;line-height:calc(var(--u)*2);transform:rotate(-4deg)}



/* foot of each page: where to go next */
.turn{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 24px}
.turn a{position:relative;top:var(--n1);font-weight:400;text-decoration-thickness:1.5px}
.turn .next{margin-left:auto}
.turn a:hover{text-decoration-style:wavy}

/* work experience: every role on one page */
h3{font-size:17.5px;line-height:var(--u);display:flex;justify-content:space-between;flex-wrap:wrap;column-gap:20px}
h3 > span,.page > h3{position:relative;top:var(--n1)}
h3 .when{font-weight:400}
h3 .co{font-weight:400}
.role + .role{margin-top:var(--u)}
.idx-sub > span:nth-of-type(2){padding-left:28px;color:var(--ink-soft)}
.idx-sub > span:first-child{color:var(--ink-soft)}

/* bar under the page: always shows where you can go */

/* ---------- one scrolling notebook ---------- */
html{scroll-behavior:smooth;scroll-padding-top:58px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.book{display:flex;flex-direction:column;gap:6px}  /* a thin seam between sheets */
.page + .page{margin-top:0}
/* each sheet: a little lift, and a soft flash when you jump to it */
.page{box-shadow:0 1px 1px rgba(20,30,60,.05)}
.page.flash,.role.flash{animation:flash 1.1s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 3px rgba(29,60,158,.22)}100%{box-shadow:0 0 0 3px rgba(29,60,158,0)}}
article.role{border-radius:4px}

/* section tabs that stay at the top while you scroll, like a notebook's index tabs */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--desk)}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;margin:-20px auto 20px;max-width:860px;padding-left:20px;
  background:color-mix(in srgb,var(--desk) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:640px){.tabs{margin:-8px -6px 10px;padding-left:18px}}
.tabs-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px 0 8px}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;font-weight:400;font-size:16px;line-height:26px;padding:2px 12px;border-radius:14px;text-decoration:none;color:var(--ink-soft);
  transition:background .2s,color .2s}
.tabs a:hover{color:var(--ink);background:rgba(29,60,158,.07)}
.tabs a.on{color:var(--paper);background:var(--ink)}
.tabs .tab-pdf{margin-left:auto;color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--ink)}
.tabs .tab-pdf:hover{background:var(--ink);color:var(--paper)}
.progress{height:2px;background:var(--rule);border-radius:1px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}

/* back to the index */
.to-top{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:8;
  font-weight:700;font-size:15px;line-height:24px;padding:6px 14px;border-radius:18px;text-decoration:none;color:var(--paper);background:var(--ink);
  box-shadow:0 4px 14px -4px rgba(20,30,60,.45);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--ink-soft)}
@media (max-width:640px){
  .to-top{width:40px;height:40px;padding:0;border-radius:50%;font-size:0;display:grid;place-items:center;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .to-top::before{content:"↑";font-size:19px}
  .turn{padding-right:44px}
}
@media (hover:none){.tabs a:hover:not(.on){background:none;color:var(--ink-soft)}}

/* headings: the ink underline draws itself as each sheet scrolls into view */
.ink .page > h2{width:fit-content;text-decoration:none}
.ink .page > h2::after{content:"";position:absolute;left:0;right:0;top:calc(var(--n-h2) + 17px);height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.ink .page > h2.drawn::after{transform:scaleX(1)}

/* foot of each sheet: what comes next, further down */
.turn a{font-size:17px}
.idx-sub > span:nth-of-type(2){padding-left:28px}