/* /about only. Loaded after tokens.css, site.css and redesign.css: the redesigned homepage's type ladder (88/72/53/42/33),
   Gabarito for display and Hanken for body, ink on bone, and persimmon only as the close band (Close.astro, bare). One
   centred reading column of about 640px (--measure, 642.8px) for the prose; generous space between the five blocks. */

.about__hero{ text-align:center; }
/* the column is centred; its prose is set left, so five-line paragraphs keep one starting edge */
.about__col{ max-width:calc(var(--measure) + 2 * var(--gutter)); text-align:left; }

/* 1. the belief, at hero size */
.about__hero{ padding:var(--s6) 0 var(--s5); }
.about__h1{ max-width:1040px; margin:0 auto; font:900 42px/1.02 var(--display); letter-spacing:-.04em; color:var(--ink); text-wrap:balance; }
@media (min-width:390px){ .about__h1{ font-size:48px; } }
@media (min-width:760px){ .about__hero{ padding:var(--s7) 0 var(--s6); } .about__h1{ font-size:var(--t-72); line-height:1; } }
@media (min-width:1280px){ .about__h1{ font-size:var(--t-88); } }

/* 2-4. the blocks: one rhythm, a band's padding between them */
.about__block{ padding-bottom:var(--band-pad); }
.about__p{ font:400 1.1875rem/1.6 var(--body); color:var(--ink); text-wrap:pretty; }
.about__p + .about__p{ margin-top:var(--s4); }
@media (min-width:760px){ .about__p{ font-size:22px; } }
.about__p em{ font-style:italic; }
.about__dare{ margin-top:var(--s5) !important; font:900 var(--t-33)/1.08 var(--display); letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
@media (min-width:760px){ .about__dare{ font-size:var(--t-42); } }

/* the founder's words: set off by a hairline above and below, the sign-off under them */
.about__note{ padding-block:var(--s6); border-block:1px solid var(--line); }
.about__sign{ margin-top:var(--s4) !important; font:700 1.1875rem/1.4 var(--body); color:var(--ink); }
@media (min-width:760px){ .about__sign{ font-size:22px; } }

.about__h2{ font:900 var(--t-33)/1.08 var(--display); letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
@media (min-width:760px){ .about__h2{ font-size:var(--t-42); } }
@media (min-width:1024px){ .about__h2{ font-size:var(--t-53); line-height:1.04; letter-spacing:-.03em; } }
.about__h2 + .about__p{ margin-top:var(--s4); }

/* 5. the close, bare: the band with its H2 and the badge alone (no lead-in, no bold line, no terms below) */
.close--bare .close__h{ margin-top:0 !important; }
@media (min-width:1024px){ .close--bare .close__h{ font-size:var(--t-53); line-height:1.04; letter-spacing:-.03em; } }