/* Vy Vy Nguyen -- site stylesheet. One family (Public Sans), one accent. */

@font-face{font-family:"Public Sans";src:url("fonts/public-sans-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/public-sans-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f3f4f1;        /* cool light grey-green, not the cream tell */
  --surface:#ffffff;
  --ink:#1b1f22;          /* warmed near-black, not pure #000/#0a0a0a */
  --muted:#5b6168;
  --rule:rgba(27,31,34,.14);
  --accent:#1f5c52;       /* deep teal-green, a ledger-stamp color, the one accent */
  --accent-soft:#e4ede9;
  --focus:#1a4b73;        /* separate cool blue reserved only for focus rings */
  --sans:"Public Sans",Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0;font-variant-ligatures:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;overflow-x:hidden}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-thickness .15s ease,color .15s ease}
a:hover{text-decoration-thickness:2px}
a:focus-visible,.btn:focus-visible,.monogram:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:10;border-radius:4px}
.skip:focus{left:8px}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* compact header: name + monogram, role line, two actions, all above the fold */
header.top{border-bottom:1px solid var(--rule);background:var(--surface)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:12px}
.mark{flex:0 0 auto;width:36px;height:36px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font:700 13px/36px var(--sans);text-align:center;letter-spacing:-.02em}
.who b{font-weight:700;font-size:20px;letter-spacing:-.01em;display:block;line-height:1.2}
.who span{color:var(--muted);font-size:14.5px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;font:600 15px/1 var(--sans);padding:11px 16px;border-radius:6px;text-decoration:none;border:1px solid var(--accent);transition:background-color .18s ease,color .18s ease,transform .08s ease,box-shadow .18s ease}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:#163f38}
.btn.plain{color:var(--accent);background:transparent}
.btn.plain:hover{background:var(--accent-soft)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}

/* intro: monogram tile + plain-voice headline, left-aligned */
.intro{display:grid;grid-template-columns:140px 1fr;gap:36px;padding:44px 0 36px;align-items:start}
.headshot-col{display:flex;flex-direction:column;gap:8px}

/* Monogram tile: an intentional, finished design element standing in for a
   photo. Sized 120x150 to match the eventual headshot box exactly, so the
   swap (see README.md "Headshot swap") causes no layout shift. */
.monogram{width:120px;height:150px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center}
.monogram-mark{width:92px;height:92px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;font:700 28px/1 var(--sans);letter-spacing:-.02em;color:var(--accent)}
.headshot{display:block;width:120px;height:150px;border-radius:8px}

