/* ==========================================================
   Scarlett Heels Corporate Design
   ========================================================== */

:root {
    --sh-background:
        linear-gradient(to bottom,
            #010000 0%,
            #020000 65%,
            #050302 100%);

    --sh-gold: #b88a2d;

    --transition-speed: .6s;
}


/* ==========================================================
      Base
      ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: var(--sh-background);
    overflow: hidden;
    font-family: Georgia, serif;
}

body.collections-body {
    overflow-y: auto;
    overflow-x: hidden;
}

body.legal-body {
    overflow-y: auto;
    overflow-x: hidden;
}


/* ==========================================================
      Welcome Page
      ========================================================== */

.welcome {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(.4rem, 1vh, .9rem);
}

.brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(1rem, 3vh, 3.5rem);
}

.brand {
    display: block;
    width: min(620px, 60vw, 42vh);
    height: auto;
    margin: .15vh auto 0 auto;
}

.claim {
    margin: 0px 0px 0px 0px;
    font-family: Georgia, serif;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(184, 138, 45, .82);
    text-align: center;
    font-size: clamp(.65rem, 1.3vh, 1.5rem);
}

.shoe {
    width: min(400px, 36vw, 45vh);
    height: auto;
}

.enter-button {
    margin-top: 0rem;
    text-decoration: none;
    color: var(--sh-gold);
    border: 1px solid var(--sh-gold);
    padding: .8rem 2.2rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: all var(--transition-speed);
}

.enter-button:hover {
    background: var(--sh-gold);
    color: #010000;
}

.button-ruby {
    width: 1em;
    height: 1em;
    margin: 0 .6em;
    vertical-align: -.08em;
    transition: filter .3s, transform .3s;
}

.enter-button:hover .button-ruby {
    filter:
        drop-shadow(0 0 3px rgba(255, 120, 120, .8)) brightness(1.7);
}

@keyframes rubySparkle {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }

    25% {
        transform: scale(1.15) rotate(-8deg);
        filter: brightness(1.8);
    }

    50% {
        transform: scale(1.22) rotate(8deg);
        filter: brightness(2.2);
    }

    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

/* ==========================================================
   HOME
   ========================================================== */

.home {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------
      Header
      ---------------------------------------------------------- */

.home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5rem 4rem;
}

.brand-small {
    width: min(340px, 28vw);

    height: auto;
}

/* ----------------------------------------------------------
      Navigation
      ---------------------------------------------------------- */

.main-nav {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.main-nav a {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .7rem;
    color: rgba(184, 138, 45, .75);
    text-decoration: none;
    letter-spacing: .08em;
    font-size: .95rem;
    transition: .35s;
}

.main-nav a:hover {
    color: white;
}

.nav-gem {
    width: 18px;

    height: auto;

    opacity: .85;

    transition: .35s;
}

.main-nav a:hover .nav-gem {
    filter:
        brightness(1.8) drop-shadow(0 0 4px rgba(255, 120, 120, .8));
}

/* Mobile menu */

#menu-toggle,
.hamburger {
    display: none;
}

@media (max-width: 700px) {

    .home-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: #000;
    }

    .hamburger {
        display: flex;
        position: fixed;
        top: 2.2rem;
        right: 0.8rem;
        z-index: 102;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 32px;
        height: 32px;
        cursor: pointer;
    }

    .hamburger::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../images/gem_red.png") center / contain no-repeat;
        z-index: -1;
    }

    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        margin-left: 3px;
        background: var(--sh-gold);
        transition: .3s;
    }

    .main-nav {
        display: none;
    }

    #menu-toggle:checked~.main-nav {
        display: flex;
        position: fixed;
        top: 1rem;
        right: 0;
        z-index: 101;
        flex-direction: column;
        align-items: flex-end;
        padding: 3.5rem 1.5rem 2rem;
        background: rgba(1, 0, 0, .97);
        border: 1px solid rgba(184, 138, 45, .45);
        box-shadow: 0 8px 30px rgba(0, 0, 0, .7);
    }

    #menu-toggle:checked+.hamburger span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    #menu-toggle:checked+.hamburger span:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked+.hamburger span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

