/* The company letter lives in the same document, theme and type system as
   product and every other page. Only its reading composition is local. */
.company-letter{max-width:720px;margin-inline:auto}
.company-heading{position:relative;padding-block:var(--space-2) var(--space-4)}
.company-heading h1{font-size:var(--step-hero);line-height:1.3;margin:0;overflow-wrap:anywhere}
.company-heading h1 span{display:block}
.company-drawing{width:130px;height:110px;color:var(--brand-ink);position:absolute;right:-110px;top:0;transform:rotate(-8deg)}
.company-greeting{font-size:var(--step-lead);margin-block:var(--space-2) var(--space-3)}
.company-prose{font-size:var(--step-lead);line-height:1.95}
.company-prose p{margin-block:0 var(--space-3);overflow-wrap:anywhere}
.company-prose .company-pivot{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.company-signature{margin-top:var(--space-4);font-size:var(--step-lead);line-height:1.8}
.company-signature p{margin:0}
.company-signature p:last-child{font-family:var(--font-brand);font-size:var(--step-block);margin-top:var(--space-1)}
.company-invitation{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.company-invitation>span{color:var(--dim);font-size:var(--step-meta)}
.company-reading-links{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
@media(max-width:1100px){.company-drawing{position:static;float:right;width:100px;height:84px;margin-left:var(--space-2)}}
@media(max-width:520px){.company-heading{padding-top:0}.company-drawing{float:none;display:block;margin:0 0 var(--space-2) auto;width:90px;height:75px}}