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

h1, h2, h3, p {
  margin: 0;
}

img {
  display: block;
}

/* 18px square grid, black lines at 18% opacity on #f8f8f8.
   The offset reproduces the Figma frame, where the grid starts at (-95.43, -28.43). */
body {
  margin: 0;
  min-height: 100vh;
  background-color: #f8f8f8;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: calc(50% - 618.43px) 7.57px;
  color: #000;
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 0;
}

.hero {
  display: flex;
  gap: 39px;
  align-items: center;
  justify-content: center;
  width: 1280px;
}

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

.intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 545px;
}

.intro__name {
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 300;
  font-size: 49px;
  line-height: 68px;
}

/* The box hugs its text ("Designer UX/UI") instead of spanning the column. */
.intro__tagline {
  align-self: flex-start;
  padding: 10px;
  border: 1px solid #000;
  background: #fff;
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 34px;
  line-height: 47px;
  white-space: nowrap;
}

.intro__tagline u {
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.intro__bio {
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #fff;
}

.intro__bio p {
  width: 524.286px;
  font-family: "Intel One Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
}

/* ---------- Contact ---------- */

.contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid #000;
  background: #fff;
}

.contact__title {
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
}

.contact__text {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

.contact .contact-links { margin-top: 4px; }


/* ---------- Projects ---------- */

.projects {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  width: 575px;
}

.projects__label {
  position: relative;
  width: 243.458px;
  height: 61.143px;
}

.projects__title {
  position: absolute;
  top: 0;
  left: 60.93px;
  font-weight: 700;
  font-size: 21px;
  line-height: 25px;
  white-space: nowrap;
}

/* Each arrow is the same curved stroke, rotated (and mirrored) into place. */
.projects__arrow {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52.424px;
  height: 61.143px;
}

.projects__arrow--left { left: 0; }
.projects__arrow--right { left: 191.03px; }

.projects__arrow > span {
  position: relative;
  flex: none;
  width: 60.609px;
  height: 20.67px;
}

.projects__arrow--left > span { transform: rotate(126.12deg); }
.projects__arrow--right > span { transform: rotate(53.88deg) scaleY(-1); }

.projects__arrow img {
  position: absolute;
  inset: -11.56% -1.65% 25.79% -0.89%;
  width: auto;
  height: auto;
  max-width: none;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 273px);
  grid-auto-rows: 271px;
  gap: 29px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
}

a.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

a.card:focus-visible {
  outline: 2px solid #4269ff;
  outline-offset: 3px;
}

.card--klap { background: #edf5fe; }
.card--plan { background: #ffe6ec; }
.card--soon { align-items: flex-end; background: #a3ccf0; }

.card__bg,
.card__media {
  position: absolute;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.card__bg {
  inset: 0;
  width: 100%;
  height: 100%;
}

.card__media--visite { top: -31.93px; left: -19.93px; width: 502.224px; height: 334.858px; }
.card__media--klap { top: -35.18px; left: -91.07px; width: 455.14px; height: 341.355px; }
.card__media--plan { top: 14.31px; left: 14.87px; width: 252px; height: 255.384px; }

.card__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  height: 138px;
}

.card__title {
  background: #fff;
  font-weight: 300;
  font-size: 30px;
  line-height: 36px;
}

.card__title--full {
  align-self: stretch;
}

.card__subtitle {
  align-self: stretch;
  min-height: 44px;
  background: #fff;
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  line-height: 22px;
}

.card__footer {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.card__cta {
  position: relative;
  padding: 2px 4px;
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

a.card:hover .card__cta span { display: inline-block; transform: translateX(3px); }
.card__cta span { display: inline-block; transition: transform 0.2s ease; }

.card__spacer {
  width: 52px;
  height: 22px;
}

.card__veil {
  position: absolute;
  inset: 0;
  background: #3c3c3c;
  opacity: 0.6;
}

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  .home { padding: 64px 24px; }

  .hero {
    flex-wrap: wrap;
    gap: 56px;
    width: 100%;
  }
}

@media (max-width: 639px) {
  .home { padding: 40px 16px; }

  .intro,
  .projects { width: 100%; }

  .intro__name { font-size: 36px; line-height: 50px; }
  .intro__tagline { font-size: 22px; line-height: 31px; white-space: normal; }
  .intro__bio p { width: auto; font-size: 16px; line-height: 22px; }

  /* Cards keep their designed 273 × 271 size so the artwork crops stay exact. */
  .projects__grid {
    grid-template-columns: 273px;
    gap: 24px;
  }
}