/* ============================================================
   DIRT BLONDE DIARY
   HOME / INDEX
   ============================================================ */


:root {

  --paper: #f1ede3;

  --paper-light: #f8f4eb;

  --paper-bright: #fcf9f2;

  --ink: #292720;

  --soft: #70695f;

  --faded: #978f82;

  --wheat: #c2a267;

  --wheat-bright: #d4b76f;

  --wheat-light: #e1cf9e;

  --brown: #68513e;

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

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

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

  --mono:
    "DM Mono",
    "Courier New",
    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,.40),
      transparent 30%
    ),

    radial-gradient(
      circle at 86% 54%,
      rgba(194,164,103,.055),
      transparent 36%
    ),

    var(--paper);

  color:
    var(--ink);

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

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


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;

}


/* ============================================================
   WHEAT CURSOR
   ============================================================ */

html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .paper-photo {

  cursor: none !important;

}


.wheat-cursor {

  position: fixed;

  left: 0;

  top: 0;

  z-index: 6000;

  width: 38px;

  height: 38px;

  pointer-events: none;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  font-size: 30px;

  line-height: 1;

  transform:
    translate(-50%, -50%);

  filter:
    drop-shadow(
      0 3px 5px
      rgba(80,60,30,.12)
    );

  transition:
    opacity .15s ease,
    scale .18s ease;

}


.wheat-cursor.is-visible {
  opacity: 1;
}


.wheat-cursor.is-hovering {
  scale: 1.23;
}


/* ============================================================
   CURSOR GLITTER
   ============================================================ */

.cursor-glitter {

  position: fixed;

  z-index: 5900;

  pointer-events: none;

  color:
    var(--wheat-bright);

  font-family:
    Georgia,
    serif;

  line-height: 1;

  text-shadow:
    0 0 8px
    rgba(215,181,101,.30);

  animation:
    trail-glitter
    1000ms
    ease-out
    forwards;

}


@keyframes trail-glitter {

  0% {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(.3);

  }


  12% {
    opacity: 1;
  }


  60% {
    opacity: .7;
  }


  100% {

    opacity: 0;

    transform:

      translate(
        calc(-50% + var(--x)),
        calc(-50% + var(--y))
      )

      rotate(
        var(--rotation)
      )

      scale(1.15);

  }

}


/* ============================================================
   BURST GLITTER
   ============================================================ */

.burst-glitter {

  position: fixed;

  z-index: 6100;

  pointer-events: none;

  color:
    var(--wheat-bright);

  font-family:
    Georgia,
    serif;

  line-height: 1;

  text-shadow:
    0 0 10px
    rgba(215,181,101,.32);

  animation:
    burst-out
    900ms
    cubic-bezier(.12,.65,.2,1)
    forwards;

}


@keyframes burst-out {

  0% {

    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(.15)
      rotate(0deg);

  }


  12% {
    opacity: 1;
  }


  55% {
    opacity: .92;
  }


  100% {

    opacity: 0;

    transform:

      translate(
        calc(-50% + var(--burst-x)),
        calc(-50% + var(--burst-y))
      )

      scale(1.15)

      rotate(
        var(--burst-rotation)
      );

  }

}


/* ============================================================
   NAVIGATION
   ============================================================ */

.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: .30em;

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

}


.mini-logo:hover {

  opacity: .52;

  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);

}


.header-star {

  justify-self: end;

  color:
    var(--wheat);

  font-size: 11px;

}


/* ============================================================
   COVER
   ============================================================ */

.cover {

  width:
    min(1500px,93vw);

  margin:
    0 auto;

  padding:
    80px 0
    130px;

}


/* ============================================================
   TITLE
   ============================================================ */

.cover-title {

  position: relative;

  z-index: 30;

  width:
    min(1450px,96vw);

  margin:
    0 auto;

  text-align: center;

}


.cover-title h1 {

  margin: 0;

  font-family:
    var(--serif);

  font-size:
    clamp(66px,10vw,156px);

  font-weight: 400;

  line-height: .85;

  letter-spacing:
    -.065em;

  white-space: nowrap;

}


