/* About page — assets/css/about.css
   Loaded only on is_page('about'), after tokens.css and style.css.
   Mobile first; every colour, size and space comes from a var() token. */

/* --- 1. hero ------------------------------------------------------------ */
.about-hero{padding-block:var(--section-y-tight) var(--section-y)}
.about-hero__grid{display:grid;gap:var(--space-6);align-items:center}
.about-hero__copy h1{max-width:24ch}
.about-hero__media{margin:0}
.about-hero__media img{aspect-ratio:4/3}

/* --- 2. scope ----------------------------------------------------------- */
.about-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.about-head h2{max-width:32ch}
.about-head .lead{margin-top:var(--space-2)}
.about-scope__body{align-items:center}
.about-scope__media{margin:0}
.about-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0;max-width:none}

/* --- 3. workshop & supply chain ----------------------------------------- */
.about-factory__grid{align-items:center}
.about-factory__media{margin:0}
.about-factory__media img{aspect-ratio:4/3}

/* --- 4. markets --------------------------------------------------------- */
.about-markets__list{list-style:none;margin:0;padding:0;max-width:none;border-top:var(--border-hair)}
.about-market{display:flex;align-items:baseline;gap:var(--space-4);padding-block:var(--space-4);border-bottom:var(--border-hair)}
.about-market__index{flex:none;font-size:var(--fs-small);color:var(--c-ink-mute);font-variant-numeric:tabular-nums}
.about-market__name{font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-tight)}

/* --- 5. LaceDog pattern system ------------------------------------------ */
.about-lacedog__grid{align-items:center}
.about-lacedog__media{margin:0}
.about-lacedog__media img{aspect-ratio:4/3}
.about-lacedog__link{margin:0}
.about-lacedog__link a{color:var(--c-accent-strong);font-weight:600;text-decoration-color:currentColor}

/* --- 6. quality --------------------------------------------------------- */
.about-quality__cards h3{margin-bottom:var(--space-2)}
.about-quality__cards p:last-child{margin-bottom:0}

/* --- 7. closing call to action ------------------------------------------ */
.about-cta__inner{display:grid;justify-items:start}
.about-cta__inner h2{max-width:28ch;margin-bottom:var(--space-4)}
.about-cta__inner .btn-row{margin-top:var(--space-2)}

/* --- from 720px --------------------------------------------------------- */
@media (min-width:720px){
  .about-market__index{font-size:var(--fs-body)}
}

/* --- from 900px: two-column rows ---------------------------------------- */
@media (min-width:900px){
  .about-hero{padding-block:var(--section-y)}
  .about-hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--space-7)}
  .about-hero__media img{aspect-ratio:4/5}
  /* the image leads on the workshop row, so the page alternates left and right */
  .about-factory__grid > .about-factory__media{order:-1}
  .about-markets__grid{align-items:start}
  .about-quality__cards{gap:var(--space-6)}
}