/* one-page CV: dark desk on screen, a white A4 sheet on it; print and PDF output only the sheet */
:root{
  --ink:#0a0a0b;
  --ink-2:#3f3f45;
  --ink-3:#66666d;
  --paper:#ffffff;
  --desk:#0a0a0b;
  --font-sans:"Geist","Noto Sans TC",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,"Noto Sans TC",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--desk)}
body{margin:0;font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid #ececec;outline-offset:2px}

.bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem clamp(1rem,3vw,2.5rem);background:rgba(10,10,11,.92);color:#ececec;font:500 .72rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.bar a,.bar button{padding:.6rem .8rem;border:1px solid rgba(255,255,255,.2);background:none;color:inherit;font:inherit;letter-spacing:inherit;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.bar a:hover,.bar button:hover,.bar [aria-pressed="true"]{background:#ececec;color:#0a0a0b}
.bar__group{display:flex;flex-wrap:wrap;gap:.4rem}

.sheet{width:210mm;min-height:297mm;margin:1.5rem auto 3rem;padding:12mm 16mm 10mm;background:var(--paper);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.cv-head h1{margin:0;font-size:25pt;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.cv-head h1 span{margin-left:.25em;font-weight:500;color:var(--ink-3)}
.cv-tag{margin:2.2mm 0 0;font-size:11pt;font-weight:600}
.cv-contact{margin:1.6mm 0 0;font:500 8.5pt/1.4 var(--font-mono);color:var(--ink-3)}

.cv-sec{display:grid;grid-template-columns:31mm 1fr;gap:0 6mm;margin-top:5mm;padding-top:2.6mm;border-top:1.2px solid var(--ink)}
.cv-sec h2{margin:0;font:600 8pt/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.cv-spec{display:grid;grid-template-columns:auto 1fr;gap:1.3mm 5mm;margin:0;font-size:9.5pt}
.cv-row{display:contents}
.cv-spec dt{font:500 8pt/1.7 var(--font-mono);color:var(--ink-3)}
.cv-spec dd{margin:0;line-height:1.5}
.cv-sec ol{display:grid;gap:2mm;margin:0;padding:0;list-style:none}
.cv-sec li{display:grid;grid-template-columns:12mm 1fr;gap:4mm;font-size:9.5pt;line-height:1.45}
.cv-y{font:600 8.5pt/1.65 var(--font-mono);color:var(--ink-2)}
.cv-sec strong{font-weight:700}
.cv-org{display:block;color:var(--ink-2)}
.cv-foot{margin-top:5mm;font:500 7pt/1.4 var(--font-mono);letter-spacing:.06em;color:var(--ink-3)}
html[data-lang="zh"] .cv-sec li,html[data-lang="zh"] .cv-spec{letter-spacing:.02em}

/* phones only: an A4 page is 794 px wide when printed, so without 'screen' this would also reshape the PDF */
@media screen and (max-width:840px){
  .sheet{width:auto;min-height:0;margin:1rem;padding:8vw 6vw}
  .cv-sec{grid-template-columns:1fr;gap:3mm}
}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff}
  .bar{display:none}
  .sheet{width:210mm;min-height:297mm;margin:0;box-shadow:none}
}