* {

  box-sizing:
    border-box;

}


html {

  scroll-behavior:
    smooth;

}

html {
    scrollbar-width: none;      /* Firefox */
}

html::-webkit-scrollbar {
    display: none;              /* Chrome, Edge, Safari */
}


body {

  min-height: 100vh;
  margin: 0;

  color: #533847;

  background-color: #f6dce8;

  background-image: var(--hero-background);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: 100% 1080px;

  padding-top: 8px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

}



:root {

  --text:
    #533847;

  --text-muted:
    #876574;

  --heading:
    #963e70;

  --heading-dark:
    #7d2f5b;

  --accent:
    #d85e91;

  --accent-dark:
    #b53f75;

  --accent-light:
    #ef9dbd;

  --pink-pale:
    #fff5f9;

  --pink-soft:
    #fde7f0;

  --pink-medium:
    #f9cfdf;

  --panel:
    rgba(
      255,
      249,
      252,
      0.94
    );

  --panel-strong:
    rgba(
      255,
      250,
      253,
      0.97
    );

  --border:
    rgba(
      211,
      90,
      140,
      0.48
    );

  --border-strong:
    rgba(
      203,
      66,
      122,
      0.78
    );

  --shadow:
    0 10px 28px
    rgba(
      105,
      46,
      75,
      0.18
    );

  --soft-shadow:
    0 6px 18px
    rgba(
      105,
      46,
      75,
      0.12
    );

  --hero-background:
    linear-gradient(
      rgba(255,231,240,.12),
      rgba(255,231,240,.12)
    ),
    url("assets/images/cute.webp");

}

.site-header {

  position:
    relative;

  z-index:
    100;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  width:
    calc(
      100% - 16px
    );

  min-height:
    78px;

  margin:
    0 auto;

  padding:
    10px
    46px;

background:
  rgba(
    255,
    250,
    253,
    0.97
  );

  border:
    1px solid
    rgba(
      205,
      126,
      167,
      0.45
    );

  border-radius:
    26px;

  box-shadow:
    0 5px 16px
    rgba(
      95,
      48,
      73,
      0.16
    );

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

}


.site-brand {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  text-decoration:
    none;

}


.site-brand-title {

  color:
    var(--heading);

  font-size:
    clamp(
      1.35rem,
      2vw,
      1.75rem
    );

  font-weight:
    700;

  letter-spacing:
    0.045em;

  line-height:
    1;

  text-transform:
    uppercase;

}


.site-brand-subtitle {

  color:
    var(--accent-dark);

  font-size:
    0.95rem;

}


.site-navigation {

  display:
    flex;

  align-items:
    center;

  gap:
    22px;

}


.site-nav-link {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    50px;

  padding:
    10px
    26px;

  color:
    var(--heading-dark);

  border:
    1px solid
    transparent;

  border-radius:
    10px;

  font-size:
    1rem;

  text-decoration:
    none;

  transition:
    background
    0.18s ease,
    transform
    0.18s ease;

}


.site-nav-link:hover,
.site-nav-link.is-active {

  background:
    rgba(
      248,
      218,
      232,
      0.55
    );

  transform:
    translateY(
      -1px
    );

}


.site-nav-count {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    25px;

  height:
    25px;

  padding:
    0
    7px;

  color:
    #ffffff;

  background:
    var(--accent);

  border-radius:
    999px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    0.72rem;

  font-weight:
    700;

}



.home-page {

  width:
    100%;

}



.section-eyebrow,
.genre-type {

  margin:
    0;

  color:
    var(--accent-dark);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  line-height:
    1.4;

  text-transform:
    uppercase;

}



.scenic-introduction {

  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(360px, 0.75fr);

  min-height: 600px;

  margin-top: -1px;

  padding:
    64px
    max(9vw, 80px)
    24px;

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

}

.scenic-introduction::before {

  content: "";

  position: absolute;

  inset: 0;

  background: transparent;

  z-index: 0;

}