.cover-title p {

  margin:
    38px auto
    0;

  font-size:
    clamp(15px,1.4vw,20px);

  font-style: italic;

  color:
    var(--soft);

}


.cover-star {

  position: absolute;

  color:
    var(--wheat);

}


.star-left {

  left: 3%;

  top: 45%;

  font-size: 19px;

}


.star-right {

  right: 2%;

  top: 10%;

  font-size: 11px;

  letter-spacing: .18em;

}


.little-wave {

  margin-top: 26px;

  color:
    var(--wheat);

  font-size: 18px;

  opacity: .7;

}


/* ============================================================
   COLLAGE
   ============================================================ */

.cover-collage {

  position: relative;

  width:
    min(1250px,92vw);

  /*
     Extra vertical room keeps every photo safely inside
     the cover section before the first content block begins.
  */

  height: 780px;

  margin:
    0 auto;

  isolation: isolate;

}


/* ============================================================
   PHOTO FRAMES
   ============================================================ */

.paper-photo {

  position: absolute;

  margin: 0;

  padding: 11px;

  background:
    var(--paper-bright);

  box-shadow:

    0 20px 50px
    rgba(45,38,30,.10),

    0 3px 6px
    rgba(45,38,30,.04);

  transition:

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

    box-shadow .45s ease;

}


.paper-photo img {

  width: 100%;

  height: auto;

  object-fit: contain;

  object-position:
    center;

  background:
    var(--paper-bright);

  filter:
    saturate(.91)
    contrast(.98);

}


.paper-photo:hover {

  z-index: 60;

  box-shadow:

    0 36px 80px
    rgba(45,38,30,.18);

}


/* WHEAT */

.wheat-photo {

  width: 48%;

  left: 26%;

  top: 65px;

  z-index: 5;

  transform:
    rotate(-1.5deg);

}


.wheat-photo:hover {

  transform:
    translateY(-8px)
    rotate(0deg)
    scale(1.01);

}


/* COWGIRL */

.cowgirl-photo {

  width: 23%;

  right: 6%;

  top: 160px;

  z-index: 12;

  transform:
    rotate(5deg);

}


.cowgirl-photo:hover {

  transform:
    translateY(-8px)
    rotate(1deg)
    scale(1.02);

}


/* TRUCK */

.truck-photo {

  width: 25%;

  left: 2%;

  top: 260px;

  z-index: 11;

  transform:
    rotate(-6deg);

}


.truck-photo:hover {

  transform:
    translateY(-8px)
    rotate(-1deg)
    scale(1.02);

}


/* BINOCULARS */

.binocular-photo {

  width: 19%;

  right: 14%;

  bottom: 20px;

  z-index: 14;

  transform:
    rotate(4deg);

}


.binocular-photo:hover {

  transform:
    translateY(-8px)
    rotate(0deg)
    scale(1.025);

}


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

.tape {

  position: absolute;

  left: 50%;

  top: -12px;

  z-index: 30;

  width: 67px;

  height: 20px;

  background:

    linear-gradient(

      90deg,

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

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

      rgba(205,190,148,.46)

    );

  opacity: .87;

}


.wheat-tape {

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

}


.cowgirl-tape {

  width: 53px;

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

}


.truck-tape {

  width: 55px;

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

}


.binocular-tape {

  width: 50px;

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

}


/* ============================================================
   STICKER
   ============================================================ */

.cover-sticker {

  position: absolute;

  z-index: 20;

  width: 125px;

  left: 16%;

  top: 50px;

  transform:
    rotate(-9deg);

  filter:
    drop-shadow(
      0 6px 8px
      rgba(45,38,30,.08)
    );

}


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

.floating-decal {

  position: absolute;

  z-index: 18;

  pointer-events: none;

  color:
    var(--wheat);

}


.decal-one {

  left: 7%;

  top: 17%;

  font-size: 21px;

}


.decal-two {

  right: 5%;

  top: 5%;

  font-size: 17px;

}


