/* About — page-only styles.
   The whole narrative scrolls downward inside the locked frame (.fs-scroll); frame, baseline and ticker stay put.
   At scroll 0 the view is identical to the approved design. */
.fs-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--fs-brown) transparent;outline:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36 * var(--uy)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 36 * var(--uy)),transparent)}
.fs-scroll::-webkit-scrollbar{width:4px}
.fs-scroll::-webkit-scrollbar-thumb{background:var(--fs-brown)}
.pg-about .ab-hero{height:calc(474 * var(--uy));padding:calc(37 * var(--uy)) 0 0 calc(100 * var(--ux))}
/* content slides OVER the frame: every block carries white paper, so the baseline and coordinates stay behind it.
   The hero wrapper itself stays transparent so the baseline remains visible at rest. */
.pg-about .ab-hero > *,.pg-about .ab-essay,.pg-about .ab-close{position:relative;background:var(--fs-white)}
.pg-about .ab-hero > .fs-kicker{width:max-content;padding-right:calc(12 * var(--um))}
.pg-about .ab-hero > .fs-h1{width:max-content}
/* the personal note: sections with a small label, one readable column, a portrait in the first section,
   and every quote in the same style as the closing line */
.pg-about .ab-essay{padding:0 calc(40 * var(--ux)) 0 calc(45 * var(--ux))}
.pg-about .ab-essay > *{max-width:calc(880 * var(--um))}
.pg-about .ab-title{font-size:calc(34 * var(--um));line-height:1.2;letter-spacing:-.02em;margin:0 0 calc(10 * var(--um))}
.pg-about .ab-title em{font-style:normal;color:var(--fs-brown)}
.pg-about .ab-title::after{content:"";display:block;width:calc(40 * var(--um));height:max(2px,calc(2.5 * var(--um)));background:var(--fs-brown);margin-top:calc(20 * var(--um))}
/* each section: a small numbered label on the left, the text column on the right, generous air between sections */
.pg-about .ab-sec{display:grid;grid-template-columns:calc(170 * var(--um)) minmax(0,calc(720 * var(--um)));column-gap:calc(48 * var(--um));padding-top:calc(52 * var(--um));margin-top:calc(52 * var(--um));border-top:var(--thin) solid var(--fs-brown)}
.pg-about .ab-essay > .ab-sec{max-width:calc(938 * var(--um))}
.pg-about .ab-title + .ab-sec,.pg-about .ab-essay > .ab-sec:first-child{margin-top:calc(8 * var(--um));border-top:0}
.pg-about .ab-label{margin:calc(6 * var(--um)) 0 0;position:sticky;top:0;align-self:start}
.pg-about .ab-num{display:block;font-size:calc(30 * var(--um));letter-spacing:0;line-height:1;color:var(--fs-brown);margin-bottom:calc(10 * var(--um))}
.pg-about .ab-body{display:flow-root}
.pg-about .ab-body > :last-child{margin-bottom:0}
.pg-about .ab-scroll p.ab-p{font-size:calc(17.5 * var(--um));line-height:1.8;color:var(--fs-slate);margin:0 0 calc(22 * var(--um))}
.pg-about .ab-p strong{font-weight:500;color:var(--fs-brown)}
.pg-about .ab-essay .ab-cap{float:left;font-size:calc(80 * var(--um));line-height:.78;color:var(--fs-brown);padding:calc(7 * var(--um)) calc(12 * var(--um)) 0 0}
/* portrait: floats right inside the first section, text wraps around it */
.pg-about .ab-photo{float:right;width:calc(232 * var(--um));margin:calc(2 * var(--um)) 0 calc(18 * var(--um)) calc(40 * var(--um));position:relative}
.pg-about .ab-photo img{display:block;width:100%;height:auto;position:relative;z-index:1}
.pg-about .ab-photo::before{content:"";position:absolute;left:calc(12 * var(--um));top:calc(12 * var(--um));width:100%;aspect-ratio:1;border:var(--thin) solid var(--fs-brown)}
.pg-about .ab-photo figcaption{margin-top:calc(22 * var(--um));font-size:calc(11 * var(--um));letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--fs-slate)}
.pg-about .ab-photo figcaption span{display:block;margin-top:calc(4 * var(--um));color:var(--fs-brown)}
/* quotes — all the same style */
.pg-about .ab-quote{clear:both;margin:calc(40 * var(--um)) 0 calc(40 * var(--um));padding-left:calc(22 * var(--um));border-left:max(2px,calc(3 * var(--um))) solid var(--fs-brown);font-style:italic;font-size:calc(24 * var(--um));line-height:1.45;color:var(--fs-slate)}
.pg-about .ab-quote + .ab-quote{margin-top:0}
/* inserts */
/* "at a glance": a quiet, compact strip aligned with the text column */
.pg-about .ab-facts{display:flex;flex-wrap:wrap;gap:calc(8 * var(--um)) calc(30 * var(--um));margin:calc(40 * var(--um)) 0 0 calc(218 * var(--um));max-width:calc(720 * var(--um));padding:calc(14 * var(--um)) 0;border-top:var(--thin) solid var(--fs-brown);border-bottom:var(--thin) solid var(--fs-brown)}
.pg-about .ab-facts span{display:block;font-size:calc(9.5 * var(--um));letter-spacing:.2em;text-transform:uppercase;color:var(--fs-brown)}
.pg-about .ab-facts b{display:block;margin-top:calc(3 * var(--um));font-weight:400;font-size:calc(15 * var(--um));line-height:1.3;color:var(--fs-slate)}
.pg-about .ab-facts + .ab-sec{margin-top:0;border-top:0}
.pg-about .ab-ask{margin:calc(6 * var(--um)) 0 calc(8 * var(--um));padding:calc(2 * var(--um)) 0 calc(2 * var(--um)) calc(22 * var(--um));border-left:var(--thin) solid var(--fs-brown)}
.pg-about .ab-ask ol{list-style:none;counter-reset:q;margin:calc(10 * var(--um)) 0 0;padding:0}
.pg-about .ab-ask li{counter-increment:q;display:grid;grid-template-columns:calc(36 * var(--um)) 1fr;padding:calc(3 * var(--um)) 0;font-size:calc(16 * var(--um));line-height:1.45;color:var(--fs-slate)}
.pg-about .ab-ask li::before{content:"0" counter(q);font-size:calc(13 * var(--um));line-height:calc(24 * var(--um));color:var(--fs-brown)}
.pg-about .ab-ask strong{font-weight:500;color:var(--fs-brown)}
.pg-about .ab-sign .fs-name{font-weight:600;color:var(--fs-slate)}
.pg-about .ab-actions{display:flex;gap:calc(10 * var(--um))}
.pg-about .ab-cue{display:flex;align-items:center;gap:calc(12 * var(--um));margin:calc(34 * var(--um)) 0 0 calc(45 * var(--ux));font-size:calc(11 * var(--um));letter-spacing:.26em;text-transform:uppercase;color:var(--fs-brown)}
.pg-about .ab-cue i{width:var(--thin);height:calc(26 * var(--um));background:var(--fs-brown);position:relative}
.pg-about .ab-cue i::after{content:"";position:absolute;left:calc(-3.5 * var(--um));bottom:0;width:calc(7 * var(--um));height:calc(7 * var(--um));border-right:var(--thin) solid var(--fs-brown);border-bottom:var(--thin) solid var(--fs-brown);transform:rotate(45deg)}
.pg-about .ab-close{display:flex;align-items:center;justify-content:space-between;gap:calc(40 * var(--um));max-width:calc(938 * var(--um));margin:calc(64 * var(--um)) calc(40 * var(--ux)) calc(70 * var(--um)) calc(45 * var(--ux));padding-top:calc(26 * var(--um));border-top:var(--thin) solid var(--fs-brown)}
.pg-about .ab-sign{font-style:italic;font-size:calc(20 * var(--um));line-height:1.4}
.pg-about .ab-sign span{display:block;margin-top:calc(4 * var(--um));font-style:normal;font-size:calc(11 * var(--um));letter-spacing:.24em;text-transform:uppercase;color:var(--fs-brown)}
@media (max-width:1180px){
  .fs-scroll{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .pg-about .ab-hero{height:auto;padding:0}
  .pg-about .ab-hero > .fs-kicker,.pg-about .ab-hero > .fs-h1{width:auto}
  .pg-about .ab-essay{columns:1;margin:32px 0 0;padding:0}
  .pg-about .ab-scroll p.ab-p{font-size:16px}
  .pg-about .ab-title{font-size:26px}
  .pg-about .ab-quote{font-size:19px}
  .pg-about .ab-photo{float:none;width:200px;margin:0 0 24px}
  .pg-about .ab-sec{grid-template-columns:1fr;padding-top:32px;margin-top:32px}
  .pg-about .ab-label{position:static;margin-bottom:20px}
  .pg-about .ab-num{font-size:24px}
  .pg-about .ab-facts{margin:32px 0 0;gap:10px 22px}
  .pg-about .ab-facts b{font-size:15px}
  .pg-about .ab-ask{padding:0 0 0 16px}
  .pg-about .ab-ask li{font-size:16px}
  .pg-about .ab-actions{flex-wrap:wrap}
  .pg-about .ab-essay .ab-cap{font-size:64px}
  .pg-about .ab-cue{display:none}
  .pg-about .ab-close{margin:32px 0 40px;flex-direction:column;align-items:flex-start}
}

@media (min-width:700px) and (max-width:1180px){
  .pg-about .ab-essay{margin-top:48px}
  .pg-about .ab-title{font-size:32px;max-width:760px}
  .pg-about .ab-sec{grid-template-columns:150px minmax(0,1fr);column-gap:36px;padding-top:44px;margin-top:44px;max-width:900px}
  .pg-about .ab-label{margin:6px 0 0}
  .pg-about .ab-num{font-size:28px}
  .pg-about .ab-scroll p.ab-p{font-size:17.5px;line-height:1.75}
  .pg-about .ab-photo{float:right;width:220px;margin:4px 0 20px 32px}
  .pg-about .ab-quote{font-size:22px}
  .pg-about .ab-facts{margin-left:186px;max-width:714px}
  .pg-about .ab-facts b{font-size:16px}
  .pg-about .ab-ask li{font-size:17px}
  .pg-about .ab-close{flex-direction:row;align-items:center;max-width:900px}
  .pg-about .ab-actions{flex-wrap:nowrap}
}

/* positions on the 1672 × 943 grid (x/w × --ux, y/h × --uy) and size tokens */
.pg-about .at-ab-scroll{--x:97;--y:128;--w:1233;--h:760}
.pg-about .at-lede{--lede-w:880}