/* About page (/about). Loaded only on that page, after site.css and pages/film.css.
   Reuses site.css for the film card (.film), the numbers (.stats), type, buttons and
   eyebrows; pages/film.css makes the film card play. Colors are the brand tokens only. */

/* ------------------------------------------------------------ shared inside-page bits */
.in-h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(34px, calc(.75rem + 3.9vw), 68px); line-height: 1.08;
}
.in-h2 em { font-style: italic; color: var(--drd-bronze); }
.ab-body { max-width: 560px; font-size: 18px; line-height: 30px; }
.ab-aside { width: 420px; padding-bottom: 12px; }
.ab-caption {
  padding-top: 14px; font-family: var(--font-label); font-weight: 500; font-size: 12px; line-height: 18px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--drd-taupe);
}

/* ------------------------------------------------------------ hero and the film */
.ab-hero { padding-block: 88px 136px; }
.ab-head { padding-bottom: 64px; }
.ab-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(40px, calc(1rem + 5.2vw), 92px); line-height: 1.06;
}
.ab-title span, .ab-title em { display: block; text-wrap: balance; }
.ab-title em { font-style: italic; color: var(--drd-bronze); line-height: 1.12; }
/* The homepage film card, set wide: it leads this page (plan.md, brand film, Oct 8) */
.ab-film { order: 0; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; padding: 40px 44px; }
.ab-film .film-play { width: 112px; height: 112px; }
.ab-film .film-play svg { width: 34px; height: 39px; }
.ab-film .film-foot { max-width: 760px; gap: 16px; }
.ab-film .film-quote { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.32; }

/* ------------------------------------------------------------ founders */
.ab-founders { padding-bottom: 144px; }
.ab-founders-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: center; }
.ab-founders-photo { margin: 0; }
.ab-founders-photo picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--drd-stone); }
.ab-founders-photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-founders-copy { display: flex; flex-direction: column; gap: 24px; }
.ab-founders-copy > .caps-label { padding-top: 4px; }
.ab-stats { margin-top: 120px; }
.ab-stats .stat-num { font-size: min(128px, 8.9vw); }

/* ------------------------------------------------------------ the shop and the yard (Stone) */
.ab-shop { background: var(--drd-stone); padding-block: 128px 136px; }
.ab-shop-head { padding-bottom: 64px; }
/* Column widths match the two crops (10:7 and 9:10) so both photos end up the same height */
.ab-shop-photos { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 6.3fr); gap: 32px; }
.ab-shop-photo { overflow: hidden; background: var(--drd-taupe); }
.ab-shop-fig-wide .ab-shop-photo { aspect-ratio: 10 / 7; }
.ab-shop-fig:not(.ab-shop-fig-wide) .ab-shop-photo { aspect-ratio: 9 / 10; }
.ab-shop-photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-shop-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: 72px; }
.ab-shop-list li { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--drd-espresso); }
.ab-shop-list h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; letter-spacing: -.01em; }
.ab-shop-list p { font-size: 16px; line-height: 26px; }
/* Wood and steel, under the list: two approved process photos */
.ab-shop-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 72px; }
.ab-shop-more figure { margin: 0; }
.ab-shop-more .ab-shop-photo { aspect-ratio: 3 / 2; }

/* ------------------------------------------------------------ visit */
.ab-visit { padding-block: 144px; }
.ab-visit-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 96px; align-items: start; }
.ab-visit-copy { display: flex; flex-direction: column; gap: 28px; }
.ab-visit-copy .btn-row { padding-top: 8px; }
.ab-visit-info { margin: 8px 0 0; border-bottom: 1px solid var(--drd-espresso); }
.ab-info-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-top: 1px solid var(--drd-espresso); }
.ab-info-row dt {
  padding-top: 3px; font-family: var(--font-label); font-weight: 500; font-size: 12px; line-height: 18px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--drd-taupe);
}
.ab-info-row dd { margin: 0; font-family: var(--font-label); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.ab-hours { display: block; }
.ab-hours + .ab-hours { margin-top: 6px; }
.ab-info-row a { text-decoration: none; }
.ab-info-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1023px) {
  .ab-hero { padding-block: 56px 104px; }
  .ab-head { padding-bottom: 48px; }
  .ab-aside { width: auto; }
  .ab-film { padding: 32px; }
  .ab-founders { padding-bottom: 104px; }
  .ab-founders-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ab-founders-photo { max-width: 620px; }
  .ab-founders-photo picture { aspect-ratio: 4 / 3; }
  .ab-stats { margin-top: 88px; }
  .ab-shop { padding-block: 96px 104px; }
  .ab-shop-head { padding-bottom: 48px; }
  .ab-shop-list { gap: 32px; padding-top: 56px; }
  .ab-shop-more { gap: 24px; padding-top: 56px; }
  .ab-visit { padding-block: 104px; }
  .ab-visit-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* ------------------------------------------------------------ phone */
@media (max-width: 767px) {
  .ab-body { font-size: 17px; line-height: 28px; }
  .ab-hero { padding-block: 32px 72px; }
  .ab-hero .eyebrow { font-size: 12px; letter-spacing: .16em; gap: 12px; }
  .ab-hero .eyebrow::before { flex-basis: 24px; }
  .ab-head { padding-bottom: 36px; }
  .ab-film { width: calc(100% + 2 * var(--gutter)); aspect-ratio: 4 / 5; padding: 24px var(--gutter); margin-inline: calc(-1 * var(--gutter)); }
  .ab-film .film-play { width: 80px; height: 80px; }
  .ab-film .film-play svg { width: 30px; height: 34px; }
  .ab-film .film-quote { font-size: 21px; line-height: 29px; }
  .ab-founders { padding-bottom: 72px; }
  .ab-founders-grid { gap: 36px; }
  .ab-stats { margin-top: 64px; }
  .ab-shop { padding-block: 72px 80px; }
  .ab-shop-head { padding-bottom: 36px; }
  .ab-shop-photos { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-shop-fig:not(.ab-shop-fig-wide) .ab-shop-photo { aspect-ratio: 4 / 5; }
  .ab-shop-list { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; }
  .ab-shop-more { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 40px; }
  .ab-shop-list h3 { font-size: 24px; line-height: 30px; }
  .ab-visit { padding-block: 72px; }
  .ab-visit-grid { gap: 40px; }
  .ab-info-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 16px; }
  .ab-info-row dt { padding-top: 0; }
  .ab-info-row dd { font-size: 16px; }
}