/* Martin Sas · cv.css · the /cv page: a paper sheet on the navy ground, and clean A4 when printed.
   Loaded after styles.css, so the tokens and fonts come from there. */

.cv-page{
  --sheet:#F3EFE4;
  --sheet-ink:#14203A;      /* 13:1 on --sheet */
  --sheet-muted:#4A5571;    /* 6.6:1 on --sheet */
  --sheet-gold:#7A5C17;     /* 5.3:1 on --sheet, for small labels */
  --sheet-rule:#C9A84C;
}

.cv-bar{position:sticky;top:0;z-index:10;background:var(--glass);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cv-bar-in{max-width:908px;margin:0 auto;padding:10px var(--gutter);display:flex;flex-wrap:nowrap;min-height:64px;align-items:center;justify-content:space-between;gap:10px}
.cv-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--dim);text-decoration:none}
.cv-back:hover{color:var(--accent-1)}
.cv-back .ico{transform:rotate(180deg)}
.cv-actions{display:flex;align-items:center;gap:10px}
/* The print button needs JavaScript. The js class is set before first paint, so nothing shifts. */
html:not(.js) #print{display:none}

.sheet{
  max-width:860px;margin:clamp(16px,4vw,40px) auto clamp(40px,8vw,80px);
  padding:clamp(24px,6vw,64px);border-radius:var(--r);
  background:var(--sheet);color:var(--sheet-ink);
  box-shadow:0 40px 100px -40px rgb(3 6 14 / .9);
  font-size:15px;line-height:1.55;
}
@media (max-width:908px){.sheet{margin-left:var(--gutter);margin-right:var(--gutter)}}
.sheet a{color:inherit;text-decoration-color:var(--sheet-rule);text-underline-offset:3px}
.sheet a:hover{color:var(--sheet-gold)}
.sheet :focus-visible{outline-color:var(--sheet-gold)}

.cv-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);align-items:center;padding-bottom:28px;border-bottom:2px solid var(--sheet-rule)}
.cv-head img{width:clamp(84px,12vw,112px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.cv-head h1{font-weight:500;letter-spacing:-.025em;line-height:1;font-size:clamp(32px,5vw,48px);color:var(--sheet-ink)}
.cv-tag{margin-top:10px;font:400 12px/1.5 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--sheet-gold)}
.cv-contact{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--sheet-muted)}

.cv-sec{margin-top:30px}
.cv-sec h2,.sheet .blk h3{
  font:400 12px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--sheet-gold);
  padding-bottom:7px;margin-bottom:14px;border-bottom:1px solid var(--sheet-rule);
}
.cv-sec > p{color:var(--sheet-ink)}
.cv-list{display:grid;gap:5px}
.cv-list li{position:relative;padding-left:16px;color:var(--sheet-ink)}
.cv-list li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--sheet-gold)}
.cv-fallback{color:var(--sheet-muted)}
/* Filled from the profile page by cv.js; hidden until then (or until it fails) so nothing shifts. */
.js #cv-pulled:not(.ready){visibility:hidden}

/* Experience: the profile's .timeline markup, restyled for paper.
   Grid puts the period on the right of the title. */
.sheet .timeline{border:0;padding:0}
.sheet .tl{display:grid;grid-template-columns:1fr auto;column-gap:16px}
.sheet .tl + .tl{margin-top:20px}
.sheet .tl::before{content:none}
.sheet .tl .yr{grid-column:2;grid-row:1;align-self:baseline;font:400 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:none;color:var(--sheet-gold);white-space:nowrap}
.sheet .tl h3{grid-column:1;grid-row:1;margin:0;font-size:18px;line-height:1.25;font-weight:500;letter-spacing:-.01em;color:var(--sheet-ink)}
.sheet .tl .org{grid-column:1 / -1;margin:2px 0 8px;font-size:14px;color:var(--sheet-muted)}
.sheet .tl ul{grid-column:1 / -1;margin:0;display:grid;gap:5px}
.sheet .tl ul li{position:relative;padding-left:16px;font-size:15px;line-height:1.55;color:var(--sheet-ink)}
.sheet .tl ul li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--sheet-gold)}

/* Fact blocks (education, patents, ...): the profile's .blk markup, restyled. */
.cv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.sheet .blk dl{display:grid;gap:7px}
.sheet .blk dl div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.sheet .blk dt{font-size:15px;color:var(--sheet-ink)}
.sheet .blk dd{flex:none;font:400 12px/1.4 var(--fm);color:var(--sheet-muted);text-align:right}
.sheet .blk > p{font-size:15px;color:var(--sheet-ink)}
.sheet .tag,.sheet .tag-strong{padding:0;border:0;background:none;color:var(--sheet-muted);border-radius:0}
@media (max-width:639px){
  .cv-cols{grid-template-columns:1fr}
  .cv-head{grid-template-columns:1fr}
}

@media print{
  @page{size:A4;margin:14mm 15mm}
  /* The page canvas follows color-scheme; dark would tint the printed margins. */
  :root{color-scheme:light}
  html,body{background:#fff}
  .skip,.cv-bar{display:none!important}
  .sheet{max-width:none;margin:0;padding:0;border-radius:0;box-shadow:none;background:#fff;font-size:10pt;line-height:1.45}
  .cv-page{--sheet-ink:#0E1626;--sheet-muted:#3D465C}
  .sheet a{text-decoration:none}
  .cv-head{padding-bottom:14px}
  .cv-head img{width:72px}
  .cv-head h1{font-size:24pt}
  .cv-sec{margin-top:16px}
  .sheet .tl + .tl{margin-top:10px}
  .sheet .tl ul li,.sheet .blk dt,.sheet .blk > p{font-size:inherit}
  .sheet .tl h3{font-size:12pt}
  .sheet .tl,.sheet .blk dl div,.cv-sec h2,.sheet .blk h3{break-inside:avoid}
  .cv-sec h2,.sheet .blk h3{break-after:avoid}
  .cv-cols{gap:0 28px}
}

/* Small screens: one line in the bar (icon-only print button), so font loading cannot rewrap it. */
@media (max-width:560px){
  /* Labels stay in the accessibility tree, only visually hidden. */
  .cv-back span,#print .print-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #print{padding:0 14px}
}