/* ============================================================
   DIRT BLONDE DIARY
   THE SCRAPS
   scraps.css
   ============================================================ */


:root {

  --paper: #f1ede3;

  --paper-light: #f8f4eb;

  --paper-bright: #fcf9f2;

  --ink: #292720;

  --soft: #6e675d;

  --faded: #968d80;

  --wheat: #c2a267;

  --brown: #6a5140;

  --line:
    rgba(41, 39, 32, .13);

  --serif:
    "Libre Caslon Display",
    Georgia,
    serif;

  --body-serif:
    "Libre Caslon Text",
    Georgia,
    serif;

  --mono:
    "DM Mono",
    monospace;

}


/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {

  box-sizing: border-box;

}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  background:

    radial-gradient(
      circle at 12% 8%,
      rgba(255,255,255,.38),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 55%,
      rgba(194,164,103,.05),
      transparent 35%
    ),

    var(--paper);

  color:
    var(--ink);

  font-family:
    var(--body-serif);

  -webkit-font-smoothing:
    antialiased;

}


img {

  display: block;

  max-width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


/* ============================================================
   PAPER TEXTURE
   ============================================================ */

.paper-noise {

  position: fixed;

  inset: 0;

  z-index: 999;

  pointer-events: none;

  opacity: .17;

  background-image:

    repeating-linear-gradient(

      0deg,

      rgba(40,35,28,.018),

      rgba(40,35,28,.018) 1px,

      transparent 1px,

      transparent 4px

    );

  mix-blend-mode:
    multiply;

}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {

  position: relative;

  z-index: 100;

  min-height: 78px;

  padding:
    0 5vw;

  display: grid;

  grid-template-columns:
    minmax(120px,1fr)
    auto
    minmax(120px,1fr);

  align-items: center;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(241,237,227,.82);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

}


.mini-logo {

  justify-self: start;

  font-family:
    var(--mono);

  font-size: 10px;

  letter-spacing: .3em;

  transition:
    opacity .25s ease,
    transform .25s ease;

}


.mini-logo:hover {

  opacity: .5;

  transform:
    translateY(-1px);

}


.nav-links {

  display: flex;

  justify-content: center;

  align-items: center;

  gap:
    clamp(22px,3vw,42px);

  font-family:
    var(--mono);

  font-size: 8px;

  letter-spacing: .13em;

  white-space: nowrap;

}


.nav-links a {

  position: relative;

  padding:
    30px 0
    27px;

  transition:
    opacity .25s ease,
    transform .25s ease;

}


.nav-links a:hover {

  opacity: .5;

  transform:
    translateY(-1px);

}


.nav-links a.active::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 20px;

  width: 100%;

  height: 1px;

  background:
    var(--brown);

}


.issue-number {

  justify-self: end;

  font-family:
    var(--mono);

  font-size: 7px;

  letter-spacing: .18em;

  color:
    var(--faded);

}


/* ============================================================
   INTRO
   ============================================================ */

.scraps-intro {

  position: relative;

  width:
    min(1200px,92vw);

  margin:
    0 auto;

  padding:
    95px 0
    20px;

  text-align: center;

}


.scraps-intro h1 {

  margin: 0;

  font-family:
    var(--serif);

  font-size:
    clamp(74px,10vw,155px);

  font-weight: 400;

  line-height: .88;

  letter-spacing:
    -.065em;

  white-space: nowrap;

}


/*
   The HTML still has:
   The <span>Scraps</span>

   But the span now stays inline.
*/

.scraps-intro h1 span {

  display: inline;

  margin-left: .08em;

  font-style: italic;

}


.scraps-intro p {

  margin:
    40px auto
    0;

  font-size:
    clamp(14px,1.3vw,18px);

  font-style: italic;

  color:
    var(--soft);

}


.intro-star {

  position: absolute;

  left: 7%;

  top: 42%;

  color:
    var(--wheat);

  font-size: 18px;

}


.intro-decoration {

  display: block;

  margin-top: 24px;

  color:
    var(--wheat);

  font-size: 12px;

}


/* ============================================================
   SCRAPBOOK
   ============================================================ */

.scrapbook {

  position: relative;

  width:
    min(1250px,92vw);

  min-height: 1050px;

  margin:
    30px auto
    90px;

  isolation: isolate;

}


