/* Bespoke web design page (prefix: bs-) ------------------------------------- */

/* Hero: portrait photo with a concept browser and palette chip overlapping */
.bs-hero { position: relative; padding-bottom: clamp(40px, 5vw, 72px); }
.bs-hero__photo { width: 72%; margin-left: auto; aspect-ratio: 4 / 4.6; border-radius: var(--radius-lg); overflow: hidden; }
.bs-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.bs-hero__browser { position: absolute; left: 0; bottom: 0; width: 68%; }
.bs-hero__chip { position: absolute; left: 2%; top: 6%; width: 190px; padding: 14px; }
.bs-hero__chip .ui-card__title { margin-bottom: 10px; font-size: .86rem; }
.bs-hero__chip .swatches i { height: 32px; }

/* Theme vs bespoke comparison table */
.bs-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.bs-table th, .bs-table td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); }
.bs-table thead th { font: 600 var(--fs-xs)/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--text); }
.bs-table thead .bs-table__us-head { color: var(--brand); }
.bs-table tbody th { width: 22%; font: 600 1.05rem/1.35 var(--font-display); letter-spacing: -.01em; }
.bs-table td { width: 39%; color: var(--muted); }
.bs-table td.bs-table__us { color: var(--text); font-weight: 500; position: relative; padding-left: 28px; }
.bs-table td.bs-table__us::before { content: ''; position: absolute; left: 0; top: 27px; width: 12px; height: 2px; background: var(--brand); }

@media (max-width: 767px) {
  .bs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .bs-table, .bs-table tbody, .bs-table tr, .bs-table th, .bs-table td { display: block; width: 100%; }
  .bs-table tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .bs-table tbody th, .bs-table td { border: 0; padding: 4px 0; }
  .bs-table tbody th { margin-bottom: 8px; }
  .bs-table td::before { content: attr(data-label) ': '; font-weight: 600; color: var(--text); }
  .bs-table td.bs-table__us { padding-left: 0; }
  .bs-table td.bs-table__us::before { position: static; width: auto; height: auto; background: none; color: var(--brand); }
}

/* Design system board (decorative, described by its aria-label) */
.bs-board {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: clamp(14px, 2vw, 22px);
  border-radius: var(--radius-lg); background: #1B1A17; color: #F1EBE1; box-shadow: var(--shadow-2);
}
.bs-board__card { border-radius: 14px; padding: 18px; background: #26241F; min-width: 0; }
.bs-board__label { display: block; margin-bottom: 14px; font: 600 .68rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #A79F92; }
.bs-board__colours { grid-column: span 6; }
.bs-swatch-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bs-swatch { aspect-ratio: 1 / 1.05; border-radius: 10px; padding: 8px; display: flex; align-items: flex-end; font: 500 .66rem/1.2 ui-monospace, Consolas, monospace; overflow: hidden; }
.bs-board__type { grid-column: span 4; }
.bs-type-big { display: block; font: 400 clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem)/.95 var(--font-serif); font-style: italic; color: #C99D6B; }
.bs-type-sans { margin-top: 12px; font-size: .88rem; line-height: 1.5; color: #D9D1C4; }
.bs-type-scale { margin-top: 14px; display: grid; gap: 6px; }
.bs-type-scale span { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #3A3731; padding-top: 6px; font-size: .74rem; color: #A79F92; }
.bs-type-scale b { color: #F1EBE1; font-weight: 500; }
.bs-board__buttons { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; }
.bs-btn { display: block; min-width: 0; overflow-wrap: anywhere; padding: 11px 8px; text-align: center; font: 600 .66rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; border: 1px solid #C99D6B; color: #C99D6B; }
.bs-btn--solid { background: #C99D6B; color: #1B1A17; }
.bs-board__spacing { grid-column: span 3; }
.bs-space { display: flex; align-items: flex-end; gap: 8px; height: 58px; }
.bs-space i { flex: 0 0 14px; background: #C99D6B; border-radius: 3px; opacity: .85; }
.bs-board__component { grid-column: span 3; }
.bs-mini { border-top: 1px solid #3A3731; padding-top: 10px; font: 400 1.15rem/1.2 var(--font-serif); font-style: italic; color: #F1EBE1; }
.bs-mini-sub { margin-top: 4px; font-size: .74rem; color: #A79F92; }

@media (max-width: 479px) {
  .bs-board__type, .bs-board__buttons, .bs-board__spacing, .bs-board__component { grid-column: span 6; }
  .bs-board__buttons { flex-direction: row; flex-wrap: wrap; }
  .bs-board__buttons .bs-board__label { display: none; }
  .bs-btn { flex: 1 1 120px; letter-spacing: .06em; }
  .bs-swatch { font-size: 0; }
}

/* Discovery photo */
.bs-discovery__photo { aspect-ratio: 4 / 3; }

/* "Who it suits" list, lettered A to D */
.bs-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); counter-reset: bs; }
.bs-case { position: relative; padding: 32px 0 32px 76px; border-top: 1px solid var(--line); }
.bs-case::before { counter-increment: bs; content: counter(bs, upper-alpha); position: absolute; left: 0; top: 22px; font: 400 3.2rem/1 var(--font-serif); font-style: italic; color: var(--emerald); }
.bs-case h3 { font-size: var(--fs-h3); }
.bs-case p { margin-top: 10px; color: var(--muted); max-width: 32em; }

/* Two concepts, staggered */
.bs-duo { position: relative; padding-bottom: 20%; }
.bs-duo__a { width: 84%; }
.bs-duo__b { position: absolute; right: 0; bottom: 0; width: 60%; }

@media (max-width: 1023px) {
  .bs-hero { margin-top: 12px; }
  .bs-hero__photo { width: 78%; }
}
@media (max-width: 767px) {
  .bs-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .bs-hero__chip { width: 150px; padding: 10px; }
  .bs-hero__chip .ui-card__title { font-size: .76rem; }
  .bs-hero__browser { width: 80%; }
  .bs-case { padding-left: 56px; }
  .bs-case::before { font-size: 2.6rem; }
}