.glass-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    padding: var(--space-3);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Statistics */
.statistics-section .stat-card {
    padding: var(--space-4);
    text-align: center;
}
.stat-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat-label {
    display: block;
    margin-top: .35rem;
    color: var(--color-text-muted);
}

/* Campaign cards */
.campaign-card {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    height: 100%;
}
.campaign-category {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-accent-soft);
}
.campaign-progress { margin: var(--space-2) 0; }
.campaign-progress-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.campaign-progress-fill {
    height: 100%;
    background: var(--gradient-accent);
    border-radius: var(--radius-pill);
    transition: width .6s ease;
}
.campaign-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--color-text-faint);
    margin-top: .4rem;
}
.campaign-cta { text-align: center; margin-top: auto; }

/* Generic feature card (reused across sections) */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { padding: 0; overflow: hidden; }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.faq-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    transition: transform .25s ease, background .25s ease;
}
.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
    background: var(--gradient-accent);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    padding: 0 1.5rem;
}
.faq-question[aria-expanded="true"] + .faq-answer { padding: 0 1.5rem 1.35rem; }
.faq-category-heading {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-accent-soft);
    margin: var(--space-3) 0 var(--space-1);
}
.faq-category-heading:first-of-type { margin-top: var(--space-2); }
.faq-fallback-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-top: var(--space-3);
}
.faq-fallback-card strong { display: block; margin-bottom: .2rem; }
.faq-fallback-card p { margin: 0; font-size: .88rem; color: var(--color-text-muted); }
.faq-fallback-card a { color: var(--color-accent-soft); }

.faq-search-box { margin-bottom: var(--space-3); }
.faq-search-box input {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-surface-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: .95rem;
}
.faq-search-box input:focus {
    outline: none;
    border-color: var(--color-accent, #7c6ef2);
    box-shadow: 0 0 0 3px rgba(124,110,242,.2);
}

.contact-hero-icons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}
.contact-hero-icon {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--color-text-muted);
    font-weight: 600;
}
.contact-hero-icon span { font-size: 1.3rem; }

.staff-status-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0;
    text-align: left;
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.staff-status-list li { display: flex; align-items: center; gap: .55rem; }
.staff-status-role { color: var(--color-text-faint); font-size: .78rem; }
.staff-status-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 900;
    color: #fff;
}
.staff-status-dot--online {
    background: #5ac88c;
    box-shadow: 0 0 8px rgba(90,200,140,.6);
    animation: staffPulse 2s ease-in-out infinite;
}
.staff-status-dot--offline { background: #e05c5c; }
@keyframes staffPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* Sponsorer — kvadratiska marknadsförings-widgets */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.sponsor-tile {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
.sponsor-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}
.sponsor-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.sponsor-tile-name {
    font-weight: 600;
    font-size: .95rem;
}
.sponsor-tile--platinum { border: 1px solid rgba(255,255,255,.35); }
.sponsor-tile--gold { border: 1px solid rgba(255,215,120,.35); }

/* Kvadratiska fotoram-moduler för teampreview på Om Oss-sidan — medvetet
   kvadratiska (till skillnad från de runda ramarna på /pages/team.php)
   för att kännas som en egen, professionell modul-familj. */
.about-team-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}
.about-team-preview-card { text-align: center; }
.about-team-preview-frame {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    padding: 5px;
    background: var(--gradient-accent);
    margin-bottom: var(--space-2);
}
.about-team-preview-frame img,
.about-team-preview-frame span {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius-md) - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt);
    object-fit: cover;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
}
.about-team-preview-card strong { display: block; font-size: .95rem; }
.about-team-preview-role { font-size: .78rem; color: var(--color-text-muted); }

/* Huvudsponsor — den första, högst rankade sponsorn får en större,
   mer framträdande ruta (dubbla bredd + höjd på skärmar där det får
   plats) istället för att synas lika litet som alla andra. */