.scenic-content {

  position:
    relative;

  z-index:
    5;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    16px;

  width:
    100%;

  max-width:
    830px;

}



.scenic-panel {

  position:
    relative;

  padding:
    30px
    38px;

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        250,
        253,
        0.97
      ),
      rgba(
        255,
        242,
        248,
        0.95
      )
    );

  border:
    2px solid
    var(--border-strong);

  border-radius:
    24px;

  box-shadow:
    0 5px 12px
    rgba(
      111,
      48,
      78,
      0.22
    );

}



.scenic-panel::before {

  content:
    "";

  position:
    absolute;

  inset:
    5px;

  pointer-events:
    none;

  border:
    1px solid
    rgba(
      220,
      103,
      150,
      0.55
    );

  border-radius:
    18px;

}


.scenic-about-panel {

  min-height:
    365px;

}




.scenic-collections-panel {

  min-height:
    205px;

}


.scenic-panel-heading {

  position:
    relative;

  z-index:
    2;

  text-align:
    center;

}


.scenic-panel-heading h1,
.scenic-panel-heading h2 {

  margin:
    9px
    0
    18px;

  color:
    var(--heading);

  font-weight:
    700;

  line-height:
    1.05;

}


.scenic-panel-heading h1 {

  font-size:
    clamp(
      2.4rem,
      4vw,
      3.6rem
    );

}


.scenic-panel-heading h2 {

  font-size:
    clamp(
      2.2rem,
      3.5vw,
      3.2rem
    );

}



.scenic-panel-text {

  position:
    relative;

  z-index:
    2;

}


.scenic-panel-text p {

  margin:
    0
    0
    17px;

  color:
    #35252e;

  font-size:
    1.05rem;

  line-height:
    1.65;

}


.scenic-panel-text p:last-child {

  margin-bottom:
    0;

}


.panel-sparkle {

  position:
    absolute;

  z-index:
    3;

  color:
    rgba(
      215,
      92,
      142,
      0.55
    );

  font-size:
    2.4rem;

  line-height:
    1;

}


.panel-sparkle-top-left {

  top:
    20px;

  left:
    24px;

}


.panel-sparkle-bottom-right {

  right:
    25px;

  bottom:
    22px;

}



.scenic-persona-area {

  position:
    relative;

  z-index:
    4;

  min-height:
    100%;

  pointer-events:
    none;

}


.scenic-persona {

  position:
    absolute;

  right:
    -60px;

  bottom:
    -0;

  display:
    block;

  width:
    min(
      36vw,
      460px
    );

  max-width:
    none;

  height:
    auto;

  filter:
    drop-shadow(
      0 18px 20px
      rgba(
        92,
        48,
        69,
        0.15
      )
    );

}




.home-section {

  width:
    100%;

  padding:
    60px
    max(
      4vw,
      40px
    );

}

.section-heading {

  max-width:
    850px;

  margin:
    0 auto
    28px;

  text-align:
    center;

}


.section-heading h2 {

  margin:
    7px
    0
    8px;

  color:
    var(--heading);

  font-size:
    clamp(
      2.5rem,
      4vw,
      3.6rem
    );

  font-weight:
    700;

  line-height:
    1.05;

}


.section-introduction {

  max-width:
    700px;

  margin:
    14px auto
    0;

  color:
    var(--text);

  font-size:
    1rem;

  line-height:
    1.7;

}



.heading-decoration {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  margin-top:
    10px;

  color:
    var(--accent);

}


.heading-decoration span {

  width:
    28px;

  height:
    1px;

  background:
    var(--accent);

}


.heading-decoration strong {

  font-size:
    0.85rem;

  font-weight:
    400;

}



.how-section {

  position:
    relative;

  z-index:
    2;

  padding-top:
    30px;

  padding-bottom:
    60px;

  background:
    linear-gradient(
      180deg,
      #fff7fa,
      #fff3f8
    );

  border-bottom:
    1px solid
    rgba(
      211,
      90,
      140,
      0.20
    );

}


