/* Lumen Assurance -- an invented advertiser of the Starward demonstration website.
   index.html is a fluid leaderboard: any width, 90 high. The faces are the website's own
   (/site-assets/fonts/fonts.css, same origin); the photograph is copied in by the installer. */

:root {
    --paper: #fbf7ef;
    --teal: #0e5b63;
    --teal-deep: #083d43;
    --amber: #f2a541;
    --ink: #142326;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); overflow: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }

.piece {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    padding-right: 20px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    background: linear-gradient(90deg, var(--paper) 0%, #f6efe1 100%);
}

.notice {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(20, 35, 38, .45);
}

.photo { position: relative; flex: 0 0 auto; width: 26%; max-width: 300px; height: 100%; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: drift 16s ease-in-out infinite alternate; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--paper) 100%); }

.mark { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.mark svg { width: 30px; height: 30px; }
.mark b { display: block; font: 700 14px/1 'Inter', sans-serif; letter-spacing: .04em; color: var(--teal-deep); }
.mark small { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }

.words { flex: 1; min-width: 0; }
.headline {
    display: block;
    font: 600 23px/1.1 'Fraunces', Georgia, serif;
    letter-spacing: -.01em;
    color: var(--teal-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.headline .word { display: inline-block; animation: rise .7s ease-out both; }
.headline .word:nth-child(2) { animation-delay: .25s; }
.headline .word:nth-child(3) { animation-delay: .5s; color: var(--teal); font-style: italic; }
.ticks { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: rgba(20, 35, 38, .72); white-space: nowrap; overflow: hidden; }
.ticks span::before { content: "\2713"; margin-right: 5px; color: var(--teal); font-weight: 700; }

.go {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 0 0 rgba(242, 165, 65, .6);
    animation: pulse 3.2s ease-out 1.6s infinite;
}
.piece:hover .go { background: var(--teal-deep); }

@media (max-width: 1000px) { .mark small, .ticks { display: none; } .headline { font-size: 19px; } }
@media (max-width: 620px) {
    .piece { gap: 10px; padding-right: 10px; }
    .mark { display: none; }
    .photo { width: 22%; }
    .headline { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .headline .word { display: inline; }
    .go { padding: 8px 11px; font-size: 9.5px; letter-spacing: .08em; }
    .go .long { display: none; }
}

@keyframes drift { from { transform: scale(1.05); } to { transform: scale(1.14) translateY(-2%); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 165, 65, .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(242, 165, 65, 0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }