/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

@font-face {
    font-family: "sa-digital-number";
    src: url("../fonts/sa-digital-number.eot");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "sa-digital-number";
    src: url("../fonts/sa-digital-number.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#anon .quote-attribution {
  display: none;
}


/* --------------------------------------------------------------------------
   Theme variables
   -------------------------------------------------------------------------- */

:root {
    --quotes-image: url("../../bg.jpg");
    --quotes-radius: 1.55rem;
}


:root,
[data-bs-theme="light"] {

    --quotes-card-border: rgba(10, 54, 34, .18);
    --quotes-card-shadow: 0 1.2rem 3.4rem rgba(10, 54, 34, .14);

    --quotes-card-glass: rgba(225, 241, 234, .46);
    --quotes-card-glass-strong: rgba(225, 241, 234, .74);

    --quotes-clock-face: rgba(225, 241, 234, .48);
    --quotes-clock-ring: rgba(10, 54, 34, .20);

    --quotes-action-bg-bg: rgba(225, 241, 234, .88);
    --quotes-action-bg-border: rgba(10, 54, 34, .26);
    --quotes-action-bg-shadow: 0 .7rem 1.9rem rgba(10, 54, 34, .14);

    --digital-panel-top: rgba(18, 72, 48, .96);
    --digital-panel-bottom: rgba(8, 42, 27, .98);
    --digital-panel-border: rgba(10, 54, 34, .38);

    --digital-number: rgba(184, 255, 216, .96);
    --digital-glow: rgba(117, 183, 152, .58);

    --quote-card-start: rgba(209, 231, 221, .98);
    --quote-card-middle: rgba(209, 231, 221, .90);
    --quote-card-fade: rgba(209, 231, 221, .20);
    --quote-card-end: rgba(209, 231, 221, .04);

    --quote-card-color-rgb: 10, 54, 34;
    --quote-card-color-light-rgb: 25, 135, 84;

    /*  light mode */
    --quote-card-article-color: #1f291f;
    --quote-card-article-glass-bg: rgba(244, 247, 234, .34);
    --quote-card-article-glass-border: rgba(255, 255, 255, .76);
    --quote-card-article-glass-shadow: 0 2rem 6rem rgba(27, 41, 25, .22);
    --quote-card-article-glass-sheen: rgba(255, 255, 255, .32);
    --quote-card-article-shape-fill: rgba(205, 216, 164, .52);
    --quote-card-article-line-stroke: rgba(132, 104, 55, .58);
}

[data-bs-theme="dark"] {

    --quotes-card-border: rgba(117, 183, 152, .18);
    --quotes-card-shadow: 0 1.3rem 3.8rem rgba(0, 12, 7, .46);

    --quotes-card-glass: rgba(5, 27, 17, .4);
    --quotes-card-glass-strong: rgba(5, 27, 17, .6);

    --quotes-clock-face: rgba(7, 35, 22, .52);
    --quotes-clock-ring: rgba(117, 183, 152, .20);

    --quotes-action-bg-bg: rgba(7, 35, 22, .90);
    --quotes-action-bg-border: rgba(117, 183, 152, .26);
    --quotes-action-bg-shadow: 0 .7rem 2rem rgba(0, 10, 6, .44);

    --digital-panel-top: rgba(8, 42, 27, .98);
    --digital-panel-bottom: rgba(3, 19, 12, .99);
    --digital-panel-border: rgba(117, 183, 152, .20);

    --digital-number: rgba(151, 230, 190, .98);
    --digital-glow: rgba(117, 183, 152, .68);

    --quote-card-start: rgba(5, 27, 17, .98);
    --quote-card-middle: rgba(5, 27, 17, .91);
    --quote-card-fade: rgba(5, 27, 17, .25);
    --quote-card-end: rgba(5, 27, 17, .05);

    --quote-card-color-rgb: 117, 183, 152;
    --quote-card-color-light-rgb: 151, 230, 190;

    /* dark mode */
    --quote-card-article-color: #f7faf6;
    --quote-card-article-glass-bg: rgba(15, 27, 18, .42);
    --quote-card-article-glass-border: rgba(176, 207, 184, .18);
    --quote-card-article-glass-shadow: 0 2rem 6rem rgba(0, 0, 0, .46);
    --quote-card-article-glass-sheen: rgba(255, 255, 255, .07);
    --quote-card-article-shape-fill: rgba(74, 101, 62, .42);
    --quote-card-article-line-stroke: rgba(216, 194, 139, .68);
}

/* --------------------------------------------------------------------------
   Page background
   -------------------------------------------------------------------------- */

.quotes-main-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: calc(100vh - 112px);
    min-height: calc(100dvh - 112px);

    padding-block: clamp(2.5rem, 6vw, 5.5rem);

    background: var(--bs-body-bg);
}

