/* Colors: --accent and --accent-2 come from the CV section page in the admin (inline on <body>). */
    * { margin: 0; padding: 0; }
body { font: 16px Helvetica, Sans-Serif; line-height: 24px; background: url("noise.841b916d3864.jpg"); }
.clear { clear: both; }
#page-wrap { width: 800px; margin: 40px auto 16px; }
#pic { float: right; margin: -30px 15px 0 0; }
#pic img { display: block; max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }
dt[id], #top { scroll-margin-top: 24px; }
body { padding-bottom: 96px; }

/* Floating dock: section links with a sliding indicator, mode switch, PDF, language */
.cv-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; }
.cv-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: 0 50%; transform: scaleX(0); }
.cv-dock {
    position: fixed; left: 50%; bottom: 20px; z-index: 30; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 24px);
    padding: 6px; border-radius: 999px; line-height: 1;
    font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    background: rgba(17, 24, 39, .82); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.cv-dock a { color: #e5e7eb; border: 0; text-decoration: none; white-space: nowrap; }
.cv-dock__sections { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; }
.cv-dock__sections::-webkit-scrollbar { display: none; }
.cv-dock__sections a { position: relative; z-index: 1; padding: 9px 14px; border-radius: 999px; transition: color .2s; }
.cv-dock__sections a.active { color: #111827; }
.cv-dock__indicator { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, #fff), color-mix(in srgb, var(--accent-2) 45%, #fff)); transition: transform .35s cubic-bezier(.3, .7, .2, 1), width .35s cubic-bezier(.3, .7, .2, 1); }
.cv-dock__tools { display: flex; align-items: center; gap: 4px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .15); }
.cv-dock__back { flex-shrink: 0; padding: 9px 14px 9px 12px; margin-right: 2px; border-radius: 999px; border-right: 1px solid rgba(255, 255, 255, .15) !important; }
.cv-dock__back:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 700px) { .cv-dock__back span { display: none; } }
.cv-dock__switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.cv-dock__switch a { padding: 6px 10px; border-radius: 999px; color: #9ca3af; }
.cv-dock__switch a.on { color: #111827; background: #fff; }
.cv-dock__pdf, .cv-dock__lang { padding: 9px 12px; border-radius: 999px; }
.cv-dock__pdf { color: #111827 !important; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cv-dock__lang:hover, .cv-dock__sections a:not(.active):hover { background: rgba(255, 255, 255, .1); }

/* Short version */
.cv-note { font-family: Helvetica, sans-serif !important; font-style: normal !important; font-size: 13px; color: #b45309 !important; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; }
ul.compact { list-style: none; margin: 0 0 24px; }
ul.compact li { padding: 8px 0; border-bottom: 1px dashed #d1d5db; }
ul.compact li:last-child { border-bottom: 0; }
ul.compact .when { color: #999; font-family: Georgia, serif; font-style: italic; font-size: 14px; margin-left: 4px; }
ul.compact .sum { display: block; color: #444; }
ul.compact .tech { display: block; color: #888; font-size: 13px; }
h1 { margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; letter-spacing: -2px; border-bottom: 1px solid #999; }
h2 { font-size: 20px; margin: 0 0 6px 0; position: relative; }
.cv-role { margin: 0; font-weight: bold; }
.cv-tech { color: #888; font-size: 13px; margin-top: 4px; }
h2 span { position: absolute; bottom: 0; right: 0; font-style: italic; font-family: Georgia, Serif; font-size: 16px; color: #999; font-weight: normal; }
p { margin: 0 0 16px 0; }
a { color: #999; text-decoration: none; border-bottom: 1px dotted #999; }
a:hover { border-bottom-style: solid; color: black; }
.contact-reveal { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.reveal-hint { font-size: 0.85em; color: #999; border-bottom: 1px dotted #999; }
.contact-reveal:hover .reveal-hint { border-bottom-style: solid; color: black; }
ul { margin: 0 0 32px 17px; }
#objective { width: 480px; float: left; margin-right: 20px;}
#objective p { font-family: Georgia, Serif; font-style: italic; color: #666; }
dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; float: left; min-height: 60px; border-right: 1px solid #999;  }
dd { width: 600px; float: right; }
dd.clear { float: none; margin: 0; height: 15px; }




/* based on https://codepen.io/kgm/pen/MamexP */
.container {
  width: 250px;
  margin: 0 auto;
  padding: 0;
  line-height: 0px;
}
.drop-shadow {
    position:relative;
    float:left;
    padding:6px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.drop-shadow p {
    margin: 0 0 0 0; 
    font-size:16px;
    font-weight:bold;
}

/* Lifted corners */

.lifted {
    -moz-border-radius:4px;
   border-radius:4px;
}

.lifted:before,
.lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
      box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
  -ms-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
      transform:rotate(-3deg);
}

.lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
  -ms-transform:rotate(3deg);
   -o-transform:rotate(3deg);
      transform:rotate(3deg);
}

.rotated {
    -webkit-box-shadow:none;
       -moz-box-shadow:none;
      box-shadow:none;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
  -ms-transform:rotate(3deg);
   -o-transform:rotate(3deg);
      transform:rotate(3deg);
}

.rotated > :first-child:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#fefed9;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

/* A4 layout for browser print and WeasyPrint (content width ~680px) */
@page { size: A4; margin: 15mm 15mm 18mm; }
@media print {
    .cv-dock, .cv-progress, .cv-note, .reveal-hint { display: none; }
    body { padding-bottom: 0; }
    body { background: none; font-size: 14px; line-height: 20px; }
    #page-wrap { width: auto; margin: 0; }
    #pic.container { width: 160px; margin: 0 6px 0 0; }
    #objective { width: 440px; }
    h1 { font-size: 36px; }
    h2 { font-size: 17px; }
    h2 span { position: static; display: block; font-size: 14px; }
    dt { width: 110px; padding-right: 14px; font-size: 16px; height: auto; }
    dd { width: 540px; }
    h2, .cv-role { page-break-after: avoid; }
}