/* ============================================================
   Jona Založnik — portfolio
   Rebuilt from the Figma source (frame width 1512px).
   Type styles, colours and geometry below are the values read
   out of the Figma file itself, not approximations.
   ============================================================ */

@import url('_fontface.css');

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --ink:      #000000;
  --paper:    #ffffff;
  --mint:     #9defee;
  --pink:     #ffc0e9;
  --citron:   #e0dd7a;
  --muted:    rgba(0, 0, 0, .5);

  /* the design is drawn on a 1512px canvas; --u scales every
     measurement below it so the layout keeps its proportions */
  --canvas: 1512;
  --u: 1px;

  --pad:   calc(63 * var(--u));
  --nav-h: calc(61 * var(--u));

  /* the outlined display lines are capped against the viewport so they
     can never outgrow the page between breakpoints */
  --fs-hero:    min(calc(200 * var(--u)), 15.5vw);  /* Inter Bold   */
  --fs-thanks:  min(calc(150 * var(--u)), 24vw);    /* Inter Medium */
  --fs-xl:      calc(96  * var(--u));  /* Inter Medium  */
  --fs-lg:      calc(48  * var(--u));  /* Inter Medium  */
  --fs-meta:    calc(40  * var(--u));  /* Inter Regular */
  --fs-body:    calc(30  * var(--u));  /* Inter Regular */
  --fs-card:    calc(24  * var(--u));
  --fs-nav:     calc(24  * var(--u));
  --fs-contact: calc(30  * var(--u));

  --track-nav:  calc(1.92 * var(--u));
  --track-card: calc(2.4  * var(--u));

  --lh-body: calc(36 * var(--u));
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--mint); color: var(--ink); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: min(100%, calc(1512 * var(--u)));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Navigation (Figma component "FOT") ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: calc(83 * var(--u));
  height: var(--nav-h);
  padding-inline: calc(33 * var(--u)) calc(51 * var(--u));
  box-shadow: 0 0 calc(16 * var(--u)) rgba(0, 0, 0, .035);
}

.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16 * var(--u)) calc(9 * var(--u));
  font-size: var(--fs-nav);
  font-weight: 400;
  letter-spacing: var(--track-nav);
  line-height: normal;
  color: var(--muted);
  white-space: nowrap;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color .18s ease;
}
.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--ink); }
.nav__link:focus-visible { outline: calc(2 * var(--u)) solid var(--ink); outline-offset: calc(2 * var(--u)); }

/* ---------- Outlined display type ---------- */
.outline {
  margin: 0;
  text-align: center;
  line-height: normal;
  color: transparent;
  -webkit-text-stroke: calc(2 * var(--u)) var(--mint);
  text-stroke: calc(2 * var(--u)) var(--mint);
  max-width: 100%;
  user-select: none;
}

.hero { padding-top: calc(247 * var(--u)); padding-bottom: calc(289 * var(--u)); }
.hero .outline { font-size: var(--fs-hero); font-weight: 700; }

/* ---------- Meta row ---------- */
.meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: normal;
  margin-inline: calc(-4 * var(--u));
}
.meta span:nth-child(2) { margin-inline-start: auto; margin-inline-end: calc(84 * var(--u)); }

/* ---------- Headings ---------- */
.section-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: normal;
}
.section-title .dot { color: var(--mint); }

.heading {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: normal;
}

/* ---------- About ---------- */
.about { padding-top: calc(56 * var(--u)); padding-bottom: calc(81 * var(--u)); }
.about__title { margin-left: calc(117 * var(--u)); }

.about__grid {
  display: grid;
  grid-template-columns: calc(745 * var(--u)) calc(576 * var(--u));
  gap: calc(61 * var(--u));
  justify-content: start;
  align-items: start;
  margin-top: calc(62 * var(--u));
}

.about__text {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
}
.about__text p { margin: 0 0 var(--lh-body); }
.about__text p:last-child { margin-bottom: 0; }

.about__photo {
  margin: 0;
  aspect-ratio: 576 / 432;
  border: calc(1 * var(--u)) dashed var(--ink);
  border-radius: calc(23 * var(--u));
  overflow: hidden;
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(23 * var(--u));
}

.c-mint   { color: var(--mint); }
.c-pink   { color: var(--pink); }
.c-citron { color: var(--citron); }

/* ---------- Dashed rule (Figma "Line 6" / "Line 7") ---------- */
.rule {
  height: calc(4 * var(--u));
  width: calc(1382 * var(--u));
  max-width: 100%;
  margin: 0;
  border: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--ink) 0,
    var(--ink) calc(8 * var(--u)),
    transparent calc(8 * var(--u)),
    transparent calc(16 * var(--u))
  );
}