.how-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    22px;

  width:
    min(
      100%,
      1420px
    );

  margin:
    0 auto;

}



.how-card {

  min-height:
    245px;

  padding:
    22px
    24px
    28px;

  background:
    rgba(
      255,
      250,
      252,
      0.88
    );

  border:
    1px solid
    rgba(
      211,
      90,
      140,
      0.42
    );

  border-radius:
    22px;

  box-shadow:
    0 4px 12px
    rgba(
      105,
      46,
      75,
      0.08
    );

  text-align:
    center;

  transition:
    transform
    0.18s ease,
    box-shadow
    0.18s ease;

}


.how-card:hover {

  transform:
    translateY(
      -3px
    );

  box-shadow:
    var(--soft-shadow);

}


.how-card-icon {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    68px;

  height:
    68px;

  margin:
    -8px auto
    8px;

  color:
    var(--accent);

  background:
    #fdeaf2;

  border:
    1px solid
    rgba(
      211,
      90,
      140,
      0.40
    );

  border-radius:
    50%;

  font-size:
    2rem;

  line-height:
    1;

}


.how-card h3 {

  margin:
    0
    0
    8px;

  color:
    var(--accent-dark);

  font-size:
    1.55rem;

  font-weight:
    700;

}


.how-card p {

  margin:
    0;

  color:
    #382a31;

  font-size:
    0.98rem;

  line-height:
    1.55;

}


.collections-section {

  background-color:
    #f5dce0;

  background-image:
    url(
      "assets/images/home-background.webp"
    );

  background-repeat:
    repeat;

  background-position:
    top left;

  background-size:
    640px auto;

}



.genre-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    22px;

  width:
    min(
      100%,
      1220px
    );

  margin:
    0 auto;

}


.genre-card {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  min-height:
    320px;

  padding:
    30px;

  overflow:
    hidden;

  background:
    rgba(
      255,
      250,
      253,
      0.96
    );

  border:
    1px solid
    rgba(
      211,
      90,
      140,
      0.35
    );

  border-radius:
    22px;

  box-shadow:
    var(--soft-shadow);

  transition:
    transform
    0.18s ease,
    box-shadow
    0.18s ease;

}


.genre-card:hover {

  transform:
    translateY(
      -3px
    );

  box-shadow:
    var(--shadow);

}


.genre-card::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    5px;

  background:
    var(--genre-accent);

}



.genre-type {

  color:
    var(--genre-accent);

}


.genre-card h3 {

  margin:
    8px
    0
    12px;

  color:
    var(--genre-accent);

  font-size:
    2rem;

}


.genre-description {

  flex:
    1;

  margin:
    0;

  color:
    var(--text);

  font-size:
    1rem;

  line-height:
    1.65;

}


.genre-inspiration {

  margin:
    18px
    0
    0;

  padding-top:
    16px;

  color:
    var(--text-muted);

  border-top:
    1px solid
    rgba(
      211,
      90,
      140,
      0.22
    );

  font-size:
    0.85rem;

  line-height:
    1.55;

}


.genre-inspiration strong {

  color:
    var(--genre-accent);

}



.genre-card-actions {

  display:
    flex;

  gap:
    10px;

  margin-top:
    24px;

}


.genre-primary-button,
.genre-secondary-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    44px;

  padding:
    9px
    18px;

  border-radius:
    9px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  text-decoration:
    none;

  text-transform:
    uppercase;

  transition:
    transform
    0.18s ease;

}


.genre-primary-button {

  color:
    #ffffff;

  background:
    var(--genre-accent);

  border:
    1px solid
    var(--genre-accent);

}


.genre-secondary-button {

  color:
    var(--genre-accent);

  background:
    transparent;

  border:
    1px solid
    var(--genre-accent);

}


