:root {
  --blue: #08679f;
  --blue-dark: #074d79;
  --blue-light: #1681ba;
  --blue-soft: #eaf5fb;

  --text: #30343a;
  --text-soft: #505861;
  --muted: #66717c;

  --line: #dce2e7;

  --paper: #ffffff;
  --stage: #eef2f5;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--stage);
}

body {
  margin: 0;
  min-width: 320px;

  font-family:
    "Inter",
    "Segoe UI",
    "Aptos",
    Arial,
    Helvetica,
    sans-serif;

  color: var(--text);
  background: var(--stage);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================================================
   PAGE
   ========================================================= */

.page-shell {
  padding: 32px 20px 64px;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar {
  width: min(210mm, calc(100vw - 40px));

  margin: 0 auto 18px;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 10px;
}

.button {
  appearance: none;

  min-height: 42px;

  padding: 0 17px;

  border: 0;
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  text-decoration: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.button:focus-visible {
  outline: 3px solid rgba(22, 129, 186, 0.28);
  outline-offset: 3px;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: #ffffff;
  background: var(--blue);

  box-shadow:
    0 7px 18px rgba(7, 95, 158, 0.18);
}

.button-primary:hover {
  background: var(--blue-dark);
}

.button-secondary {
  color: var(--blue-dark);
  background: #ffffff;

  border: 1px solid #d5dde4;
}

.button-secondary:hover {
  border-color: #b8c4ce;
}


/* =========================================================
   A4
   ========================================================= */

.cv {
  width: 210mm;
  min-height: 297mm;

  margin: 0 auto;

  background: var(--paper);

  overflow: hidden;

  border-radius: 3px;

  box-shadow:
    0 22px 55px rgba(25, 37, 49, 0.13);
}


/* =========================================================
   HEADER
   ========================================================= */

.cv-header {
  position: relative;
  isolation: isolate;

  min-height: 60mm;

  padding:
    6.5mm
    14mm
    6.5mm
    13mm;

  color: #ffffff;
  background: linear-gradient(125deg, var(--blue-dark) 0%, var(--blue) 58%, #0a72aa 100%);

  display: grid;

  grid-template-columns: 48mm minmax(0, 1fr);

  gap: 8mm;

  align-items: center;
}

.cv-header::before {
  position: absolute;
  z-index: -1;
  inset: 0;

  background-image:
    linear-gradient(
      118deg,
      transparent 0,
      transparent 48%,
      rgba(255, 255, 255, 0.085) 49%,
      transparent 50%,
      transparent 100%
    ),
    radial-gradient(
      circle,
      rgba(198, 239, 255, 0.28) 0 0.55mm,
      transparent 0.65mm
    );
  background-position:
    0 0,
    0 0;
  background-size:
    24mm 24mm,
    7mm 7mm;

  opacity: 0.48;

  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 44%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 44%, #000 100%);

  content: "";
}

.cv-header::after {
  position: absolute;
  z-index: -1;
  top: -37mm;
  right: -22mm;

  width: 91mm;
  height: 91mm;

  border: 0.5mm solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.035);

  content: "";
}


/* =========================================================
   PHOTO
   ========================================================= */

.avatar-shell {
  position: relative;
  isolation: isolate;

  width: 48mm;
  height: 48mm;

  display: grid;
  place-items: center;
}

.avatar-hud {
  position: absolute;
  z-index: 0;
  inset: -3.2mm;

  border-radius: 50%;

  filter: drop-shadow(0 0 1.35mm rgba(131, 222, 255, 0.24));
  pointer-events: none;
}

.avatar-hud::before {
  position: absolute;
  inset: -0.7mm;

  border-radius: 50%;

  background: conic-gradient(
    from 0deg,
    transparent 0 302deg,
    rgba(126, 221, 250, 0.08) 316deg,
    rgba(222, 249, 255, 0.78) 344deg,
    transparent 360deg
  );

  opacity: 0.7;

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent 95.7%,
    #000 96.1% 98.6%,
    transparent 99%
  );
  mask: radial-gradient(
    farthest-side,
    transparent 95.7%,
    #000 96.1% 98.6%,
    transparent 99%
  );

  content: "";
}

.hud-ring,
.hud-brackets {
  position: absolute;

  border-radius: 50%;
}

.hud-ring--outer {
  inset: 0;

  background: conic-gradient(
    from -24deg,
    transparent 0 8deg,
    rgba(202, 243, 255, 0.88) 8deg 54deg,
    transparent 54deg 67deg,
    rgba(96, 205, 239, 0.52) 67deg 118deg,
    transparent 118deg 185deg,
    rgba(224, 248, 255, 0.72) 185deg 248deg,
    transparent 248deg 281deg,
    rgba(88, 197, 232, 0.6) 281deg 337deg,
    transparent 337deg 360deg
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent 96.7%,
    #000 97.1% 98.5%,
    transparent 98.9%
  );
  mask: radial-gradient(
    farthest-side,
    transparent 96.7%,
    #000 97.1% 98.5%,
    transparent 98.9%
  );
}

.hud-ring--ticks {
  inset: 1.55mm;

  background: repeating-conic-gradient(
    from 0deg,
    rgba(195, 239, 255, 0.62) 0 0.75deg,
    transparent 0.75deg 9deg
  );

  opacity: 0.72;

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent 93.8%,
    #000 94.2% 97.4%,
    transparent 97.8%
  );
  mask: radial-gradient(
    farthest-side,
    transparent 93.8%,
    #000 94.2% 97.4%,
    transparent 97.8%
  );
}

.hud-ring--inner {
  inset: 2.55mm;

  border: 0.22mm solid;
  border-color: rgba(202, 243, 255, 0.66) transparent
    rgba(107, 213, 245, 0.45) transparent;

  box-shadow:
    inset 0 0 0 0.18mm rgba(255, 255, 255, 0.08),
    0 0 1.2mm rgba(113, 219, 250, 0.12);
}

.hud-brackets {
  inset: 0.85mm;
}

.hud-brackets::before,
.hud-brackets::after {
  position: absolute;
  inset: 4.1mm;

  border-radius: 50%;

  content: "";
}

.hud-brackets::before {
  border-top: 0.18mm solid rgba(211, 247, 255, 0.58);
  border-bottom: 0.18mm solid rgba(102, 211, 243, 0.3);
}

.hud-brackets::after {
  inset: 5.15mm;

  border-left: 0.18mm solid rgba(211, 247, 255, 0.44);
  border-right: 0.18mm solid rgba(102, 211, 243, 0.26);
}

.avatar {
  position: relative;
  z-index: 2;

  width: 48mm;
  height: 48mm;

  overflow: hidden;

  border-radius: 50%;

  background: #ffffff;

  border: 0.8mm solid rgba(255, 255, 255, 0.98);

  box-shadow:
    0 2mm 5mm rgba(0, 31, 52, 0.26);

  display: block;
}

.avatar img {
  position: absolute;
  top: -7%;
  left: 4%;

  display: block;

  width: 92%;
  max-width: none;
  height: auto;

  image-rendering: auto;
}

/* =========================================================
   IDENTITY
   ========================================================= */

.identity {
  position: relative;

  min-width: 0;
}

.identity h1 {
  position: relative;

  display: inline-block;

  margin: 0 0 1.5mm;

  font-size: 27pt;
  line-height: 1;

  font-weight: 750;

  letter-spacing: 0.003em;
}

.identity h1::after {
  display: block;

  width: 18mm;
  height: 0.8mm;

  margin-top: 2.2mm;

  border-radius: 1mm;

  background: linear-gradient(90deg, #a6eaff, rgba(255, 255, 255, 0.9), #5fc6e9);

  content: "";
}

.role {
  margin: 0 0 4.8mm;

  font-size: 11.4pt;
  line-height: 1.2;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.96);
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-grid {
  display: grid;

  grid-template-areas:
    "phone email"
    "location location"
    "birth birth";

  grid-template-columns:
    minmax(44mm, 0.9fr)
    minmax(57mm, 1.25fr);

  column-gap: 7mm;
  row-gap: 3mm;

  max-width: 122mm;
}

.contact-item {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 2.4mm;

  font-size: 8.65pt;
  line-height: 1.2;

  color: rgba(255, 255, 255, 0.96);

  white-space: nowrap;
}

.contact-item svg {
  width: 3.35mm;
  height: 3.35mm;

  flex: 0 0 3.35mm;

  fill: currentColor;
}

.contact-item svg path {
  fill: currentColor;
}

.contact-phone {
  grid-area: phone;
}

.contact-email {
  grid-area: email;
}

.contact-location {
  grid-area: location;

  white-space: normal;
}

.contact-birth {
  grid-area: birth;
}


/* =========================================================
   BODY
   ========================================================= */

.cv-body {
  padding:
    4.8mm
    13mm
    6mm;
}


/* =========================================================
   SECTION
   ========================================================= */

.cv-section {
  display: grid;

  grid-template-columns:
    42mm
    minmax(0, 1fr);

  column-gap: 9mm;

  padding:
    4mm
    0;

  border-bottom:
    0.23mm
    solid
    var(--line);
}

.cv-section:last-child {
  border-bottom: 0;
}


/* =========================================================
   LEFT SECTION LABEL
   ========================================================= */

.section-label {
  display: grid;

  align-self: start;

  grid-template-columns:
    6.5mm
    minmax(0, 1fr);

  gap: 2.8mm;

  align-items: start;

  color: var(--blue);
}

.section-icon {
  width: 6.8mm;
  height: 6.8mm;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--blue-soft);
}

.section-icon svg {
  width: 3.9mm;
  height: 3.9mm;
}

.section-icon svg path {
  fill: var(--blue);
}

.section-label h2 {
  margin:
    0.75mm
    0
    0;

  font-size: 10.4pt;
  line-height: 1.2;

  font-weight: 700;

  color: var(--blue);
}


/* =========================================================
   CONTENT
   ========================================================= */

.section-content {
  min-width: 0;

  font-size: 8.8pt;
  line-height: 1.46;

  color: var(--text);
}

.section-content p {
  margin: 0;
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-section {
  padding-top: 4.5mm;
  padding-bottom: 4.5mm;
}

.profile-copy {
  max-width: 127mm;

  font-size: 8.9pt;
  line-height: 1.52;

  color: #343a40;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.experience-section {
  padding-top: 4.5mm;
  padding-bottom: 4.5mm;
}

.entry + .entry {
  margin-top: 5.8mm;
}

.entry-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 7mm;

  align-items: start;

  margin-bottom: 1.8mm;
}

.entry h3 {
  margin: 0;

  color: var(--blue);

  font-size: 9.7pt;
  line-height: 1.2;

  font-weight: 700;
}

.entry-subtitle {
  margin-top: 0.7mm !important;

  font-size: 8.15pt;
  line-height: 1.3;

  color: var(--text-soft);
}

.entry-date {
  padding: 0.75mm 1.7mm;

  border-radius: 10mm;

  background: var(--blue-soft);

  font-size: 7.8pt;
  line-height: 1.3;

  color: var(--blue-dark);

  white-space: nowrap;
}

.entry ul {
  margin:
    2.2mm
    0
    0
    4.8mm;

  padding: 0;
}

.entry li {
  margin: 0.75mm 0;

  padding-left: 1.2mm;

  line-height: 1.4;
}

.entry li::marker {
  color: #4c555d;

  font-size: 0.82em;
}


/* =========================================================
   COMPACT SECTIONS
   ========================================================= */

.compact-section {
  padding-top: 3.15mm;
  padding-bottom: 3.15mm;
}


/* =========================================================
   SKILLS
   ========================================================= */

.tag-line {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    1.7mm
    1.7mm;
}

.tag-line span {
  padding: 1mm 2mm;

  border: 0.2mm solid #d8eaf4;
  border-radius: 10mm;

  color: #385265;
  background: #f4f9fc;

  white-space: nowrap;
}

.tag-line i {
  display: none;
}


/* =========================================================
   TECHNICAL
   ========================================================= */

.tech-lines {
  color: var(--text-soft);
}

.tech-lines p + p {
  margin-top: 1.15mm;
}

.tech-lines strong,
.two-line-list strong,
.inline-value strong,
.education-copy strong {
  color: var(--blue-dark);

  font-weight: 700;
}


/* =========================================================
   LANGUAGES
   ========================================================= */

.two-line-list p {
  display: grid;

  grid-template-columns:
    26mm
    minmax(0, 1fr);

  gap: 3mm;
}

.two-line-list p + p {
  margin-top: 1mm;
}

.two-line-list span {
  color: var(--text-soft);
}


/* =========================================================
   INLINE VALUES
   ========================================================= */

.inline-value {
  color: var(--text-soft);
}


/* =========================================================
   EDUCATION
   ========================================================= */

.education-section {
  padding-bottom: 3.5mm;
}

.education-copy p:first-child {
  font-size: 8.9pt;
}

.education-copy p + p {
  margin-top: 0.9mm;

  max-width: 122mm;

  color: #68717a;

  font-size: 8pt;
  line-height: 1.4;

  font-style: italic;
}


/* =========================================================
   SCREEN RESPONSIVE
   ========================================================= */

@media screen {
  .toolbar {
    animation: toolbar-enter 0.45s ease-out both;
  }

  .cv {
    animation: cv-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .cv-header::after {
    animation: header-orbit 10s ease-in-out infinite alternate;
  }

  .cv-header::before {
    animation: texture-drift 20s linear infinite;
  }

  .hud-ring--outer {
    animation: hud-spin 24s linear infinite;
  }

  .hud-ring--ticks {
    animation: hud-spin-reverse 32s linear infinite;
  }

  .hud-ring--inner {
    animation: hud-spin-reverse 15s linear infinite;
  }

  .hud-brackets {
    animation: hud-lock 6s ease-in-out infinite;
  }

  .hud-ring,
  .hud-brackets,
  .avatar-hud::before {
    will-change: transform;
  }

  .avatar-hud::before {
    animation: hud-scan 9s linear infinite;
  }

  .identity h1::after {
    background-size: 220% 100%;

    animation: heading-signal 5s ease-in-out infinite;
  }

  .avatar {
    transition:
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }

  .avatar:hover {
    border-color: #ffffff;
    box-shadow:
      0 2.5mm 7mm rgba(0, 31, 52, 0.32),
      0 0 0 1.5mm rgba(255, 255, 255, 0.12);
  }

  .motion-ready .cv-section {
    opacity: 0;
    transform: translateY(18px);

    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .motion-ready .cv-section.is-visible {
    opacity: 1;
    transform: none;
  }

  .section-icon,
  .tag-line span {
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .cv-section:hover .section-icon {
    background: #d8eef9;
    box-shadow: 0 5px 14px rgba(8, 103, 159, 0.13);
  }

  .tag-line span:hover {
    border-color: #b9ddec;
    background: #eaf6fb;
    transform: translateY(-1px);
  }

  @keyframes toolbar-enter {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes cv-enter {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes header-orbit {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(-10px, 8px, 0);
    }
  }

  @keyframes texture-drift {
    from {
      background-position:
        0 0,
        0 0;
    }

    to {
      background-position:
        96px 48px,
        28px 28px;
    }
  }

  @keyframes hud-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes hud-spin-reverse {
    to {
      transform: rotate(-1turn);
    }
  }

  @keyframes hud-lock {
    0%,
    100% {
      opacity: 0.52;
      transform: rotate(0deg) scale(0.992);
    }

    50% {
      opacity: 0.96;
      transform: rotate(4deg) scale(1);
    }
  }

  @keyframes hud-scan {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes heading-signal {
    0%,
    100% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }
  }
}

@media screen and (min-width: 861px) {
  .page-shell {
    padding: 32px 24px 72px;
  }

  .toolbar,
  .cv {
    width: min(1120px, calc(100vw - 64px));
  }

  .toolbar {
    margin-bottom: 18px;
  }

  .cv {
    min-height: 0;

    border-radius: 14px;
  }

  .cv-header {
    min-height: 0;

    padding: 40px 56px;

    grid-template-columns: 200px minmax(0, 1fr);
    gap: 44px;
  }

  .avatar {
    width: 196px;
    height: 196px;

    border-width: 3px;
  }

  .avatar-shell {
    width: 196px;
    height: 196px;
  }

  .avatar-hud {
    inset: -16px;
  }

  .identity h1 {
    margin-bottom: 15px;

    font-size: clamp(40px, 3.2vw, 50px);
    letter-spacing: -0.025em;
    text-shadow: 0 6px 22px rgba(0, 31, 52, 0.2);
  }

  .identity h1::after {
    width: 76px;
    height: 4px;

    margin-top: 11px;
  }

  .role {
    margin-bottom: 22px;

    font-size: 18px;
  }

  .contact-grid {
    grid-template-areas:
      "phone email birth"
      "location location location";
    grid-template-columns: max-content max-content max-content;
    gap: 12px 30px;

    max-width: none;
  }

  .contact-item {
    gap: 10px;

    font-size: 14px;
  }

  .contact-item svg {
    width: 16px;
    height: 16px;

    flex-basis: 16px;
  }

  .cv-body {
    padding: 24px 56px 42px;
  }

  .cv-section {
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 38px;

    padding: 25px 0;
  }

  .profile-section,
  .experience-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .section-label {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;

    align-items: center;
  }

  .section-icon {
    width: 34px;
    height: 34px;
  }

  .section-icon svg {
    width: 18px;
    height: 18px;
  }

  .section-label h2 {
    margin: 0;

    font-size: 17px;
  }

  .section-content,
  .profile-copy {
    max-width: 760px;

    font-size: 15px;
    line-height: 1.58;
  }

  .entry + .entry {
    margin-top: 30px;
  }

  .entry-heading {
    gap: 24px;

    margin-bottom: 8px;
  }

  .entry h3 {
    font-size: 16px;
  }

  .entry-subtitle {
    margin-top: 4px !important;

    font-size: 13.5px;
  }

  .entry-date {
    padding: 4px 9px;

    font-size: 12px;
  }

  .entry ul {
    margin: 10px 0 0 21px;
  }

  .entry li {
    margin: 4px 0;

    padding-left: 5px;
  }

  .tag-line {
    gap: 8px;
  }

  .tag-line span {
    padding: 6px 11px;

    font-size: 13.5px;
  }

  .tech-lines p + p {
    margin-top: 7px;
  }

  .two-line-list p {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
  }

  .two-line-list p + p {
    margin-top: 5px;
  }

  .education-copy p:first-child {
    font-size: 15px;
  }

  .education-copy p + p {
    max-width: 720px;

    font-size: 13.5px;
  }
}

@media screen and (max-width: 860px) {
  .page-shell {
    padding: 16px 0 32px;
  }

  .toolbar {
    width: calc(100% - 32px);
  }

  .cv {
    width: calc(100% - 32px);
    min-height: 0;

    border-radius: 12px;
  }

  .cv-header {
    min-height: 0;

    padding: 30px 32px;

    grid-template-columns: 154px minmax(0, 1fr);
    gap: 28px;
  }

  .avatar {
    width: 164px;
    height: 164px;

    border-width: 3px;
    border-radius: 50%;
  }

  .avatar-shell {
    width: 164px;
    height: 164px;
  }

  .avatar-hud {
    inset: -13px;
  }

  .identity h1 {
    margin-bottom: 12px;

    font-size: 34px;
  }

  .role {
    margin-bottom: 18px;

    font-size: 15px;
  }

  .contact-grid {
    grid-template-areas:
      "phone email"
      "location location"
      "birth birth";
    grid-template-columns: minmax(160px, 0.9fr) minmax(205px, 1.25fr);
    gap: 10px 20px;

    max-width: none;
  }

  .contact-item {
    gap: 9px;

    font-size: 12px;
  }

  .contact-item svg {
    width: 14px;
    height: 14px;

    flex-basis: 14px;
  }

  .cv-body {
    padding: 18px 32px 32px;
  }

  .cv-section {
    grid-template-columns: 158px minmax(0, 1fr);
    column-gap: 28px;

    padding: 22px 0;
  }

  .section-content,
  .profile-copy {
    font-size: 12px;
  }
}

@media screen and (max-width: 640px) {
  .page-shell {
    padding: 12px 0 24px;
  }

  .toolbar {
    width: calc(100% - 24px);
    margin-bottom: 12px;

    flex-wrap: wrap;
    gap: 8px;
  }

  .button {
    min-height: 44px;

    padding: 0 12px;

    flex: 1 1 145px;

    font-size: 13px;
  }

  .cv {
    width: calc(100% - 24px);
    border-radius: 14px;
  }

  .cv-header {
    padding: 28px 22px 26px;

    grid-template-columns: minmax(0, 1fr);
    gap: 20px;

    text-align: center;
  }

  .cv-header::after {
    top: -150px;
    right: -110px;

    width: 350px;
    height: 350px;
  }

  .avatar {
    width: 164px;
    height: 164px;

    justify-self: center;
  }

  .avatar-shell {
    width: 164px;
    height: 164px;

    justify-self: center;
  }

  .identity h1 {
    margin-bottom: 16px;

    font-size: clamp(30px, 9.5vw, 38px);
  }

  .role {
    margin-bottom: 20px;

    font-size: 15px;
  }

  .contact-grid {
    width: min(100%, 340px);

    margin: 0 auto;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 11px 16px;

    text-align: left;
  }

  .contact-item {
    white-space: normal;
  }

  .cv-body {
    padding: 8px 22px 28px;
  }

  .cv-section,
  .profile-section,
  .experience-section,
  .compact-section {
    padding: 22px 0;

    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .section-label {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;

    align-items: center;
  }

  .section-icon {
    width: 30px;
    height: 30px;
  }

  .section-icon svg {
    width: 17px;
    height: 17px;
  }

  .section-label h2 {
    margin: 0;

    font-size: 16px;
  }

  .section-content,
  .profile-copy {
    max-width: none;

    font-size: 14px;
    line-height: 1.55;
  }

  .entry-heading {
    gap: 16px;
  }

  .entry h3 {
    font-size: 15px;
  }

  .entry-subtitle,
  .entry-date {
    font-size: 12px;
  }

  .entry ul {
    margin-left: 20px;
  }

  .entry + .entry {
    margin-top: 28px;
  }

  .tag-line {
    gap: 7px;
  }

  .tag-line span {
    padding: 5px 9px;
  }

  .two-line-list p {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
  }

  .education-copy p + p {
    max-width: none;

    font-size: 13px;
  }
}

@media screen and (max-width: 390px) {
  .contact-grid {
    grid-template-areas:
      "phone"
      "email"
      "location"
      "birth";
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .entry-date {
    justify-self: start;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .motion-ready .cv-section {
    opacity: 1;
    transform: none;
  }

  .avatar-hud {
    opacity: 0.78;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@page {
  size: A4;
  margin: 0;
}

@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;

    margin: 0;
    padding: 0;

    background: #ffffff !important;
  }

  .page-shell {
    padding: 0;
  }

  .no-print {
    display: none !important;
  }

  .cv {
    width: 210mm;
    min-height: 297mm;

    margin: 0;

    box-shadow: none;
    border-radius: 0;

    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .experience-section .entry {
    break-inside: avoid;
  }

  .profile-section,
  .experience-section {
    padding-top: 3.5mm;
    padding-bottom: 3.5mm;
  }

  .experience-section .entry + .entry {
    margin-top: 4.5mm;
  }

  .compact-section {
    break-inside: avoid;

    padding-top: 3mm;
    padding-bottom: 3mm;
  }

  .languages-section {
    padding-top: 14mm;
    padding-bottom: 5mm;

    break-before: page;
  }

  .languages-section ~ .compact-section {
    padding-top: 5mm;
    padding-bottom: 5mm;
  }

  .languages-section::before {
    grid-column: 1 / -1;

    margin-bottom: 5mm;
    padding-bottom: 3mm;

    border-bottom: 0.23mm solid var(--line);

    color: var(--blue-dark);

    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    content: "David Kučera · životopis — pokračování";
  }
}