/* The graphic profile (/design): the flag with its meaning, the palette, the
   type, the icons, the backdrops, the state signs and the banners. A gallery
   on paper: pictures full width, black rules, captions in small type. Uses
   the tokens of site.css. */

.design-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0 0 2rem; padding: 0.6rem 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); }
.design-toc a {
  font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; text-decoration: none;
}
.design-toc a:hover { text-decoration: underline; }

.design-section { margin: 0 0 3rem; }
.design-section > h2 { padding-top: 0.75rem; background: var(--poster-rule) top left / 100% 4px no-repeat; }
.design-note { color: var(--ink-soft); font-size: 0.9rem; }
.design-section img { display: block; max-width: 100%; height: auto; }

/* The flag and its meaning, side by side where there is room. */
.design-flag { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; }
.design-flag__image { width: 100%; box-shadow: 0 0 0 1px var(--rule); }
.design-flag__meaning .lede { margin-top: 0; }
.design-meaning { margin: 0; }
.design-meaning dt { font-weight: 800; font-stretch: 112%; margin-top: 0.6rem; }
.design-meaning dd { margin: 0.1rem 0 0; }
.design-figure { margin: 2rem 0 0; }
.design-figure img { width: 100%; border: 1px solid var(--rule); }
.design-pixel { image-rendering: pixelated; }
.design-figure figcaption { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.4rem; }

.design-downloads { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.9rem; }

/* Colours: a chip and its facts. */
.design-palette { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem 1.25rem; }
.design-swatch { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 0.75rem; align-items: start; }
.design-swatch__chip { grid-row: span 4; width: 3.5rem; height: 3.5rem; box-shadow: inset 0 0 0 1px var(--rule); }
.design-swatch__use, .design-swatch__mc { font-size: 0.85rem; }
.design-swatch__mc { color: var(--ink-soft); }
.design-swatch--red { background: var(--red); }
.design-swatch--red-deep { background: var(--red-deep); }
.design-swatch--flag-gold { background: var(--flag-gold); }
.design-swatch--gold { background: var(--gold); }
.design-swatch--gold-light { background: var(--gold-light); }
.design-swatch--cream { background: var(--cream); }
.design-swatch--black { background: var(--black); }
.design-swatch--steel { background: var(--steel); }

/* Type: each voice set in itself. */
.design-type { list-style: none; margin: 1rem 0 0; padding: 0; }
.design-type__row { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.design-type__sample { display: block; line-height: 1.1; margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.design-type__sample--0 { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 900; font-stretch: 125%; }
.design-type__sample--1 { font-size: 1.1rem; font-weight: 750; font-stretch: 115%; letter-spacing: 0.08em; color: var(--civic); }
.design-type__sample--2 { font-size: 1.05rem; font-weight: 450; }
.design-type__sample--3 { font-size: 1.6rem; font-weight: 700; font-stretch: 62%; }

/* Icons: a grid of red marks with their names. */
.design-icons { list-style: none; margin: 0.75rem 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
.design-icons li { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem 0.25rem; background: var(--paper-deep); font-size: 0.8rem; color: var(--ink-soft); }
.design-icons .icon { width: 2rem; height: 2rem; color: var(--civic); }

/* Backdrops: one per row, the picture full width. */
.design-backdrops { display: grid; gap: 2rem; }
.design-backdrop img { width: 100%; }
.design-backdrop h3 { margin: 0.75rem 0 0.25rem; }
.design-backdrop p { margin: 0 0 0.35rem; max-width: var(--measure); }

/* Signs: at twice their texture's size where there is room. */
.design-signs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.design-sign img { width: 100%; max-width: 48rem; }
.design-sign__name { display: block; font-weight: 800; font-stretch: 112%; margin-top: 0.4rem; }
.design-sign .design-note { display: block; }

/* Banners: a row of hanging banners. */
.design-banners { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1.25rem 1rem; }
.design-banner { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.design-banner img { width: 6.25rem; box-shadow: 0 0 0 1px var(--rule); }

@media (max-width: 40rem) {
  .design-flag { grid-template-columns: 1fr; }
}