.decal-three {

  left: 14%;

  bottom: 3%;

  font-size: 22px;

}


.decal-four {

  right: 3%;

  bottom: 18%;

  font-size: 19px;

}


.decal-five {

  left: 61%;

  bottom: 5%;

  font-size: 14px;

}


.decal-six {

  right: 28%;

  top: 6%;

  font-size: 24px;

  opacity: .7;

}


/* ============================================================
   PINS
   ============================================================ */

.little-pin {

  position: absolute;

  z-index: 35;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    var(--brown);

  box-shadow:
    0 2px 5px
    rgba(45,38,30,.20);

}


.pin-one {

  left: 47%;

  top: 48px;

}


.pin-two {

  right: 7%;

  bottom: 4%;

}


/* ============================================================
   PAGE DOORS
   ============================================================ */

.diary-index {

  position: relative;

  z-index: 2;

  width:
    min(1200px,88vw);

  margin:
    0 auto
    120px;

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

}


.index-door {

  position: relative;

  min-height: 210px;

  padding:
    34px 30px;

  display: grid;

  grid-template-columns:
    75px
    1fr
    auto;

  gap: 28px;

  align-items: center;

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

  transition:
    background .3s ease,
    padding-left .3s ease;

}


.index-door:hover {

  padding-left: 40px;

  background:
    rgba(255,255,255,.18);

}


.door-number {

  align-self: start;

  padding-top: 8px;

  font-family:
    var(--mono);

  font-size: 6px;

  letter-spacing: .18em;

  color:
    var(--faded);

}


.door-content h2 {

  margin:
    0 0
    10px;

  font-family:
    var(--serif);

  font-size:
    clamp(40px,5vw,68px);

  font-weight: 400;

  line-height: .95;

  letter-spacing:
    -.045em;

  white-space: nowrap;

}


.closet-door
.door-content h2 {

  font-style: italic;

}


.door-content p {

  max-width: 470px;

  margin:
    0 0
    22px;

  font-size: 11px;

  line-height: 1.6;

  font-style: italic;

  color:
    var(--soft);

}


.door-link {

  display: inline-block;

  font-family:
    var(--mono);

  font-size: 6px;

  letter-spacing: .18em;

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

  padding-bottom: 4px;

}


.door-decoration {

  justify-self: end;

  align-self: center;

  color:
    var(--wheat);

  font-size: 12px;

  white-space: nowrap;

}


.scraps-decoration {
  transform: rotate(-4deg);
}


.closet-decoration {
  transform: rotate(4deg);
}


.about-decoration {
  transform: rotate(-3deg);
}


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

.home-ending {

  width:
    min(700px,82vw);

  margin:
    0 auto;

  padding:
    0 0
    105px;

  text-align: center;

}


.ending-line {

  display: flex;

  justify-content: center;

  gap: 17px;

  color:
    var(--wheat);

  font-size: 11px;

}


.home-ending p {

  margin-top: 23px;

  font-family:
    var(--serif);

  font-size: 18px;

  font-style: italic;

  color:
    var(--soft);

}


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

footer {

  min-height: 105px;

  padding:
    0 5vw;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

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

  font-family:
    var(--mono);

  font-size: 6px;

  letter-spacing: .18em;

  color:
    var(--faded);

}


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

@media (max-width: 1050px) {

  .nav-links {

    gap: 20px;

    font-size: 7px;

  }


  .cover {

    padding-bottom: 115px;

  }


  .cover-title h1 {

    font-size:
      clamp(61px,10vw,108px);

  }


  .cover-collage {

    height: 700px;

  }


  .wheat-photo {

    width: 52%;

    left: 24%;

  }


  .cowgirl-photo {
    width: 25%;
  }


  .truck-photo {
    width: 27%;
  }


  .binocular-photo {
    width: 21%;
  }


  .door-content h2 {

    font-size:
      clamp(37px,5vw,55px);

  }

}


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