/* ----------------------------------------------------------
      Hero
      ---------------------------------------------------------- */

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.shoe-home {
    width: min(380px, 34vw, 42vh);
    height: auto;
    margin-bottom: 2.5rem;
    transition: transform .5s;
}

.shoe-home:hover {
    transform: scale(1.02);
}

.hero h1 {
    color: var(--sh-gold);
    font-size: clamp(1.8rem, 2.8vw, 3rem);
    font-weight: normal;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}

.hero p {
    color: #d0c3a1;
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 2rem 1rem 3rem 1rem;
    max-width: 620px;
}

/* ----------------------------------------------------------
      Footer
      ---------------------------------------------------------- */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

footer a {
    color: rgba(184, 138, 45, .45);
    text-decoration: none;
    font-size: .75rem;
    transition: .3s;
}

footer a:hover {
    color: var(--sh-gold);
}

.journey {
    color: rgba(184, 138, 45, .45);
    font-style: italic;
    font-size: .8rem;
}

/* ==========================================================
   COLLECTIONS LANDING PAGE
   ========================================================== */

body.collections-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.collections-body .home-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #000;
}

.collections-page {
    min-height: 100vh;
}

.collections-intro {
    text-align: center;
    padding: 3rem 2rem 4rem;
}

.collections-intro h1 {
    color: var(--sh-gold);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: normal;
    letter-spacing: .12em;
    margin: 1rem 0 1.2rem;
}

.collections-intro p {
    color: #d6c7a1;
    line-height: 1.8;
    margin: 0;
}

.collection-grid {
    width: min(1180px, 88vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem 4rem;
    padding: 1rem 0 6rem;
}

.collection-item {
    display: block;
    text-decoration: none;
}

.collection-item img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(184, 138, 45, .45);
}

.collection-caption {
    text-align: center;
    padding-top: 1.1rem;
}

.collection-caption h2 {
    color: var(--sh-gold);
    font-size: 1.35rem;
    font-weight: normal;
    letter-spacing: .08em;
    margin: 0 0 .45rem;
}

.collection-caption span {
    color: #d6c7a1;
    font-size: .85rem;
    letter-spacing: .08em;
    transition: color .25s ease;
}

.collection-item:hover .collection-caption span {
    color: var(--sh-gold);
}

@media (max-width: 700px) {
    .collections-intro {
        padding: 0rem 1.5rem 3rem;
    }

    .collection-grid {
        width: 88vw;
        grid-template-columns: 1fr;
        gap: 4rem;
        padding-bottom: 4rem;
    }

    .collection-caption h2 {
        font-size: 1.2rem;
    }
}

/* ==========================================================
   INDIVIDUAL COLLECTION PAGES
   Reuses the existing Home / Collections styles wherever
   possible. Only collection-specific elements are added here.
   ========================================================== */

body.collection-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.collection-page {
    min-height: 100vh;
}

/* Reuse .hero, .shoe-home, .hero h1 and .hero p from Home. */
.collection-hero {
    min-height: calc(100vh - 90px);
    padding: 2rem 1.5rem 5rem;
}

.collection-shoe {
    width: min(380px, 34vw, 42vh);
}

.collection-story,
.collection-behind {
    width: min(760px, 84vw);
    margin: 0 auto;
    padding: 5rem 0;
}

.collection-story h2,
.collection-behind h2 {
    color: var(--sh-gold);
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: .1em;
    text-align: center;
    margin-bottom: 2rem;
}

.collection-story p,
.behind-intro {
    color: #d0c3a1;
    font-size: 1rem;
    line-height: 1.9;
}

.collection-story p {
    margin-bottom: 1.5rem;
}

.behind-intro {
    text-align: center;
    margin: -1rem 0 2.5rem;
}

.behind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    justify-items: center;
}

.early-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 1.2rem;
}

.early-grid .behind-thumb {
    display: block;
    padding: .35rem;
    background: #000;
    border: 1px solid rgba(184, 138, 45, .45);
}

.early-grid .behind-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 700px) {
    .early-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .8rem;
    }
}

.behind-thumb {
    display: block;
    padding: .35rem;
    background: #000;
    border: 1px solid rgba(184, 138, 45, .45);
}