.genre-primary-button:hover,
.genre-secondary-button:hover {

  transform:
    translateY(
      -2px
    );

}


.genre-card[data-genre="fantasy"] {

  --genre-accent:
    #9361b2;

}


.genre-card[data-genre="cyberpunk"] {

  --genre-accent:
    #a93d9c;

}


.genre-card[data-genre="modern"] {

  --genre-accent:
    #4e7da8;

}


.genre-card[data-genre="supernatural"] {

  --genre-accent:
    #704986;

}


.genre-card[data-genre="post-apocalyptic"] {

  --genre-accent:
    #81704d;

}


.genre-card[data-genre="horror"] {

  --genre-accent:
    #96475e;

}


.genre-card[data-genre="western"] {

  --genre-accent:
    #9b6749;

}


.genre-card[data-genre="superhero"] {

  --genre-accent:
    #b34f83;

}



.about-me-section {

  background:
    #fff5f9;

}



.about-me-panel {

  display:
    grid;

  grid-template-columns:
    minmax(
      330px,
      0.8fr
    )
    minmax(
      0,
      1.2fr
    );

  align-items:
    stretch;

  width:
    min(
      100%,
      1000px
    );

  margin:
    0 auto;

  overflow:
    hidden;

  background:
    rgba(
      255,
      250,
      253,
      0.96
    );

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

  border-radius:
    24px;

  box-shadow:
    var(--shadow);

}



.about-me-persona-area {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    440px;

  overflow:
    hidden;

  background:
    #fde0ed;

}


.about-me-persona {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

}



.about-me-content {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    46px;

}


.about-me-content h3 {

  margin:
    0
    0
    18px;

  color:
    var(--heading);

  font-size:
    2.2rem;

}


.about-me-content p {

  margin:
    0
    0
    15px;

  color:
    var(--text);

  font-size:
    1rem;

  line-height:
    1.7;

}


.about-me-content p:last-child {

  margin-bottom:
    0;

}



.home-bottom-grid {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.3fr
    )
    minmax(
      0,
      0.7fr
    );

  gap:
    22px;

  background-color:
    #f5dce0;

  background-image:
    url(
      "assets/images/home-background.webp"
    );

  background-repeat:
    repeat;

  background-position:
    top left;

  background-size:
    640px auto;

}


.large-info-panel {

  display: flex;
  flex-direction: column;

  height: 500px; /* Change this to whatever height you want */

  padding: 32px;

  background:
    rgba(
      255,
      250,
      253,
      0.96
    );

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

  border-radius:
    22px;

  box-shadow:
    var(--soft-shadow);

}


.panel-heading {

  margin-bottom:
    24px;

}


.panel-heading h2 {

  margin:
    7px
    0
    0;

  color:
    var(--heading);

  font-size:
    2.5rem;

}



.update-list {

  display: flex;
  flex-direction: column;
  gap: 18px;

  flex: 1;

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 8px;

}

.update-list::-webkit-scrollbar {
    width: 10px;
}

.update-list::-webkit-scrollbar-track {
    background: var(--pink-soft);
    border-radius: 999px;
}

.update-list::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 999px;
}

.update-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-dark);
}


.update-entry {

  padding:
    20px;

  background:
    var(--pink-soft);

  border:
    1px solid
    rgba(
      211,
      90,
      140,
      0.30
    );

  border-radius:
    14px;

}


.update-entry time {

  color:
    var(--accent-dark);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.update-entry h3 {

  margin:
    7px
    0
    10px;

  color:
    var(--heading);

}


.update-entry ul {

  margin:
    0;

  padding-left:
    20px;

  line-height:
    1.7;

}


.credits-content p {

  color:
    var(--text);

  line-height:
    1.7;

}


.credits-note {

  margin-top:
    22px;

  padding-top:
    20px;

  color:
    var(--text-muted);

  border-top:
    1px solid
    rgba(
      211,
      90,
      140,
      0.25
    );

  font-size:
    0.88rem;

}



.site-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    26px
    max(
      4vw,
      40px
    );

  color:
    var(--text-muted);

  background:
    #fff8fb;

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

  font-size:
    0.82rem;

}


