/* Home page "About Us" section (from the concept: docs/concept/section-about.html).
   Uses the tokens and the Hanken Grotesk font defined in site-nav.css, which every page with the nav loads. */
.ps-about{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
.ps-about *,.ps-about *::before,.ps-about *::after{box-sizing:border-box}
/* same frame as the nav bar: content lines up with the logo and the last menu item */
.ps-about .ps-about-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:clamp(80px,10vw,160px) var(--frame)}
/* text and photo share the width equally; the photo sits in the middle of its half, close to the text */
.ps-about .ps-copy{grid-column:1/7}
.ps-about h2{margin:0;font-family:inherit;font-size:clamp(40px,4.6vw,66px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--accent);text-wrap:balance}
/* relaxed reading: open leading, clear space between the two paragraphs */
.ps-about p{margin:32px 0 0;font-family:inherit;font-size:20px;line-height:1.8;color:var(--ink);max-width:40em;text-align:left}
.ps-about h2+p{margin-top:48px}
.ps-about p b{font-weight:500}
.ps-about .ps-more{display:inline-flex;align-items:center;gap:10px;margin-top:44px;font-size:18px;font-weight:500;color:var(--accent);text-decoration:none}
.ps-about .ps-more:hover,.ps-about .ps-more:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.ps-about .ps-more:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ps-about .ps-more svg{transition:transform .2s}
.ps-about .ps-more:hover svg{transform:translateX(5px)}
.ps-about figure{--ab-gap:clamp(32px,4vw,72px);grid-column:7/13;justify-self:start;width:calc(100% - var(--ab-gap));max-width:min(600px,36vw);margin:0 0 0 var(--ab-gap)}
/* the pebble photo: light, uneven, hand-drawn-looking border; the outline slowly changes shape */
.ps-about .ps-pic{aspect-ratio:400/452;overflow:hidden;background:var(--tile);border:solid var(--crimson-200);border-width:5px 10px 7px 12px;border-radius:58% 42% 52% 48% / 50% 58% 42% 50%;animation:ps-pebble 12s ease-in-out infinite}
.ps-about .ps-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@keyframes ps-pebble{
  0%,100%{border-radius:58% 42% 52% 48% / 50% 58% 42% 50%}
  33%{border-radius:45% 55% 41% 59% / 58% 44% 56% 42%}
  66%{border-radius:53% 47% 60% 40% / 42% 55% 45% 58%}
}
@media (max-width:900px){
  .ps-about .ps-about-in{grid-template-columns:1fr;row-gap:40px}
  .ps-about .ps-copy,.ps-about figure{grid-column:auto}
  .ps-about figure{justify-self:start;width:100%;max-width:420px;margin:0}
}
@media (max-width:767px){
  .ps-about h2{font-size:clamp(36px,10vw,44px)}
  .ps-about p{margin-top:24px;line-height:1.75}
  .ps-about h2+p{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){
  .ps-about .ps-pic{animation:none}
  .ps-about .ps-more svg{transition:none}
}