.sponsor-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
    padding: var(--space-4);
}
.sponsor-tile--featured .sponsor-tile-name { font-size: 1.3rem; }
@media (max-width: 560px) {
    .sponsor-tile--featured { grid-column: span 1; grid-row: span 1; aspect-ratio: 1/1; padding: var(--space-3); }
    .sponsor-tile--featured .sponsor-tile-name { font-size: .95rem; }
}

/* Triangel-ribbon i hörnet — visar sponsornivån diagonalt, samma
   mönster som "bästsäljare"-etiketter i e-handel men i vår guld/lila
   färgskala. Ren CSS (clip-path), ingen bild. */
.sponsor-tile-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    overflow: hidden;
    pointer-events: none;
}
.sponsor-tile-ribbon span {
    position: absolute;
    top: 16px;
    left: -28px;
    width: 120px;
    transform: rotate(-45deg);
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1a1730;
    background: linear-gradient(135deg, #f0d98c, #d9b85c);
    padding: .25rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sponsor-tile-ribbon--accent span {
    background: var(--gradient-accent);
    color: #fff;
}

/* Platshållarruta när ett sponsorutrymme ännu inte är sålt — ska kännas
   som en medveten, professionell "ledig plats"-annons, inte en tom lucka. */
.sponsor-tile--placeholder {
    border: 1px dashed var(--color-surface-border);
    background: transparent;
    color: var(--color-text-faint);
    flex-direction: column;
    gap: .4rem;
}
.sponsor-tile--placeholder:hover {
    border-color: var(--color-accent-soft);
    color: var(--color-accent-soft);
}
.sponsor-tile--placeholder .sponsor-tile-icon { font-size: 1.4rem; opacity: .7; }
.sponsor-tile--placeholder .sponsor-tile-name { font-size: .8rem; font-weight: 500; line-height: 1.3; }

/* Live donation feed */
.donation-feed-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 0;
    margin: 0;
}
.donation-feed-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    gap: 1rem;
}
.donation-feed-name { font-weight: 600; flex: 1; }
.donation-feed-amount { color: var(--color-accent-soft); font-weight: 700; }
.donation-feed-time { color: var(--color-text-faint); font-size: .8rem; white-space: nowrap; }

/* Testimonials */
.testimonial-card { display: flex; flex-direction: column; gap: 1rem; }
.testimonial-quote { font-style: italic; color: var(--color-text-muted); }
.testimonial-author { font-size: .85rem; font-weight: 600; color: var(--color-accent-soft); }

/* Partners strip */
.partners-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}
.partners-strip-item img {
    max-height: 48px;
    opacity: .75;
    filter: grayscale(1);
    transition: opacity .2s ease, filter .2s ease;
}
.partners-strip-item:hover img {
    opacity: 1;
    filter: grayscale(0);
}

/* Fristående kampanj-widget med cirkulär progress-ring */
.campaign-widget {
    padding: var(--space-3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    height: 100%;
}
.campaign-widget-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
    width: 100%;
}
.campaign-widget-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.campaign-widget-category { font-size: .8rem; color: var(--color-text-muted); }