/* ============================================================
   PHOTO SCRAPS
   ============================================================ */

.scrap {

  position: absolute;

  margin: 0;

  padding: 10px;

  background:
    var(--paper-light);

  box-shadow:

    0 18px 45px
    rgba(45,38,30,.10),

    0 2px 5px
    rgba(45,38,30,.04);

  cursor: pointer;

  transition:

    transform .45s
    cubic-bezier(.2,.8,.2,1),

    box-shadow .45s ease;

}


.scrap img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position:
    center;

  background:
    var(--paper-light);

  filter:
    saturate(.9)
    contrast(.97);

}


.scrap:hover {

  z-index: 50;

  box-shadow:
    0 30px 70px
    rgba(45,38,30,.17);

}


.scrap.popped {

  z-index: 70;

  transform:
    scale(1.1)
    rotate(0deg) !important;

  box-shadow:
    0 40px 90px
    rgba(45,38,30,.21);

}


/* WHEAT */

.scrap-wheat {

  width: 47%;

  height: 360px;

  left: 10%;

  top: 55px;

  transform:
    rotate(-2deg);

}


/* TRUCK */

.scrap-truck {

  width: 29%;

  height: 270px;

  right: 8%;

  top: 5px;

  transform:
    rotate(5deg);

}


/* BINOCULARS */

.scrap-binoculars {

  width: 27%;

  height: 260px;

  left: 3%;

  top: 470px;

  transform:
    rotate(-6deg);

}


/* COWGIRL */

.scrap-cowgirl {

  width: 34%;

  height: 430px;

  right: 15%;

  top: 390px;

  transform:
    rotate(3deg);

}


/* ============================================================
   TAPE
   ============================================================ */

.scrap-tape {

  position: absolute;

  left: 50%;

  top: -12px;

  z-index: 25;

  width: 68px;

  height: 20px;

  background:

    linear-gradient(

      90deg,

      rgba(205,190,148,.47),

      rgba(225,213,178,.65),

      rgba(205,190,148,.47)

    );

  opacity: .86;

}


.tape-a {

  transform:
    translateX(-50%)
    rotate(-4deg);

}


.tape-b {

  transform:
    translateX(-50%)
    rotate(6deg);

}


.tape-c {

  transform:
    translateX(-50%)
    rotate(-7deg);

}


.tape-d {

  transform:
    translateX(-50%)
    rotate(3deg);

}


/* ============================================================
   GRAPHIC SCRAPS
   ============================================================ */

.paper-scrap {

  position: absolute;

  margin: 0;

  z-index: 18;

  pointer-events: none;

}


.paper-scrap img {

  width: 100%;

  height: auto;

}


.moments-scrap {

  width: 135px;

  left: 46%;

  top: 430px;

  transform:
    rotate(-8deg);

}


.landscapes-scrap {

  width: 150px;

  right: 3%;

  top: 330px;

  transform:
    rotate(8deg);

}


.fashion-scrap {

  width: 130px;

  left: 28%;

  bottom: 90px;

  transform:
    rotate(5deg);

}


.nature-scrap {

  width: 130px;

  right: 31%;

  bottom: 45px;

  transform:
    rotate(-4deg);

}


.scrap-stickers {

  position: absolute;

  width: 120px;

  right: 4%;

  bottom: 80px;

  z-index: 22;

  transform:
    rotate(8deg);

}


/* ============================================================
   FLOATING DECALS
   ============================================================ */

.floating-symbol {

  position: absolute;

  color:
    var(--wheat);

  pointer-events: none;

}


.symbol-one {

  left: 4%;

  top: 8%;

  font-size: 20px;

}


.symbol-two {

  right: 1%;

  top: 28%;

  font-size: 18px;

}


.symbol-three {

  left: 58%;

  top: 3%;

  font-size: 14px;

}


.symbol-four {

  left: 10%;

  bottom: 7%;

  font-size: 22px;

}


.symbol-five {

  right: 8%;

  bottom: 3%;

  font-size: 17px;

}


.symbol-six {

  right: 41%;

  bottom: 10%;

  font-size: 15px;

}


/* ============================================================
   CLICK GLITTER
   ============================================================ */

