footer { background: var(--ink); color: rgba(243,239,229,.7); padding: 4rem 0 2rem; }
.f-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--lineS); }
.f-brand { display: flex; gap: 1.1rem; align-items: flex-start; }
.f-brand .logo-mark { width: 64px; height: 64px; }
.f-brand-text .f-name { font-family: var(--disp); font-size: 1.7rem; color: var(--paper); line-height: 1.1; }
.f-brand-text .f-desc { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--brass); text-transform: uppercase; margin-top: .4rem; }
.f-brand-text p { margin-top: 1rem; font-size: .9rem; max-width: 38ch; }
.f-grid h5 { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; }
.f-grid a { display: block; padding: .28rem 0; font-size: .9rem; transition: .2s; }
.f-grid a:hover { color: var(--paper); padding-left: .4rem; }
.f-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.6rem; font-family: var(--mono); font-size: .72rem; color: rgba(243,239,229,.45); }
.logo-mark.dark .mark-frame { stroke: var(--paper); }
.logo-mark.dark .mark-bg { fill: var(--ink); }
.logo-mark.dark .mark-big { fill: var(--paper); }
.logo-mark.dark .mark-small { fill: var(--brass); }