/* Logos page only. Temporary: remove this file with logos.html when Linda decides.
   Loaded after styles.css. Every rule is scoped to a logo class (.logo-grid, .logo-option,
   .logo-lockup, .logo-type or .logos-section), apart from the font faces below. */

/* ---------- Font faces ---------- */

/* DM Serif Display (SIL Open Font License, see assets/fonts/logos/). Used on this page only. */
@font-face {
  font-family: 'DM Serif Display';
  src: url('/assets/fonts/logos/dm-serif-display-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Anton (SIL Open Font License, see assets/fonts/OFL-anton.txt). */
@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Manrope for cards M to R, with weights 200 to 800 so that 300 renders as 300.
   styles.css declares Manrope for 500 to 800 only, so 300 would render at 500 there.
   styles.css is left as it is. Same file as styles.css. */
@font-face {
  font-family: 'Manrope Logos';
  src: url('/assets/fonts/manrope-v20-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Grid ---------- */

.logo-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 761px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Option card ---------- */

.logo-option {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

/* letter-spacing: the global h2 rule set this. The titles are h3 now, so it is set here. */
.logo-option__title {
  padding: 24px 24px 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Room for two lines, so the light panels in a row line up whatever the note length. */
.logo-option__note {
  min-height: 5em;
  padding: 8px 24px 20px;
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Panels ---------- */

/* Each panel sets the colours its marks use, so one SVG shows correctly on both.
   --logo-ink is the lockup text colour: the header brand uses gold-dark on white and gold on navy. */
.logo-option__panel {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  min-height: 180px;
  padding: 24px;
}

.logo-option__panel--light {
  --ring-a: var(--navy);
  --ring-b: var(--gold-mid);
  --ring-c: var(--gold);
  --mono-bg: var(--navy);
  --mono-fg: var(--gold);
  --steps-a: var(--navy);
  --steps-b: var(--gold-mid);
  --steps-c: var(--gold);
  --arch: var(--navy);
  --keystone: var(--gold);
  --logo-ink: var(--gold-dark);
  --logo-rule: var(--gold-mid);
  --logo-accent: #B8892E;
  --sun: #E2BE62;
  --sun-bar: #141824;
  --sun-rays: #B8892E;
  --stone-base: #141824;
  --stone-a: #141824;
  --stone-b: #B8892E;
  --stone-c: #E2BE62;
  --key-a: #141824;
  --key-b: #E2BE62;
  --blk-a: #141824;
  --blk-b: #E2BE62;
  --blk-c: #B8892E;
  --blk-d: #141824;
  --cmp-a: #141824;
  --cmp-b: #E2BE62;
  --cmp-dot: #F4EEE0;
  --brg-a: #141824;
  --brg-b: #B8892E;
  background: var(--cream);
}

.logo-option__panel--dark {
  --ring-a: var(--cream);
  --ring-b: var(--gold);
  --ring-c: var(--cream);
  --mono-bg: var(--gold);
  --mono-fg: var(--navy);
  --steps-a: var(--cream);
  --steps-b: var(--gold);
  --steps-c: var(--gold);
  --arch: var(--cream);
  --keystone: var(--gold);
  --logo-ink: var(--gold);
  --logo-rule: var(--gold);
  --logo-accent: #E2BE62;
  --sun: #E2BE62;
  --sun-bar: #F4EEE0;
  --sun-rays: #E2BE62;
  --stone-base: #F4EEE0;
  --stone-a: #F4EEE0;
  --stone-b: #B8892E;
  --stone-c: #E2BE62;
  --key-a: #E2BE62;
  --key-b: #F4EEE0;
  --blk-a: #F4EEE0;
  --blk-b: #E2BE62;
  --blk-c: #B8892E;
  --blk-d: #F4EEE0;
  --cmp-a: #F4EEE0;
  --cmp-b: #E2BE62;
  --cmp-dot: #141824;
  --brg-a: #F4EEE0;
  --brg-b: #E2BE62;
  background: var(--navy);
}

/* Cards in a row stretch to the same height. The navy panel takes the spare height, so no white strip shows under it. */
.logo-option__panel--dark { flex: 1 0 auto; }

/* ---------- Lockup ---------- */

/* The name's size is the unit. The mark, gap and sub line are in em, so the lockup scales as one.
   40px is the desktop size. The panel's inner width caps it (12.5cqi), so the lockup fits at 320px
   with room to spare, even with the fallback font. */
.logo-lockup {
  display: flex;
  align-items: center;
  gap: .35em;
  max-width: 100%;
  font-size: 40px;
  font-size: min(40px, 12.5cqi);
  color: var(--logo-ink);
}

.logo-lockup__mark {
  flex: none;
  width: 2.4em;
  height: 2.4em;
}

img.logo-lockup__mark { height: auto; }

.logo-lockup__text {
  display: flex;
  flex-direction: column;
  gap: .2em;
  min-width: 0;
  line-height: 1;
}

/* Matches the header wordmark: Manrope 700, 0.12em tracking. */
.logo-lockup__name {
  font-family: var(--font);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo-lockup__sub {
  font-size: max(10px, .3em);
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Option F: no mark. A 48 x 2px rule sits above the name, and the words are centred. */
.logo-lockup--text-only .logo-lockup__text {
  align-items: center;
  text-align: center;
}

.logo-lockup--text-only .logo-lockup__text::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: .15em;
  background: var(--logo-rule);
}

/* ---------- Small-size check ---------- */

.logo-option__small {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The mark at 32px high. The image keeps its own proportions. */
.logo-option__small-mark {
  flex: none;
  width: 32px;
  height: 32px;
}

img.logo-option__small-mark { width: auto; }

/* Option F: the word TRINITY at 18px. */
.logo-option__small-word {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--logo-ink);
}

.logo-option__small-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
}

/* ---------- Section headings ---------- */

.logos-section__title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.logos-section__lead {
  max-width: 60ch;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* The later sections start 24px after the marks section, which keeps its own bottom padding (48px). */
.logos-section { margin-top: 24px; padding-top: 0; }

/* ---------- Typography cards (M to R) ---------- */

/* The name takes the panel's text colour (--logo-ink), as the lockups do.
   Names that are too wide for a 320px phone panel use min(spec px, Ncqi), where cqi is 1% of the panel. */
.logo-type { line-height: 1; color: var(--logo-ink); }

.logo-type--m .logo-type__name { display: block; font-family: 'Manrope Logos', var(--font); font-weight: 800; font-size: 52px; line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.logo-type--m .logo-type__sub { display: block; margin-top: 12px; font-family: 'Manrope Logos', var(--font); font-weight: 700; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--logo-accent); }
.logo-type--n .logo-type__name { display: block; font-family: 'Manrope Logos', var(--font); font-weight: 300; font-size: min(40px, 15.1cqi); letter-spacing: .42em; text-transform: uppercase; }
.logo-type--n .logo-type__sub { display: block; margin-top: 12px; font-family: 'Manrope Logos', var(--font); font-weight: 500; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--logo-accent); }
.logo-type--o .logo-type__name { display: block; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.logo-type--o .logo-type__sub { display: block; margin-top: 10px; font-family: 'Manrope Logos', var(--font); font-weight: 700; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--logo-accent); }
.logo-type--p .logo-type__name { display: block; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 56px; line-height: 1; }
.logo-type--p .logo-type__sub { display: block; margin-top: 12px; font-family: 'Manrope Logos', var(--font); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--logo-accent); }
.logo-type--q { white-space: nowrap; font-family: 'Manrope Logos', var(--font); font-size: min(28px, 9.6cqi); letter-spacing: -.01em; }
.logo-type--q .logo-type__name { font-weight: 800; }
.logo-type--q .logo-type__sub { font-weight: 300; }
.logo-type--r .logo-type__name { display: block; font-family: 'DM Serif Display', serif; font-weight: 400; font-size: min(30px, 9.6cqi); line-height: 1; white-space: nowrap; }