/* Horizontal Rule */
hr {
    margin: 0 15rem;
    border-top: 2px solid var(--black);
}

strong {
    font-weight: 600;
}

/* Links */
a {
    position: relative;
    font-weight: 400;
    color: var(--black);
    text-decoration: underline;
    transition: color 250ms ease-in-out;
}

a svg {
    text-decoration: none;
}

a:hover {
    color: var(--viridian);
}

a.external::after {
    display: none;
}

a.external svg {
    flex-shrink: 0;
    transform: scale(0.96);
    padding: 0;
}

a.external svg.external {
    display: inline;
}

a.external svg.external rect {
    fill: transparent;
}

a svg.external path {
    transition: fill 250ms ease-in-out;
    fill: var(--green);
}

a:hover svg.external path {
    fill: var(--viridian);
}

/* Headings */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
    color: var(--black);
    word-break: auto-phrase;
}

h1, .h1 {
    font-weight: 600;
    font-size: clamp(2.25rem, 2.2454rem + 1.4634vw, 3.5625rem);
    line-height: 1.2;
    margin-bottom: 50px;
}

h2, .h2 {
    font-weight: 500;
    font-size: clamp(2rem, 1.9978rem + 0.6969vw, 2.625rem);
    margin-bottom: 40px;
}

h3, .h3 {
    font-size: clamp(1.1875rem, 1.1853rem + 0.6969vw, 1.8125rem);
    font-weight: 500;
    margin-bottom: 30px;
}

h4, .h4 {
    font-size: clamp(1rem, 0.9993rem + 0.2235vw, 1.125rem);
    font-weight: 500;
    margin-bottom: 30px;
}

/* Paragraphs */
p {
    font-weight: 400;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

p > a {
    font-weight: inherit;
    color: var(--black);
}



p.lead, p.lead a {
    font-weight: 400;
    font-size: clamp(1.125rem, 1.1237rem + 0.4181vw, 1.5rem);
    margin-bottom: 40px;
    letter-spacing: 0.25px;
    color: var(--black);
}

p.lead a:hover, p a:hover {
    color: var(--viridian);
}

p a.btn.external svg.external path {
    fill: var(--green)
}

p.lead a svg.external path, p a svg.external path {
    fill: var(--black);
}

p.lead a:hover svg.external path, p a:hover svg.external path {
    fill: var(--viridian);
}

/* Labels */
p.label {
    font-weight: 500;
    font-size: 1rem;
    line-height: 21px;
    font-family: "Jost", sans-serif;
    font-display: swap;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: max-content;
}

p.label.label-current, p.label.label-future {
    background: var(--viridian);
    color: var(--white);
    padding: 5px 10px;
    border-radius: 15px;
    margin-bottom: 0;
}

p.label.label-expired {
    padding: 5px 10px;
    border-radius: 15px;
    color: var(--dark-grey);
    background: var(--light-grey);
}

p.label.label-expired svg path {
    fill: var(--dark-grey);
}

/* Price Alert */
.price-alert, p.price-alert, h4.price-alert {
    color: var(--red);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Blockquote */
blockquote {
    font-weight: 700;
    font-size: clamp(1.375rem, 1.3743rem + 0.2091vw, 1.5625rem);
    letter-spacing: 2pt;
    margin-bottom: 50px;
}

/* Small and Hint */
small {
    font-size: 11px;
}

p small a.external svg.external {
    width: 25px;
    height: 25px;
}

p.hint {
    font-size: 16px;
}

p.hint a.external svg.external {
    width: 25px;
    height: 25px;
}



/* Lists */
ul li {
    position: relative;
    font-weight: inherit;
    letter-spacing: 0.25px;
    font-size: inherit;
}

ul li a {
    font-weight: inherit;
    color: var(--black);
}

ul li a.external svg path {
    fill: var(--black);
}

ul li a:hover svg path {
    fill: var(--viridian);
}

ul li a svg rect {
    fill: transparent;
}

/* Accent */
h2.accent, .h2.accent,
h3.accent, .h3.accent,
p.accent, p.lead.accent, p.lead.accent a {
    color: var(--viridian);
}

p.accent a, p.lead.accent a, ul li p.accent a {
    color: var(--viridian);
}

p.accent a:hover, p.lead.accent a:hover, ul li p.accent a:hover {
    color: var(--black);
}

p.accent a svg path, p.lead.accent a svg path, ul li p.accent a svg path {
    fill: var(--viridian);
}

p.accent a:hover svg path, p.lead.accent a:hover svg path, ul li p.accent a:hover svg path {
    fill: var(--black);
}

/* Media Queries */
@media (min-width: 768px) and (max-width: 991px) {
    p.label {
        font-size: 0.795rem;
    }

    .price-alert, p.price-alert, h4.price-alert {
        font-size: 1.15rem;
    }
}