/* Hypha · JV partner · document: a plain working document, in the generic look of a shared word-processor page: a
   file bar with its name, a white page, headings, and flat grey where nothing is written yet. Used for the one
   business situation (page 01), the buyer's requirement and the JV proposal (page 02), a new service (page 03).

   <article class="doc brief">
     <header class="bf-top"><span class="ico ico-doc" aria-hidden="true"></span><span class="bf-name"><i class="fld"></i></span>
       <span class="bf-st">Draft</span></header>
     <div class="bf-page">
       <h3 class="bf-t">Title, or <i class="fld fld--t"></i></h3>
       <h4 class="bf-q">A heading the copy gives</h4><i class="fld fld--block"></i>
     </div>
   </article> */

.brief {
  --w: 500px;
  width: var(--w);
  --f-app: var(--f-sys);
  font-family: var(--f-app, var(--f-sheet));
  color: #1f1f1f;
  background: #f1f3f4;
  border-radius: 0;
}
.bf-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e3e5e8; color: #1a73e8; }
.bf-top .ico { width: 20px; height: 20px; }
.bf-name { flex: 1; color: #1f1f1f; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-name .fld { width: 9em; }
.bf-st { flex: none; padding: 1px 8px; border-radius: 4px; background: #f1f3f4; color: #5f6368; font-size: 12.5px; line-height: 18px; }
.bf-page { margin: 14px 18px 18px; padding: 26px 30px 28px; background: #fff; box-shadow: 0 1px 2px rgb(60 64 67 / 0.2), 0 1px 3px rgb(60 64 67 / 0.1); }
.bf-t { margin-bottom: 18px; font-size: 24px; font-weight: 400; line-height: 1.25; color: #1f1f1f; }
.bf-t .fld--t { width: 60%; height: 22px; vertical-align: middle; }
.bf-q { margin: 18px 0 8px; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: #1f1f1f; }
.bf-q:first-of-type { margin-top: 0; }
.bf-page .fld--block { height: 2.6em; }
.bf-p { font-size: 15px; line-height: 1.55; color: #3c4043; }
@media (max-width: 899px) {
  .brief { --w: min(344px, calc(100vw - 40px)); }
  .bf-top { padding: 8px 12px; }
  .bf-name { font-size: 14px; }
  .bf-page { margin: 10px 10px 12px; padding: 16px 16px 18px; }
  .bf-t { margin-bottom: 12px; font-size: 19px; }
  .bf-q { margin: 14px 0 6px; font-size: 15px; }
  .bf-page .fld--block { height: 2.2em; }
}