/* pages/brand.css: the public brand guidelines. */

.brand-section { padding-block: var(--s-8); border-top: 1px solid var(--rule); }
.brand-section > h2 { margin-bottom: var(--s-4); }
.brand-note { color: var(--text-2); }
.brand-note + .brand-note { margin-top: var(--s-3); }
.brand-sub { margin-top: var(--s-8); margin-bottom: var(--s-3); }

.tile-paper { background: #FFFFFF; color: #56607A; border: 1px solid var(--rule); }
.tile-blue { background: #1F4FFF; color: #FFFFFF; }
.tile-navy { background: #0B1640; color: #FFFFFF; border: 1px solid var(--rule); }

.tile-caption { font-size: var(--small-size); font-weight: 600; }

/* The mark */
.mark-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.mark-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 240px;
  padding: var(--s-5);
  border-radius: var(--r-lg);
}

.mark-img { width: 112px; height: 112px; align-self: center; }

.download-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  margin-top: var(--s-5);
  padding: 0;
  list-style: none;
  color: var(--text-2);
}
.download-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Wordmark */
.lockup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
}

.lockup-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 240px;
  margin: 0;
  padding: var(--s-5);
  border-radius: var(--r-lg);
}

.lockup-art { display: grid; place-items: center; flex: 1; }
.lockup-art .lockup-svg { width: min(100%, 260px); }
.lockup-art .lockup-stacked { width: min(100%, 200px); height: auto; }

/* The lockup tiles show the brand files as they are, whatever the page theme. */
.tile-paper .lk-mark, .tile-paper .lk-m { stroke: #1F4FFF; }
.tile-paper .lk-pixel { fill: #1F4FFF; }
.tile-paper .lk-name { fill: #0B1640; }
.tile-paper .lk-sub { fill: #56607A; }
.on-blue .lk-mark, .on-blue .lk-m { stroke: #FFFFFF; }
.on-blue .lk-pixel { fill: #FFFFFF; }
.on-blue .lk-name { fill: #FFFFFF; }
.on-blue .lk-sub { fill: #C9D4FF; }

/* Clear space and size */
.space-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-7);
  align-items: center;
  margin-top: var(--s-6);
}

.space-demo { margin: 0; }
.space-box {
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
  margin-bottom: var(--s-3);
  border: 2px dashed var(--link);
  border-radius: var(--r-md);
  background: #FFFFFF;
}
.space-mark { width: 150px; height: 150px; }

.size-row { display: flex; align-items: flex-end; gap: var(--s-6); margin-bottom: var(--s-5); }
.size-16 { width: 16px; height: 16px; }
.size-24 { width: 24px; height: 24px; }
.size-48 { width: 48px; height: 48px; }

code { font-family: inherit; font-weight: 600; color: var(--text); }

/* Color */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--s-5) var(--s-4);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.swatch { display: flex; flex-direction: column; gap: 2px; max-width: none; }
.swatch-chip {
  display: block;
  height: 96px;
  margin-bottom: var(--s-3);
  border-radius: var(--r-md);
}
.swatch-name { font-weight: 800; }
.swatch-hex { color: var(--text-2); font-size: var(--small-size); font-variant-numeric: tabular-nums; }
.swatch-use { color: var(--text-2); font-size: var(--small-size); }

.sw-blue { background: #1F4FFF; }
.sw-navy { background: #0B1640; }
.sw-yellow { background: #FFC800; }
.sw-red { background: #F23A2F; }
.sw-mist { background: #F3F5FA; border: 1px solid var(--rule); }
.sw-paper { background: #FFFFFF; border: 1px solid var(--rule); }
.sw-orange { background: #FF7A1A; }
.sw-green { background: #12B886; }
.sw-violet { background: #7B3FE4; }

/* Type */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin-block: var(--s-6);
}
.type-sample { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.type-specimen-display {
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--h1-size);
  line-height: 1;
  letter-spacing: -0.02em;
}
.type-specimen-body {
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--h1-size);
  line-height: 1;
}

/* Endorsement */
.endorse-demo {
  margin-block: var(--s-6);
  padding: var(--s-7) var(--s-6);
  border-radius: var(--r-xl);
  color: #0B1640;
}
.field-yellow { background: #FFC800; }
.endorse-app { font-family: var(--font-display); font-weight: 700; font-size: var(--h2-size); line-height: 1.1; }
.endorse-demo .endorse { margin-top: var(--s-2); font-size: calc(var(--lead-size) * 0.8 / 0.8); }
.endorse-demo .tk-arm { stroke: #1F4FFF; }

/* Don'ts */
.dont-list { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding-left: 1.2em; }

@media (max-width: 900px) {
  .mark-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lockup-grid, .space-grid, .type-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .mark-tile { min-height: 190px; padding: var(--s-4); }
  .mark-img { width: 84px; height: 84px; }
  .space-box { width: 200px; height: 200px; }
  .space-mark { width: 120px; height: 120px; }
}