/* ============================================================
   DIRT BLONDE DIARY
   COWGIRL CLOSET
   closet.css
   ============================================================ */


:root {

  --paper: #f1ede3;

  --paper-light: #f7f3ea;

  --paper-bright: #fbf8f1;

  --ink: #292720;

  --soft-ink: #6d675e;

  --faded: #9b9386;

  --wheat: #c3a467;

  --wheat-light: #ded1ac;

  --brown: #69503c;

  --blue: #92a8ad;

  --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,.4),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 58%,
      rgba(190,158,103,.055),
      transparent 34%
    ),

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

}


.header-mark {

  justify-self: end;

  color:
    var(--wheat);

  font-size: 11px;

}


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

.closet-page {

  width: 100%;

}


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

.closet-title {

  position: relative;

  width:
    min(1400px,94vw);

  margin:
    0 auto;

  padding:
    100px 0
    15px;

  text-align: center;

}


.closet-title h1 {

  position: relative;

  z-index: 10;

  margin: 0;

  font-family:
    var(--serif);

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

  font-weight: 400;

  line-height: .86;

  letter-spacing:
    -.065em;

  white-space: nowrap;

}


/*
   Existing HTML:
   Cowgirl <span>Closet</span>

   Keep both words on one line.
*/

.closet-title h1 span {

  display: inline;

  margin-left: .06em;

  font-style: italic;

}


/* TAGLINE */

.tagline {

  width:
    min(660px,84vw);

  margin:
    42px auto
    0;

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

  font-size:
    clamp(14px,1.45vw,19px);

  line-height: 1.6;

  font-style: italic;

  color:
    var(--soft-ink);

}


/* TITLE DECALS */

.title-decoration {

  position: absolute;

  color:
    var(--wheat);

  pointer-events: none;

}


.decoration-left {

  left: 5%;

  top: 39%;

  font-size: 17px;

  transform:
    rotate(-12deg);

}


.decoration-right {

  right: 5%;

  top: 24%;

  font-size: 11px;

  letter-spacing: .18em;

  transform:
    rotate(5deg);

}


.title-squiggle {

  margin-top: 27px;

  font-size: 17px;

  color:
    var(--wheat);

  opacity: .7;

}


/* ============================================================
   VISUAL CLOSET BOARD
   ============================================================ */

.closet-board {

  position: relative;

  width:
    min(1200px,90vw);

  height: 720px;

  margin:
    20px auto
    80px;

  isolation: isolate;

}


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

.photo-frame {

  position: absolute;

  margin: 0;

  padding:
    12px;

  background:
    var(--paper-bright);

  box-shadow:

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

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

  transition:

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

    box-shadow .45s ease;

}


.photo-frame img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position:
    center center;

  background:
    var(--paper-bright);

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

}


.photo-frame:hover {

  z-index: 50;

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

}


/* MAIN OUTFIT */

.outfit-photo {

  width: 43%;

  height: 560px;

  left: 27%;

  top: 65px;

  z-index: 8;

  transform:
    rotate(-1.6deg);

}


.outfit-photo:hover {

  transform:
    translateY(-9px)
    rotate(0deg)
    scale(1.015);

}


/* BOOTS */

.boots-photo {

  width: 24%;

  height: 290px;

  left: 2%;

  bottom: 30px;

  z-index: 12;

  transform:
    rotate(-6deg);

}


.boots-photo img {
  padding: 18px;
}


.boots-photo:hover {

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

}


/* BAG */

.bag-photo {

  width: 22%;

  height: 245px;

  right: 3%;

  top: 65px;

  z-index: 13;

  transform:
    rotate(6deg);

}


.bag-photo img {
  padding: 18px;
}


.bag-photo:hover {

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

}


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

.tape {

  position: absolute;

  left: 50%;

  top: -12px;

  z-index: 30;

  width: 68px;

  height: 21px;

  background:

    linear-gradient(

      90deg,

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

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

      rgba(205,190,148,.47)

    );

  opacity: .86;

}


.tape-outfit {

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

}


.tape-boots {

  width: 52px;

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

}


.tape-bag {

  width: 50px;

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

}


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

.sticker {

  position: absolute;

  z-index: 20;

  pointer-events: none;

}


.sticker-main {

  width: 115px;

  right: 18%;

  bottom: 75px;

  transform:
    rotate(10deg);

  filter:
    drop-shadow(
      0 5px 6px
      rgba(50,40,30,.09)
    );

}


/* ============================================================
   SPARKLES
   ============================================================ */

.sparkle {

  position: absolute;

  z-index: 25;

  color:
    var(--wheat);

  pointer-events: none;

}


.sparkle-one {

  left: 17%;

  top: 11%;

  font-size: 21px;

}


.sparkle-two {

  right: 14%;

  top: 49%;

  font-size: 17px;

}


.sparkle-three {

  left: 20%;

  bottom: 8%;

  font-size: 13px;

}


.sparkle-four {

  right: 33%;

  bottom: 2%;

  font-size: 19px;

}


/* ============================================================
   DOODLES
   ============================================================ */

.western-doodle {

  position: absolute;

  z-index: 5;

  color:
    var(--wheat);

  opacity: .68;

  pointer-events: none;

}