.behind-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.early-grid .behind-thumb {
    width: 180px;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: rgba(0, 0, 0, .96);
}

.lightbox:target {
    display: flex;
}

.lightbox img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border: 1px solid rgba(184, 138, 45, .45);
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.8rem;
    color: var(--sh-gold);
    font-size: 2rem;
    line-height: 1;
    text-decoration: none;
}

/* Amethyst campaign copy */

.campaign-copy {
    text-align: center;
    max-width: 680px;
}

.campaign-copy h2 {
    font-size: 2rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

.campaign-copy p {
    margin-bottom: 2.2rem;
}

.campaign-copy .campaign-lead {
    color: var(--sh-gold);
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.campaign-copy .campaign-location {
    /* margin-top: 3rem; */
    color: rgba(214, 199, 161, .8);
    font-size: .95rem;
    letter-spacing: .06em;
}

.campaign-copy .campaign-manifesto {
    color: var(--sh-gold);
    font-size: .95rem;
    line-height: 1.8;
    letter-spacing: .08em;
    margin-top: 3rem;
}

@media (max-width: 700px) {

    .collection-hero {
        min-height: calc(100vh - 70px);
    }

    .collection-shoe {
        width: min(570px, 78vw, 60vh);
    }
/*    @media (max-width: 700px) {
        .collection-shoe {
            width: min(570px, 78vw, 55vh);
        }
    }*/

    .collection-story,
    .collection-behind {
        width: 86vw;
        padding: 4rem 0;
    }

    .behind-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .8rem;
    }

    .lightbox {
        padding: 1rem;
    }

    .lightbox img {
        max-width: 94vw;
        max-height: 86vh;
    }
}

.story-emphasis {
    color: var(--sh-gold);
    text-align: center;
    font-size: 1.2rem !important;
    letter-spacing: .08em;
    margin: 2.8rem 0 !important;
}

.story-ending {
    color: var(--sh-gold) !important;
    text-align: center;
    font-size: 1.1rem !important;
    font-style: italic;
    margin-top: 3rem !important;
}

/* ==========================================================
   LEGAL
   ========================================================== */

legal-single {
    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

    min-height: 100vh;

    padding: 4rem 0;
}

.legal-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.legal-content {
    flex: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 4rem 4rem;
    color: #d6c7a1;
    font-size: 1rem;
    line-height: 1.8;
}

.legal-content h1 {
    color: var(--sh-gold);
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 2rem;
}

.legal-content h2 {
    color: var(--sh-gold);
    font-size: 1.2rem;
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: .8rem;
}

.legal-content p {
    margin-bottom: 1.5rem;
}

.legal-content strong {
    color: var(--sh-gold);
}

.legal-content hr {
    margin: 3rem 0;
    border: none;
    border-top: 1px solid rgba(184, 138, 45, .35);
}

.legal-note {
    font-size: .9rem;
    color: rgba(214, 199, 161, .75);
}

.hero .collection-shoe {
    width: min(570px, 51vw, 63vh);
}
@media (max-width: 700px) {
    .hero .collection-shoe {
        width: min(570px, 78vw, 55vh);
    }
}
.snowflake-shoe {
    width: min(400px, 35vw, 43vh) !important;
}
.collection-shoe {
    opacity: 0;
    animation: shoeReveal 1.8s ease-out 0.2s forwards;
}

@keyframes shoeReveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.collection-cta {
    text-align: center;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
}

.collection-cta-title {
    color: #b00000;
    font-size: 1.5rem;
    letter-spacing: .18em;
    margin-bottom: .8rem;
}

.collection-cta p:not(.collection-cta-title) {
    color: #d8d0c5;
    font-style: italic;
    margin-bottom: 1.8rem;
}

.collection-cta a {
    display: inline-block;
    color: #d4af37;
    border: 1px solid #d4af37;
    padding: .75rem 1.8rem;
    letter-spacing: .12em;
    text-decoration: none;
    transition: all .3s ease;
}

.collection-cta a:hover {
    background: #d4af37;
    color: #080808;
}

.novel-shortcut-link {
    color: var(--sh-gold);
    text-decoration: none;
}

.novel-shortcut-link:hover {
    color: white;
}