.quotes-main-section::before {
    content: "";
    position: absolute;
    inset: -3rem;
    z-index: -3;

    background-image: var(--quotes-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    filter: blur(18px) saturate(.9);
    transform: scale(1.08);
    opacity: .96;

    pointer-events: none;
}

.quotes-main-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background: linear-gradient(
        to bottom,
        rgba(16, 37, 26, 0) 0%,
        rgba(16, 37, 26, .03) 15%,
        rgba(16, 37, 26, .08) 30%,
        rgba(16, 37, 26, .18) 45%,
        rgba(16, 37, 26, .35) 65%,
        rgba(16, 37, 26, .65) 82%,
        rgba(16, 37, 26, 1) 100%
    );

    pointer-events: none;
}

.quotes-main-shell {
    width: 100%;
    max-width: 1180px;
}

.quotes-page-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   Action buttons
   -------------------------------------------------------------------------- */

.quotes-button-action-container {
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 1rem;

  background-color: rgba(248, 249, 250, .4);
  border: 1px solid #dee2e6;
  border-radius: 1rem;

  margin-bottom: 2rem;
}

[data-bs-theme="dark"] .quotes-button-action-container {
  background-color: rgba(43, 48, 53, .4);
  border-color: #495057;
}

.quotes-button-action {
  --quotes-button-action-size: 2.5rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--quotes-button-action-size);
  height: var(--quotes-button-action-size);
  padding: 0;

  border: 1px solid var(--bs-border-color);
  border-radius: 50rem;

  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);

  font-size: 1rem;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.quotes-button-action:hover {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color-translucent);
}

.quotes-button-action:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.quotes-button-action:active {
  transform: scale(0.95);
}

.quotes-button-action > i {
  display: block;
  pointer-events: none;
}
/* --------------------------------------------------------------------------
   Quote Card Main
   -------------------------------------------------------------------------- */

.quote-card-article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 690px;
  min-height: 440px;
  margin: 0 auto;
  color: var(--quote-card-article-color);
  background: var(--quote-card-article-glass-bg);
  border: 1px solid var(--quote-card-article-glass-border);
  border-radius: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--quote-card-article-glass-shadow);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.quote-card-article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--quote-card-article-glass-sheen), transparent 34%),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--quote-card-article-glass-bg) 40%, transparent), transparent 58%);
}

.quote-card-article::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 1;
  border-radius: calc(clamp(1.5rem, 3vw, 2.4rem) - 10px);
  border: 1px solid color-mix(in srgb, var(--quote-card-article-glass-border) 40%, transparent);
  pointer-events: none;
}

.quote-card-article-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.quote-card-article-art .shape { fill: var(--quote-card-article-shape-fill); }
.quote-card-article-art .line {
  fill: none;
  stroke: var(--quote-card-article-line-stroke);
  stroke-linecap: round;
}


/* --------------------------------------------------------------------------
   Shared card shell
   -------------------------------------------------------------------------- */

.quotes-card-shared {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background-color: rgba(var(--quote-card-color-rgb), .16);
    color: #212529;

    border: 1px solid rgba(var(--quote-card-color-rgb), .24);
}

.quotes-card-shared::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            ellipse 90% 65% at 100% 0%,
            rgba(var(--quote-card-color-rgb), .12) 0%,
            rgba(var(--quote-card-color-rgb), .06) 45%,
            transparent 75%
        ),
        radial-gradient(
            ellipse 80% 55% at 0% 100%,
            rgba(var(--quote-card-color-rgb), .09) 0%,
            rgba(var(--quote-card-color-rgb), .04) 45%,
            transparent 75%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .24),
            rgba(var(--quote-card-color-rgb), .08)
        );

    pointer-events: none;
}

[data-bs-theme="dark"] .quotes-card-shared {
    background-color: rgba(var(--quote-card-color-rgb), .28);
    color: #f8f9fa;
    border-color: rgba(var(--quote-card-color-rgb), .35);
}

[data-bs-theme="dark"] .quotes-card-shared::before {
    background:
        radial-gradient(
            ellipse 90% 65% at 100% 0%,
            rgba(var(--quote-card-color-rgb), .18) 0%,
            rgba(var(--quote-card-color-rgb), .08) 45%,
            transparent 75%
        ),
        radial-gradient(
            ellipse 80% 55% at 0% 100%,
            rgba(var(--quote-card-color-rgb), .14) 0%,
            rgba(var(--quote-card-color-rgb), .06) 45%,
            transparent 75%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .06),
            rgba(var(--quote-card-color-rgb), .16)
        );
}

.quotes-card-shared {
    position: relative;
    min-width: 0;
    overflow: hidden;

    border: 1px solid var(--quotes-card-border);
    border-radius: var(--quotes-radius);

    box-shadow: var(--quotes-card-shadow);
}

.quotes-card-shared-footer-container {
    padding-top: 4rem;
}

.quotes-card-shared-footer-left {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.quotes-card-shared-footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.quotes-card-shared-footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.35rem;
    height: 3.35rem;
    padding: 0;

    flex: 0 0 3.35rem;
}