.campaign-widget-ring {
    --percent: 0;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: conic-gradient(var(--color-accent) calc(var(--percent) * 1%), rgba(255,255,255,.08) 0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.campaign-widget-ring::before {
    content: '';
    position: absolute;
    width: 104px; height: 104px;
    border-radius: 50%;
    background: var(--color-bg-alt);
}
.campaign-widget-ring-value {
    position: relative;
    font-size: 1.4rem;
    font-weight: 700;
}

.campaign-widget-stats {
    display: flex;
    gap: var(--space-3);
}
.campaign-widget-stat-value { display: block; font-weight: 700; color: var(--color-accent-soft); }
.campaign-widget-stat-label { display: block; font-size: .75rem; color: var(--color-text-faint); }
.campaign-widget-cta { width: 100%; margin-top: auto; }

/* Facebook-flöde widget */
.fb-feed-widget { padding: var(--space-3); }
.fb-feed-header { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.fb-feed-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #1877F2;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-family: Georgia, serif;
}
.fb-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.fb-feed-item { display: flex; gap: .75rem; }
.fb-feed-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.fb-feed-item p { font-size: .85rem; margin: 0 0 .25rem; }
.fb-feed-item a { font-size: .78rem; color: var(--color-accent-soft); }

/* Impact + prenumeration i campaign-progress-widget */
.campaign-widget-impact {
    width: 100%;
    text-align: left;
    border-top: 1px solid var(--color-surface-border);
    padding-top: .75rem;
}
.campaign-widget-impact-title { font-size: .8rem; color: var(--color-text-muted); margin-bottom: .4rem; }
.campaign-widget-impact-row {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    padding: .25rem 0;
}
.campaign-widget-impact-row span:first-child { font-weight: 700; color: var(--color-accent-soft); }

.campaign-widget-subscribe {
    display: flex;
    gap: .4rem;
    width: 100%;
}
.campaign-widget-subscribe input[type=email] {
    flex: 1;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-surface-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .8rem;
}
.campaign-widget-subscribe button {
    padding: .5rem .8rem;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: .8rem;
    cursor: pointer;
}

/* Instagram widget */
.ig-feed-widget { margin-top: var(--space-3); }
.ig-feed-header { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.ig-feed-icon { font-size: 1.4rem; }
.ig-feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ig-feed-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* Gemensam platshållare för FB/IG-widgetarna när inget är cachat än */
.social-feed-placeholder {
    text-align: center;
    padding: var(--space-3) var(--space-2);
    color: var(--color-text-faint);
}
.social-feed-placeholder-icon { font-size: 1.6rem; display: block; margin-bottom: .5rem; opacity: .7; }
.social-feed-placeholder p { font-size: .85rem; margin: 0; line-height: 1.5; }
.social-feed-placeholder a { color: var(--color-accent-soft); }

/* Sverigekarta */
.sweden-map-widget { padding: var(--space-3); }
.sweden-map-note { font-size: .8rem; color: var(--color-text-faint); margin-bottom: 1rem; }
.sweden-map-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.sweden-map-county { width: 110px; font-size: .82rem; flex-shrink: 0; }
.sweden-map-bar-track { flex: 1; height: 8px; background: var(--color-surface); border-radius: var(--radius-pill); overflow: hidden; }
.sweden-map-bar-fill { height: 100%; background: var(--gradient-accent); }
.sweden-map-count { font-size: .8rem; font-weight: 700; width: 24px; text-align: right; }

/* Wall of Love */
.wall-of-love-track {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: 1rem var(--space-2) 2rem;
    scroll-snap-type: x proximity;
}
.wall-of-love-card {
    min-width: 260px;
    max-width: 260px;
    padding: var(--space-3);
    transform: rotate(var(--rot, 0deg));
    scroll-snap-align: start;
    flex-shrink: 0;
}
.wall-of-love-card p { font-style: italic; margin-bottom: .75rem; }
.wall-of-love-card span { font-size: .8rem; font-weight: 600; color: var(--color-accent-soft); }

/* Finansiell nedbrytning på transparenssidan */
.finance-breakdown { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.finance-row-label { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .3rem; }
.finance-row-bar { height: 14px; border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden; }
.finance-row-fill { height: 100%; }
.finance-row-fill--direkt_hjalp { background: #50dc8c; }
.finance-row-fill--insamling { background: var(--color-accent); }
.finance-row-fill--administration { background: #f0783c; }

/* Shop-teaser på framsidan */
.shop-teaser-card { text-align: center; padding: var(--space-3); }
.shop-teaser-thumb { font-size: 2.5rem; margin-bottom: .75rem; }

/* Sponsor-badge på insamlingswidgetar — ska sticka ut, guld/glöd */
.campaign-widget-sponsor-badge {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .9rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(240,180,60,.18), rgba(240,120,60,.12));
    border: 1px solid rgba(240,180,60,.4);
    box-shadow: 0 0 16px rgba(240,180,60,.15);
}
.campaign-widget-sponsor-crown { font-size: 1.3rem; }
.campaign-widget-sponsor-badge strong { display: block; font-size: .78rem; color: #f0b43c; text-transform: uppercase; letter-spacing: .03em; }
.campaign-widget-sponsor-badge span { font-size: .88rem; font-weight: 600; }

.campaign-card-sponsor-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: #f0b43c;
    background: rgba(240,180,60,.12);
    border: 1px solid rgba(240,180,60,.35);
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    margin: .5rem 0;
}

/* Om oss — historiemodul och team */
.about-history { padding: var(--space-4); }
.about-history h2 { margin: .5rem 0 var(--space-2); }

.team-card { text-align: center; padding: var(--space-3); }
.team-avatar {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 auto .75rem;
}
.team-role { display: block; font-size: .8rem; color: var(--color-accent-soft); margin-bottom: .5rem; font-weight: 600; }
.team-card p { font-size: .85rem; }

.campaign-widget-sponsor-logo { max-height: 28px; max-width: 120px; margin-top: .2rem; }

a.campaign-card-sponsor-badge,
a.campaign-widget-sponsor-badge {
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.campaign-card-sponsor-badge:hover,
a.campaign-widget-sponsor-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240,180,60,.25);
}

/* Matchningsgåvor */
.campaign-widget-match-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .9rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(124,110,242,.15), rgba(80,220,140,.1));
    border: 1px solid rgba(124,110,242,.4);
}
.campaign-widget-match-icon { font-size: 1.2rem; }
.campaign-widget-match-banner strong { display: block; font-size: .82rem; }
.campaign-widget-match-banner span { font-size: .75rem; color: var(--color-text-muted); }

.campaign-card-match-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: #a8a0f5;
    background: rgba(124,110,242,.12);
    border: 1px solid rgba(124,110,242,.35);
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    margin: .5rem 0;
}

/* Donationskalender (GitHub-heatmap-stil) */
.giving-calendar-streak { font-size: .9rem; margin-bottom: .75rem; }
.giving-calendar-grid {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: .5rem;
}
.giving-calendar-col { display: flex; flex-direction: column; gap: 3px; }
.giving-calendar-cell {
    width: 11px; height: 11px;
    border-radius: 2px;
    background: var(--color-surface);
    display: inline-block;
}
.giving-calendar-cell--0 { background: var(--color-surface); }
.giving-calendar-cell--1 { background: rgba(80,220,140,.25); }
.giving-calendar-cell--2 { background: rgba(80,220,140,.5); }
.giving-calendar-cell--3 { background: rgba(80,220,140,.75); }
.giving-calendar-cell--4 { background: rgba(80,220,140,1); }
.giving-calendar-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: .5rem;
    font-size: .72rem;
    color: var(--color-text-faint);
}