.click-sparkle {

  position: fixed;

  z-index: 500;

  pointer-events: none;

  color:
    var(--wheat);

  font-family:
    Georgia,
    serif;

  animation:
    sparkle-pop
    .85s
    ease-out
    forwards;

}


@keyframes sparkle-pop {

  0% {

    opacity: 0;

    transform:
      translate(0,0)
      scale(.3);

  }


  20% {
    opacity: 1;
  }


  100% {

    opacity: 0;

    transform:

      translate(
        var(--x),
        var(--y)
      )

      rotate(
        var(--r)
      )

      scale(1.1);

  }

}


/* ============================================================
   ENDING
   ============================================================ */

.scraps-ending {

  width:
    min(700px,80vw);

  margin:
    0 auto;

  padding:
    20px 0
    100px;

  display: flex;

  justify-content: center;

  gap: 18px;

  color:
    var(--wheat);

  font-size: 11px;

}


/* ============================================================
   FOOTER
   ============================================================ */

footer {

  min-height: 105px;

  padding:
    0 5vw;

  border-top:
    1px solid var(--line);

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  font-family:
    var(--mono);

  font-size: 6px;

  letter-spacing: .18em;

  color:
    var(--faded);

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

  .nav-links {

    gap: 18px;

    font-size: 7px;

  }


  .scraps-intro h1 {

    font-size: 10.5vw;

  }


  .scrapbook {

    min-height: 900px;

  }


  .scrap-wheat {
    width: 52%;
  }


  .scrap-truck {
    width: 33%;
  }


  .scrap-cowgirl {
    width: 38%;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .site-header {

    min-height: 68px;

    padding:
      0 4vw;

    grid-template-columns:
      auto 1fr;

  }


  .issue-number {
    display: none;
  }


  .mini-logo {
    font-size: 7px;
  }


  .nav-links {

    justify-self: end;

    gap: 13px;

    font-size: 6px;

    letter-spacing: .06em;

  }


  .scraps-intro {

    width: 94vw;

    padding-top: 65px;

  }


  .scraps-intro h1 {

    font-size: 15vw;

    white-space: nowrap;

  }


  .scraps-intro h1 span {

    display: inline;

    margin-left: .06em;

  }


  .scrapbook {

    width: 92vw;

    min-height: 790px;

  }


  .scrap-wheat {

    width: 63%;

    height: 280px;

    left: 5%;

    top: 55px;

  }


  .scrap-truck {

    width: 36%;

    height: 210px;

    right: 0;

    top: 10px;

  }


  .scrap-binoculars {

    width: 36%;

    height: 200px;

    left: 0;

    top: 370px;

  }


  .scrap-cowgirl {

    width: 47%;

    height: 335px;

    right: 3%;

    top: 330px;

  }


  .moments-scrap {

    width: 90px;

    left: 31%;

    top: 610px;

  }


  .landscapes-scrap {

    width: 85px;

    right: 2%;

    top: 240px;

  }


  .fashion-scrap,
  .nature-scrap {

    display: none;

  }


  .scrap-stickers {

    width: 78px;

    right: 3%;

    bottom: 20px;

  }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 540px) {

  .site-header {

    grid-template-columns: 1fr;

    padding:
      0 18px;

  }


  .mini-logo {
    display: none;
  }


  .nav-links {

    width: 100%;

    justify-self: stretch;

    justify-content:
      space-between;

    gap: 6px;

    font-size: 5.5px;

    letter-spacing: .03em;

  }


  .nav-links a {

    padding:
      25px 0
      23px;

  }


  .scraps-intro h1 {

    font-size: 14.2vw;

  }


  .scrapbook {

    min-height: 720px;

  }


  .scrap-wheat {
    height: 245px;
  }


  .scrap-truck {
    height: 180px;
  }


  .scrap-binoculars {

    height: 175px;

    top: 330px;

  }


  .scrap-cowgirl {

    height: 300px;

    top: 305px;

  }


  footer {

    padding:
      0 18px;

    font-size: 5px;

  }

}


/* ============================================================
   EXTRA SMALL
   ============================================================ */

@media (max-width: 390px) {

  .scraps-intro h1 {

    font-size: 13.7vw;

  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;

  }

}