.quote-card-footer {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.quote-card-footer::before,
.quote-card-footer::after {
  content: "";
  display: block;
  width: 2rem;
  border-top: 1px solid var(--quotes-action-bg-border);
}

.quote-card-footer span {
  white-space: nowrap;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Quote card
   -------------------------------------------------------------------------- */

.quotes-card-shared {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background-color: rgba(248, 249, 250, .50);
    color: #212529;

    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 .25rem .9rem rgba(0, 0, 0, .07);
}

.quotes-card-shared::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            ellipse 90% 65% at 100% 0%,
            rgba(13, 110, 253, .065) 0%,
            rgba(13, 110, 253, .03) 45%,
            transparent 75%
        ),
        radial-gradient(
            ellipse 80% 55% at 0% 100%,
            rgba(25, 135, 84, .055) 0%,
            rgba(25, 135, 84, .025) 45%,
            transparent 75%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .44),
            rgba(248, 249, 250, .25)
        );

    pointer-events: none;
}

[data-bs-theme="dark"] .quotes-card-shared {
    background-color: rgba(25, 35, 30, .50);
    color: #f8f9fa;

    border-color: rgba(255, 255, 255, .11);
    box-shadow: 0 .25rem .9rem rgba(0, 0, 0, .24);
}

[data-bs-theme="dark"] .quotes-card-shared::before {
    background:
        radial-gradient(
            ellipse 90% 65% at 100% 0%,
            rgba(13, 110, 253, .09) 0%,
            rgba(13, 110, 253, .04) 45%,
            transparent 75%
        ),
        radial-gradient(
            ellipse 80% 55% at 0% 100%,
            rgba(25, 135, 84, .08) 0%,
            rgba(25, 135, 84, .035) 45%,
            transparent 75%
        ),
        linear-gradient(
            180deg,
            rgba(40, 50, 45, .44),
            rgba(25, 35, 30, .28)
        );
}

.quote-card-body {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 440px;
}

.quote-card-content {
  position: relative;
  z-index: 1;

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

  width: 100%;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) 0;

  text-align: center;
}

.quote-text {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.quote-mark {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(var(--quote-card-color-light-rgb), .19);
    border-radius: 1.05rem;
    color: var(--quote-card-color-rgb);
    background: rgba(var(--bs-success-rgb), .11);
    backdrop-filter: blur(8px);
}

.quote-mark i {
    font-size: 1.5rem;
}


.quote-attribution {
    display: inline-block;
    margin-top: 2rem !important;
}

.quote-author {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1rem;
    font-weight: 750;
}

.quote-author::before {
    content: "";
    width: 1.7rem;
    height: 1px;
    flex: 0 0 auto;
    background: currentColor;
    opacity: .46;
}

.quote-source {
    margin-top: .4rem;
    padding-left: 2.4rem;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.quote-source a {
    color: inherit;
    text-underline-offset: .2em;
}

.quote-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    color: var(--bs-secondary-color);
    font-size: .82rem;
}

.quote-meta-page-numbers {
    color: rgba(var(--bs-secondary-color-rgb), .44) !important;
}

.quote-index {
    font-variant-numeric: tabular-nums;
}

.quote-eyebrow-container {
    --eyebrow-accent-rgb: var(
        --quote-card-color-rgb,
        var(--bs-primary-rgb, 13, 110, 253)
    );

    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

.quote-eyebrow-container .header {
    margin: 2rem auto 0;
}

.quote-eyebrow-container .footer {
    margin: 2rem auto 0;
}

/* -------------------------------------------------
   Eyebrow
------------------------------------------------- */

.quote-eyebrow-container .eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;

    margin: 0 0 1.1rem;
    padding: .42rem .72rem .42rem .46rem;

    border: 1px solid rgba(
        var(--eyebrow-accent-rgb),
        .16
    );

    border-radius: 999px;

    background-color: rgba(
        var(--eyebrow-accent-rgb),
        .06
    );

    color: rgb(
        var(--eyebrow-accent-rgb)
    );

    font-size: .76rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;

    vertical-align: middle;
}


/* -------------------------------------------------
   Eyebrow icon
------------------------------------------------- */

.quote-eyebrow-container .eyebrow-icon {
    display: inline-flex;
    margin-right: 6px;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: .45rem;
    aspect-ratio: 1 / 1;

    border: 1px solid rgba(
        var(--eyebrow-accent-rgb),
        .40
    );

    border-radius: 50%;

    background-color: rgba(
        var(--eyebrow-accent-rgb),
        .16
    );

    color: rgb(
        var(--eyebrow-accent-rgb)
    );

    font-size: .82rem;
    line-height: 1;

    box-sizing: border-box;
}

.quote-eyebrow-container .eyebrow-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    margin: 0;
    padding: 0;

    font-size: 1em;
    line-height: 1;

    color: inherit;
}