/* ---------- Project grid ---------- */
.projects { padding-top: calc(84 * var(--u)); }
.projects__title { margin-left: calc(114 * var(--u)); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, calc(426 * var(--u)));
  justify-content: start;
  gap: calc(29 * var(--u)) calc(51 * var(--u));
  margin-top: calc(61 * var(--u));
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  height: calc(101 * var(--u));
  padding: calc(8 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid var(--mint);
  border-radius: calc(15 * var(--u));
  text-align: center;
  background: var(--paper);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  background: var(--mint);
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(157, 239, 238, .55);
}
.card:focus-visible {
  outline: calc(2 * var(--u)) solid var(--ink);
  outline-offset: calc(3 * var(--u));
}

.card__name,
.card__desc {
  font-size: var(--fs-card);
  letter-spacing: var(--track-card);
  line-height: normal;
}
.card__name { font-weight: 700; }
.card__name--semi { font-weight: 600; }
.card__desc { font-weight: 400; }

/* ---------- Thanks + contact ---------- */
.thanks { padding-top: calc(139 * var(--u)); padding-bottom: calc(139 * var(--u)); }
.thanks .outline { font-size: var(--fs-thanks); font-weight: 500; }

.contact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-contact);
  line-height: normal;
  padding-right: calc(7 * var(--u));
  padding-bottom: calc(59 * var(--u));
  margin: 0;
}
.contact__label { font-weight: 500; margin-inline-end: auto; }
.contact a { transition: color .18s ease; }
.contact a:hover { color: var(--mint); }
.contact__mail { margin-inline-end: calc(47 * var(--u)); }

/* ---------- Projects index page ---------- */
.index-page .projects { padding-top: calc(184 * var(--u)); padding-bottom: calc(408 * var(--u)); }

/* ============================================================
   Responsive
   ============================================================ */

/* below the design width, scale the canvas down fluidly */
@media (max-width: 1512px) {
  :root { --u: calc(100vw / var(--canvas)); }
}

/* tablet */
@media (max-width: 1000px) {
  :root {
    --canvas: 900;
    --pad: calc(48 * var(--u));
  }
  .nav__inner { padding-inline: calc(28 * var(--u)) calc(24 * var(--u)); gap: calc(48 * var(--u)); }
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: calc(56 * var(--u)); }
  .about__photo { order: -1; }
  .about__text, .about__photo { width: 100%; }
  .about__title, .projects__title { margin-left: 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .meta { flex-wrap: wrap; gap: calc(12 * var(--u)); margin-inline: 0; }
  .meta span:nth-child(2) { margin-inline-end: 0; }
}

/* phone */
@media (max-width: 640px) {
  :root {
    --canvas: 420;
    --pad: calc(24 * var(--u));
    --fs-hero:    calc(62 * var(--u));
    --fs-thanks:  calc(56 * var(--u));
    --fs-xl:      calc(44 * var(--u));
    --fs-lg:      calc(30 * var(--u));
    --fs-meta:    calc(18 * var(--u));
    --fs-body:    calc(16 * var(--u));
    --fs-card:    calc(14 * var(--u));
    --fs-nav:     calc(14 * var(--u));
    --fs-contact: calc(16 * var(--u));
    --track-nav:  calc(1 * var(--u));
    --track-card: calc(1.2 * var(--u));
    --lh-body:    calc(22 * var(--u));
    --nav-h:      calc(48 * var(--u));
  }
  .outline { -webkit-text-stroke-width: calc(1.2 * var(--u)); }
  .hero { padding-top: calc(80 * var(--u)); padding-bottom: calc(72 * var(--u)); }
  .about { padding-top: calc(40 * var(--u)); padding-bottom: calc(40 * var(--u)); }
  .about__grid { margin-top: calc(28 * var(--u)); }
  .meta { flex-direction: column; gap: calc(4 * var(--u)); }
  .projects { padding-top: calc(48 * var(--u)); }
  .grid { grid-template-columns: minmax(0, 1fr); width: 100%; gap: calc(14 * var(--u)); margin-top: calc(28 * var(--u)); }
  .card { height: auto; padding: calc(16 * var(--u)) calc(12 * var(--u)); }
  .thanks { padding-top: calc(56 * var(--u)); padding-bottom: calc(48 * var(--u)); }
  .contact { flex-direction: column; align-items: flex-start; gap: calc(8 * var(--u)); padding-right: 0; padding-bottom: calc(40 * var(--u)); }
  .contact__mail { margin-inline-end: 0; }
  .index-page .projects { padding-top: calc(64 * var(--u)); padding-bottom: calc(80 * var(--u)); }
  .rule { height: calc(3 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}