/* The About page (/about/) and the Press page (/contact/press/) - mock-ups.
   Written by /app/build-pages.php in the site's frame. */
@font-face{font-family:ap-helv;src:url('/resources/fonts/helvetica.ttf') format('truetype');font-display:swap}
@font-face{font-family:ap-helvb;src:url('/resources/fonts/helvetica-bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:ap-rtp;src:url('/resources/fonts/road-to-perdition.ttf') format('truetype');font-display:swap}
@font-face{font-family:ap-script;src:url('/resources/fonts/chocolate-caliente-regular1.ttf') format('truetype');font-display:swap}
.ap{color:#21282e}
.ap a{color:inherit;text-decoration:none}
.ap-k{font:400 10.5px/1.2 ap-helv,Helvetica,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8a6d3b;margin:0}
.ap-in{max-width:1096px;margin:0 auto;padding:0 24px}
.ap-hero{background:#f6f2eb;padding:56px 0 60px}
.ap-hero .ap-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:60px;align-items:center}
.ap-hero h1{font:400 56px/1.02 ap-rtp,"Playfair Display",Georgia,serif;letter-spacing:.01em;margin:10px 0 0}
/* the About heading is the tagline under CHARLATAN, set as it is there: Cormorant Garamond, the heavier weight, gold, "The" in italics */
/* always on one line: as large as its column allows, up to 62px (the line is about 11 times its type size wide) */
.ap-hero .ap-in > div:first-child{container-type:inline-size}
.ap-hero h1.ap-tagline{font:600 min(62px,8.7cqw)/1.05 "Cormorant Garamond",Georgia,serif;letter-spacing:-.02em;color:#8a6d3b;white-space:nowrap}
.ap-hero h1.ap-tagline em{font-style:italic}
.ap-lede{font:400 23px/1.45 "Playfair Display",Georgia,serif;margin:18px 0 0;max-width:600px}
.ap-hero figure{margin:0;justify-self:end;max-width:360px;width:100%}
.ap-hero figure img{width:100%;height:auto;border-radius:3px;box-shadow:0 22px 50px rgba(20,22,25,.22)}
figcaption.ap-cap{font:italic 500 16px/1.35 "Cormorant Garamond",Georgia,serif;color:#5d6268;margin-top:12px;text-align:center}
.ap-btns{display:flex;gap:16px 34px;flex-wrap:wrap;align-items:center;margin-top:28px}
/* the site's call to action, as Subscribe in the header: gold letter-spaced label, round arrow */
.ap-btn{display:inline-flex;align-items:center;gap:9px;padding:4px 0;color:#8a6d3b!important;font:400 11.5px/1 ap-helv,Helvetica,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.ap-btn::after{content:"";flex:none;width:28px;height:28px;border:1px solid #cfcac2;border-radius:50%;transition:background-color .15s;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M4.5 2.5 8 6l-3.5 3.5%27 fill=%27none%27 stroke=%27%2321282e%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/10px no-repeat}
.ap-btn:hover{text-decoration:underline;text-underline-offset:3px}
.ap-btn:hover::after{background-color:#f4f2ee}
.ap-btn.sec{color:#5d6268!important}
.ap-btn small{font:400 11px/1 ap-helv,Helvetica,Arial,sans-serif;letter-spacing:.02em;text-transform:none;color:#7b8187}
.ap-sec{padding:64px 0 10px}
.ap-sec h2{font:400 36px/1.12 "Playfair Display",Georgia,serif;margin:8px 0 0}
.ap-sec .ap-head{text-align:center;margin:0 0 34px}
.ap-body{font:400 19px/1.65 Georgia,serif;color:#2e353b;max-width:720px;margin:0 auto}
.ap-body p{margin:0 0 18px}
/* timeline */
.ap-tl{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:start}
.ap-steps{list-style:none;margin:0;padding:0;border-left:1px solid #d9d2c5}
.ap-steps li{position:relative;padding:0 0 30px 30px}
.ap-steps li::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;background:#8a6d3b}
.ap-steps .when{font:400 12px/1.2 ap-helvb,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a6d3b}
.ap-steps h3{font:400 24px/1.2 "Playfair Display",Georgia,serif;margin:6px 0 0}
.ap-steps p{font:400 16px/1.6 Georgia,serif;color:#4a5056;margin:6px 0 0}
.ap-tl figure{margin:0;position:sticky;top:120px}
.ap-tl figure img{width:100%;height:auto;border-radius:3px}
.ap-quote{max-width:820px;margin:20px auto 0;text-align:center;font:italic 500 28px/1.35 "Cormorant Garamond",Georgia,serif;color:#21282e;padding:34px 0;border-top:1px solid #e7e3dc;border-bottom:1px solid #e7e3dc}
/* newsletter strip */
.ap-nl{background:#21282e;color:#fff;margin-top:64px;padding:52px 0;text-align:center}
.ap-nl .ap-k{color:#d9bd84}
.ap-nl h2{font:400 50px/1.3 ap-script,"Playfair Display",Georgia,serif;margin:4px 0 0;color:#fff}
.ap-nl p{font:400 21px/1.4 "Playfair Display",Georgia,serif;color:rgba(255,255,255,.85);margin:6px 0 22px}
.ap-nl .ap-btn{color:#d9bd84!important}
.ap-nl .ap-btn::after{border-color:rgba(255,255,255,.45);background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M4.5 2.5 8 6l-3.5 3.5%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/10px no-repeat}
.ap-nl .ap-btn:hover::after{background-color:rgba(255,255,255,.12)}
/* link cards */
.ap-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ap-card{display:block;border:1px solid #e7e3dc;border-radius:6px;padding:26px 24px;transition:border-color .2s,box-shadow .2s}
.ap-card:hover{border-color:#cfc6b6;box-shadow:0 10px 30px rgba(33,40,46,.07)}
.ap-card h3{font:400 24px/1.2 "Playfair Display",Georgia,serif;margin:8px 0 0}
.ap-card p{font:400 14.5px/1.55 ap-helv,Helvetica,Arial,sans-serif;color:#5d6268;margin:8px 0 0}
.ap-card .go{display:inline-block;margin-top:14px;font:400 11px/1 ap-helv,Helvetica,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8a6d3b}
/* press: the numbers */
.ap-nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #e7e3dc;border-bottom:1px solid #e7e3dc}
.ap-num{padding:30px 18px;text-align:center}
.ap-num + .ap-num{border-left:1px solid #e7e3dc}
.ap-num b{display:block;font:400 36px/1 "Playfair Display",Georgia,serif;color:#21282e;white-space:nowrap}
.ap-num span{display:block;font:400 13px/1.45 ap-helv,Helvetica,Arial,sans-serif;color:#5d6268;margin-top:10px}
.ap-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.ap-list{list-style:none;margin:14px 0 0;padding:0;columns:2;column-gap:28px}
.ap-list li{font:400 16px/1.5 Georgia,serif;padding:7px 0;border-bottom:1px solid #eeeae4;break-inside:avoid}
.ap-box{background:#f6f2eb;border-radius:6px;padding:26px 28px}
.ap-box p.t{font:400 17px/1.6 Georgia,serif;margin:12px 0 0}
.ap-box .copy{margin-top:14px;border:1px solid #cfcac2;background:#fff;border-radius:4px;padding:9px 14px;font:400 11px/1 ap-helv,Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.ap-covers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ap-covers img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 12px 30px rgba(20,22,25,.14)}
.ap-covers p{font:400 15px/1.3 "Playfair Display",Georgia,serif;margin:10px 0 0;text-align:center}
.ap-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ap-contact .ap-card p a{color:#8a6d3b}
.ap-flag{display:inline-block;margin-left:6px;font:400 10px/1 ap-helv,Helvetica,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:#fdf1d8;color:#8a5a10;border-radius:3px;padding:4px 6px;vertical-align:middle}
/* the Editorial Board */
.eb-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.eb-rest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 28px;margin-top:56px;padding-top:44px;border-top:1px solid #e7e3dc}
.eb-p .eb-ph{display:block;margin:0 0 16px}
.eb-p .eb-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:#f1efeb;display:block;transition:transform .35s ease}
.eb-p a.eb-ph:hover img{transform:translateY(-3px)}
.eb-p h3{font:400 22px/1.2 "Playfair Display",Georgia,serif;margin:6px 0 0}
.eb-p.big h3{font-size:28px}
.eb-p h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.eb-bio{font:400 15px/1.6 Georgia,serif;color:#4a5056;margin:10px 0 0}
.eb-p.big .eb-bio{font-size:16px}
.eb-bio.clip{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.eb-more{margin-top:12px}
.eb-pts{list-style:none;margin:26px auto 0;padding:0;max-width:820px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.eb-pts li{position:relative;padding-left:22px}
.eb-pts li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:#8a6d3b}
.eb-pts b{display:block;font:400 19px/1.3 "Playfair Display",Georgia,serif;font-weight:400}
.eb-pts span{display:block;font:400 15.5px/1.6 Georgia,serif;color:#4a5056;margin-top:4px}
.eb-sign{text-align:center;font:italic 500 21px/1.4 "Cormorant Garamond",Georgia,serif;color:#5d6268;margin:46px auto 0;max-width:640px}
@media (max-width:900px){
  .ap-hero{padding:34px 0 40px}
  .ap-hero .ap-in{grid-template-columns:1fr;gap:30px}
  .ap-hero h1{font-size:40px}
  .ap-lede{font-size:19px}
  .ap-hero figure{justify-self:center;max-width:260px}
  .ap-sec{padding:44px 0 6px}
  .ap-sec h2{font-size:28px}
  .ap-body{font-size:17.5px}
  .ap-tl{grid-template-columns:1fr;gap:26px}
  .ap-tl figure{position:static;order:-1}
  .ap-quote{font-size:22px}
  .ap-nl h2{font-size:36px}
  .ap-cards{grid-template-columns:1fr}
  .ap-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-num:nth-child(odd){border-left:0}.ap-num:nth-child(n+3){border-top:1px solid #e7e3dc}
  .ap-num:last-child{grid-column:1 / -1}
  .ap-num b{font-size:34px}
  .ap-two{grid-template-columns:1fr;gap:30px}
  .ap-list{columns:1}
  .ap-covers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-contact{grid-template-columns:1fr}
  .ap-in{padding:0 20px}
  .eb-top{grid-template-columns:1fr;gap:36px}
  .eb-rest{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;margin-top:40px;padding-top:34px}
  .eb-p.big .eb-ph img{aspect-ratio:1/1}
  .eb-pts{grid-template-columns:1fr}
}
/* the full story (About): "Read the full story" opens it over the page; the Pages editor shows it in place */
.ap-more{text-align:center;margin:26px 0 0}
.ap-story{position:fixed;inset:0;z-index:200;background:rgba(20,22,25,.55);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.ap-story[hidden]{display:none}
.ap-story-card{position:relative;background:#fbfaf7;max-width:680px;width:100%;border-radius:4px;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:46px 52px 50px}
.ap-story-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid #cfcac2;background:#fff;font:400 22px/1 Georgia,serif;color:#5d6268;cursor:pointer}
.ap-story-x:hover{background:#f4f2ee}
.ap-story-card .ap-k{text-align:center}
.ap-story-card h2{font:500 clamp(28px,4.4vw,40px)/1.15 "Playfair Display",Georgia,serif;text-align:center;margin:6px 0 22px}
.ap-story-card figure{margin:0 auto 26px;max-width:420px}
.ap-story-card figure img{width:100%;height:auto;display:block}
.ap-story-card p{font:400 18px/1.7 "Playfair Display",Georgia,serif;color:#24272c;margin:0 0 18px}
.ap-story-card p.ap-lead{font-style:italic;font-size:19px;text-align:center;color:#5d6268}
.ap-story-card p.ap-ask{text-align:center;font-style:italic}
body.ap-reading{overflow:hidden}
@media (max-width:600px){.ap-story{padding:0}.ap-story-card{border-radius:0;min-height:100%;padding:58px 22px 40px}.ap-story-card p{font-size:17px}}
.ap-story-card .ap-mast{font:400 clamp(34px,6vw,46px)/1 ap-rtp,Georgia,serif;text-align:center;color:#16171c;margin:0 0 4px;letter-spacing:.01em}
/* wider on a desktop screen (the story read slim at 680) */
.ap-story-card{max-width:880px;padding:50px 72px 56px}
.ap-story-card figure{max-width:560px}
.ap-story-card p{font-size:19px}
@media (max-width:900px){.ap-story-card{padding:46px 40px 50px}}
@media (max-width:600px){.ap-story-card{padding:58px 22px 40px}.ap-story-card p{font-size:17px}}