.quote-eyebrow-container .eyebrow-text {
    display: inline-block;

    line-height: 1;
}


/* -------------------------------------------------
   Heading
------------------------------------------------- */

.quote-eyebrow-container h1 {
    margin: 0;

    color: rgba(25, 35, 30, .92);

    font-size: clamp(1rem, 1.55vw, 1.35rem);
    font-weight: 750;
    line-height: 1.18;
    letter-spacing: -.02em;

    text-wrap: balance;
}


/* =================================================
   BOOTSTRAP DARK COLOR MODE
================================================= */

[data-bs-theme="dark"] .quote-eyebrow-container {
    --eyebrow-accent-rgb: var(
        --quote-card-color-light-rgb,
        var(--bs-primary-rgb, 110, 168, 254)
    );
}


[data-bs-theme="dark"] .quote-eyebrow-container .eyebrow {
    border-color: rgba(
        var(--eyebrow-accent-rgb),
        .20
    );

    background-color: rgba(
        var(--eyebrow-accent-rgb),
        .07
    );

    color: rgb(
        var(--eyebrow-accent-rgb)
    );
}


[data-bs-theme="dark"] .quote-eyebrow-container .eyebrow-icon {
    border-color: rgba(
        var(--eyebrow-accent-rgb),
        .48
    );

    background-color: rgba(
        var(--eyebrow-accent-rgb),
        .20
    );

    color: rgb(
        var(--eyebrow-accent-rgb)
    );
}


[data-bs-theme="dark"] .quote-eyebrow-container h1 {
    color: rgba(248, 249, 250, .94);
}

/* --------------------------------------------------------------------------
   Time card
   -------------------------------------------------------------------------- */

.time-card {
    display: flex;
    width: 100%;
    min-width: 0;

    background:
        linear-gradient(
            180deg,
            var(--quotes-card-glass-strong),
            var(--quotes-card-glass)
        );

    color: var(--bs-body-color);
}



.time-card-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    padding: 1.4rem;

    text-align: center;
}

.time-card-inner > * {
    margin-left: auto;
    margin-right: auto;
}

.today-label {
    max-width: 100%;
    margin-bottom: .35rem;

    color: var(--bs-success);

    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 850;
    line-height: 1.1;

    letter-spacing: clamp(.08em, .35vw, .15em);
    text-transform: uppercase;

    overflow-wrap: anywhere;
}

.local-zone-container {
  margin-bottom: 1rem;
}

