/* Composition for /brand/, the public brand pack page. Identity comes from brand.css and the
   header, footer, bands and index rows come from root.css: this sheet adds only what a page
   of downloadable assets needs, which is tiles that carry their own ground and a swatch grid.
   No inline styles anywhere: the site's CSP is style-src 'self' with no unsafe-inline. */

/* ---------- intro ---------- */

.pack-head { display: grid; gap: 1.25rem; max-width: 44rem; }
.pack-head h1 { max-width: 16ch; }
.pack-get { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .75rem; }

/* ---------- asset grids ---------- */

/* Two widths only: square assets sit four to a desktop row, wide assets two. Both collapse
   to one column on a phone before the tile drops under 15rem, which is where a 1280px banner
   stops being readable as a picture of itself. */
.assets { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.assets-sq { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.assets-wide { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
@media (max-width: 30rem) {
  .assets-wide { grid-template-columns: 1fr; }
}

.asset { margin: 0; display: grid; gap: .625rem; align-content: start; }

/* The tile carries the ground the asset is drawn for, so a paper-coloured mark is never shown
   floating on night and read as a mistake. The border is the site's own hairline. */
.tile {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.tile-night { background: var(--night); }
.tile-paper { background: var(--paper); }
.tile-sq { aspect-ratio: 1; }
.tile-wide { aspect-ratio: 2 / 1; }
.tile-flat { aspect-ratio: 5 / 1; }
.tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* The avatars and the banners are pictures with their own ground, so they fill the tile edge
   to edge rather than sitting inside its padding. */
.tile-full { padding: 0; }
.tile-full img { width: 100%; height: 100%; }

.asset-meta { display: grid; gap: .35rem; }
.asset-meta .name { color: var(--ink); }
.asset-meta .dims { color: var(--ink-dim); }

/* Download row: the label voice, one line, the file kind as the link text. */
.files { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.files a {
  font-family: var(--label);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: 1.4;
}
.files a:hover { border-bottom-color: var(--accent-text); }

/* ---------- colour ---------- */

/* The hairline grid is drawn by each cell's own outline, which sits in the 1px gap and
   overlaps its neighbour's. A background on the container would draw itself in the empty
   cells of the last row instead, which reads as a stray grey block rather than a rule. */
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
@media (min-width: 46rem) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.swatch { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: center; background: var(--bg); padding: .875rem 1rem; outline: 1px solid var(--line); }
.chip { width: 3.5rem; height: 3.5rem; border: 1px solid var(--line-2); }
.swatch-body { display: grid; gap: .15rem; min-width: 0; }
.swatch-body .token { font-family: var(--label); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink); overflow-wrap: anywhere; }
.swatch-body .hex { font-family: var(--label); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink-dim); }
.swatch-body .use { color: var(--ink-mute); font-size: .9375rem; line-height: 1.45; }

/* One class per token, because a CSP with no unsafe-inline forbids style="" on a swatch. */
.c-paper { background: #F6F3EC; }
.c-paper-1 { background: #EEEAE0; }
.c-paper-line { background: #DFDDD6; }
.c-paper-line-2 { background: #C4C2BB; }
.c-paper-ink { background: #14120F; }
.c-paper-ink-body { background: #3A3631; }
.c-paper-ink-mute { background: #5E5850; }
.c-paper-ink-dim { background: #6F6862; }
.c-night { background: #0E0D0B; }
.c-night-1 { background: #151310; }
.c-night-line { background: #252421; }
.c-night-line-2 { background: #403F3B; }
.c-night-ink { background: #F3EFE6; }
.c-night-ink-body { background: #D6D0C4; }
.c-night-ink-mute { background: #A39C90; }
.c-night-ink-dim { background: #857E73; }
.c-ember { background: #C64518; }
.c-ember-ink { background: #B53E13; }
.c-ember-light { background: #FF7A50; }

/* ---------- type ---------- */

.type-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.type-row { border-bottom: 1px solid var(--line); padding-block: clamp(1.125rem, 2.4vw, 1.75rem); display: grid; gap: .5rem; }
@media (min-width: 60rem) {
  .type-row { grid-template-columns: 11rem minmax(0, 1fr); gap: 2.5rem; align-items: baseline; }
}
.type-spec { color: var(--ink); overflow-wrap: anywhere; }
.spec-hero { font-size: var(--fs-hero); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
.spec-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.spec-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.spec-lede { font-size: var(--fs-lede); font-weight: 400; line-height: 1.55; }
.spec-body { font-size: var(--fs-body); font-weight: 400; line-height: 1.6; color: var(--ink-body); }

/* ---------- the closing note ---------- */

.pack-note { display: grid; gap: 1rem; max-width: 44rem; }