@media (max-width: 760px) {

  .wheat-cursor,
  .cursor-glitter,
  .burst-glitter {

    display: none !important;

  }


  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .paper-photo {

    cursor: auto !important;

  }


  .site-header {

    min-height: 68px;

    padding:
      0 4vw;

    grid-template-columns:
      auto
      1fr;

  }


  .header-star {
    display: none;
  }


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


  .nav-links {

    justify-self: end;

    gap: 13px;

    font-size: 6px;

    letter-spacing: .06em;

  }


  .nav-links a {

    padding:
      27px 0
      25px;

  }


  .cover {

    width: 92vw;

    padding:
      65px 0
      100px;

  }


  .cover-title h1 {

    font-size: 11.3vw;

    white-space: nowrap;

  }


  .cover-title p {

    margin-top: 31px;

    font-size: 14px;

  }


  .star-left {
    left: 0;
  }


  .star-right {
    right: 0;
  }


  .cover-collage {

    width: 94vw;

    height: 660px;

    margin-top: 10px;

  }


  .wheat-photo {

    width: 62%;

    left: 18%;

    top: 70px;

  }


  .cowgirl-photo {

    width: 31%;

    right: 0;

    top: 210px;

  }


  .truck-photo {

    width: 32%;

    left: 0;

    top: 290px;

  }


  .binocular-photo {

    width: 27%;

    right: 10%;

    bottom: 15px;

  }


  .cover-sticker {

    width: 85px;

    left: 4%;

    top: 25px;

  }


  .decal-six,
  .pin-one {

    display: none;

  }


  .diary-index {

    width: 90vw;

    margin-bottom: 90px;

  }


  .index-door {

    min-height: 185px;

    padding:
      28px 10px;

    grid-template-columns:
      45px
      1fr;

    gap: 15px;

  }


  .index-door:hover {
    padding-left: 16px;
  }


  .door-decoration {
    display: none;
  }


  .door-content h2 {

    font-size:
      clamp(31px,8vw,50px);

    white-space: nowrap;

  }


  .door-content p {
    max-width: 350px;
  }

}


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

@media (max-width: 540px) {

  .site-header {

    min-height: 64px;

    padding:
      0 18px;

    grid-template-columns: 1fr;

  }


  .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;

  }


  .cover {

    width: 94vw;

    padding-bottom: 85px;

  }


  .cover-title {

    width: 98vw;

  }


  .cover-title h1 {

    font-size: 10.9vw;

    letter-spacing: -.055em;

  }


  .cover-title p {

    width: 88vw;

  }


  .star-left,
  .star-right {

    display: none;

  }


  .cover-collage {

    height: 590px;

  }


  .wheat-photo {

    width: 66%;

    left: 17%;

    top: 65px;

  }


  .cowgirl-photo {

    width: 33%;

    top: 185px;

  }


  .truck-photo {

    width: 34%;

    top: 265px;

  }


  .binocular-photo {

    width: 29%;

  }


  .paper-photo {

    padding: 8px;

  }


  .cover-sticker {

    width: 68px;

  }


  .decal-four,
  .decal-five,
  .pin-two {

    display: none;

  }


  .index-door {

    grid-template-columns:
      35px
      1fr;

  }


  .door-content h2 {

    font-size: 8vw;

  }


  .door-number {

    font-size: 5px;

  }


  .door-content p {

    font-size: 10px;

  }


  footer {

    padding:
      0 18px;

    font-size: 5px;

  }

}


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

@media (max-width: 390px) {

  .nav-links {

    gap: 5px;

    font-size: 5px;

  }


  .cover-title h1 {

    font-size: 10.6vw;

  }


  .cover-collage {

    height: 555px;

  }


  .wheat-photo {
    width: 68%;
  }


  .cowgirl-photo {
    top: 170px;
  }


  .truck-photo {
    top: 245px;
  }


  .door-content h2 {
    font-size: 7.8vw;
  }

}


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

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

  .wheat-cursor,
  .cursor-glitter,
  .burst-glitter {

    display: none !important;

  }


  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .paper-photo {

    cursor: auto !important;

  }


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

    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;

  }

}