.clock-zone {
    max-width: 100%;
    margin-bottom: 1rem;

    color: var(--bs-secondary-color);

    font-size: .78rem;
    line-height: 1.35;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --------------------------------------------------------------------------
   Analog clock
   -------------------------------------------------------------------------- */

.analog-clock {
    --clock-size: clamp(10.25rem, 15vw, 13rem);

    position: relative;
    display: none;

    width: var(--clock-size);
    height: var(--clock-size);
    aspect-ratio: 1;

    flex: 0 0 auto;

    margin: .2rem auto 1.25rem;

    border: 4px solid var(--quotes-clock-ring);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(var(--bs-body-bg-rgb, 255, 255, 255), .16),
            transparent 58%
        ),
        var(--quotes-clock-face);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 .7rem 1.9rem rgba(0, 0, 0, .08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.clock-mark {
    position: absolute;
    inset: .48rem;

    transform: rotate(var(--mark-angle, 0deg));
    pointer-events: none;
}

.clock-mark::before {
    content: "";
    display: block;

    width: 2px;
    height: .52rem;
    margin: 0 auto;

    border-radius: 999px;

    background: var(--bs-body-color);
    opacity: .46;
}

.clock-mark.major::before {
    width: 3px;
    height: .8rem;
    opacity: .82;
}

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 2;

    border-radius: 999px;

    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(0deg);

    background: var(--bs-body-color);

    pointer-events: none;
}

.clock-hand.hour {
    width: 5px;
    height: 26%;
}

.clock-hand.minute {
    width: 3px;
    height: 35%;
    opacity: .9;
}

.clock-hand.second {
    width: 2px;
    height: 39%;
    background: var(--bs-success);
}

.clock-centre {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;

    width: .82rem;
    height: .82rem;

    border: .18rem solid var(--quotes-clock-face);
    border-radius: 50%;

    background: var(--bs-success);

    transform: translate(-50%, -50%);
    pointer-events: none;
}

.clock-number {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 1.8rem;
    height: 1.8rem;

    font-family: "Orbitron", sans-serif;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    color: rgba(var(--bs-body-color-rgb, 33, 37, 41), .42);
    opacity: .8;

    transform:
        translate(-50%, -50%)
        rotate(var(--number-angle, 0deg))
        translateY(calc(var(--clock-size) * -.33))
        rotate(calc(0deg - var(--number-angle, 0deg)));

    pointer-events: none;
    user-select: none;
}

.clock-label {
    position: absolute;
    left: 50%;
    top: calc(50% + 20px);
    transform: translateX(-50%);

    white-space: nowrap;
    text-align: center;

    color: rgba(33, 37, 41, .44);

    text-transform: uppercase;
    line-height: 6px;
    z-index: 1;
    
    font-size: 10px;
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    
}

[data-bs-theme="dark"] .clock-label {
    color: rgba(248, 249, 250, .44);
}

/* --------------------------------------------------------------------------
   Digital time
   -------------------------------------------------------------------------- */

.digital-display-panel {

    position: relative;    
    max-width: 100%;
    width: auto;

    padding: .9rem .9rem .9rem;

    border: 1px solid var(--digital-panel-border);
    border-radius: .55rem;

    background:
        linear-gradient(
            180deg,
            var(--digital-panel-top),
            var(--digital-panel-bottom)
        ); 
      color: var(--digital-number);
      font-family: "sa-digital-number";
    
    text-shadow:
        0 0 .2rem var(--digital-glow),
        0 0 .55rem rgba(126, 255, 85, .20);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 -2px .4rem rgba(0, 0, 0, .38),
        0 .35rem .8rem rgba(0, 0, 0, .14);

}

.digital-time {

    display: inline-flex;
    align-items: baseline;
    justify-content: center;

    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 600;
    line-height: 1;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-kerning: none;

    text-align: center;
    white-space: nowrap;

    overflow: hidden;
    speak: none;
}

[class^="digital-time-icon-"],
[class*=" digital-time-icon-"] {
    font-family: "sa-digital-number";
    speak: none;

    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.digital-time-icon-minus::before {
    content: "\2d";
}

.digital-time-icon-zero::before {
    content: "\30";
}

.digital-time-icon-one::before {
    content: "\31";
}

.digital-time-icon-two::before {
    content: "\32";
}

.digital-time-icon-three::before {
    content: "\33";
}

.digital-time-icon-four::before {
    content: "\34";
}

.digital-time-icon-five::before {
    content: "\35";
}

.digital-time-icon-six::before {
    content: "\36";
}

.digital-time-icon-seven::before {
    content: "\37";
}

.digital-time-icon-eight::before {
    content: "\38";
}

.digital-time-icon-nine::before {
    content: "\39";
}

.digital-colon {
    display: inline-block;
    transform: translateY(.12em);
}

.date-line {
    max-width: 100%;
    margin-top: .65rem;

    font-size: .6rem;
    font-weight: normal;
    line-height: 1.25;

    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.week-line {
    max-width: 100%;
    margin-top: .25rem;

    font-size: .6rem;
    font-weight: normal;
    line-height: 1.25;

    text-transform: uppercase;
    overflow-wrap: anywhere;
}


/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination-wrap {
    position: relative;
    z-index: 6;

    display: flex;
    justify-content: center;

    width: 100%;
    margin-top: 1rem;
}

.pagination {
    --bs-pagination-padding-x: .76rem;
    --bs-pagination-padding-y: .56rem;
    --bs-pagination-font-size: .9rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: .42rem;

    max-width: 100%;
    margin: 0;
}

.pagination .page-link {
    min-width: 2.55rem;

    border: 1px solid var(--quotes-action-bg-border);
    border-radius: .8rem !important;

    background-color: var(--quotes-action-bg-bg);
    color: var(--bs-body-color);

    text-align: center;

    box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .07);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.pagination .page-link:hover {
    border-color: rgba(var(--bs-success-rgb, 25, 135, 84), .46);
    background-color: rgba(var(--bs-success-rgb, 25, 135, 84), .13);
    color: var(--bs-success);
}

.pagination .page-link:focus-visible {
    z-index: 3;
    outline: 3px solid rgba(var(--bs-success-rgb, 25, 135, 84), .26);
    outline-offset: 2px;
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    border-color: var(--bs-success);
    background-color: var(--bs-success);
    color: var(--bs-white, #fff);
}

.pagination .page-item.disabled .page-link {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    color: var(--bs-secondary-color);
    opacity: .72;
}

/* --------------------------------------------------------------------------
   Image Modal
   -------------------------------------------------------------------------- */

#imageModal {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1px);
  z-index: 1080;
}    
    
#imageModal .modal-dialog {
  width: calc(100% - 2rem);
  margin-right: auto;
  margin-left: auto;
  z-index: 1081;
}

#imageModal .modal-content {
  overflow: hidden;
}

#imageModal .modal-content {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bs-modal-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  box-shadow: var(--bs-box-shadow-lg);
}

#imageModal .modal-header {
  min-height: 0;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--bs-modal-bg);
  border: 0;
  border-radius: 0;
}

#imageModal .modal-body {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  line-height: 0;
}

#imageModal .modal-footer {
  min-height: 0;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--bs-modal-bg);
  border: 0;
  border-radius: 0;
}

/* Bootstrap gives direct footer children their own margins. Reset them so
 * the footer height is controlled only by the padding above. */
