.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 0
}

/* =========================================================
   HOROSCOPE RITUAL
   HOMEPAGE
   Mobile First
========================================================= */


/* =========================================================
   GLOBAL HOMEPAGE LAYOUT
========================================================= */

.hr-home-section,
.hr-home-section *,
.hr-home-section *::before,
.hr-home-section *::after {
    box-sizing: border-box;
}

.hr-home-section {
    width: 100%;
    margin: 0;
}

.hr-home-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   SHARED SECTION HEADER
========================================================= */

.hr-home-section-header {
    width: 100%;
    max-width: 680px;

    margin: 0 auto 20px;
    padding: 0;

    text-align: center;
}

.hr-home-eyebrow {
    margin: 0 0 6px;
    padding: 0;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hr-home-title {
    margin: 0;
    padding: 0;

    line-height: 1.15;
}

.hr-home-date {
    margin: 7px 0 0;
    padding: 0;

    font-size: 13px;
    line-height: 1.4;

    opacity: 0.68;
}

.hr-home-intro {
    max-width: 590px;

    margin: 9px auto 0;
    padding: 0;

    font-size: 14px;
    line-height: 1.55;

    opacity: 0.78;
}


/* =========================================================
   TODAY'S HOROSCOPES
========================================================= */

.hr-home-todays-horoscopes {
    margin: 0;
    padding: 30px 0 34px;
}


/* ---------------------------------------------------------
   ZODIAC GRID
--------------------------------------------------------- */

.hr-zodiac-grid {
    display: grid;

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

    column-gap: 6px;
    row-gap: 18px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   ZODIAC CARD
--------------------------------------------------------- */

.hr-zodiac-card {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    min-width: 0;
    min-height: 0;

    margin: 0 !important;
    padding: 0 2px 2px !important;

    color: inherit;
    text-align: center;
    text-decoration: none !important;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}


/* ---------------------------------------------------------
   ZODIAC IMAGE
--------------------------------------------------------- */

.hr-zodiac-image-wrap {
    display: block;

    width: 100%;
    max-width: 102px;

    margin: 0 auto 5px;
    padding: 0;
}

.hr-zodiac-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    object-fit: contain;
}


/* ---------------------------------------------------------
   ZODIAC NAME
--------------------------------------------------------- */

.hr-zodiac-name {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;

    white-space: nowrap;
}


/*
 * Datum već postoji unutar naših PNG medaljona.
 * Zato ga ne prikazujemo ponovo ispod znaka.
 */
.hr-zodiac-dates {
    display: none !important;
}


/* ---------------------------------------------------------
   SECTION FOOTER
--------------------------------------------------------- */

.hr-home-section-footer {
    margin: 20px 0 0;
    padding: 0;

    text-align: center;
}

.hr-home-text-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin: 0;
    padding: 4px 0;

    color: inherit;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;
}

.hr-home-text-link span {
    display: inline-block;

    transition: transform 180ms ease;
}

.hr-home-text-link:hover span {
    transform: translateX(3px);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.hr-zodiac-card:focus-visible,
.hr-home-text-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* =========================================================
   SMALL MOBILE
   320px - 359px
========================================================= */

@media (max-width: 359px) {
  
  .hr-zodiac-grid {
    column-gap: 3px;
    row-gap: 16px;
  }
  
  .hr-zodiac-image-wrap {
    max-width: 92px;
  }
  
  .hr-zodiac-name {
    font-size: 13px;
  }
  
}

/* =========================================================
   MEDIUM MOBILE
   320px - 400px
========================================================= */

@media (max-width: 400px) {
  .hr-home-title {
    font-size: 32px;
  }

}


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

@media (min-width: 430px) {

    .hr-home-container {
        width: calc(100% - 32px);
    }

    .hr-zodiac-grid {
        column-gap: 10px;
        row-gap: 20px;
    }

    .hr-zodiac-image-wrap {
        max-width: 112px;
    }

    .hr-zodiac-name {
        font-size: 16px;
    }
}


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

@media (min-width: 768px) {

    .hr-home-container {
        width: calc(100% - 48px);
    }

    .hr-home-todays-horoscopes {
        padding: 44px 0 48px;
    }

    .hr-home-section-header {
        margin-bottom: 28px;
    }

    .hr-home-eyebrow {
        font-size: 12px;
    }

    .hr-home-date {
        font-size: 14px;
    }

    .hr-home-intro {
        margin-top: 11px;

        font-size: 15px;
        line-height: 1.6;
    }

    .hr-zodiac-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        column-gap: 16px;
        row-gap: 26px;
    }

    .hr-zodiac-image-wrap {
        max-width: 135px;

        margin-bottom: 7px;
    }

    .hr-zodiac-name {
        font-size: 17px;
    }

    .hr-home-section-footer {
        margin-top: 26px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-container {
        width: calc(100% - 64px);
    }

    .hr-home-todays-horoscopes {
        padding: 56px 0 60px;
    }

    .hr-home-section-header {
        margin-bottom: 34px;
    }

    .hr-home-intro {
        font-size: 16px;
    }

    .hr-zodiac-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));

        column-gap: 20px;
        row-gap: 30px;
    }

    .hr-zodiac-image-wrap {
        max-width: 155px;

        margin-bottom: 8px;
    }

    .hr-zodiac-name {
        font-size: 18px;
    }

    .hr-zodiac-card:hover {
        transform: translateY(-3px);
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1280px) {

    .hr-zodiac-grid {
        column-gap: 24px;
    }

    .hr-zodiac-image-wrap {
        max-width: 165px;
    }

}




/* =========================================================
   COMPATIBILITY
========================================================= */

.hr-home-compatibility {
    margin: 0;
    padding: 0 0 34px;
}

.hr-compatibility-header {
    margin-bottom: 24px;
}

.hr-compatibility-shell {
  margin-top: 40px;
  margin-bottom: 80px;
}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.hr-compatibility-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        26px
        minmax(0, 1fr);

    align-items: end;

    column-gap: 7px;
    row-gap: 18px;

    width: 100%;
    max-width: 680px;

    margin: 0 auto;
    padding: 0;
}


/* ---------------------------------------------------------
   PERSON / SIGN
--------------------------------------------------------- */

.hr-compatibility-person {
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

.hr-compatibility-image-wrap {
    width: 100%;
    max-width: 140px;

    margin: 0 auto 16px;
}

.hr-compatibility-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: contain;

    transition:
        opacity 160ms ease,
        transform 180ms ease;
}


/* ---------------------------------------------------------
   SELECT
--------------------------------------------------------- */

.hr-compatibility-select-wrap {
    position: relative;

    width: 100%;
}

.hr-compatibility-select {
    display: block;

    width: 100%;
    height: 44px !important;

    margin: 0;
    padding: 0 30px 0 10px;
    padding-right: 36px !important; 

    color: inherit;

    font: inherit;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1;

    background-color: rgba(255, 255, 255, 0.55);

    border: 1px solid rgba(75, 58, 44, 0.18);
    border-radius: 9px;

    outline: 0;

    cursor: pointer;

    appearance: auto;
}

.hr-compatibility-select:hover {
    border-color: rgba(75, 58, 44, 0.34);
}

.hr-compatibility-select:focus {
    border-color: rgba(117, 78, 36, 0.65);

    box-shadow:
        0 0 0 3px rgba(117, 78, 36, 0.09);
}

.selection-box:after {
  width: 36px !important;
}
.selection-box:before {
  right: 13px !important;
}


/* ---------------------------------------------------------
   PLUS
--------------------------------------------------------- */

.hr-compatibility-plus {
    display: flex;

    width: 26px;
    height: 44px;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;

    opacity: 0.55;
}


/* ---------------------------------------------------------
   ACTION
--------------------------------------------------------- */

.hr-compatibility-action {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 10px;

    margin: 4px 0 0;
}

.hr-compatibility-button {
    display: inline-flex;

    min-height: 46px;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin: 0;
    padding: 11px 20px;

    color: #fff;

    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    /*
     * Topla braon nijansa koja prati postojeći
     * Horoscope Ritual zlatno/braon identitet.
     */
    background: #6f4a2d;

    border: 1px solid #6f4a2d;
    border-radius: 9px;

    cursor: pointer;

    transition:
        transform 180ms ease,
        opacity 180ms ease,
        box-shadow 180ms ease;
}

.hr-compatibility-button span {
    transition: transform 180ms ease;
}

.hr-compatibility-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 22px rgba(74, 50, 31, 0.14);
}

.hr-compatibility-button:hover span {
    transform: translateX(3px);
}

.hr-compatibility-all {
    color: inherit;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;

    opacity: 0.72;
}

