/*
  "About" — the intro (node 6626:4182 in Figma) is pixel-matched the same way as
  the hero: one relatively-positioned section at the 1920px reference height
  (2136px), with every child absolutely positioned at its exact Figma x/y, fluidly
  scaled with clamp() same as everywhere else. The CV section below it still has no
  Figma frame (confirmed with the client) — those layout/spacing decisions are
  mine, built from the same tokens/fonts. Content is pulled from the original site
  (About.html) and her CV PDF (assets/pdf/CV_english_DanielaMasihyKowoll.pdf) — the
  CV is reproduced as real HTML, not an embedded PDF viewer, with a download link
  alongside it for the file itself.
*/
/*
  No side padding here on desktop: .about-intro's children are absolutely
  positioned at their exact Figma x values, computed against the full 1920px
  reference canvas (same convention as .hero) — any padding added here would
  shrink the space those positions assume, pushing the rightmost elements (the
  accent bars) past the actual right edge and cutting them off. .cv has no Figma
  reference of its own, so it adds its own side padding directly instead.
*/
.about {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.about-intro {
  position: relative;
  height: clamp(1111px, 111.25vw, 2136px);
}

/*
  Title: same "duplicate text, offset in a second color" trick as
  .digital-designer__letter and the EXPERIENCE cascade. Figma has the mint copy in
  front with the pink-2 copy offset behind it (down+right), not the other way
  round. Split per letter (like "Digital Interaction Designer") rather than one
  text-shadow on the whole line, so it can share the same .jelly-letter hover
  effect — color/shadow live on .about-intro__title-letter, position/font stay on
  the wrapper, same split hero.css uses between .digital-designer and
  .digital-designer__letter.
*/
.about-intro__title {
  position: absolute;
  left: clamp(115px, 11.563vw, 222px);
  top: clamp(197px, 19.779vw, 379.7845px);
  width: clamp(317px, 31.796vw, 610.477px);
  margin: 0;
  font-family: var(--font-regular);
  font-size: clamp(70px, 7.059vw, 135.534px);
  letter-spacing: 0.03em;
}

.about-intro__title-letter {
  color: var(--color-mint-2);
  text-shadow: clamp(4px, 0.444vw, 8.52px) clamp(3px, 0.334vw, 6.42px) 0 var(--color-pink-2);
}

.about-intro__subtitle {
  position: absolute;
  left: clamp(115px, 11.563vw, 222px);
  top: clamp(306px, 30.636vw, 588.2054px);
  width: clamp(343px, 34.323vw, 659px);
  margin: 0;
  color: var(--color-bg-fog);
  font-family: var(--font-regular);
  font-size: clamp(15px, 1.473vw, 28.283px);
  letter-spacing: 0.03em;
}

/* "Download CV" under the subtitle — same pink button as the home page's
   (Figma "Button / Primary": 280×49 at 1920px, label 18.6px) */
.about-intro__cv {
  position: absolute;
  left: clamp(115px, 11.563vw, 222px);
  top: clamp(360px, 34.5vw, 662px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px, 14.583vw, 280px);
  height: clamp(36px, 2.552vw, 49px);
  border-radius: clamp(18px, 1.24vw, 23.8px);
  background-color: var(--color-pink-2);
  color: var(--color-bg);
  font-family: var(--font-regular);
  font-size: clamp(13px, 0.969vw, 18.6px);
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: transform 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard);
}
.about-intro__cv:hover,
.about-intro__cv:focus-visible {
  color: var(--color-bg); /* base.css turns hovered links green */
  text-decoration: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Decorative composition behind/around the photo: one green block plus a handful
   of thin accent bars — some in the page's own background color, which is
   intentional (they read as notches cut into the green block, not as bars). */
.about-intro__bg {
  position: absolute;
  left: clamp(633px, 63.438vw, 1218px);
  top: clamp(102px, 10.208vw, 196px);
  width: clamp(365px, 36.563vw, 702px);
  height: clamp(321px, 32.188vw, 618px);
  background-color: var(--color-green-2);
}

/*
  The bars container clips at exactly the same height as the photo+title block
  (node 6630:4262 in Figma, "clip content" on). The lines themselves are no longer
  a fixed set: assets/js/about-bars.js continuously generates them — random height,
  random color from a fixed palette — appending each as a plain absolutely-
  positioned .about-intro__bar span and removing it once it's scrolled fully past
  this container's clipped edge. That JS also respects prefers-reduced-motion (it
  just doesn't run), so no reduced-motion override is needed here.
*/
.about-intro__bars {
  position: absolute;
  left: clamp(844px, 84.535vw, 1623.069px);
  top: clamp(51px, 5.156vw, 99px);
  width: clamp(70px, 6.976vw, 133.9307px);
  height: clamp(422px, 42.291vw, 811.9893px);
  overflow: hidden;
}

.about-intro__bar-col {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(14px, 1.386vw, 26.6197px);
  height: 100%;
}

.about-intro__bar-col--right {
  left: clamp(56px, 5.589vw, 107.3109px);
}

.about-intro__bar {
  width: 100%;
}

.about-intro__photo {
  position: absolute;
  left: clamp(524px, 52.461vw, 1007.259px);
  top: clamp(136px, 13.651vw, 262.089px);
  width: clamp(253px, 25.303vw, 485.81px);
  height: clamp(253px, 25.303vw, 485.81px);
  overflow: hidden;
}

.about-intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Divider marks: was a raster image (a tiny pink+green square pair adrift in a much
  bigger transparent canvas) — now two real elements. Figma exposes no sub-node
  data for a flattened image, so the exact size/gap/colors came from sampling the
  source PNG's pixels directly: 141x141px squares, 178px apart, on a 1080px canvas
  that Figma displays at 130px (i.e. already at the 1920 reference scale) — giving
  16.9722px squares with a 21.4259px gap.
*/
.about-intro__squares {
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.116vw, 21.4259px);
}

