/* ============================================================
   Simona Tedesco — Portfolio
   Source of truth: Figma "Portfolio - 2026"
   Desktop frame: 1440x1024 · Mobile frame: 393x852
   ============================================================ */

:root {
  --ink: #241e1d;
  --bg: #f5f5f5;
  --violet: #9381ff;
  --highlight: #b7e3ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Golos Text", sans-serif;
}

img {
  display: block;
}

.frame {
  position: relative;
  overflow: hidden;
  min-height: max(1024px, 100vh);
}

/* ---------- Background ---------- */

.bg-blur {
  position: absolute;
  left: -81px;
  top: -253px;
  width: calc(100% + 162px);
  height: 1377px;
  transform: rotate(180deg);
}

.bg-blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lines {
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: 552px;
}

.lines img {
  width: 100%;
  height: 100%;
}

/* ---------- Folder tabs ---------- */

.tab {
  position: absolute;
  height: 459px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.tab--branding {
  left: -35px;
  top: 447px;
  width: calc(100% + 39px);
  background-image: url(../assets/tab-branding.svg);
}

.tab--projects {
  left: -25px;
  top: 496px;
  width: calc(100% + 29px);
  background-image: url(../assets/tab-projects.svg);
}

.tab--illustrations {
  left: -76px;
  top: 567px;
  width: calc(100% + 79px);
  background-image: url(../assets/tab-illustrations.svg);
}

.tab--about {
  left: -68px;
  top: 629px;
  width: calc(100% + 74px);
  background-image: url(../assets/tab-about.svg);
}

.tab-label {
  position: absolute;
  font-family: "Google Sans Code", monospace;
  font-weight: 300;
  font-size: 32px;
  line-height: normal;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.tab-label--branding {
  left: calc(66.67% + 41px);
  top: 471px;
}

.tab-label--projects {
  left: calc(8.33% + 260px);
  top: 520px;
  transform: translateX(-50%);
  text-align: center;
}

.tab-label--illustrations {
  left: calc(50% + 65px);
  top: 591px;
}

.tab-label--about {
  left: calc(16.67% + 206px);
  top: 653px;
  transform: translateX(-50%);
  text-align: center;
}

/* ---------- CV sticker ---------- */

.cv {
  position: absolute;
  left: calc(75% - 64px);
  top: 113px;
  width: 117px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.cv__paper {
  width: 86px;
  height: 122px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.cv__paper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.cv__name {
  font-family: "Google Sans Code", monospace;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: var(--ink);
  text-align: center;
}

.squiggle {
  position: absolute;
  left: calc(75% - 42px);
  top: 273px;
  width: 74.967px;
  height: 10.331px;
  transform: rotate(1.47deg);
}

.squiggle img {
  width: 100%;
  height: 100%;
}

.arrow {
  position: absolute;
  left: calc(75% - 19px);
  top: 289px;
  width: 76.554px;
  height: 53.297px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow img {
  flex: none;
  width: 36.063px;
  height: 69.445px;
  transform: rotate(105.49deg);
}

.resume-note {
  position: absolute;
  left: calc(83.33% + 6.54px);
  top: 313.5px;
  width: 122.504px;
  height: 54.805px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.resume-note p {
  margin: 0;
  width: 118.361px;
  transform: rotate(-7.35deg);
  font-family: "Mansalva", cursive;
  font-size: 20px;
  line-height: normal;
  color: var(--violet);
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Intro ---------- */

.intro {
  position: absolute;
  left: calc(8.33% + 85px);
  top: 282px;
  width: 624px;
  font-size: 20px;
  line-height: 28px;
}

.intro p {
  margin: 0;
}

/* Mock text selection over "Product & UI/UX Designer" */
.hl {
  position: relative;
  background: var(--highlight);
  mix-blend-mode: multiply;
}

.hl::before,
.hl::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 36px;
  background: url(../assets/caret-right.svg) no-repeat;
  background-size: 100% 100%;
}

.hl::before {
  left: -6px;
  top: -7px;
  transform: scaleY(-1);
}

.hl::after {
  right: -6px;
  top: 0;
}

/* ---------- Title & contact ---------- */

.title {
  position: absolute;
  left: 119px;
  top: 48px;
  width: 600px;
  height: 200px;
  margin: 0;
  overflow: hidden;
}

.title img {
  position: absolute;
  left: 0;
  top: -0.05%;
  width: 98.83%;
  height: 100.11%;
}

.contact {
  position: absolute;
  left: calc(83.33% - 67px);
  top: 51px;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
}

/* ============================================================
   Mobile — Figma frame 393x852
   ============================================================ */

@media (max-width: 767px) {
  /* Mobile uses normal document flow (title -> intro -> tabs) so the
     page height always matches the real content and everything stays
     reachable by scrolling, whatever the device viewport is. Spacing
     reproduces the 393x852 Figma frame exactly. */
  .frame {
    min-height: 852px;
    min-height: max(852px, 100dvh);
  }

  .bg-blur,
  .lines,
  .cv,
  .squiggle,
  .arrow,
  .resume-note {
    display: none;
  }

  .title {
    position: relative;
    left: auto;
    top: auto;
    margin: 67px auto 0;
    width: min(346px, calc(100% - 40px));
    height: auto;
    aspect-ratio: 346 / 115;
  }

  .contact {
    left: calc(50% + 63.5px);
    top: 41px;
  }

  .intro {
    position: static;
    margin: 28px auto 0;
    width: calc(100% - 40px);
    max-width: 353px;
    font-size: 16px;
    line-height: 28px;
  }

  .hl::before,
  .hl::after {
    width: 9.519px;
    height: 28.556px;
  }

  .hl::before {
    left: -4.8px;
    top: -5.5px;
    background-image: url(../assets/caret-m-left.svg);
  }

  .hl::after {
    right: -4.8px;
    top: 0;
    background-image: url(../assets/caret-m-right.svg);
  }

  /* Tabs stack in flow after the intro; the tall folder bodies
     overflow the container and get clipped by the frame edge. */
  .tabs {
    position: relative;
    display: block;
    margin-top: 24px;
    height: 366px;
  }

  /* All four tabs share the same shape on mobile; stacking order
     follows vertical position instead of DOM order. */
  .tab {
    left: -8px;
    width: calc(100% + 12.5px);
    background-image: url(../assets/tab-mobile.svg);
  }

  .tab-label {
    left: calc(25% + 91.75px);
    transform: translateX(-50%);
    text-align: center;
    font-size: 20px;
  }

  .tab--projects       { top: 0; z-index: 1; }
  .tab-label--projects { top: 16px; z-index: 1; }

  .tab--branding       { top: 56px; z-index: 2; }
  .tab-label--branding { top: 72px; z-index: 2; }

  .tab--about          { top: 117px; z-index: 3; }
  .tab-label--about    { top: 133px; z-index: 3; }

  .tab--illustrations       { top: 178px; z-index: 4; }
  .tab-label--illustrations { top: 194px; z-index: 4; }
}