/* column: one narrow reading column under a masthead. The name is set large between rules, the theme
   button sits in the corner, and every section keeps the same measure. For newsletters, guides and
   research. Link after identity.css. */
html[data-layout="column"] .site-header { border-bottom: 0; }
html[data-layout="column"] .site-header .container {
  position: relative; display: grid; justify-items: center; gap: var(--s2); max-width: var(--narrow);
  padding: var(--s5) var(--s4) var(--s3); border-bottom: 3px double var(--ink);
}
html[data-layout="column"] .site-header .brand { font-size: var(--step-3); }
html[data-layout="column"] .site-header nav { margin: 0; }
html[data-layout="column"] .site-header .icon-btn { position: absolute; top: var(--s3); right: var(--s4); margin: 0; }
html[data-layout="column"] .container { max-width: var(--narrow); }
html[data-layout="column"] .hero { padding-block: var(--s6) var(--s5); }
html[data-layout="column"] .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
html[data-layout="column"] .hero-title { font-size: var(--step-3); }
html[data-layout="column"] .promise { max-width: none; font-size: var(--step-1); }
html[data-layout="column"] .prose { font-size: var(--step-1); line-height: 1.65; }
html[data-layout="column"] .prose p { max-width: 62ch; }
html[data-layout="column"] .dateline { font: 700 var(--step--1)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
html[data-layout="column"] .signup { padding: var(--s4) 0; border-block: 1px solid var(--ink); }