.site-footer p {

  margin:
    0;

}


.site-footer a {

  color:
    var(--accent-dark);

  font-weight:
    700;

  text-decoration:
    none;

}



@media (
  min-width: 1700px
) {


  .scenic-introduction {

    grid-template-columns:
      minmax(
        0,
        1.65fr
      )
      minmax(
        430px,
        0.7fr
      );

  }


  .scenic-content {

    max-width:
      900px;

  }


  .scenic-persona {

    width:
      min(
        34vw,
        560px
      );

  }

}


@media (
  max-width: 1100px
) {


  .site-header {

    padding:
      12px
      24px;

  }


  .site-navigation {

    gap:
      6px;

  }


  .site-nav-link {

    padding:
      9px
      14px;

  }


  .scenic-introduction {

    grid-template-columns:
      minmax(
        0,
        1.5fr
      )
      minmax(
        280px,
        0.5fr
      );

    padding:
      50px
      40px
      25px;

  }


  .scenic-persona {

    right:
      -50px;

    width:
      min(
        45vw,
        500px
      );

  }


  .how-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }

}



@media (
  max-width: 760px
) {

:root {

  --hero-background:
    linear-gradient(
      rgba(255,231,240,.12),
      rgba(255,231,240,.12)
    ),
    url("assets/images/cute-mobile.webp");

}

body {

  background-size:
    175% 2000px;

  background-position:
    center top;

}

  .site-header {

    align-items:
      flex-start;

    flex-direction:
      column;

    width:
      calc(
        100% - 16px
      );

    padding:
      18px;

    border-radius:
      20px;

  }


  .site-navigation {

    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;

  }


  .site-nav-link {

    justify-content:
      space-between;

  }


  .scenic-introduction {

    display:
      flex;

    flex-direction:
      column;

    min-height:
      0;

    padding:
      28px
      16px
      0;

  }


  .scenic-content {

    max-width:
      none;

  }


  .scenic-panel {

    padding:
      28px
      24px;

    border-radius:
      20px;

  }


  .scenic-about-panel,
  .scenic-collections-panel {

    min-height:
      0;

  }


  .scenic-panel-heading h1 {

    font-size:
      2.35rem;

  }


  .scenic-panel-heading h2 {

    font-size:
      2.15rem;

  }


  .scenic-persona-area {

    min-height:
      360px;

  }


.scenic-persona {
    width: min(75vw, 280px);
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}


  .home-section {

    padding:
      50px
      20px;

  }


  .how-section {

    padding-top:
      38px;

  }


  .how-grid,
  .genre-grid {

    grid-template-columns:
      1fr;

  }


  .genre-card {

    min-height:
      0;

  }


  .about-me-panel {

    grid-template-columns:
      1fr;

  }


  .about-me-persona-area {

    min-height:
      480px;

  }


  .about-me-content {

    padding:
      32px
      26px;

  }


  .home-bottom-grid {

    grid-template-columns:
      1fr;

  }


  .site-footer {

    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      24px;

  }

}


@media (
  max-width: 430px
) {


  .site-brand-title {

    font-size:
      1.15rem;

  }


  .site-brand-subtitle {

    font-size:
      0.82rem;

  }


  .scenic-introduction {

    padding:
      20px
      10px
      0;

  }


  .scenic-panel {

    padding:
      26px
      19px;

  }


  .panel-sparkle {

    display:
      none;

  }


  .scenic-panel-text p {

    font-size:
      0.96rem;

  }


  .scenic-persona-area {

    min-height:
      430px;

  }


  .genre-card-actions {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .about-me-persona-area {

    min-height:
      420px;

  }
  
}