* {
  box-sizing: border-box;
}

:root {
  --ink: #241f18;
}

/* body {
  margin: 0;
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  background: #ffffff;
} */

/* .scrap-page is locked to the exact aspect ratio of portfolio.png
   (4398 x 3100) and scales as one unit — as it grows/shrinks with the
   viewport, everything positioned inside it by percentage (the text)
   scales and moves right along with the art. */
/* .scrap-page {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 4398 / 3100;
  background-image: url("images/portfolio.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: inline-size;
} */


body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  background: #ffffff;
}

.scrap-page {
  position: relative;
  width: min(100%, calc((100vh - 48px) * 4398 / 3100), 1200px);
  aspect-ratio: 4398 / 3100;
  background-image: url("images/portfolio.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: inline-size;
}

/* ---- content ---- */

/* Positioned as a percentage of .scrap-page, measured against the
   blank cream area in portfolio.png (clear of the clip, tape,
   photo, flower, and bunny). */
.content {
  position: absolute;
  top: 32%;
  left: 12%;
  width: 54%;
}

/* Sized in cqw (% of .scrap-page's width) so type scales with the
   container instead of staying a fixed pixel size; clamp() keeps it
   from getting unreadably small or comically large at the extremes. */
.content h1 {
  font-size: clamp(20px, 3.4cqw, 46px);
  font-weight: 500;
  margin: 0 0 1.6cqw 0;
}

.content p {
  font-size: clamp(12px, 1.3cqw, 17px);
  line-height: 1.65;
  margin: 0 0 1.3cqw 0;
}

/* .contact-row {
  display: flex;
  gap: 1.2cqw;
  margin-top: 2cqw;
  justify-content: center;
  align-items: center;
} */

.contact-row {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.2cqw;
  align-items: center;
}

.contact-row img {
  width: clamp(28px, 3.8cqw, 56px);
  height: clamp(28px, 3.8cqw, 56px);
  display: block;
}

.photo {
  display: none;
}

.cc-text {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(9px, 1.85cqw, 12px);
  color: var(--ink);
  opacity: 0.55;
  white-space: nowrap;
}

a {
  color: #3F2104;
}

.highlight-blue {
  background: rgba(160, 195, 255, .3);
  padding: 1px 5px;
  border-radius: 4px;
}

.highlight-yellow {
  background-color: #f7d7aa96;
  padding: 1px 5px;
  border-radius: 4px;
}

.highlight-green {
  background: rgba(208, 215, 168, .6);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- mobile fallback ----
   portfolio.png is a wide landscape scene; locked to its aspect ratio,
   .scrap-page gets too short on a phone to hold three paragraphs of
   overlaid text. Below this width we drop the overlay entirely: a
   plain tiling paper texture (mobile_paper_bkg.png) behind text that
   flows normally instead of being pinned to a spot on the art. */
@media (max-width: 700px) {
  body {
    background-image: url("images/mobile_paper_bkg.png");
    background-repeat: repeat;
    background-size: 700px auto;
    display: block;
    min-height: 0;
    padding: 0;
  }

  .scrap-page {
    aspect-ratio: auto;
    max-width: 100%;
    background-image: none;
    padding: 48px 24px 64px 24px;
  }

  .content {
    position: static;
    width: 100%;
  }

  .content h1 {
    font-size: 32px;
  }

  .content p {
    font-size: 15px;
  }

  .contact-row {
    gap: 32px;
    margin-top: 0px;
    bottom: -2%;
  }

  .contact-row img {
    width: 46px;
    height: 46px;
  }

  .photo {
    display: block;
    width: 45%;
    margin: 0 auto 12px auto;
  }

  .cc-text {
    bottom: -10%;
    font-size: 12px;
  }
}