/* Brief: the whole of me on one dark page, in the language of the Work page. */
.bf { padding: calc(var(--nav-h) + 10px) var(--gut) 0; }
.bf-lab { font-family: var(--f-nav); font-size: 11px; text-transform: uppercase; color: var(--dim); margin: 0 0 10px; }
.bf-gap { margin-top: 18px; }
.bf-h1 { font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .96; font-size: clamp(34px, 4.5vw, 76px); margin: 0 0 22px; max-width: 22ch; max-width: min(100%, 1250px); }
.bf-h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.02em; line-height: 1.08; }
.bf-cv { display: inline-block; font-size: 12px; padding: 13px 18px 12px; }
.bf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px); margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule); }
.bf-p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; letter-spacing: -.015em; margin: 0; }
.bf-p u { text-underline-offset: 4px; }
.bf-small { font-size: 15px; margin: 0; }
.bf-bar { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 2em; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 15px; }
.bf-bar i { display: block; height: 11px; background: var(--fg); }
.bf-bar small { color: var(--dim); font-size: 11px; }
.bf-brands { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; }
.bf-brands span { border: 1px solid var(--rule); padding: 3px 8px 2px; font-weight: 700; font-size: 12px; }
.bf-ed { margin: 0 0 9px; font-size: 12.5px; color: var(--dim); line-height: 1.3; }
.bf-ed b { display: block; font-size: 14px; color: var(--fg); }
.bf-sel { display: grid; grid-template-columns: 5fr 3fr 2fr; gap: 22px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule); }
.bf-tiles { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.bf-tile img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 7px; transition: opacity .2s; }
.bf-tile b { display: block; font-size: 12.5px; line-height: 1.15; }
.bf-tile small, .bf-li small { color: var(--dim); font-size: 11px; }
.bf-tile:hover img, .bf-li:hover img { opacity: .75; }
.bf-all { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--rule); }
.bf-list { columns: 3; column-gap: 34px; }
.bf-li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 24px; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.bf-li img { display: block; width: 64px; height: 44px; object-fit: cover; }
.bf-li b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-li span small { display: block; }
@media (max-width: 1100px) { .bf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bf-sel { grid-template-columns: 1fr; } .bf-list { columns: 2; } }
@media (max-width: 640px) { .bf-cols { grid-template-columns: 1fr; } .bf-list { columns: 1; } .bf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }