/* Brand assets page. Extends styles.css and press.css. Every section: copy in the 411 column, specimens in the 845. */
.brand-note{font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:var(--body);max-width:411px}
.brand-note+.brand-note{margin-top:clamp(16px,1.7vw,24px)}
.brand-note.small{font-size:clamp(13px,1.1vw,16px)}
.brand-note a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule)}
/* h2 (heading order: h1 > h2), sized as sub-heads, not as the press display h2 */
.press .brand-sub{font-size:clamp(20px,1.67vw,24px);font-weight:500;letter-spacing:0;line-height:1.3;margin:0 0 12px}
.stack{display:flex;flex-direction:column;gap:clamp(24px,2.8vw,40px)}

.brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.brand-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{margin:0;border:1px solid var(--rule);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tile>img{width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;padding:clamp(24px,14%,56px);box-sizing:border-box}
.tile-square>img{aspect-ratio:1;padding:clamp(20px,16%,48px)}
.brand-grid.three .tile-square>img{padding:clamp(16px,18%,40px)}
.tile-light{background:#fff}
.tile-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.tile figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:clamp(12px,1.5vw,16px) clamp(14px,2vw,24px);border-top:1px solid var(--rule);font-size:clamp(13px,1.1vw,16px);line-height:1.4}
.tile-dark figcaption{border-top-color:#333330}
.dl-links{display:flex;gap:14px;flex:none}
.dl-links a{font-weight:500;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule)}
.dl-links a:hover{opacity:.55}
.tile-dark .dl-links a{text-decoration-color:#777670}

.swatch-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.swatch-row li{display:flex;flex-direction:column;gap:4px;font-size:clamp(13px,1.1vw,16px);line-height:1.4;min-width:0}
.swatch-row li::before{content:"";display:block;aspect-ratio:2/1;border-radius:24px;background:var(--sw);border:1px solid var(--rule);margin-bottom:12px}
.swatch-row strong{font-weight:500;font-size:clamp(15px,1.25vw,18px)}
.swatch-row code{font:500 clamp(12px,1vw,14px)/1.4 Lufga,sans-serif;letter-spacing:.06em;color:var(--muted)}
.swatch-row .use{color:var(--body);margin-top:4px}
.swatch-row.neutrals{margin-top:clamp(24px,2.8vw,40px)}
.swatch-row.neutrals li::before{aspect-ratio:3/1}

.type-specimen{padding:0}
.type-display{font-size:clamp(36px,5vw,72px);font-weight:300;letter-spacing:-.028em;line-height:1.1;max-width:14ch;margin-top:-.12em}
.type-body{margin-top:clamp(20px,2.2vw,32px);font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:var(--body);max-width:60ch}

.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.press .rules-grid h2{font-size:clamp(20px,1.67vw,24px);font-weight:500;letter-spacing:0;line-height:1.3;margin-bottom:16px}
.rules-grid ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.rules-grid li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--body)}

@media(max-width:900px){
  .brand-note{max-width:none}
  .rules-grid{grid-template-columns:1fr}
  .swatch-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .brand-grid,.brand-grid.three{grid-template-columns:1fr}
  .tile figcaption{flex-direction:column;align-items:flex-start;gap:8px}
  .swatch-row{gap:16px}
}