.doodle-one {

  left: 9%;

  top: 31%;

  font-size: 23px;

  transform:
    rotate(-10deg);

}


.doodle-two {

  right: 28%;

  top: 3%;

  font-size: 24px;

  transform:
    rotate(10deg);

}


.doodle-three {

  right: 5%;

  bottom: 23%;

  font-size: 18px;

  transform:
    rotate(8deg);

}


/* ============================================================
   STITCH MARKS
   ============================================================ */

.stitch {

  position: absolute;

  z-index: 7;

  font-family:
    var(--mono);

  color:
    var(--brown);

  opacity: .35;

  font-size: 14px;

}


.stitch-one {

  left: 13%;

  bottom: 41%;

  transform:
    rotate(12deg);

}


.stitch-two {

  right: 11%;

  bottom: 8%;

  transform:
    rotate(-14deg);

}


/* ============================================================
   PUSH PIN
   ============================================================ */

.push-pin {

  position: absolute;

  right: 22%;

  top: 3%;

  z-index: 30;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    var(--brown);

  box-shadow:
    0 2px 4px
    rgba(45,35,27,.18);

}


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

.closet-bottom {

  width:
    min(700px,80vw);

  margin:
    0 auto;

  padding:
    20px 0
    100px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 17px;

  color:
    var(--wheat);

  font-size: 11px;

  opacity: .8;

}


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

@media (max-width: 1050px) {

  .nav-links {

    gap: 20px;

    font-size: 7px;

  }


  .closet-title {

    width: 96vw;

    padding-top: 80px;

  }


  .closet-title h1 {

    font-size: 10vw;

  }


  .closet-board {
    height: 650px;
  }


  .outfit-photo {

    width: 47%;

    height: 510px;

    left: 25%;

  }


  .boots-photo {

    width: 25%;

    height: 245px;

  }


  .bag-photo {

    width: 23%;

    height: 215px;

  }

}


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

@media (max-width: 760px) {

  .site-header {

    min-height: 68px;

    padding:
      0 4vw;

    grid-template-columns:
      auto 1fr;

  }


  .header-mark {
    display: none;
  }


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


  .nav-links {

    justify-self: end;

    gap: 14px;

    font-size: 6px;

    letter-spacing: .07em;

  }


  .nav-links a {

    padding:
      27px 0
      25px;

  }


  .closet-title {

    width: 96vw;

    padding:
      70px 0
      10px;

  }


  .closet-title h1 {

    font-size: 11.5vw;

    white-space: nowrap;

  }


  .closet-title h1 span {

    display: inline;

    margin-left: .04em;

  }


  .tagline {

    margin-top: 38px;

    font-size: 14px;

    line-height: 1.55;

  }


  .decoration-left {
    left: 1%;
  }


  .decoration-right {

    right: 1%;

    top: 18%;

  }


  .closet-board {

    width: 92vw;

    height: 585px;

    margin-top: 10px;

  }


  .outfit-photo {

    width: 55%;

    height: 420px;

    left: 22%;

    top: 70px;

  }


  .boots-photo {

    width: 30%;

    height: 205px;

    left: 0;

    bottom: 20px;

  }


  .bag-photo {

    width: 28%;

    height: 180px;

    right: 0;

    top: 30px;

  }


  .sticker-main {

    width: 80px;

    right: 8%;

    bottom: 70px;

  }


  .sparkle-one {
    left: 8%;
  }


  .sparkle-two {
    right: 4%;
  }


  .doodle-one {
    display: none;
  }

}


/* ============================================================
   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: 7px;

    font-size: 5.5px;

    letter-spacing: .035em;

  }


  .nav-links a {

    padding:
      25px 0
      23px;

  }


  .closet-title {

    width: 98vw;

    padding-top: 58px;

  }


  .closet-title h1 {

    font-size: 11vw;

    letter-spacing: -.055em;

  }


  .tagline {

    width: 88vw;

    margin-top: 32px;

    font-size: 13px;

  }


  .title-decoration {
    opacity: .65;
  }


  .closet-board {
    height: 520px;
  }


  .outfit-photo {

    width: 61%;

    height: 370px;

    left: 19%;

    top: 65px;

  }


  .boots-photo {

    width: 33%;

    height: 165px;

    bottom: 18px;

  }


  .bag-photo {

    width: 31%;

    height: 150px;

    top: 25px;

  }


  .photo-frame {
    padding: 8px;
  }


  .boots-photo img,
  .bag-photo img {

    padding: 10px;

  }


  .sticker-main {

    width: 63px;

    right: 9%;

    bottom: 67px;

  }


  .sparkle-four,
  .stitch-one,
  .push-pin {

    display: none;

  }


  .closet-bottom {

    padding-bottom: 70px;

  }

}


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

@media (max-width: 390px) {

  .nav-links {

    gap: 5px;

    font-size: 5px;

  }


  .closet-title h1 {

    font-size: 10.6vw;

  }


  .closet-board {
    height: 485px;
  }


  .outfit-photo {
    height: 340px;
  }


  .boots-photo {
    height: 150px;
  }


  .bag-photo {
    height: 135px;
  }

}


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

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

  html {
    scroll-behavior: auto;
  }


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

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}