.about-intro__square {
  width: clamp(9px, 0.884vw, 16.9722px);
  height: clamp(9px, 0.884vw, 16.9722px);
  flex-shrink: 0;
}

.about-intro__square--pink {
  background-color: var(--color-pink);
}

.about-intro__square--green {
  /* #73ab84, sampled from the source image — a one-off shade, not used elsewhere,
     so it isn't worth its own token. */
  background-color: #73ab84;
}

/*
  Wraps the top square pair, bio, and bottom square pair in a real flex column with
  Figma's own gap (58px, verified against its "Frame 1000001468" auto-layout —
  applies uniformly above AND below the bio text) instead of the bio's fixed-height
  text box, whose reported height didn't match how the text actually wraps here,
  and had thrown the gap below it off.
*/
.about-intro__center-group {
  position: absolute;
  left: 0;
  top: clamp(563px, 56.406vw, 1083px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 3.021vw, 58px);
}

.about-intro__bio {
  margin: 0;
  width: clamp(770px, 77.083vw, 1480px);
  color: var(--color-pink-2);
  font-family: var(--font-regular);
  font-size: clamp(21px, 2.083vw, 40px);
  letter-spacing: 0.03em;
  text-align: center;
}

/*
  Typewriter cursor (assets/js/bio-typewriter.js) — a plain inline span right
  after the typed-text span, so it naturally sits at the end of whatever line the
  last typed character wrapped to, no manual positioning needed. Keeps blinking
  forever once typing finishes (direct request), rather than disappearing.
*/
.about-intro__bio-cursor {
  display: inline-block;
  width: 0.07em;
  height: 0.9em;
  margin-left: 0.02em;
  background-color: currentColor;
  vertical-align: text-bottom;
  animation: bio-cursor-blink 1s step-end infinite;
}

@keyframes bio-cursor-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-intro__bio-cursor {
    animation: none;
  }
}

@media (max-width: 767px) {
  .about-intro {
    height: auto;
    padding: 32px 20px 64px;
  }

  .about-intro__title,
  .about-intro__subtitle,
  .about-intro__bg,
  .about-intro__bars,
  .about-intro__photo,
  .about-intro__center-group {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin: 16px auto;
  }

  .about-intro__bg,
  .about-intro__bars {
    display: none;
  }

  .about-intro__title {
    text-align: center;
  }

  .about-intro__subtitle {
    text-align: center;
  }

  .about-intro__cv {
    position: static;
    width: auto;
    height: 46px;
    margin: 16px auto;
    padding: 0 28px;
    border-radius: 23px;
    font-size: 1rem;
  }

  .about-intro__photo {
    width: 220px;
    height: 220px;
    border-radius: 16px;
  }

  .about-intro__bio {
    width: auto;
  }
}

/*
  "My CV" — same ink-blob reveal + look as the Highlights title (direct request),
  built with the shared partials/ink-title.njk macro + assets/js/ink-title.js.
  Only margin differs (own spacing above the CV section instead of Highlights'
  much larger clamp() — .cv's own margin-top below already provides the gap
  beneath this title, so this only needs to set the top one).
*/
.cv-title {
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-bold);
  font-size: clamp(28px, 2.92vw, 56px);
  letter-spacing: clamp(8px, 1.66vw, 31.92px);
  text-transform: capitalize;
  margin: calc(clamp(24px, 2.5vw, 48px) - 300px) 0 0;
}

/* CV, reproduced as real content (not an embedded PDF). Has no Figma reference of
   its own, so it carries its own side padding here (unlike .about-intro, whose
   children already have Figma's exact insets baked into their absolute
   positions) — keeps its text off the viewport edge at the 1920px reference and
   beyond, without affecting .about-intro's full-width canvas above it. */
