/* about.html only. Reuses site.css, listing.css (rc-phero, rc-values) and article.css (rc-team). */

/* hero: copy beside a lifestyle photo (rc-phero holds the tray drawing on other pages) */
.ab-hero__grid{gap:1.5rem}
@media (min-width:768px){.ab-hero .ab-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem}}
.ab-photo{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--mist);box-shadow:var(--sh-2)}
.ab-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ab-photo__note{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;display:flex;gap:.6rem;align-items:center;padding:.65rem .8rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-2);font-size:.9rem;line-height:1.4;color:var(--ink)}
.ab-photo__note .ic{color:var(--aqua);width:1.5rem;height:1.5rem}
.ab-hero .rc-disclose{max-width:36rem}
/* below desktop the photo caption sits under the photo instead of over the aligner */
@media (max-width:1023px){.ab-photo__note{position:static;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}}

/* the four value cards in one row on desktop (no 3 + 1 at 1024) */
@media (min-width:1024px){.rc-values{grid-template-columns:repeat(4,1fr)}}

/* who writes the guides: the byline card, then four "not" tiles (2 + 2 on tablets, 4 in a row on desktop) */
.ab-byline{align-items:center}
.ab-byline p{max-width:none}
.ab-not{display:grid;gap:.75rem;margin-top:.85rem}
@media (min-width:640px){.ab-not{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ab-not{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ab-not li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;padding:.95rem 1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.ab-not__ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--rasp-tint);color:var(--rasp-800)}
.ab-not b{font:600 1rem var(--display);color:var(--ink)}
.ab-not p{margin-top:.2rem;font-size:.92rem;line-height:1.5;color:var(--muted)}


/* read alongside: shorter drawing bands than the default 16:10 card */
.ab-next .rc-card__media{aspect-ratio:auto;height:9rem}
.ab-next .rc-card__media.rc-art>svg{width:auto;height:6.5rem}

/* phones: icon beside the text in the value tiles, and the read-alongside cards as rows, so the page stays short */
@media (max-width:639px){
  #what .rc-value{grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;padding:.95rem 1rem}
  #what .rc-value__ico{grid-row:1/3}
  .ab-next .rc-card{display:grid;grid-template-columns:6.5rem minmax(0,1fr)}
  .ab-next .rc-card__media{height:auto;min-height:6.5rem}
  .ab-next .rc-card__media.rc-art>svg{height:4.5rem}
  .ab-next .rc-card__media .rc-kind{display:none}
  .ab-next .rc-card__body{padding:.85rem 1rem}
}