#imageModal .modal-footer > * {
  margin: 0;
}

.modal-image-wrapper {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.modal-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 690px;
  max-height: 450px;
  margin: 0;
  padding: 0;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}

.image-header-title {
  flex: 1;
  margin: 0;
  padding: 0 0.75rem;
  overflow: hidden;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-modal-header-title {
  flex: 1;
  margin: 0;
  padding: 0 0.75rem;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: normal;
  line-height: 0.9rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}


.image-mode-button,
.image-modal-close {
  width: 36px;
  height: 34px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
}

.image-mode-button:hover,
.image-mode-button:focus-visible,
.image-modal-close:hover,
.image-modal-close:focus-visible {
  border: 0;
}

/* --------------------------------------------------------------------------
   Image modal footer action buttons
   -------------------------------------------------------------------------- */

.image-download-button,
.image-footer-close {
  --image-footer-button-bg: var(--bs-tertiary-bg);
  --image-footer-button-color: var(--bs-body-color);
  --image-footer-button-border: var(--bs-border-color);
  --image-footer-button-hover-bg: var(--bs-secondary-bg);
  --image-footer-button-hover-color: var(--bs-emphasis-color);
  --image-footer-button-hover-border: var(--bs-border-color-translucent);
  --image-footer-button-focus-ring: rgba(var(--bs-primary-rgb), .22);

  --image-footer-icon-bg: rgba(var(--bs-body-color-rgb), .08);
  --image-footer-icon-color: var(--bs-body-color);
  --image-footer-icon-border: rgba(var(--bs-body-color-rgb), .12);

  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  padding: .3rem .8rem .3rem .35rem;

  border: 1px solid var(--image-footer-button-border);
  border-radius: 50rem;

  background-color: var(--image-footer-button-bg);
  color: var(--image-footer-button-color);

  font-size: .875rem;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 .2rem .55rem rgba(0, 0, 0, .06),
    inset 0 1px 0 rgba(255, 255, 255, .18);

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .15s ease;
}

/*
 * Font Awesome icon badge.
 *
 * Example:
 *
 * <a class="btn image-download-button">
 *   <i class="fa-solid fa-download"></i>
 *   <span class="image-download-text">Download</span>
 * </a>
 *
 * <button class="btn image-footer-close">
 *   <i class="fa-solid fa-xmark"></i>
 *   <span class="image-close-text">Close</span>
 * </button>
 */
.image-download-button > i,
.image-footer-close > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.8rem;
  height: 1.8rem;
  min-width: 1.8rem;
  flex: 0 0 1.8rem;

  margin: 0;

  border: 1px solid var(--image-footer-icon-border);
  border-radius: 50%;

  background-color: var(--image-footer-icon-bg);
  color: var(--image-footer-icon-color);

  font-size: .78rem;
  line-height: 1;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 .12rem .3rem rgba(0, 0, 0, .06);

  pointer-events: none;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.image-download-button:hover,
.image-footer-close:hover {
  border-color: var(--image-footer-button-hover-border);
  background-color: var(--image-footer-button-hover-bg);
  color: var(--image-footer-button-hover-color);

  transform: translateY(-1px);
}

.image-download-button:hover > i,
.image-footer-close:hover > i {
  transform: scale(1.04);
}

.image-download-button:focus,
.image-footer-close:focus {
  color: var(--image-footer-button-color);
}

.image-download-button:focus-visible,
.image-footer-close:focus-visible {
  outline: 0;
  border-color: rgba(var(--bs-primary-rgb), .42);

  box-shadow:
    0 0 0 .2rem var(--image-footer-button-focus-ring),
    0 .25rem .65rem rgba(0, 0, 0, .08);
}

.image-download-button:active,
.image-footer-close:active {
  transform: translateY(0) scale(.98);
}

/* Download button accent */
.image-download-button {
  --image-footer-icon-bg: rgba(var(--bs-success-rgb), .13);
  --image-footer-icon-color: var(--bs-success);
  --image-footer-icon-border: rgba(var(--bs-success-rgb), .22);
}

.image-download-button:hover {
  --image-footer-icon-bg: rgba(var(--bs-success-rgb), .18);
  --image-footer-icon-border: rgba(var(--bs-success-rgb), .34);
}

/* Close button accent */
.image-footer-close {
  --image-footer-icon-bg: rgba(var(--bs-danger-rgb), .11);
  --image-footer-icon-color: var(--bs-danger);
  --image-footer-icon-border: rgba(var(--bs-danger-rgb), .20);
}

.image-footer-close:hover {
  --image-footer-icon-bg: rgba(var(--bs-danger-rgb), .16);
  --image-footer-icon-border: rgba(var(--bs-danger-rgb), .30);
}


/* =================================================
   BOOTSTRAP 5.3 LIGHT COLOR MODE
   ================================================= */

:root,
[data-bs-theme="light"] .image-download-button,
[data-bs-theme="light"] .image-footer-close {
  --image-footer-button-bg: rgba(248, 249, 250, .96);
  --image-footer-button-color: #212529;
  --image-footer-button-border: rgba(33, 37, 41, .14);

  --image-footer-button-hover-bg: #ffffff;
  --image-footer-button-hover-color: #111418;
  --image-footer-button-hover-border: rgba(33, 37, 41, .24);

  --image-footer-button-focus-ring: rgba(13, 110, 253, .20);
}

[data-bs-theme="light"] .image-download-button {
  --image-footer-icon-bg: rgba(25, 135, 84, .12);
  --image-footer-icon-color: #198754;
  --image-footer-icon-border: rgba(25, 135, 84, .22);
}

[data-bs-theme="light"] .image-footer-close {
  --image-footer-icon-bg: rgba(220, 53, 69, .10);
  --image-footer-icon-color: #dc3545;
  --image-footer-icon-border: rgba(220, 53, 69, .20);
}


/* =================================================
   BOOTSTRAP 5.3 DARK COLOR MODE
   ================================================= */

[data-bs-theme="dark"] .image-download-button,
[data-bs-theme="dark"] .image-footer-close {
  --image-footer-button-bg: rgba(43, 48, 53, .94);
  --image-footer-button-color: #f8f9fa;
  --image-footer-button-border: rgba(248, 249, 250, .14);

  --image-footer-button-hover-bg: rgba(52, 58, 64, .98);
  --image-footer-button-hover-color: #ffffff;
  --image-footer-button-hover-border: rgba(248, 249, 250, .24);

  --image-footer-button-focus-ring: rgba(110, 168, 254, .24);

  box-shadow:
    0 .25rem .7rem rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .image-download-button {
  --image-footer-icon-bg: rgba(117, 183, 152, .18);
  --image-footer-icon-color: #97e6be;
  --image-footer-icon-border: rgba(151, 230, 190, .25);
}

[data-bs-theme="dark"] .image-download-button:hover {
  --image-footer-icon-bg: rgba(117, 183, 152, .24);
  --image-footer-icon-border: rgba(151, 230, 190, .38);
}

[data-bs-theme="dark"] .image-footer-close {
  --image-footer-icon-bg: rgba(234, 134, 143, .14);
  --image-footer-icon-color: #ea868f;
  --image-footer-icon-border: rgba(234, 134, 143, .24);
}

[data-bs-theme="dark"] .image-footer-close:hover {
  --image-footer-icon-bg: rgba(234, 134, 143, .20);
  --image-footer-icon-border: rgba(234, 134, 143, .36);
}

@media (max-width: 767.98px) {
  #imageModal .modal-dialog {
  width: calc(100% - 1rem);
  max-width: none;
  margin: 0.5rem auto;
  }

  #imageModal .modal-header {
  padding: 0.4rem 0.6rem;
  }

  #imageModal .modal-footer {
  padding: 0.4rem 0.6rem;
  }

  .image-header-title {
  padding: 0 0.5rem;
  font-size: 0.875rem;
  }

  .image-mode-button,
  .image-modal-close {
  width: 34px;
  height: 32px;
  min-width: 34px;
  }

  .image-download-button,
  .image-footer-close {
    min-height: 36px;
    padding: .28rem .7rem .28rem .32rem;
    gap: .48rem;
  }

  .image-download-button > i,
  .image-footer-close > i {
    width: 1.7rem;
    height: 1.7rem;
    min-width: 1.7rem;
    flex-basis: 1.7rem;
    font-size: .74rem;
  }
}