.intro h1{font-weight:700;font-size:34px;line-height:1.15;letter-spacing:-.02em;max-width:22ch}
.intro p{margin-top:16px;max-width:64ch;color:#2c323a}
.intro .facts{margin-top:20px;font-size:14.5px;color:var(--muted)}
.intro .facts span+span::before{content:"";display:inline-block;width:1px;height:12px;background:var(--rule);margin:0 12px;vertical-align:-1px}
.intro .facts .lang{color:var(--ink);font-weight:500}

/* the one bold element: work history as a record/ledger, line items like a statement */
section{padding:36px 0}
section+section{border-top:1px solid var(--rule)}
/* deliberately varied rhythm, not a metronome: the ledger (the bold element)
   gets the most room, credentials and education run compact, contact closes wide */
section[aria-labelledby="h-work"]{padding:48px 0 44px}
section[aria-labelledby="h-skills"]{padding:40px 0 32px}
section[aria-labelledby="h-cred"]{padding:32px 0 28px}
section[aria-labelledby="h-edu"]{padding:28px 0 28px}
section[aria-labelledby="h-contact"]{padding:36px 0 46px}
h2{font-size:21px;font-weight:700;letter-spacing:-.005em;margin-bottom:6px}
.sub{color:var(--muted);max-width:60ch;margin-bottom:24px;font-size:15px}
.ledger{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--rule)}
.ledger caption{text-align:left;font-size:14px;color:var(--muted);padding:0 0 8px}
.ledger th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:left;padding:10px 18px;border-bottom:2px solid var(--ink)}
.ledger td{padding:15px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger tr:last-child td{border-bottom:0}
.ledger td.date{white-space:nowrap;width:168px;color:#2c323a;font-weight:500}
.ledger td.org{width:140px;font-weight:600}
.ledger td.role b{display:block;font-weight:600}
.ledger td.role .now{font-weight:400;color:var(--muted);font-size:14.5px}
.ledger td.role p{color:#3a4049;margin-top:4px;max-width:58ch;font-size:15.5px}
.ledger tr.current td{background:var(--accent-soft)}

/* skills: one dominant group, then a two-up row of smaller groups, not a 2x2 of equals */
.skills-lead{padding:20px 0 18px;border-top:3px solid var(--ink)}
.skills-lead h3{font-size:19px;font-weight:700}
.skills-lead p{color:#3a4049;margin-top:7px;font-size:16px;max-width:66ch}
.skills-lead .kw{font-size:14px;color:var(--muted);margin-top:10px}
.skills-rest{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;margin-top:4px}
.skills-rest div{padding:16px 0;border-top:1px solid var(--rule)}
.skills-rest h3{font-size:16px;font-weight:700}
.skills-rest p{color:#3a4049;margin-top:6px;font-size:15px}
.skills-rest .kw{font-size:13.5px;color:var(--muted);margin-top:8px}

.cred-list{border-top:1px solid var(--rule)}
.cred-list li{list-style:none;padding:16px 0;border-bottom:1px solid var(--rule);display:flex;gap:18px;flex-wrap:wrap}
.cred-list b{display:block;font-size:15.5px}
.cred-list span{color:var(--muted);font-size:14.5px}

.edu{display:grid;grid-template-columns:150px 1fr;gap:6px 24px;max-width:640px}
.edu dt{color:#2c323a;font-weight:500}
.edu dd{font-weight:600}
.edu dd span{font-weight:400;color:var(--muted)}

.contact{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.contact p{max-width:52ch;color:#2c323a}
footer{border-top:1px solid var(--rule);padding:22px 0 40px;color:var(--muted);font-size:14px}

/* ----------------------------------------------------------------------
   Motion. One orchestrated load sequence (header -> monogram -> headline ->
   body) and one subject-rooted scroll moment (ledger rows posting in like
   statement entries). Transform + opacity only. Everything below is inert
   until html.js is present, so a no-JS visitor sees the final state with
   zero animation and zero layout shift.
   ---------------------------------------------------------------------- */
.js .seq{opacity:0;transform:translateY(10px);transition:opacity .36s var(--ease-out),transform .36s var(--ease-out)}
.js.is-ready .seq{opacity:1;transform:translateY(0)}
.js .seq.seq-1{transition-delay:0ms}
.js .seq.seq-2{transition-delay:70ms}
.js .seq.seq-3{transition-delay:130ms}
.js .seq.seq-4{transition-delay:190ms}

.js .ledger tbody tr{opacity:0;transform:translateY(7px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.js .ledger.is-posted tbody tr{opacity:1;transform:translateY(0)}
.js .ledger tbody tr:nth-child(1){transition-delay:0ms}
.js .ledger tbody tr:nth-child(2){transition-delay:90ms}
.js .ledger tbody tr:nth-child(3){transition-delay:180ms}
.js .ledger tbody tr:nth-child(4){transition-delay:270ms}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .intro{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .headshot-col{flex-direction:row;align-items:center;gap:14px}
  .monogram,.headshot{width:84px;height:104px}
  .monogram-mark{width:66px;height:66px;font-size:22px}
  .intro h1{font-size:27px}
  .skills-rest{grid-template-columns:1fr}
  .ledger thead{display:none}
  .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto}
  .ledger tr{border-bottom:1px solid var(--rule)}
  .ledger td{border:0;padding:4px 16px}
  .ledger td.date{padding-top:14px;font-size:14px;color:var(--muted);width:auto}
  .ledger td.org{width:auto}
  .ledger td.role{padding-bottom:14px}
  .edu{grid-template-columns:1fr}
  .edu dt{margin-top:10px;font-size:14px;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .seq,.ledger tbody tr{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{
  .actions,.skip{display:none}
  body{background:#fff}
  a{color:var(--ink);text-decoration:none}
  .seq,.ledger tbody tr{opacity:1!important;transform:none!important}
}