Why mountains are no friend to small businesses

What a remote cabin taught us about focus, slow internet and choosing the right tools.

In Business, Notes Mar 17, 2026 6 min read

@use 'sprucecss/scss/spruce' as *;

.post-heading {
  text-align: center;

  &__inner {
    display: flex;
    flex-direction: column;
    @include layout-stack('m');
  }

  &__title {
    font-size: responsive-font-size(4.5rem, 50, '5vw + 1rem');
    margin-block: 0;
    text-wrap: balance;
  }

  &__lead {
    color: color('muted');
    font-size: config('font-size-lead', $typography);
    margin-inline: auto;
    max-inline-size: 40rem;
    text-wrap: pretty;
  }

  &__meta {
    align-items: center;
    color: color('muted');
    display: flex;
    flex-wrap: wrap;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xs:m');
    justify-content: center;
    margin-block-start: spacer-clamp('m', 'l');
  }

  .breadcrumb {
    align-self: center;
  }
}

<div class="post-heading">
    <div class="container">
        <div class="post-heading__inner">
            <nav class="breadcrumb" aria-label="Breadcrumb">
                <ol class="breadcrumb-list">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Business</a></li>
                    <li><a href="#" aria-current="page">Why mountains are no friend to small businesses</a></li>
                </ol>
            </nav>
            <h1 class="post-heading__title">Why mountains are no friend to small businesses</h1>
            <p class="post-heading__lead">What a remote cabin taught us about focus, slow internet and choosing the right tools.</p>
            <div class="post-heading__meta">
                <div class="post-author post-author--sm">
                    <img class="post-author__avatar" src="https://secure.gravatar.com/avatar/fd9479a898c593601efd2fe758a86dba?s=96&d=mm&r=g" alt="" width="32" height="32">
                    <a class="post-author__name" href="#" rel="author">Adam Laki</a>
                </div>
                <span>In <a href="#">Business</a>, <a href="#">Notes</a></span>
                <span>
                    <span class="sr-only">Published on</span>
                    <time datetime="2026-03-17T11:47:25+01:00">Mar 17, 2026</time>
                </span>
                <span>6 min read</span>
            </div>
        </div>
    </div>
</div>

Post Heading

Anatomy

.post-heading follows the block anatomy: .post-heading > .container > .post-heading__inner.
.post-heading__inner is a layout-stack('m') with the Breadcrumb List, the h1 title (__title), the lead (__lead) and the meta line (__meta, with the compact Post Author).

Accessibility

The breadcrumb comes before the title in the DOM, so the reading order is the same as the visual order: where you are, then what you're reading.
The date is a time element with a visually hidden "Published on" in front of it, so it isn't read as a bare date.
There's one h1 on the page, and it's this title.

Technical Details

The breadcrumb scrolls horizontally on small screens without breaking the centered layout.
The title uses text-wrap: balance and the lead text-wrap: pretty, which avoid single words on the last line.
The title size is fluid with responsive-font-size().