/* Site navigation: the same bar on every page. */
.nav { gap: 16px; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav .nav-create { margin-left: 0; }
.nav-acct { color: var(--dim); text-decoration: none; font: 600 0.88rem/1 var(--f-ui); padding: 10px 12px; border-radius: 999px; white-space: nowrap; }
.nav-acct:hover { color: #fff; }
.nav-menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: #fff; cursor: pointer; place-items: center; }
.nav-sheet { position: absolute; left: 12px; right: 12px; top: calc(var(--nav-h) + 4px); display: grid; gap: 4px; padding: 10px; border-radius: 22px; background: rgba(12, 12, 16, 0.985); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.nav-sheet[hidden] { display: none; }
.nav-sheet a { padding: 14px 16px; border-radius: 14px; color: #fff; text-decoration: none; font: 600 1.05rem/1 var(--f-ui); }
.nav-sheet a:hover, .nav-sheet a[aria-current] { background: rgba(255, 255, 255, 0.1); }
.nav .nav-sheet .btn { margin: 6px 0 0; width: 100%; min-height: 52px; padding: 0 26px; font-size: 1rem; }
@media (max-width: 700px) {
  .nav-links, .nav-acct, .nav .nav-create { display: none; }
  .nav-menu { display: grid; }
}

/* the head of a page of its own (Stories, Writers, How it works) */
.page-head { display: grid; gap: 14px; justify-items: start; padding-top: calc(var(--nav-h) + clamp(36px, 7vw, 84px)); padding-bottom: clamp(20px, 3vw, 36px); }
.page-head .lead { max-width: 52ch; }
.inner .feed { padding-block: 12px 72px; }
.inner .creators { padding-block: 12px 80px; }
.inner .what { padding-top: 16px; }
.inner .field { margin-top: 24px; }