.hr-compatibility-all:hover {
    opacity: 1;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

.hr-compatibility-button:focus-visible,
.hr-compatibility-all:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


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

@media (min-width: 768px) {

    .hr-home-compatibility {
        padding-bottom: 48px;
    }

    .hr-compatibility-header {
        margin-bottom: 30px;
    }

    .hr-compatibility-form {
        grid-template-columns:
            minmax(0, 220px)
            50px
            minmax(0, 220px);

        justify-content: center;

        column-gap: 16px;
    }

    .hr-compatibility-image-wrap {
        max-width: 180px;

        margin-bottom: 20px;
    }

    .hr-compatibility-select {
      height: 56px !important;

      padding-left: 14px;
      padding-right: 48px !important;

      font-size: 22px !important;
    }


    .selection-box:after {
      width: 48px !important;
    }
    .selection-box:before {
      right: 20px !important;
    }

    .hr-compatibility-plus {
        width: 50px;
        height: 48px;

        font-size: 30px;
    }

    .hr-compatibility-action {
        margin-top: 20px;
    }

    .hr-compatibility-button {
        min-height: 48px;

        padding: 12px 26px;

        font-size: 15px;
    }

    .hr-compatibility-all {
        font-size: 13px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-compatibility {
        padding-bottom: 60px;
    }

    .hr-compatibility-image-wrap {
        max-width: 200px;
    }

}
/* =========================================================
   COMPATIBILITY DIRECTORY
========================================================= */

.hr-compatibility-directory {
    width: 100%;

    margin: 0;
    padding: 10px 0 42px;
}


/* ---------------------------------------------------------
   DIRECTORY HEADER
--------------------------------------------------------- */

.hr-compatibility-directory-header {
    width: 100%;
    max-width: 680px;

    margin: 0 auto 26px;
    padding: 0;

    text-align: center;
}

.hr-compatibility-directory-title {
    margin: 0;
    padding: 0;

    font-size: 26px;
    line-height: 1.2;
}

.hr-compatibility-directory-intro {
    max-width: 580px;

    margin: 9px auto 0;
    padding: 0;

    font-size: 14px;
    line-height: 1.6;

    opacity: 0.72;
}


/* =========================================================
   SIGN GROUPS
========================================================= */

.hr-compatibility-groups {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   SINGLE SIGN GROUP
--------------------------------------------------------- */

.hr-compatibility-group {
    min-width: 0;

    margin: 0;
    padding: 18px 16px 12px;

    background: rgba(255, 255, 255, 0.22);

    border: 1px solid rgba(93, 66, 42, 0.12);
    border-radius: 14px;
}


/* ---------------------------------------------------------
   GROUP TITLE
--------------------------------------------------------- */

.hr-compatibility-group-title {
    margin: 0 0 10px;
    padding: 0 0 10px;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;

    border-bottom: 1px solid rgba(93, 66, 42, 0.12);
}


/* ---------------------------------------------------------
   LINKS LIST
--------------------------------------------------------- */

.hr-compatibility-group-list {
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}

.hr-compatibility-pair-item {
    width: 100%;

    margin: 0;
    padding: 0;
}

.hr-compatibility-pair-link {
    display: flex;

    width: 100%;
    min-height: 39px;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 0;
    padding: 8px 2px;

    color: inherit;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;

    text-decoration: none !important;

    border-bottom: 1px solid rgba(93, 66, 42, 0.07);

    transition:
        padding-left 180ms ease,
        opacity 180ms ease;
}

.hr-compatibility-pair-item:last-child
.hr-compatibility-pair-link {
    border-bottom: 0;
}


/* ---------------------------------------------------------
   LINK TEXT / ARROW
--------------------------------------------------------- */

.hr-compatibility-pair-name {
    min-width: 0;
}

.hr-compatibility-pair-arrow {
    flex: 0 0 auto;

    font-size: 12px;

    opacity: 0.35;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.hr-compatibility-pair-link:hover {
    padding-left: 5px;
}

.hr-compatibility-pair-link:hover
.hr-compatibility-pair-arrow {
    transform: translateX(3px);

    opacity: 0.8;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

.hr-compatibility-pair-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


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

@media (min-width: 680px) {

    .hr-compatibility-directory {
        padding-bottom: 52px;
    }

    .hr-compatibility-directory-header {
        margin-bottom: 32px;
    }

    .hr-compatibility-directory-title {
        font-size: 30px;
    }

    .hr-compatibility-directory-intro {
        font-size: 15px;
    }

    .hr-compatibility-groups {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .hr-compatibility-group {
        padding: 20px 18px 14px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-compatibility-directory {
        padding-bottom: 64px;
    }

    .hr-compatibility-directory-title {
        font-size: 34px;
    }

    .hr-compatibility-groups {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 26px;
    }

    .hr-compatibility-group {
        padding: 22px 20px 16px;
    }

    .hr-compatibility-group-title {
        font-size: 19px;
    }

    .hr-compatibility-pair-link {
        min-height: 41px;

        font-size: 15px;
    }

}




/* =========================================================
   EXPLORE ASTROLOGY
========================================================= */

.hr-home-explore {
    width: 100%;
    margin: 0;
    padding: 34px 0;
}

.hr-explore-header {
    margin-bottom: 22px;
}


/* =========================================================
   GRID
========================================================= */

.hr-explore-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   CARD
========================================================= */

.hr-explore-card {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 12px;

    width: 100%;

    margin: 0;
    padding: 16px;

    color: inherit;
    text-decoration: none !important;

    background:
        rgba(255, 255, 255, 0.22);

    border:
        1px solid rgba(93, 66, 42, 0.12);

    border-radius: 12px;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.hr-explore-number {
    display: flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    margin: 0;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.08em;

    color: #8a603d;

    border:
        1px solid rgba(138, 96, 61, 0.25);

    border-radius: 50%;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.hr-explore-content {
    min-width: 0;

    margin: 0;
    padding: 0;
}

.hr-explore-title {
    margin: 0;
    padding: 0;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.hr-explore-text {
    margin: 5px 0 0;
    padding: 0;

    font-size: 13px;
    line-height: 1.5;

    opacity: 0.72;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.hr-explore-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 9px;

    color: #805635;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.hr-explore-link span {
    display: inline-block;

    transition: transform 180ms ease;
}


/* ---------------------------------------------------------
   HOVER / FOCUS
--------------------------------------------------------- */

.hr-explore-card:hover {
    border-color:
        rgba(93, 66, 42, 0.24);
}

.hr-explore-card:hover
.hr-explore-link span {
    transform: translateX(3px);
}

.hr-explore-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


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

@media (min-width: 680px) {

    .hr-home-explore {
        padding: 44px 0;
    }

    .hr-explore-header {
        margin-bottom: 28px;
    }

    .hr-explore-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .hr-explore-card {
        grid-template-columns: 46px minmax(0, 1fr);

        gap: 14px;

        padding: 20px;
    }

    .hr-explore-number {
        width: 46px;
        height: 46px;
    }

    .hr-explore-title {
        font-size: 19px;
    }

    .hr-explore-text {
        font-size: 14px;
    }

    .hr-explore-link {
        font-size: 13px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-explore {
        padding: 56px 0;
    }

    .hr-explore-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 16px;
    }

    .hr-explore-card {
        display: flex;
        flex-direction: column;

        gap: 0;

        min-height: 230px;

        padding: 22px;
    }

    .hr-explore-number {
        margin-bottom: 24px;
    }

    .hr-explore-content {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .hr-explore-title {
        font-size: 20px;
    }

    .hr-explore-text {
        margin-top: 8px;

        line-height: 1.55;
    }

    .hr-explore-link {
        margin-top: auto;
        padding-top: 18px;
    }

    .hr-explore-card:hover {
        transform: translateY(-3px);

        background:
            rgba(255, 255, 255, 0.34);

        box-shadow:
            0 12px 30px rgba(75, 48, 28, 0.05);
    }

}



/* =========================================================
   TODAY'S COSMIC WEATHER
========================================================= */

.hr-home-cosmic-weather {
    width: 100%;
    margin: 0;
    padding: 40px 0 44px;
}

.hr-cosmic-header {
    margin-bottom: 24px;
}


/* =========================================================
   MAIN SHELL
========================================================= */

.hr-cosmic-shell {
    position: relative;
    overflow: hidden;

    width: 100%;

    margin: 0;
    padding: 16px;

    background:
        radial-gradient(
            circle at top right,
            rgba(210, 178, 132, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(164, 129, 88, 0.10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.34),
            rgba(244, 236, 227, 0.44)
        );

    border: 1px solid rgba(120, 88, 58, 0.12);
    border-radius: 22px;

    box-shadow:
        0 8px 30px rgba(80, 55, 35, 0.035);
}

.hr-cosmic-shell::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(rgba(124, 92, 64, 0.12) 0.7px, transparent 0.7px);

    background-size: 22px 22px;

    opacity: 0.08;
    pointer-events: none;
}


/* =========================================================
   PLANET POSITIONS
========================================================= */

.hr-cosmic-positions {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    width: 100%;
}


/* =========================================================
   SINGLE PLANET CARD
========================================================= */

.hr-cosmic-card {
    --cosmic-accent: #a06b3e;
    --cosmic-accent-bg: rgba(160, 107, 62, 0.08);

    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
    min-height: 86px;

    margin: 0;
    padding: 14px 12px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.62),
            rgba(255, 255, 255, 0.42)
        );

    border: 1px solid rgba(108, 79, 53, 0.09);
    border-radius: 16px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}


/* Moon gets priority */
.hr-cosmic-card-moon {
    grid-column: 1 / -1;
}


/* Body-specific accents */
.hr-cosmic-card[data-cosmic-body="Moon"] {
    --cosmic-accent: #9a6a3b;
    --cosmic-accent-bg: rgba(154, 106, 59, 0.10);
}

.hr-cosmic-card[data-cosmic-body="Sun"] {
    --cosmic-accent: #b37a22;
    --cosmic-accent-bg: rgba(179, 122, 34, 0.10);
}

.hr-cosmic-card[data-cosmic-body="Mercury"] {
    --cosmic-accent: #8e6948;
    --cosmic-accent-bg: rgba(142, 105, 72, 0.10);
}

.hr-cosmic-card[data-cosmic-body="Venus"] {
    --cosmic-accent: #b56a74;
    --cosmic-accent-bg: rgba(181, 106, 116, 0.11);
}

.hr-cosmic-card[data-cosmic-body="Mars"] {
    --cosmic-accent: #4f7ca7;
    --cosmic-accent-bg: rgba(79, 124, 167, 0.11);
}


/* =========================================================
   SYMBOL
========================================================= */

.hr-cosmic-symbol {
    display: flex;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    color: var(--cosmic-accent);

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

    font-size: 29px;
    line-height: 1;

    background: var(--cosmic-accent-bg);
    border: 1px solid rgba(122, 92, 64, 0.12);
    border-radius: 50%;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}


/* =========================================================
   CONTENT
========================================================= */

.hr-cosmic-card-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 3px;
}

.hr-cosmic-body {
    display: block;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0.60;
}

.hr-cosmic-position {
    display: block;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;

    white-space: normal;
}


/* =========================================================
   TODAY'S REFLECTION
========================================================= */

.hr-cosmic-reflection {
    position: relative;
    z-index: 1;

    width: 100%;

    margin: 12px 0 0;
    padding: 24px 18px 20px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            rgba(249, 242, 232, 0.78),
            rgba(244, 235, 223, 0.62)
        );

    border: 1px solid rgba(153, 111, 73, 0.12);
    border-radius: 18px;
}

.hr-cosmic-reflection::before {
    content: "✦";

    position: absolute;
    top: 12px;
    left: 14px;

    color: rgba(143, 98, 58, 0.24);

    font-size: 16px;
    line-height: 1;
}

.hr-cosmic-reflection::after {
    content: "✦";

    position: absolute;
    right: 14px;
    bottom: 12px;

    color: rgba(143, 98, 58, 0.18);

    font-size: 14px;
    line-height: 1;
}

.hr-cosmic-reflection-label {
    margin: 0 0 10px;

    color: #8d613e;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hr-cosmic-reflection-question {
    max-width: 760px;

    margin: 0 auto;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.28;
}

.hr-cosmic-summary {
    max-width: 700px;

    margin: 12px auto 0;

    font-size: 13px;
    line-height: 1.6;

    opacity: 0.68;
}


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

@media (min-width: 680px) {

    .hr-home-cosmic-weather {
        padding: 50px 0;
    }

    .hr-cosmic-header {
        margin-bottom: 30px;
    }

    .hr-cosmic-shell {
        padding: 20px;
    }

    .hr-cosmic-positions {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .hr-cosmic-card[data-cosmic-body="Moon"] {
        grid-column: span 3;
    }

    .hr-cosmic-card[data-cosmic-body="Sun"] {
        grid-column: span 3;
    }

    .hr-cosmic-card[data-cosmic-body="Mercury"],
    .hr-cosmic-card[data-cosmic-body="Venus"],
    .hr-cosmic-card[data-cosmic-body="Mars"] {
        grid-column: span 2;
    }

    .hr-cosmic-card {
        min-height: 122px;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 10px;

        padding: 16px 10px;

        text-align: center;
    }

    .hr-cosmic-symbol {
        width: 48px;
        height: 48px;
        flex-basis: 48px;

        font-size: 31px;
    }

    .hr-cosmic-card-content {
        align-items: center;
    }

    .hr-cosmic-position {
        font-size: 17px;
    }

    .hr-cosmic-reflection {
        margin-top: 14px;
        padding: 28px 22px 24px;
    }

    .hr-cosmic-reflection-question {
        font-size: 28px;
    }

    .hr-cosmic-summary {
        font-size: 14px;
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-cosmic-weather {
        padding: 62px 0;
    }

    .hr-cosmic-shell {
        padding: 26px;
        border-radius: 24px;
    }

    .hr-cosmic-positions {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 14px;
    }

    .hr-cosmic-card[data-cosmic-body="Moon"] {
        grid-column: span 3;
    }

    .hr-cosmic-card[data-cosmic-body="Sun"] {
        grid-column: span 3;
    }

    .hr-cosmic-card[data-cosmic-body="Mercury"],
    .hr-cosmic-card[data-cosmic-body="Venus"],
    .hr-cosmic-card[data-cosmic-body="Mars"] {
        grid-column: span 2;
    }

    .hr-cosmic-card {
        min-height: 136px;
        padding: 18px 12px;
    }

    .hr-cosmic-card:hover {
        transform: translateY(-3px);

        border-color: rgba(108, 79, 53, 0.18);

        box-shadow:
            0 10px 24px rgba(80, 55, 35, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .hr-cosmic-symbol {
        width: 52px;
        height: 52px;
        flex-basis: 52px;

        font-size: 34px;
    }

    .hr-cosmic-body {
        font-size: 11px;
    }

    .hr-cosmic-position {
        font-size: 18px;
    }

    .hr-cosmic-reflection {
        margin-top: 16px;
        padding: 34px 28px 28px;
        border-radius: 20px;
    }

    .hr-cosmic-reflection-question {
        font-size: 32px;
        line-height: 1.25;
    }

    .hr-cosmic-summary {
        margin-top: 14px;
        font-size: 15px;
    }
}

/* =========================================================
   COSMIC WEATHER - MOBILE POLISH
========================================================= */

@media (max-width: 679px) {

    /* -----------------------------------------------------
       SECTION / HEADER
    ----------------------------------------------------- */

    .hr-home-cosmic-weather {
        padding: 32px 0 36px;
    }

    .hr-cosmic-header {
        margin-bottom: 20px;
    }

    .hr-home-cosmic-weather .hr-home-title {
        font-size: clamp(34px, 9vw, 44px);
        line-height: 1.05;
    }

    .hr-home-cosmic-weather .hr-home-date {
        margin-top: 12px;
        font-size: 16px;
    }

    .hr-home-cosmic-weather .hr-home-intro {
        max-width: 330px;
        margin-top: 12px;

        font-size: 16px;
        line-height: 1.45;
    }


    /* -----------------------------------------------------
       OUTER SHELL
    ----------------------------------------------------- */

    .hr-cosmic-shell {
        padding: 12px;

        border-radius: 18px;
    }


    /* -----------------------------------------------------
       PLANET GRID
    ----------------------------------------------------- */

    .hr-cosmic-positions {
        gap: 8px;
    }


    /* -----------------------------------------------------
       PLANET CARDS
    ----------------------------------------------------- */

    .hr-cosmic-card {
        min-height: 92px;

        gap: 10px;

        padding: 12px 10px;

        border-radius: 14px;
    }

    .hr-cosmic-card-moon {
        min-height: 100px;
    }


    /* -----------------------------------------------------
       SYMBOL
    ----------------------------------------------------- */

    .hr-cosmic-symbol {
        flex: 0 0 42px;

        width: 42px;
        height: 42px;

        font-size: 28px;
    }


    /* -----------------------------------------------------
       PLANET TEXT
    ----------------------------------------------------- */

    .hr-cosmic-body {
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 0.07em;
    }

    .hr-cosmic-position {
        font-size: 16px;
        line-height: 1.15;

        /*
         * sprečava ružan wrap poput:
         *
         * 0°
         * Cancer
         */
        white-space: nowrap;
    }


    /* -----------------------------------------------------
       REFLECTION
    ----------------------------------------------------- */

    .hr-cosmic-reflection {
        margin-top: 10px;

        padding: 22px 16px 20px;

        border-radius: 16px;
    }

    .hr-cosmic-reflection-label {
        margin-bottom: 10px;

        font-size: 10px;
    }

    .hr-cosmic-reflection-question {
        max-width: 310px;

        font-size: clamp(23px, 6.2vw, 28px);
        line-height: 1.18;
    }

    .hr-cosmic-summary {
        max-width: 315px;

        margin-top: 14px;

        font-size: 14px;
        line-height: 1.5;
    }

}


/* =========================================================
   HAPPENING IN THE SKY
========================================================= */

.hr-home-sky {
    width: 100%;
    margin: 0;
    padding: 36px 0 40px;
}

.hr-sky-header {
    margin-bottom: 24px;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.hr-sky-layout {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;

    width: 100%;
}


/* =========================================================
   FEATURED STORY
========================================================= */

.hr-sky-featured {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    width: 100%;

    background:
        rgba(255, 255, 255, 0.27);

    border:
        1px solid rgba(93, 66, 42, 0.12);

    border-radius: 18px;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

.hr-sky-featured-image-link {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;
}

.hr-sky-featured-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 350ms ease;
}

.hr-sky-image-placeholder {
    display: flex;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(173, 124, 76, 0.15),
            rgba(242, 232, 221, 0.7)
        );
}

.hr-sky-image-placeholder span {
    color: rgba(130, 88, 51, 0.55);

    font-size: 44px;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.hr-sky-featured-content {
    padding: 18px;
}

.hr-sky-meta {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 5px;

    color: inherit;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0.58;
}

.hr-sky-category {
    color: #875b39;

    opacity: 1;
}

.hr-sky-featured-title {
    margin: 8px 0 0;

    font-size: 25px;
    line-height: 1.15;
}

.hr-sky-featured-title a,
.hr-sky-secondary-title a {
    color: inherit;

    text-decoration: none !important;
}

.hr-sky-featured-excerpt {
    margin: 10px 0 0;

    font-size: 14px;
    line-height: 1.55;

    opacity: 0.72;
}

.hr-sky-read-more,
.hr-sky-secondary-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 14px;

    color: #805635;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;
}

.hr-sky-read-more span,
.hr-sky-secondary-link span {
    transition: transform 180ms ease;
}


/* =========================================================
   SECONDARY STORIES
========================================================= */

.hr-sky-secondary {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;
}

.hr-sky-secondary-card {
    overflow: hidden;

    display: grid;

    grid-template-columns:
        112px
        minmax(0, 1fr);

    min-height: 130px;

    background:
        rgba(255, 255, 255, 0.22);

    border:
        1px solid rgba(93, 66, 42, 0.11);

    border-radius: 14px;
}

.hr-sky-secondary-image-link {
    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hr-sky-secondary-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 350ms ease;
}

.hr-sky-secondary-content {
    min-width: 0;

    padding: 13px;
}

.hr-sky-secondary-title {
    margin: 6px 0 0;

    font-size: 17px;
    line-height: 1.2;
}

.hr-sky-secondary-excerpt {
    display: none;

    margin: 8px 0 0;

    font-size: 13px;
    line-height: 1.5;

    opacity: 0.7;
}

.hr-sky-secondary-link {
    margin-top: 8px;

    font-size: 12px;
}


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

.hr-sky-footer {
    margin-top: 22px;

    text-align: center;
}


/* =========================================================
   HOVER
========================================================= */

.hr-sky-featured:hover
.hr-sky-featured-image,
.hr-sky-secondary-card:hover
.hr-sky-secondary-image {
    transform: scale(1.025);
}

.hr-sky-read-more:hover span,
.hr-sky-secondary-link:hover span {
    transform: translateX(3px);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.hr-sky-featured-title a:focus-visible,
.hr-sky-secondary-title a:focus-visible,
.hr-sky-read-more:focus-visible,
.hr-sky-secondary-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


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

@media (min-width: 680px) {

    .hr-home-sky {
        padding: 48px 0;
    }

    .hr-sky-header {
        margin-bottom: 30px;
    }

    .hr-sky-featured {
        display: grid;

        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        align-items: stretch;
    }

    .hr-sky-featured-image-link {
        height: 100%;
        aspect-ratio: auto;
    }

    .hr-sky-featured-content {
        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 26px;
    }

    .hr-sky-featured-title {
        font-size: 30px;
    }

    .hr-sky-featured-excerpt {
        font-size: 15px;
    }

    .hr-sky-secondary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hr-sky-secondary-card {
        grid-template-columns: 130px minmax(0, 1fr);

        min-height: 150px;
    }

    .hr-sky-secondary-excerpt {
        display: block;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-sky {
        padding: 60px 0;
    }

    .hr-sky-layout {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(320px, 0.75fr);

        gap: 16px;
    }

    .hr-sky-featured {
        grid-template-columns: 1fr;

        min-height: 100%;
    }

    .hr-sky-featured-image-link {
        aspect-ratio: 16 / 8;
        height: auto;
    }

    .hr-sky-featured-content {
        justify-content: flex-start;

        padding: 26px;
    }

    .hr-sky-featured-title {
        max-width: 720px;

        font-size: 32px;
    }

    .hr-sky-featured-excerpt {
        max-width: 720px;
    }

    .hr-sky-secondary {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .hr-sky-secondary-card {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .hr-sky-secondary-image-link {
        aspect-ratio: 16 / 7;
        height: auto;
    }

    .hr-sky-secondary-content {
        padding: 16px;
    }

    .hr-sky-secondary-title {
        font-size: 19px;
    }

    .hr-sky-secondary-excerpt {
        display: block;
    }

}


/* =========================================================
   LATEST ASTROLOGY GUIDES
========================================================= */

.hr-home-latest-guides {
    width: 100%;

    margin: 0;
    padding: 36px 0 40px;
}

.hr-latest-guides-header {
    margin-bottom: 24px;
}


/* =========================================================
   GRID
========================================================= */

.hr-latest-guides-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.hr-latest-guide-card {
    overflow: hidden;

    display: grid;

    grid-template-columns:
        118px
        minmax(0, 1fr);

    width: 100%;
    min-width: 0;

    background:
        rgba(255, 255, 255, 0.25);

    border:
        1px solid rgba(93, 66, 42, 0.11);

    border-radius: 15px;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

.hr-latest-guide-image-link {
    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hr-latest-guide-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 350ms ease;
}

.hr-latest-guide-placeholder {
    display: flex;

    width: 100%;
    height: 100%;
    min-height: 150px;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(174, 124, 77, 0.14),
            rgba(245, 237, 227, 0.72)
        );
}

.hr-latest-guide-placeholder span {
    color: rgba(131, 89, 51, 0.48);

    font-size: 32px;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.hr-latest-guide-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 14px;
}


/* ---------------------------------------------------------
   META
--------------------------------------------------------- */

.hr-latest-guide-meta {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 5px;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    opacity: 0.56;
}

.hr-latest-guide-category {
    color: #875b39;

    opacity: 1;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.hr-latest-guide-title {
    margin: 6px 0 0;

    font-size: 17px;
    line-height: 1.2;
}

.hr-latest-guide-title a {
    color: inherit;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   EXCERPT
--------------------------------------------------------- */

.hr-latest-guide-excerpt {
    display: none;

    margin: 9px 0 0;

    font-size: 13px;
    line-height: 1.5;

    opacity: 0.7;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.hr-latest-guide-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: auto;
    padding-top: 10px;

    color: #805635;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;
}

.hr-latest-guide-link span {
    transition: transform 180ms ease;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.hr-latest-guide-card:hover {
    border-color:
        rgba(93, 66, 42, 0.20);
}

.hr-latest-guide-card:hover
.hr-latest-guide-image {
    transform: scale(1.025);
}

.hr-latest-guide-card:hover
.hr-latest-guide-link span {
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

.hr-latest-guide-title a:focus-visible,
.hr-latest-guide-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


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

.hr-latest-guides-footer {
    margin-top: 22px;

    text-align: center;
}


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

@media (min-width: 680px) {

    .hr-home-latest-guides {
        padding: 48px 0;
    }

    .hr-latest-guides-header {
        margin-bottom: 30px;
    }

    .hr-latest-guides-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 14px;
    }

    .hr-latest-guide-card {
        display: flex;
        flex-direction: column;
    }

    .hr-latest-guide-image-link {
        width: 100%;
        height: auto;

        aspect-ratio: 16 / 10;
    }

    .hr-latest-guide-content {
        flex: 1;

        padding: 16px;
    }

    .hr-latest-guide-title {
        font-size: 18px;
    }

    .hr-latest-guide-excerpt {
        display: block;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-latest-guides {
        padding: 60px 0;
    }

    .hr-latest-guides-grid {
        gap: 18px;
    }

    .hr-latest-guide-card {
        border-radius: 17px;
    }

    .hr-latest-guide-content {
        padding: 20px;
    }

    .hr-latest-guide-title {
        margin-top: 8px;

        font-size: 21px;
    }

    .hr-latest-guide-excerpt {
        margin-top: 10px;

        font-size: 14px;
        line-height: 1.55;
    }

    .hr-latest-guide-link {
        padding-top: 16px;

        font-size: 13px;
    }

    .hr-latest-guide-card:hover {
        transform: translateY(-3px);

        box-shadow:
            0 12px 28px rgba(75, 48, 28, 0.05);
    }

}
















/* =========================================================
   CHINESE ZODIAC
   Mobile First
========================================================= */

.hr-home-chinese-zodiac {
    width: 100%;
    margin: 0;
    padding: 36px 0 40px;
}


/* =========================================================
   MAIN SHELL
========================================================= */

.hr-chinese-shell {
    position: relative;

    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;

    width: 100%;
    margin: 0;
    padding: 24px 16px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(175, 128, 75, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(150, 105, 65, 0.06),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            rgba(246, 237, 226, 0.72),
            rgba(255, 255, 255, 0.30)
        );

    border: 1px solid rgba(100, 71, 44, 0.12);
    border-radius: 20px;
}


/* decorative character */

.hr-chinese-shell::after {
    content: "東";

    position: absolute;
    right: -10px;
    bottom: -42px;

    color: rgba(116, 79, 46, 0.035);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 140px;
    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   COPY
========================================================= */

.hr-chinese-copy {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 600px;

    margin: 0;
    padding: 0;
}


.hr-chinese-copy .hr-home-eyebrow {
    margin-bottom: 7px;
}


.hr-chinese-title {
    margin: 0;
    padding: 0;

    font-size: 32px;
    font-weight: 600;
    line-height: 1.08;
}


.hr-chinese-intro {
    max-width: 560px;

    margin: 12px 0 0;

    font-size: 14px;
    line-height: 1.6;

    opacity: 0.72;
}


/* =========================================================
   MAIN CTA
========================================================= */

.hr-chinese-main-link {
    display: inline-flex;

    align-items: center;
    gap: 7px;

    margin-top: 18px;

    color: #805635;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;
}


.hr-chinese-main-link span {
    display: inline-block;
    transition: transform 180ms ease;
}


.hr-chinese-main-link:hover span {
    transform: translateX(3px);
}


/* =========================================================
   ANIMALS AREA
========================================================= */

.hr-chinese-animals {
    position: relative;
    z-index: 2;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


.hr-chinese-animals-label {
    margin: 0 0 12px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    opacity: 0.55;
}


/* =========================================================
   GRID
========================================================= */

.hr-chinese-animal-grid {
    display: grid;

    /* MOBILE: 3 x 4 */
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

    width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   SINGLE CARD
========================================================= */

.hr-chinese-animal {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    min-width: 0;

    /*
     * NEMA fiksne visine.
     * Kartica prati sliku + naziv.
     */
    min-height: 0;

    margin: 0;
    padding: 8px 5px 11px;

    color: inherit;

    text-align: center;
    text-decoration: none !important;

    background: rgba(255, 255, 255, 0.36);

    border: 1px solid rgba(95, 68, 44, 0.09);
    border-radius: 12px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42);

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


/* =========================================================
   IMAGE
   IMPORTANT:
   - no crop
   - no absolute positioning
   - no oversized 140/150%
========================================================= */

.hr-chinese-animal-image-wrap {
    display: flex;

    width: 100%;
    max-width: 110px;

    aspect-ratio: 1 / 1;

    align-items: center;
    justify-content: center;

    margin: 0 auto 4px;
    padding: 2px;

    overflow: visible;
}


.hr-chinese-animal-image {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center;

    transform: none;

    transition: transform 220ms ease;
}


/* =========================================================
   NAME
========================================================= */

.hr-chinese-animal-name {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;
}


/* =========================================================
   INTERACTION
========================================================= */

.hr-chinese-animal:hover {
    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.52);

    border-color: rgba(95, 68, 44, 0.18);

    box-shadow:
        0 8px 20px rgba(75, 48, 28, 0.045);
}


.hr-chinese-animal:hover .hr-chinese-animal-image {
    transform: scale(1.03);
}


.hr-chinese-main-link:focus-visible,
.hr-chinese-animal:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


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

@media (max-width: 359px) {

    .hr-home-chinese-zodiac {
        padding: 32px 0 36px;
    }

    .hr-chinese-shell {
        gap: 22px;
        padding: 20px 12px;
    }

    .hr-chinese-title {
        font-size: 29px;
    }

    .hr-chinese-intro {
        font-size: 13px;
    }

    .hr-chinese-animal-grid {
        gap: 5px;
    }

    .hr-chinese-animal {
        padding: 6px 3px 8px;
    }

    .hr-chinese-animal-image-wrap {
        max-width: 92px;
    }

    .hr-chinese-animal-name {
        font-size: 11px;
    }

}


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

@media (min-width: 430px) {

    .hr-chinese-shell {
        padding: 28px 20px;
    }

    .hr-chinese-animal-grid {
        gap: 10px;
    }

    .hr-chinese-animal-image-wrap {
        max-width: 120px;
    }

    .hr-chinese-animal-name {
        font-size: 13px;
    }

}


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

@media (min-width: 680px) {

    .hr-home-chinese-zodiac {
        padding: 50px 0;
    }

    .hr-chinese-shell {
        grid-template-columns:
            minmax(0, 0.78fr)
            minmax(0, 1.22fr);

        align-items: center;

        gap: 38px;

        padding: 36px;
    }

    .hr-chinese-title {
        font-size: 38px;
    }

    .hr-chinese-intro {
        font-size: 15px;
    }

    /*
     * TABLET:
     * već prelazimo na 4 kolone.
     */
    .hr-chinese-animal-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 10px;
    }

    .hr-chinese-animal {
        padding: 9px 6px 12px;
    }

    .hr-chinese-animal-image-wrap {
        max-width: 130px;
    }

    .hr-chinese-animal-name {
        font-size: 14px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-chinese-zodiac {
        padding: 60px 0;
    }

    .hr-chinese-shell {
        /*
         * Grid dobija više prostora jer sada
         * prikazujemo 4 velika znaka po redu.
         */
        grid-template-columns:
            minmax(330px, 0.65fr)
            minmax(0, 1.35fr);

        align-items: center;

        gap: 54px;

        padding: 46px;

        border-radius: 24px;
    }

    .hr-chinese-shell::after {
        right: -4px;
        bottom: -50px;

        font-size: 170px;
    }

    .hr-chinese-title {
        font-size: 44px;
        line-height: 1.08;
    }

    .hr-chinese-intro {
        margin-top: 16px;

        font-size: 16px;
        line-height: 1.65;
    }

    .hr-chinese-main-link {
        margin-top: 22px;

        font-size: 15px;
    }

    .hr-chinese-animals-label {
        margin-bottom: 14px;
    }

    /*
     * DESKTOP = EXACTLY 4 x 3
     */
    .hr-chinese-animal-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 14px;
    }

    .hr-chinese-animal {
        padding: 12px 8px 14px;

        border-radius: 14px;
    }

    /*
     * Pošto imamo samo 4 kolone,
     * možemo lepo da povećamo kompletan artwork,
     * ali ga NIKAD ne sečemo.
     */
    .hr-chinese-animal-image-wrap {
        max-width: 165px;
    }

    .hr-chinese-animal-name {
        margin-top: 2px;

        font-size: 17px;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1280px) {

    .hr-chinese-shell {
        grid-template-columns:
            minmax(390px, 0.66fr)
            minmax(0, 1.34fr);

        gap: 64px;

        padding: 52px;
    }

    .hr-chinese-title {
        font-size: 48px;
    }

    .hr-chinese-animal-grid {
        gap: 16px;
    }

    .hr-chinese-animal {
        padding: 14px 10px 16px;
    }

    .hr-chinese-animal-image-wrap {
        max-width: 180px;
    }

    .hr-chinese-animal-name {
        font-size: 18px;
    }

}
















/* =========================================================
   WHY HOROSCOPE RITUAL
   Mobile First
========================================================= */

.hr-home-why {
    width: 100%;

    margin: 0;
    padding: 38px 0 46px;
}


/* =========================================================
   SHELL
========================================================= */

.hr-why-shell {
    position: relative;

    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr;

    gap: 28px;

    width: 100%;

    margin: 0;
    padding: 28px 18px;

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(174, 125, 77, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(122, 88, 57, 0.07),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.34),
            rgba(244, 235, 225, 0.65)
        );

    border:
        1px solid rgba(100, 71, 44, 0.12);

    border-radius: 20px;
}


/* subtle celestial decoration */

.hr-why-shell::before {
    content: "✦";

    position: absolute;

    top: 18px;
    right: 20px;

    color:
        rgba(132, 91, 55, 0.13);

    font-size: 22px;
    line-height: 1;

    pointer-events: none;
}


.hr-why-shell::after {
    content: "☾";

    position: absolute;

    right: -20px;
    bottom: -42px;

    color:
        rgba(116, 79, 46, 0.035);

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

    font-size: 160px;
    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.hr-why-heading {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 620px;

    margin: 0;
    padding: 0;
}


.hr-why-title {
    margin: 0;

    font-size: 34px;
    font-weight: 600;
    line-height: 1.08;
}


.hr-why-intro {
    max-width: 580px;

    margin: 13px 0 0;

    font-size: 14px;
    line-height: 1.62;

    opacity: 0.73;
}


/* =========================================================
   MAIN LINK
========================================================= */

.hr-why-main-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 18px;

    color: #805635;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;
}


.hr-why-main-link span {
    display: inline-block;

    transition:
        transform 180ms ease;
}


.hr-why-main-link:hover span {
    transform:
        translateX(3px);
}


/* =========================================================
   PRINCIPLES
========================================================= */

.hr-why-principles {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   CARD
========================================================= */

.hr-why-card {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    align-items: start;

    gap: 12px;

    width: 100%;

    margin: 0;
    padding: 15px;

    background:
        rgba(255, 255, 255, 0.33);

    border:
        1px solid rgba(95, 68, 44, 0.09);

    border-radius: 12px;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}


/* =========================================================
   NUMBER
========================================================= */

.hr-why-number {
    display: flex;

    width: 40px;
    height: 40px;

    align-items: center;
    justify-content: center;

    color: #895d3a;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.08em;

    background:
        rgba(153, 103, 63, 0.07);

    border:
        1px solid rgba(137, 93, 58, 0.15);

    border-radius: 50%;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.hr-why-card-content {
    min-width: 0;

    margin: 0;
    padding: 0;
}


.hr-why-card-title {
    margin: 0;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}


.hr-why-card-text {
    margin: 5px 0 0;

    font-size: 13px;
    line-height: 1.5;

    opacity: 0.68;
}


/* =========================================================
   INTERACTION
========================================================= */

.hr-why-card:hover {
    background:
        rgba(255, 255, 255, 0.48);

    border-color:
        rgba(95, 68, 44, 0.17);
}


.hr-why-main-link:focus-visible {
    outline:
        2px solid currentColor;

    outline-offset:
        3px;
}


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

@media (min-width: 680px) {

    .hr-home-why {
        padding:
            50px 0;
    }

    .hr-why-shell {
        gap:
            34px;

        padding:
            36px;
    }

    .hr-why-title {
        font-size:
            40px;
    }

    .hr-why-intro {
        font-size:
            15px;
    }

    .hr-why-principles {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            12px;
    }

    .hr-why-card {
        padding:
            17px;
    }

    .hr-why-card-title {
        font-size:
            17px;
    }

    .hr-why-card-text {
        font-size:
            14px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-why {
        padding:
            62px 0 68px;
    }

    .hr-why-shell {
        grid-template-columns:
            minmax(320px, 0.78fr)
            minmax(0, 1.22fr);

        align-items:
            center;

        gap:
            58px;

        padding:
            50px;

        border-radius:
            24px;
    }

    .hr-why-title {
        font-size:
            46px;
    }

    .hr-why-intro {
        margin-top:
            16px;

        font-size:
            16px;

        line-height:
            1.65;
    }

    .hr-why-main-link {
        margin-top:
            22px;

        font-size:
            15px;
    }

    .hr-why-principles {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            14px;
    }

    .hr-why-card {
        min-height:
            150px;

        grid-template-columns:
            44px
            minmax(0, 1fr);

        gap:
            14px;

        padding:
            20px;
    }

    .hr-why-number {
        width:
            44px;

        height:
            44px;
    }

    .hr-why-card-title {
        font-size:
            18px;
    }

    .hr-why-card-text {
        margin-top:
            7px;

        font-size:
            14px;

        line-height:
            1.55;
    }

    .hr-why-card:hover {
        transform:
            translateY(-2px);
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1280px) {

    .hr-why-shell {
        grid-template-columns:
            minmax(390px, 0.76fr)
            minmax(0, 1.24fr);

        gap:
            68px;

        padding:
            56px;
    }

    .hr-why-title {
        font-size:
            50px;
    }

}








/* =========================================================
   HOMEPAGE COVER
   Strong editorial hero
   Mobile First
========================================================= */

.hr-home-cover {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    margin-bottom: 80px;
    padding-bottom: 60px;
}


/* subtle grain */

.hr-home-cover::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    /* background-image:
        url("/wp-content/themes/augury-child/assets/grain.png"); */

    background-repeat: repeat;

    opacity: 0.022;

    pointer-events: none;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.hr-cover-bg {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.hr-cover-bg-star {
    position: absolute;

    color: rgba(135, 91, 55, 0.22);

    line-height: 1;
}


.hr-cover-bg-star-one {
    top: 13%;
    left: 47%;

    font-size: 12px;
}


.hr-cover-bg-star-two {
    top: 28%;
    right: 5%;

    font-size: 17px;
}


.hr-cover-bg-star-three {
    bottom: 13%;
    left: 7%;

    font-size: 10px;
}

.hr-cover-bg-star-four {
    top: 30%;
    right: 45%;

    font-size: 18px;
}

.hr-cover-bg-star-five {
    top: 40%;
    right: 50%;

    font-size: 17px;
}


/* =========================================================
   INNER
========================================================= */

.hr-home-cover .hr-home-container {
    max-width: 1320px;
}


.hr-home-cover-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr;

    align-items: center;

    min-height: 650px;

    padding-top: 54px;
    padding-bottom: 48px;
}


/* =========================================================
   COPY
========================================================= */

.hr-home-cover-copy {
    position: relative;
    z-index: 4;

    width: 100%;
    max-width: 700px;

    margin: 0;
    padding: 0;
}


/* =========================================================
   EYEBROW
========================================================= */

.hr-home-cover-eyebrow {
    margin: 0 0 16px 6px;

    color: #825838;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.17em;
    text-transform: uppercase;
}


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

.hr-home-cover-title {
    margin: 0;
    padding: 0;

    color: #17120f;

    font-size: clamp(48px, 12.5vw, 64px);
    font-weight: 600;
    line-height: 0.96;

    letter-spacing: -0.045em;
}


.hr-home-cover-title > span {
    display: block;
}


.hr-cover-title-accent {
    margin-top: 5px;

    color: #8a5b38;
}


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

.hr-home-cover-intro {
    max-width: 570px;

    margin: 22px 0 0;

    color: rgba(34, 27, 23, 0.74);

    font-size: 16px;
    line-height: 1.58;
}


/* =========================================================
   BUTTONS
========================================================= */

.hr-home-cover-actions {
    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 9px;

    width: 100%;

    margin-top: 25px;
}


.hr-home-cover-button {
    display: inline-flex;

    min-height: 48px;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 19px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-align: center;
    text-decoration: none !important;

    border-radius: 9px;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}


/* primary */

.hr-home-cover-button-primary {
    color: #fff !important;

    background: #795033;

    border: 1px solid #795033;
}


.hr-home-cover-button-primary:hover {
    transform: translateY(-2px);

    background: #654129;

    border-color: #654129;

    box-shadow:
        0 12px 26px rgba(77, 48, 29, 0.16);
}


.hr-home-cover-button-primary span {
    display: inline-block;

    transition: transform 180ms ease;
}


.hr-home-cover-button-primary:hover span {
    transform: translateX(3px);
}


/* secondary */

.hr-home-cover-button-secondary {
    color: #60442f !important;

    background:
        rgba(255, 255, 255, 0.38);

    border:
        1px solid rgba(96, 68, 47, 0.19);
}


.hr-home-cover-button-secondary:hover {
    transform: translateY(-2px);

    background:
        rgba(255, 255, 255, 0.65);

    border-color:
        rgba(96, 68, 47, 0.30);
}


/* =========================================================
   DATE
========================================================= */

.hr-cover-date {
    display: flex;

    align-items: center;

    gap: 7px;

    margin: 12px 0 0;

    color: rgba(47, 37, 30, 0.42);

    font-size: 10px;
    line-height: 1.4;
}


.hr-cover-date > span {
    display: block;

    width: 5px;
    height: 5px;

    background: #a16a43;

    border-radius: 50%;
}


/* =========================================================
   VISUAL
========================================================= */

.hr-cover-visual {
    position: relative;

    width: min(100%, 410px);
    height: 330px;

    margin: 34px auto 0;

    pointer-events: none;
}


/* =========================================================
   BACK ORBIT
========================================================= */

.hr-cover-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 285px;
    height: 285px;

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

    border:
        1px solid rgba(146, 97, 57, 0.13);

    border-radius: 50%;
}


.hr-cover-orbit::before,
.hr-cover-orbit::after {
    content: "";

    position: absolute;

    border:
        1px solid rgba(146, 97, 57, 0.08);

    border-radius: 50%;
}


.hr-cover-orbit::before {
    inset: 35px;
}


.hr-cover-orbit::after {
    inset: 72px;
}


/* =========================================================
   MEDALLIONS
========================================================= */

.hr-cover-medallion {
    position: absolute;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    filter:
        drop-shadow(
            0 18px 28px rgba(82, 51, 29, 0.12)
        );
}


.hr-cover-medallion img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: contain;
}


/* main */

.hr-cover-medallion-main {
    z-index: 4;

    top: 40px;
    left: 50%;

    width: 205px;

    transform:
        translateX(-50%);
}


/* left */

.hr-cover-medallion-left {
    z-index: 2;

    left: 2px;
    bottom: 18px;

    width: 135px;

    transform:
        rotate(-7deg);

    opacity: 0.88;
}


/* right */

.hr-cover-medallion-right {
    z-index: 3;

    right: 0;
    bottom: 10px;

    width: 145px;

    transform:
        rotate(6deg);

    opacity: 0.92;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.hr-cover-floating-card {
    position: absolute;
    z-index: 7;

    display: flex;
    flex-direction: column;

    gap: 2px;

    padding: 9px 11px;

    background:
        rgba(250, 245, 240, 0.88);

    border:
        1px solid rgba(113, 77, 48, 0.13);

    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(71, 45, 27, 0.08);

    backdrop-filter:
        blur(7px);
}


.hr-cover-floating-card small {
    color: rgba(57, 43, 33, 0.47);

    font-size: 8px;
    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.hr-cover-floating-card strong {
    color: #33251c;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
}


.hr-cover-floating-top {
    top: 4px;
    right: 8px;
}


.hr-cover-floating-bottom {
    left: 3px;
    bottom: 4px;
}


/* =========================================================
   VISUAL STARS
========================================================= */

.hr-cover-visual-star {
    position: absolute;

    z-index: 6;

    color: rgba(144, 95, 56, 0.40);

    line-height: 1;
}


.hr-cover-visual-star-one {
    top: 27px;
    left: 21%;

    font-size: 12px;
}


.hr-cover-visual-star-two {
    right: 17%;
    top: 46%;

    font-size: 9px;
}


/* =========================================================
   FOCUS
========================================================= */

.hr-home-cover-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


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

@media (max-width: 359px) {

    .hr-home-cover-inner {
        min-height: 620px;

        padding-top: 42px;
        padding-bottom: 36px;
    }

    .hr-home-cover-title {
        font-size: 43px;
    }

    .hr-home-cover-intro {
        font-size: 15px;
    }

    .hr-cover-visual {
        height: 295px;

        margin-top: 28px;
    }

    .hr-cover-medallion-main {
        width: 180px;
    }

    .hr-cover-medallion-left {
        width: 115px;
    }

    .hr-cover-medallion-right {
        width: 120px;
    }

}


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

@media (min-width: 680px) {

    .hr-home-cover-inner {
        min-height: 690px;

        padding-top: 66px;
        padding-bottom: 60px;
    }

    .hr-home-cover-title {
        max-width: 700px;

        font-size:
            clamp(64px, 8vw, 78px);
    }

    .hr-home-cover-intro {
        max-width: 590px;

        font-size: 17px;
    }

    .hr-home-cover-actions {
        flex-direction: row;

        align-items: center;

        width: auto;
    }

    .hr-home-cover-button {
        min-height: 50px;

        padding:
            13px 21px;

        font-size: 14px;
    }

    .hr-cover-visual {
        width: 470px;
        height: 370px;

        margin-top: 38px;
    }

    .hr-cover-orbit {
        width: 330px;
        height: 330px;
    }

    .hr-cover-medallion-main {
        width: 235px;
    }

    .hr-cover-medallion-left {
        width: 150px;
    }

    .hr-cover-medallion-right {
        width: 160px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    .hr-home-cover-inner {
        grid-template-columns:
            minmax(0, 0.53fr)
            minmax(420px, 0.47fr);

        gap: 60px;

        min-height: 660px;

        padding-top: 66px;
        padding-bottom: 66px;
    }


    /* --------------------------
       COPY
    --------------------------- */

    .hr-home-cover-title {
        max-width: 700px;

        font-size:
            clamp(68px, 4.7vw, 82px);

        line-height: 0.95;
    }

    .hr-home-cover-intro {
        margin-top: 24px;

        font-size: 18px;
        line-height: 1.6;
    }

    .hr-home-cover-actions {
        margin-top: 29px;
    }

    .hr-home-cover-button {
        min-height: 52px;

        padding:
            14px 23px;

        font-size: 15px;
    }


    /* --------------------------
       VISUAL
    --------------------------- */

    .hr-cover-visual {
        width: 100%;
        max-width: 560px;
        height: 520px;

        justify-self: end;

        margin: 0;
    }

    .hr-cover-orbit {
        width: 430px;
        height: 430px;
    }

    .hr-cover-medallion-main {
        top: 51px;

        width: 310px;
    }

    .hr-cover-medallion-left {
        left: -6px;
        bottom: 32px;

        width: 205px;
    }

    .hr-cover-medallion-right {
        right: -5px;
        bottom: 22px;

        width: 215px;
    }

    .hr-cover-floating-card {
        padding:
            11px 14px;
    }

    .hr-cover-floating-card small {
        font-size: 9px;
    }

    .hr-cover-floating-card strong {
        font-size: 12px;
    }

    .hr-cover-floating-top {
        top: 35px;
        right: 9px;
    }

    .hr-cover-floating-bottom {
        left: 2px;
        bottom: 10px;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1280px) {

    .hr-home-cover-inner {
        min-height: 700px;

        gap: 80px;
    }

    .hr-home-cover-title {
        font-size: 66px;
    }

    .hr-cover-visual {
        max-width: 600px;
        height: 560px;
    }

    .hr-cover-orbit {
        width: 470px;
        height: 470px;
    }

    .hr-cover-medallion-main {
        width: 340px;
    }

    .hr-cover-medallion-left {
        width: 220px;
    }

    .hr-cover-medallion-right {
        width: 230px;
    }

}

/* =========================================================
   COVER - EXTRA CELESTIAL FIELD
========================================================= */


/* =========================================================
   EXTRA STARS
   Mostly placed away from the large right-side artwork
========================================================= */

.hr-cover-bg-star-six {
    top: 7%;
    left: 11%;

    font-size: 8px;
    opacity: 0.65;
}

.hr-cover-bg-star-seven {
    top: 22%;
    left: 5%;

    font-size: 11px;
    opacity: 0.48;
}

.hr-cover-bg-star-eight {
    top: 52%;
    left: 14%;

    font-size: 7px;
    opacity: 0.55;
}

.hr-cover-bg-star-nine {
    bottom: 9%;
    left: 23%;

    font-size: 13px;
    opacity: 0.45;
}

.hr-cover-bg-star-ten {
    top: 10%;
    left: 35%;

    font-size: 6px;
    opacity: 0.52;
}

.hr-cover-bg-star-eleven {
    bottom: 22%;
    left: 43%;

    font-size: 9px;
    opacity: 0.42;
}

.hr-cover-bg-star-twelve {
    top: 73%;
    left: 5%;

    font-size: 6px;
    opacity: 0.50;
}


/* =========================================================
   TINY DOTS
========================================================= */

.hr-cover-bg-dot {
    position: absolute;

    display: block;

    width: 4px;
    height: 4px;

    background:
        rgba(151, 101, 61, 0.25);

    border-radius: 50%;

    pointer-events: none;
}

.hr-cover-bg-dot-one {
    top: 18%;
    left: 20%;
}

.hr-cover-bg-dot-two {
    top: 37%;
    left: 8%;

    width: 3px;
    height: 3px;
}

.hr-cover-bg-dot-three {
    top: 61%;
    left: 38%;

    width: 3px;
    height: 3px;

    opacity: 0.65;
}

.hr-cover-bg-dot-four {
    bottom: 12%;
    left: 12%;

    width: 5px;
    height: 5px;

    opacity: 0.5;
}

.hr-cover-bg-dot-five {
    top: 8%;
    left: 53%;

    width: 3px;
    height: 3px;
}

.hr-cover-bg-dot-six {
    bottom: 7%;
    left: 48%;

    width: 3px;
    height: 3px;

    opacity: 0.55;
}


/* =========================================================
   MINI ORBITS
========================================================= */

.hr-cover-bg-mini-orbit {
    position: absolute;

    display: block;

    border:
        1px solid rgba(145, 96, 58, 0.075);

    border-radius: 50%;

    pointer-events: none;
}


/* upper-left */
.hr-cover-bg-mini-orbit-one {
    top: 5%;
    left: 2%;

    width: 135px;
    height: 135px;
}


/* little planet on orbit */
.hr-cover-bg-mini-orbit-one::after {
    content: "";

    position: absolute;

    top: 24px;
    right: 10px;

    width: 5px;
    height: 5px;

    background:
        rgba(145, 96, 58, 0.24);

    border-radius: 50%;
}


/* lower-middle */
.hr-cover-bg-mini-orbit-two {
    left: 42.5%;
    bottom: -42px;

    width: 180px;
    height: 180px;

    border-color:
        rgba(145, 96, 58, 0.1);
}

.hr-cover-bg-mini-orbit-two::before {
    content: "";

    position: absolute;

    inset: 35px;

    border:
        1px solid rgba(145, 96, 58, 0.095);

    border-radius: 50%;
}


/* =========================================================
   CRESCENT OUTLINE
========================================================= */

.hr-cover-bg-crescent {
    position: absolute;

    left: 3%;
    top: 63%;

    display: block;

    width: 54px;
    height: 54px;

    border:
        1px solid rgba(147, 97, 58, 0.12);

    border-radius: 50%;

    opacity: 0.7;
}


/*
 * Masks part of circle with page background feel,
 * creating a simple crescent outline.
 */
.hr-cover-bg-crescent::after {
    content: "";

    position: absolute;

    top: -4px;
    left: 14px;

    width: 50px;
    height: 50px;

    background:
        #f5eeea;

    border-radius: 50%;
}


/* =========================================================
   CROSS / STARBURST DETAILS
========================================================= */

.hr-cover-bg-cross {
    position: absolute;

    display: block;

    width: 17px;
    height: 17px;

    opacity: 0.22;

    pointer-events: none;
}

.hr-cover-bg-cross::before,
.hr-cover-bg-cross::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background:
        #925f3c;

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

.hr-cover-bg-cross::before {
    width: 1px;
    height: 17px;
}

.hr-cover-bg-cross::after {
    width: 17px;
    height: 1px;
}


.hr-cover-bg-cross-one {
    top: 31%;
    left: 30%;

    transform:
        scale(0.65);
}


.hr-cover-bg-cross-two {
    left: 47%;
    bottom: 12%;

    transform:
        scale(0.45);

    opacity: 0.16;
}


/* =========================================================
   TINY CONSTELLATION
========================================================= */

.hr-cover-constellation {
    position: absolute;

    top: 11%;
    left: 24%;

    display: block;

    width: 105px;
    height: 72px;

    opacity: 0.48;

    pointer-events: none;
}


/* dots */

.hr-cover-constellation-dot {
    position: absolute;
    z-index: 2;

    display: block;

    width: 5px;
    height: 5px;

    background:
        rgba(146, 96, 58, 0.42);

    border-radius: 50%;
}


.hr-cover-constellation-dot-a {
    left: 4px;
    bottom: 7px;
}


.hr-cover-constellation-dot-b {
    left: 34px;
    top: 25px;

    width: 4px;
    height: 4px;
}


.hr-cover-constellation-dot-c {
    left: 66px;
    top: 7px;

    width: 6px;
    height: 6px;
}


.hr-cover-constellation-dot-d {
    right: 3px;
    bottom: 12px;

    width: 4px;
    height: 4px;
}


/* lines */

.hr-cover-constellation-line {
    position: absolute;
    z-index: 1;

    display: block;

    height: 1px;

    background:
        rgba(146, 96, 58, 0.16);

    transform-origin:
        left center;
}


.hr-cover-constellation-line-a {
    left: 8px;
    bottom: 11px;

    width: 44px;

    transform:
        rotate(-43deg);
}


.hr-cover-constellation-line-b {
    left: 37px;
    top: 27px;

    width: 37px;

    transform:
        rotate(-29deg);
}


.hr-cover-constellation-line-c {
    left: 70px;
    top: 12px;

    width: 47px;

    transform:
        rotate(51deg);
}

/* =========================================================
   CELESTIAL FIELD - MOBILE CLEANUP
========================================================= */

@media (max-width: 679px) {

    .hr-cover-bg-mini-orbit-one,
    .hr-cover-bg-mini-orbit-two,
    .hr-cover-constellation,
    .hr-cover-bg-cross-two,
    .hr-cover-bg-star-six,
    .hr-cover-bg-star-nine,
    .hr-cover-bg-star-eleven,
    .hr-cover-bg-dot-one,
    .hr-cover-bg-dot-five,
    .hr-cover-bg-dot-six {
        display: none;
    }


    .hr-cover-bg-star-seven {
        top: 16%;
        left: 5%;
    }

    .hr-cover-bg-star-eight {
        top: 43%;
        left: 91%;
    }

    .hr-cover-bg-star-ten {
        top: 6%;
        left: 87%;
    }

    .hr-cover-bg-star-twelve {
        top: 72%;
        left: 4%;
    }


    .hr-cover-bg-crescent {
        left: -13px;
        top: 55%;

        width: 43px;
        height: 43px;

        opacity: 0.48;
    }

    .hr-cover-bg-crescent::after {
        left: 11px;

        width: 42px;
        height: 42px;
    }


    .hr-cover-bg-cross-one {
        top: 35%;
        left: 92%;
    }


    .hr-cover-bg-dot-two {
        top: 29%;
        left: 5%;
    }


    .hr-cover-bg-dot-three {
        top: 52%;
        left: 96%;
    }


    .hr-cover-bg-dot-four {
        bottom: 8%;
        left: 7%;
    }

}

/* =========================================================
   COVER SCROLL INDICATOR
========================================================= */

.hr-cover-scroll {
    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: 20px;

    display: flex;

    width: 48px;
    height: 48px;

    align-items: center;
    justify-content: center;

    transform: translateX(-50%);

    color: #805635;

    background:
        rgba(255, 255, 255, 0.22);

    border:
        1px solid rgba(128, 86, 53, 0.30);

    border-radius: 50%;

    text-decoration: none !important;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


/* little celestial star */

.hr-cover-scroll-star {
    position: absolute;

    top: -7px;
    right: -3px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    color:
        rgba(151, 99, 60, 0.72);

    font-size: 9px;
    line-height: 1;

    background: #f5eeea;

    border-radius: 50%;
}


/* actual arrow */

.hr-cover-scroll-arrow {
    position: relative;

    display: block;

    width: 14px;
    height: 19px;
}


/* vertical line */

.hr-cover-scroll-arrow::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 15px;

    background: currentColor;

    transform: translateX(-50%);
}


/* arrow head */

.hr-cover-scroll-arrow::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 1px;

    width: 7px;
    height: 7px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* hover */

.hr-cover-scroll:hover {
    transform:
        translateX(-50%)
        translateY(3px);

    background:
        rgba(255, 255, 255, 0.42);

    border-color:
        rgba(128, 86, 53, 0.46);

    box-shadow:
        0 8px 22px rgba(92, 58, 34, 0.08);
}


/* keyboard */

.hr-cover-scroll:focus-visible {
    outline:
        2px solid #805635;

    outline-offset:
        4px;
}

#hr-home-todays {
    scroll-margin-top: 90px;
}


/* subtle movement */

.hr-cover-scroll-arrow {
    animation:
        hr-cover-arrow-float
        2.2s
        ease-in-out
        infinite;
}


@keyframes hr-cover-arrow-float {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(3px);
    }

}


/* Reduced motion */

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

    .hr-cover-scroll-arrow {
        animation: none;
    }

}


/* Mobile */

@media (max-width: 679px) {

    .hr-cover-scroll {
        width: 43px;
        height: 43px;

        bottom: 12px;
    }

}