/* Matelas Gurhem — brand guide page, built on the site tokens in styles.css */

.brand__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--margin); }
.brand__bar img { width: auto; height: 2rem; }
.brand__hero { display: grid; gap: 2rem; padding: 6rem var(--margin) 7rem; background: var(--surface); }
.brand__logo { width: min(100%, 52rem); height: auto; }
.brand__title { font-size: var(--step-head); }
.brand__lead { max-width: 52ch; font-size: var(--step-lead); line-height: 1.35; }
.brand__section { padding: 6rem var(--margin) 0; display: grid; gap: 2.5rem; }
.brand__section h2 { font-size: var(--step-head); }
.brand__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.tile { display: grid; grid-template-rows: 1fr auto; gap: 1.5rem; place-items: center; min-height: 22rem; padding: 3rem 2rem 1.5rem; }
.tile img { width: min(80%, 30rem); height: auto; }
.tile .tile__stacked { width: min(55%, 16rem); }
.tile .tile__line { width: min(80%, 40rem); }
.tile figcaption { justify-self: start; font-size: var(--step-small); }
.tile--putty { background: var(--bg); }
.tile--ink { background: var(--ink); color: var(--bg); }
.tile--white { background: #ffffff; }
.tile--lake { background: var(--accent); color: var(--accent-ink); }
.tile--putty, .tile--white { color: var(--muted); }
.tile--wide { grid-column: 1 / -1; min-height: 14rem; }
.brand__build { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.brand__build-art { grid-column: 1 / 7; display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); background: var(--surface); padding: 2.5rem; }
.brand__build-art img { width: 100%; height: auto; }
.brand__build-art img:first-child { grid-row: span 2; }
.brand__build-text { grid-column: 8 / -1; display: grid; gap: 1.25rem; }
.brand__build-text p { max-width: 46ch; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.swatches li { display: grid; gap: 0.25rem; }
.swatch { display: block; aspect-ratio: 4 / 3; margin-bottom: 0.75rem; background: var(--swatch); border: 0.75rem solid var(--surface); }
.swatches small { color: var(--muted); font-size: var(--step-small); }
.brand__type p { max-width: 60ch; }
.brand__specimen { font-size: var(--step-head); letter-spacing: -0.02em; line-height: 1; }
.brand__specimen--wide { font-weight: 600; font-stretch: 125%; letter-spacing: 0.04em; }
.downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem var(--gutter); padding-bottom: 8rem; }

@media (max-width: 48em) {
  .brand__grid, .swatches, .downloads { grid-template-columns: 1fr; }
  .brand__build-art, .brand__build-text { grid-column: 1 / -1; }
  .brand__build { row-gap: 2rem; }
  .tile { min-height: 16rem; }
}