/* The brand page: the night the site is set in for the header, the light
   panel for reading, and the artwork shown on the grounds it is made for.
   No scripts. */
:root {
  --night: #05070F;
  --glass: #0E1829;
  --navy: #002663;
  --panel: #DFE0E4;
  --face: #ECEDF0;
  --ink: #24282F;
  --soft: #4F545C;
  --rule: #CDD0D6;
  --blue: #0087EA;
  --deep: #005CAD;
  --cyan: #7FE3F7;
  --r: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--panel); color: var(--ink); font: 16px/1.6 Montserrat, ui-sans-serif, system-ui, sans-serif; }
a { color: var(--deep); text-underline-offset: 0.18em; }
img { display: block; max-width: 100%; height: auto; }

/* ── The header, on the night ── */
.hero {
  padding: 1.5rem max(1rem, calc((100% - 60rem) / 2)) 3.5rem;
  background:
    radial-gradient(60rem 26rem at 30% 0%, rgba(26, 42, 70, 0.9), transparent 70%),
    linear-gradient(180deg, transparent 70%, rgba(0, 201, 241, 0.08)),
    var(--night);
  color: #EAF2FB;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #00C9F1, #0087EA) 1;
}
.top a { color: rgba(214, 228, 242, 0.75); text-decoration: none; font-size: 0.9rem; }
.top a:hover { color: #fff; }
.hero__lockup { width: min(100%, 22rem); margin: 3rem 0 2.5rem; }
.eyebrow { margin: 0; font: 600 0.75rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan); }
h1 { margin: 0.6rem 0 0; font: 800 clamp(2.2rem, 5vw, 3.2rem)/1.05 Montserrat, sans-serif; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
.lead { max-width: 38rem; margin: 1rem 0 0; font-size: 1.05rem; color: rgba(232, 240, 250, 0.85); }

/* ── The sections ── */
main { max-width: 60rem; margin: 0 auto; padding: 1rem 1rem 4rem; }
section { padding-top: 2.75rem; }
h2 { margin: 0 0 0.4rem; font: 800 1.35rem/1.2 Montserrat, sans-serif; letter-spacing: -0.01em; text-transform: uppercase; }
h3 { margin: 0 0 0.5rem; font: 600 0.75rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep); }
section > p { max-width: 42rem; margin: 0 0 1.25rem; color: var(--soft); }
.fine { margin-top: 1rem; font-size: 0.85rem; }

/* Artwork on the ground it is made for, and its downloads under it. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.cards--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.card { margin: 0; overflow: hidden; border-radius: var(--r); background: var(--face); box-shadow: 0 1px 0 #fff inset, 0 10px 30px rgba(36, 40, 47, 0.12); }
.card__plate { display: grid; place-items: center; min-height: 11rem; padding: 2rem; }
.card__plate img { width: min(100%, 20rem); }
.card__plate--square img { width: min(70%, 9rem); }
.card__plate--night { background: radial-gradient(80% 120% at 30% 0%, #13213a, var(--night)); }
.card__plate--navy { background: var(--navy); }
.card__plate--panel { background: var(--panel); box-shadow: inset 0 -1px 0 var(--rule); }
figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; font-size: 0.9rem; font-weight: 600; }
.dl { display: flex; gap: 0.5rem; }
.dl a {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(160deg, #007ACC, #005FB8);
  color: #fff;
  font: 600 0.72rem/1.4 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-decoration: none;
}
.dl a:hover { filter: brightness(1.1); }
.dl a:focus-visible, .top a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Colour. */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.swatches li { display: grid; gap: 0.1rem; padding: 0 0 0.8rem; overflow: hidden; border-radius: var(--r); background: var(--face); box-shadow: 0 6px 18px rgba(36, 40, 47, 0.08); }
.swatches strong, .swatches code, .swatches small { padding: 0 0.85rem; }
.swatches strong { margin-top: 0.6rem; font-size: 0.9rem; }
.swatches code { font: 500 0.8rem 'IBM Plex Mono', ui-monospace, monospace; color: var(--soft); }
.swatches small { font-size: 0.78rem; color: var(--soft); }
.chip { display: block; height: 4.5rem; }
.chip--night { background: #05070F; }
.chip--glass { background: #0E1829; }
.chip--navy { background: #002663; }
.chip--blue { background: #0087EA; }
.chip--bright { background: #00C9F1; }
.chip--deep { background: #005CAD; }
.chip--cyan { background: #7FE3F7; }
.chip--panel { background: #DFE0E4; box-shadow: inset 0 -1px 0 var(--rule); }
.chip--ink { background: #24282F; }

/* Type. */
.specimens { display: grid; gap: 0.75rem; }
.specimen { padding: 1.25rem 1.4rem; border-radius: var(--r); background: var(--face); box-shadow: 0 6px 18px rgba(36, 40, 47, 0.08); }
.specimen p { margin: 0; color: var(--soft); font-size: 0.9rem; }
.specimen p strong { color: var(--ink); }
.specimen .specimen__face { margin-bottom: 0.6rem; color: var(--ink); font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.15; overflow-wrap: anywhere; }
.specimen__face--display { font-family: 'Bruno Ace SC', Montserrat, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
.specimen__face--headline { font-family: Montserrat, sans-serif; font-weight: 800; letter-spacing: -0.025em; text-transform: uppercase; }
.specimen__face--mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; letter-spacing: 0.08em; }
.specimen__face--flap { font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif; font-weight: 700; letter-spacing: 0.12em; }

/* Rules. */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.rules > div { padding: 1.25rem 1.4rem; border-radius: var(--r); background: var(--face); box-shadow: 0 6px 18px rgba(36, 40, 47, 0.08); }
.rules ul { margin: 0; padding-left: 1.1rem; color: var(--soft); font-size: 0.92rem; }
.rules li + li { margin-top: 0.4rem; }

/* Names. */
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.5rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
th { width: 10rem; font-weight: 600; color: var(--soft); }

footer { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--soft); font-size: 0.9rem; }

@media (prefers-color-scheme: dark) {
  :root { --panel: #0F1725; --face: #162234; --ink: #E8F2FA; --soft: #A9BBCD; --rule: #283B52; --deep: #6EA8FF; }
  .card, .swatches li, .specimen, .rules > div { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
  .card__plate--panel { background: #DFE0E4; }
}