.how-step-number {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.3rem;
    margin: 0 auto var(--space-2);
}
.how-step-number--alt { background: linear-gradient(135deg, #50dc8c, #2fa86a); }

/* Historik-tidslinje */
.history-timeline { display: flex; flex-direction: column; gap: var(--space-2); }
.history-item { padding: var(--space-3); position: relative; padding-left: calc(var(--space-3) + 4px); border-left: 3px solid var(--color-accent); }
.history-year { display: inline-block; font-weight: 700; color: var(--color-accent-soft); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; margin-bottom: .5rem; }
.history-item--icon { padding-top: var(--space-4); }
.history-item-icon {
    position: absolute;
    top: -22px;
    left: -26px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(124,110,242,.4);
}

/* Milstolpe-tidslinje på expansion-sidan */
.milestone-list { display: flex; flex-direction: column; gap: var(--space-3); position: relative; padding-left: 24px; }
.milestone-list::before {
    content: '';
    position: absolute;
    left: 5px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--color-surface-border);
}
.milestone-item { position: relative; }
.milestone-dot {
    position: absolute;
    left: -24px; top: 8px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--color-surface-border);
}
.milestone-item--done .milestone-dot { background: #50dc8c; }
.milestone-item--in_progress .milestone-dot { background: #f0b43c; }
.milestone-content { padding: var(--space-3); }
.milestone-content h3 { margin: .5rem 0 .3rem; }

/* Juridisk information på transparenssidan */
.legal-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.legal-info-grid > div { display: flex; flex-direction: column; gap: .2rem; }
.legal-info-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-faint); font-weight: 700; }