/* About page: a reading column beside a pinned fact card, on top of author-page.css. */
.about-page ::selection{color:#f3eddf;background:var(--brand-orange)}

main.about-page{padding-top:40px}
.about-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,330px);grid-template-rows:auto 1fr;column-gap:72px;margin-top:0}
.about-head{grid-column:1;grid-row:1;padding-bottom:52px;border-bottom:1px solid #17242340;container-type:inline-size}
.about-sections{grid-column:1;grid-row:2;margin-top:56px}

/* Sized to the column so "We treat your business" always holds one line. */
.about-head h1{font:400 clamp(40px,5vw,62px)/1.04 'DM Serif Display',serif;font-size:clamp(34px,10.2cqi,78px);letter-spacing:-.03em;margin:20px 0 28px}
.about-head h1 em{font-style:italic;color:var(--brand-orange)}
.about-head .author-lede{margin-bottom:20px}
.about-manifesto{font:19px/1.65 Georgia,serif;max-width:36em}
.about-manifesto p{margin:0 0 20px}
.about-manifesto p:last-child{margin-bottom:0}
.about-question{font:italic 400 clamp(29px,3vw,40px)/1.18 'DM Serif Display',serif;color:var(--brand-orange-deep);letter-spacing:-.01em;margin:30px 0 30px!important;text-wrap:balance}
.about-question::before{content:"";display:block;width:56px;height:2px;background:var(--brand-orange);margin-bottom:20px}

/* The card stays beside the reading column while it scrolls, on screens tall enough to hold it. */
.about-card{grid-column:2;grid-row:1/3;align-self:start;margin-top:6px;padding:22px 24px 18px;background:#ece5d8;border:1px solid #17242326;box-shadow:12px 12px 0 #d6c8b7}
.about-card-title{font:400 22px/1.2 'DM Serif Display',serif;letter-spacing:-.01em;margin:0 0 12px}
.about-facts{margin:0 0 16px;border-top:1px solid #17242333}
.about-facts div{display:grid;gap:2px;padding:7px 0;border-bottom:1px solid #17242333}
.about-facts dt{font:600 11px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;color:#172423a6}
.about-facts dd{margin:0;font:15px/1.45 Georgia,serif}
.about-facts a{color:var(--brand-orange-deep);text-underline-offset:4px}
.about-facts a:hover{color:#172423}
.about-card .about-card-book{display:flex;justify-content:center;font-size:15px;padding:12px 20px}
/* One drawn arrow for outbound links on this page, in each link's own color. */
.about-page{--about-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16 16 4M7 4h9v9'/%3E%3C/svg%3E")}
.about-card-book::after,.about-page .author-section .author-list a[href^="http"]::after{content:"";display:inline-block;width:.72em;height:.72em;margin-left:.3em;vertical-align:-.02em;background:currentColor;-webkit-mask:var(--about-arrow) center/contain no-repeat;mask:var(--about-arrow) center/contain no-repeat}
.about-page .author-section .author-list a[href^="http"]::after{background:var(--brand-orange-deep)}
.about-card-book::after{margin-left:0}
.about-card-jump{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font:500 13px/1.4 'DM Sans',sans-serif}
.about-card-jump a{color:#172423;text-underline-offset:4px}
.about-card-jump a:hover{color:var(--brand-orange-deep)}
.about-card-foot{margin:8px 0 0;font:12px/1.4 'DM Sans',sans-serif;color:#172423b3}

.about-founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;margin:34px 0 36px}
.about-founder{margin:0}
.about-founder-art{display:block;aspect-ratio:5/4;overflow:hidden;margin-bottom:22px;background:#f3eddf;border:1px solid #17242326;box-shadow:8px 8px 0 #d6c8b7}
.about-founder-art img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.about-founder h3{font:400 28px/1.15 'DM Serif Display',serif;margin:0}
.author-section .about-founder h3 a{color:#172423;text-decoration:none}
.author-section .about-founder h3 a:hover{color:var(--brand-orange-deep);text-decoration:underline}
.about-founder-role{display:block;font:600 11px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;color:var(--brand-orange-deep);margin:8px 0 12px}
.author-section .about-founder p{font-size:17px;line-height:1.65;margin:0}

.about-services{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid #17242333}
.about-services li{padding:16px 0;border-bottom:1px solid #17242333;font-size:18px;line-height:1.65}
.author-section .about-services a{font:400 22px/1.3 'DM Serif Display',serif;color:#172423;text-decoration:none}
.author-section .about-services a:hover{color:var(--brand-orange-deep);text-decoration:underline}

.about-faq h3{font:400 24px/1.25 'DM Serif Display',serif;margin:32px 0 10px}
.about-faq h2+h3{margin-top:0}
.author-section.about-faq p{margin:0}

@media(min-width:901px) and (min-height:680px){.about-card{position:sticky;top:26px}}
@media(min-width:701px) and (max-width:900px){.about-head .author-lede{max-width:30em}.about-manifesto{max-width:33em}}
@media(max-width:900px){
.about-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none;margin-top:35px}
.about-head,.about-card,.about-sections{grid-column:1;grid-row:auto}
.about-head{padding-bottom:36px}
.about-card{position:static;margin:36px 12px 0 0}
.about-sections{margin-top:52px}
}
@media(max-width:700px){
.about-head h1{margin:16px 0 22px}
.about-manifesto{font-size:18px}
.about-question{font-size:28px}
.about-card{padding:22px 20px 18px;margin-right:6px;box-shadow:6px 6px 0 #d6c8b7}
.about-founders{grid-template-columns:1fr;gap:30px;margin:28px 0 30px}
.about-founder-art{box-shadow:6px 6px 0 #d6c8b7}
.about-faq h3{font-size:22px}
}