/* ==========================================================================
   The Great Exhibition 2026 — brand system
   Concept: "In frame". A night-navy stage; lime viewfinder brackets frame
   what matters; each zone owns a colour and a shape (leaf / bolt / shield).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=IBM+Plex+Mono:wght@400;500;600&family=Zilla+Slab:wght@600;700&display=swap');

:root {
  /* Colour */
  --ink: #040A22;        /* page ground: night navy */
  --ink-2: #071036;      /* lower surfaces */
  --navy: #0B1A4D;       /* raised surfaces */
  --navy-2: #15296E;     /* hover / strong lines */
  --line: rgba(170, 190, 255, .14);
  --line-strong: rgba(200, 214, 255, .34);
  --text: #EEF2FF;
  --muted: #9EAAD0;
  --feed: #C8DC2E;       /* We Feed — lime, also the frame colour */
  --power: #3CC47C;      /* We Power — green */
  --protect: #3B86EA;    /* We Protect — blue */
  --grow: #C3CCF2;       /* Invest & Grow — silver, cross-cutting */
  --paper: #F2F4FA;
  --paper-ink: #0B1A4D;
  --paper-muted: #56618C;
  --paper-line: #D6DCEF;

  /* Type */
  --f-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-slab: 'Zilla Slab', Rockwell, 'Roboto Slab', Georgia, serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  color-scheme: dark;
}

[data-z="feed"]    { --zc: var(--feed); }
[data-z="power"]   { --zc: var(--power); }
[data-z="protect"] { --zc: var(--protect); }
[data-z="grow"]    { --zc: var(--grow); }

/* ---------- Wordmark ---------------------------------------------------- */
/* Stacked: slab "the" / expanded GREAT / condensed EXHIBITION. Size with font-size. */
.wm {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: var(--f-display); color: var(--text);
  text-transform: uppercase; line-height: .84; white-space: nowrap;
}
.wm-the {
  font-family: var(--f-slab); font-weight: 700; text-transform: none;
  font-size: .44em; line-height: 1; letter-spacing: -.015em; margin-bottom: .02em;
}
.wm-great { font-weight: 900; font-stretch: 125%; font-size: 1em; letter-spacing: -.035em; }
.wm-exh   { font-weight: 800; font-stretch: 62%;  font-size: 1.07em; letter-spacing: -.012em; }

/* One-line lockup for nav, footers, social */
.wm--line { flex-direction: row; align-items: baseline; gap: .2em; line-height: 1; }
.wm--line .wm-the { font-size: .62em; margin: 0; }
.wm--line .wm-exh { font-size: 1.06em; }

/* ---------- Frame device (viewfinder brackets) ------------------------- */
.frame { position: relative; }
.frame::before {
  content: ""; position: absolute; inset: var(--fi, 0); pointer-events: none;
  --c: var(--fc, var(--feed)); --l: var(--fl, 28px); --t: var(--ft, 3px);
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 0 0 / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 0 100% / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--t) var(--l);
  background-repeat: no-repeat;
  transition: inset .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
}

/* ---------- Zone squares (echo the CCA mark) --------------------------- */
.squares { display: inline-flex; gap: .28em; vertical-align: middle; }
.squares i { width: .62em; height: .62em; display: block; }
.squares i:nth-child(1) { background: var(--feed); }
.squares i:nth-child(2) { background: var(--power); }
.squares i:nth-child(3) { background: var(--protect); }

/* ---------- Zone tag --------------------------------------------------- */
.zt {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.zt::before { content: ""; width: .8em; height: .8em; background: var(--zc, var(--muted)); flex: none; }

/* ---------- Buttons ---------------------------------------------------- */
.btn {
  --bg: var(--feed); --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  padding: 1em 1.45em; background: var(--bg); color: var(--fg);
  font-family: var(--f-display); font-weight: 800; font-stretch: 88%;
  font-size: 15px; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer; line-height: 1; white-space: nowrap;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px var(--bg); }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.btn--sm { padding: .8em 1.1em; font-size: 13px; }
.btn--ink { --bg: var(--ink); --fg: var(--text); }

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}