@media (max-width: 420px) {
  .image-download-text,
  .image-close-text {
  display: none;
  }

  .image-download-button,
  .image-footer-close {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
  }

  .image-download-button > i,
  .image-footer-close > i {
    width: 1.8rem;
    height: 1.8rem;
    min-width: 1.8rem;
    flex-basis: 1.8rem;
  }
}
  

/* --------------------------------------------------------------------------
   Responsive: desktop and larger
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .analog-clock {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Responsive: tablets and below
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    
    .quotes-main-section {
        padding-block: clamp(2.25rem, 5vw, 3.75rem);
    }
    /*
     * When the Bootstrap columns stack, the time card should not remain
     * unnecessarily as tall as the main quote card.
     */
    .time-card {
        min-height: 17rem;
    }

    .time-card-inner {
        padding: clamp(1.35rem, 4vw, 2rem);
    }
}


/* --------------------------------------------------------------------------
   Responsive: small tablets and phones
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    :root {
        --quotes-radius: 1.35rem;
    }

    .quotes-card-shared {
        background-position: 75% center;
    }
    
    .quotes-main-section {
        min-height: calc(100vh - 96px);
        min-height: calc(100dvh - 96px);
        padding-block: 2.25rem 2.75rem;
    }

    .quotes-card-shared {
        min-height: 0;
    }

    .quote-eyebrow-container {
        padding:
            1.35rem
            1.35rem
            0;
    }

    .time-card {
        min-height: 15rem;
    }

    .today-label {
        font-size: clamp(1.3rem, 5vw, 1.75rem);
    }

    .pagination-wrap {
        margin-top: 1.6rem;
    }
}


/* --------------------------------------------------------------------------
   Responsive: phones
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    :root {
        --quotes-radius: 1.2rem;
    }
    
    .quote-card-content {
        width: 100%;
        padding: 1.4rem;
        padding-top: 5.9rem;
    }

    .quotes-main-section {
        padding-block: 1.75rem 2.25rem;
    }


    .quote-eyebrow-container {
        padding:
            1.15rem
            1.15rem
            0;
    }

    .quote-eyebrow-container .eyebrow {
        font-size: .67rem;
        letter-spacing: .11em;
    }

    .quote-eyebrow-container h1 {
        font-size: 1rem;
    }

    .time-card {
        min-height: 14rem;
    }

    .time-card-inner {
        padding: 1.25rem 1rem;
    }

    .clock-zone {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .digital-time {
        padding: .52rem .72rem .64rem;
        font-size: clamp(1.45rem, 8vw, 1.85rem);
    }

    .pagination-wrap {
        margin-top: 1.35rem;
    }

    .pagination {
        --bs-pagination-font-size: .84rem;
        gap: .28rem;
    }

    .pagination .page-link {
        min-width: 2.25rem;
        padding-inline: .58rem;
    }

    html.is-fullscreen .quotes-main-section {
        padding-block: .85rem;
    }

    html.is-fullscreen .quotes-main-shell {
        min-height: calc(100dvh - 1.7rem);
    }

    html.is-fullscreen .pagination-wrap {
        margin-top: 1.35rem;
    }
}


/* --------------------------------------------------------------------------
   Responsive: very small phones
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
    .quotes-main-section {
        padding-block: 1.4rem 1.8rem;
    }

    .quote-eyebrow-container {
        padding:
            1rem
            1rem
            0;
    }

    .digital-time {
        font-size: 1.38rem;
        padding-inline: .6rem;
    }

    .pagination .page-link {
        min-width: 2.05rem;
        padding-inline: .48rem;
    }
}


/* --------------------------------------------------------------------------
   Responsive: short desktop / landscape viewports
   -------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-height: 720px) {

    .quotes-main-section {
        padding-block: 1.5rem;
    }


    .analog-clock {
        --clock-size: clamp(9.5rem, 13vw, 11rem);
        margin-bottom: .9rem;
    }

    .pagination-wrap {
        margin-top: 1.25rem;
    }
}


/* --------------------------------------------------------------------------
   Browser fallback when backdrop-filter is unavailable
   -------------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .time-card {
        background-color: var(--quotes-card-glass-strong);
    }

    .pagination .page-link {
        background-color: var(--quotes-action-bg-bg);
    }
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pagination .page-link {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Fullscreen mode
   -------------------------------------------------------------------------- */