.cv {
  padding: 0 clamp(20px, 4vw, 76px);
  margin-top: 50px;
  padding-bottom: clamp(96px, 10vw, 160px);
}

.cv__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 2px solid var(--color-green-2);
  padding-bottom: 24px;
}

.cv__role {
  margin: 0;
  color: var(--color-mint-2);
  font-family: var(--font-medium);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
}

.cv__name {
  text-align: right;
}

.cv__first-name {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-bold);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1;
}

.cv__last-name {
  margin: 4px 0 0;
  color: var(--color-cream);
  font-family: var(--font-regular);
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cv__contact-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin-top: 24px;
}

.cv__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-cream);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.8;
}

.cv__contact a {
  color: inherit;
}

.cv__contact a:hover {
  color: var(--color-green-2);
}

.cv__contact-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* LinkedIn/Behance glyphs are flat single-tone PNGs on a transparent background,
   so — same trick as the header logo's scrolled-state recolor — they're used as a
   mask over a solid fill instead of an <img>, giving an exact color regardless of
   what's baked into the source art. The website icon is a plain inline SVG
   (no matching asset existed) using currentColor, set to the same pink here. */
.cv__contact-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-pink);
}

.cv__contact-icon--linkedin,
.cv__contact-icon--behance {
  background-color: var(--color-pink);
}

.cv__contact-icon--linkedin {
  -webkit-mask-image: url("/assets/img/linkedin.png");
  mask-image: url("/assets/img/linkedin.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cv__contact-icon--behance {
  -webkit-mask-image: url("/assets/img/behance.png");
  mask-image: url("/assets/img/behance.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.cv__summary {
  color: var(--color-cream);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  max-width: 80ch;
  margin: 32px 0 0;
}

.cv__download {
  margin: 24px 0 0;
}

.cv__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  margin-top: 48px;
}

.cv__section {
  margin-bottom: 40px;
}

/*
  Each section is a <details>/<summary> pair: click the title to collapse/expand
  just that section — independent per section (not an accordion, so any
  combination can be open or closed), all open by default via the `open` attribute
  in the markup. <summary> already has a native disclosure marker (a triangle);
  ::marker/-webkit-details-marker hide it so the custom chevron below is the only
  one, and it's rotated purely from the parent <details>[open] state — no JS.
*/
.cv__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 8px 16px;
  background-color: var(--color-green-2);
  color: var(--color-bg);
  font-family: var(--font-medium);
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.cv__section-title::marker,
.cv__section-title::-webkit-details-marker {
  display: none;
}

.cv__section-title::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-bg);
  border-bottom: 2px solid var(--color-bg);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease-standard);
}

details.cv__section:not([open]) .cv__section-title::after {
  transform: rotate(-45deg);
}

details.cv__section:not([open]) .cv__section-title {
  margin-bottom: 0;
}

.cv__entry {
  margin-bottom: 20px;
}

.cv__entry h3 {
  margin: 0 0 6px;
  color: var(--color-cream);
  font-family: var(--font-medium);
  font-size: clamp(15px, 1.1vw, 17px);
}

.cv__entry p,
.cv__entry ul {
  margin: 0;
  color: var(--color-cream);
  opacity: 0.85;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.6;
}

.cv__entry ul {
  padding-left: 18px;
}

.cv__entry li {
  margin-bottom: 4px;
}

.cv__dates {
  margin-top: 8px !important;
  color: var(--color-pink) !important;
  opacity: 1 !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
}

.cv__skill-group {
  margin-bottom: 24px;
}

.cv__skill-group h3 {
  margin: 0 0 10px;
  color: var(--color-mint-2);
  font-family: var(--font-medium);
  font-size: clamp(14px, 1vw, 16px);
}

.cv__skill-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-cream);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.7;
}

.cv__skill-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cv__skill-list strong {
  color: var(--color-mint-2);
  font-family: var(--font-medium);
  font-weight: normal;
  white-space: nowrap;
}

.cv__columns--single {
  grid-template-columns: 1fr;
}

.cv__skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}

@media (max-width: 900px) {
  .cv__columns,
  .cv__skills-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .about-intro {
    flex-direction: column;
    text-align: center;
  }

  /*
    The desktop .cv-title margin-top is a large negative offset (tuned by eye to
    pull "My CV" up over .about-intro's own tall, mostly-empty fixed height on
    desktop). .about-intro switches to height:auto on mobile instead, wrapping its
    content tightly, so that same fixed negative pixel value overshoots way past
    it into the content above — reset to a plain positive gap here instead. Placed
    in THIS later 767px block (not the earlier one above) so it wins the cascade
    against the desktop .cv-title rule, which sits between the two — equal
    specificity, so source order decides regardless of which media query matches.
  */
  .cv-title {
    margin-top: 24px;
  }

  .cv__header {
    flex-direction: column;
  }

  .cv__name {
    text-align: left;
  }

  .cv__contact-row {
    flex-direction: column;
  }
}