:root {
--color-bg: #353929;
--color-gold: #9c7e44;
--font-serif: "EB Garamond", Garamond, "Times New Roman", serif;
}

/* ---------- Footer layout ---------- */
.site-footer {
background-color: var(--color-bg);
color: var(--color-linen);
font-family: var(--font-serif);
padding: 5rem 4rem 4rem;
font-weight: 400;
}

.footer-grid {
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
align-items: start;
}

/* ---------- Column 1: Brand ---------- */
.footer-brand {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.footer_logo {
width: 100%;
max-width: 380px;
display: block;
}

.footer_logo svg{
    display: block;
    height: auto;
    width: 100%;
}

.footer-credits {
margin-top: 4.5rem;
font-size: 1rem;
line-height: 1.7;
color: var(--color-linen);
}
.footer-credits.mobile{ display: none;}

.footer-credits p {
margin: 0;
}

.footer-credits em {
font-style: italic;
}

.footer-credits a {
color: var(--color-linen);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 0.2s ease;
}

.footer-credits a:hover {
color: var(--color-gold);
}

/* ---------- Column 2: Nav ---------- */
.footer-nav {
display: flex;
justify-content: center;
}

.footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

.footer-nav li {
    margin: 0.75rem 0;
}

.footer-nav a {
    color: var(--color-linen);
    text-decoration: none;
    font-size: 1.125rem;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
    display: inline-block;
    position: relative;
}

.footer-nav a:before, .footer-nav a:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-gold);
    opacity: 0;
    flex-shrink: 0;
    transition: all 0.3s;
    position: absolute;
    top: calc(50% - 3px);
}

.footer-nav a:before{ left: -14px;}
.footer-nav a:after{ right: -14px;}

.footer-nav a:hover:before, .footer-nav a:hover:after{
    opacity: 1;
}

/* Decorative dots flanking the last nav item */
.footer-nav .nav-last {
display: inline-flex;
align-items: center;
gap: 0.9rem;
}

/* ---------- Column 3: Social ---------- */
.footer-social {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.instagram-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--color-gold);
color: var(--color-bg);
text-decoration: none;
transition: transform 0.2s ease, background-color 0.2s ease;
}

.instagram-link:hover {
transform: scale(1.08);
background-color: var(--color-linen);
}

.instagram-link svg {
width: 22px;
height: 22px;
}

.follow-text {
margin: 0.9rem 0 0;
font-size: 1.1rem;
color: var(--color-linen);
}

.follow-text a {
color: var(--color-linen);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 0.2s ease;
}

.follow-text a:hover {
color: var(--color-gold);
}

.brighter-day {
margin-top: 4.5rem;
}

/** footer brighter day press **/
.footer_brighter_day{
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.225rem;
    color: var(--color-linen);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    padding: 10px 12px;
    position: relative;
    text-transform: uppercase;
}
.footer_brighter_day:after{ content:""; position: absolute; bottom: 0; width: 100%; height: 3px; background-color: var(--color-gold); left: 0; right: 0;}
.footer_brighter_day:hover{ background-color: var(--color-gold); color: var(--color-linen); }

/* ---------- Responsive: tablet ---------- */
@media (max-width: 1024px) {
.site-footer {
    padding: 4rem 2.5rem 3rem;
}

.footer-grid {
    gap: 2rem;
}

.footer-logo {
    max-width: 300px;
}

.footer-nav a {
    font-size: 1.15rem;
}

.footer-credits {
    margin-top: 3rem;
    font-size: 0.95rem;
}

.brighter-day {
    margin-top: 3rem;
    font-size: 1.05rem;
}
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 720px) {
.site-footer {
    padding: 3rem 1.5rem 2.5rem;
}

.footer-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    text-align: center;
}

.footer-brand,
.footer-nav,
.footer-social {
    align-items: center;
    justify-content: center;
}

.footer-logo {
    max-width: 260px;
}

.footer-credits {
    margin-top: 2rem;
    font-size: 0.95rem;
}
.footer-credits.mobile{ display: block;}
.footer-credits.desktop{ display: none;}

.footer-nav a {
    font-size: 1.1rem;
}

.brighter-day {
    margin-top: 2rem;
    font-size: 1rem;
    letter-spacing: 0.2em;
}
}

@media (max-width: 400px) {
.footer-logo {
    max-width: 220px;
}
}