html.is-fullscreen,
html.is-fullscreen body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html.is-fullscreen .quotes-navbar-container,
html.is-fullscreen .quote-card-footer,
html.is-fullscreen #copyLinkButton,
html.is-fullscreen #buttonOpenImageModal, 
html.is-fullscreen .pagination-wrap {
    display: none !important;
}
 
html.is-fullscreen .quotes-button-action-container {
    border: none !important;
}

html.is-fullscreen .quotes-main-section {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;

    padding-block: 1.25rem;

    overflow: hidden;
    box-sizing: border-box;
}

html.is-fullscreen .quotes-main-shell {
    display: flex;
    align-items: flex-start;

    width: 100%;
    height: 100%;
    min-height: 0;
}

html.is-fullscreen .quotes-page-stack {
    width: 100%;
    margin-block: 0;
}

html.is-fullscreen .pagination-wrap {
    margin-top: 2rem;
}

@media (min-width: 992px) {

    .quotes-main-section {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: 2rem;
    }

    .quotes-main-shell {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .quotes-page-stack {
        margin-block: 0 auto !important;
    }

    html.is-fullscreen .quotes-main-section {
        padding-top: 6rem;
    }
}

@media (max-width: 991.98px) {
    .fullscreen-toggle {
        display: none !important;
    }
}

.quote-card-article {
    background-color: var(--quote-card-article-glass-bg);
    background-image: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

[data-bs-theme="dark"] .quote-card-article {
    background-color: var(--quote-card-article-glass-bg);
    background-image: none;
}

.quote-card-article .quote-card-content,
.quote-card-article blockquote,
.quote-card-article .quote-text,
.quote-card-article .quote-attribution {
    background: transparent;
    background-color: transparent;
}

.quote-card-article .quote-card-article-art .shape {
    fill: var(--quote-card-article-shape-fill);
}

.quote-card-article .quote-card-article-art .line {
    fill: none;
    stroke: var(--quote-card-article-line-stroke);
    stroke-linecap: round;
}