/* Shared geometry and controls. Colours and typefaces live in colours.css. */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --page-gutter: clamp(20px, 5vw, 80px);
  --content-inset: max(var(--page-gutter), calc((100% - 1280px) / 2));
  --control-radius: 8px; --duration-ui: 180ms; --duration-enter: 360ms;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--ink); background: var(--lime); }
/* Live name in compact navigation; supplied outlined lockup where it has room. */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; max-width: 100%; min-width: 0; flex-shrink: 0; font: 550 1rem/1.05 var(--display); letter-spacing: 0; color: var(--paper); text-decoration: none; }
.brand > span { min-width: 0; overflow-wrap: anywhere; }
.brand-mark { display: block; flex: 0 0 auto; width: 40px; height: auto; }
.brand--lockup { width: min(280px, 100%); }
/* The supplied lockup has 56px left clear space in a 1240px viewBox; align its visible mark to the content rail. */
.brand-lockup { display: block; width: 100%; height: auto; margin-inline-start: -4.516129%; }
@media (max-width: 600px) { .brand:not(.brand--lockup) { font-size: .875rem; } .brand-mark { width: 34px; } }
.button {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); max-width: 100%; min-height: 58px;
  padding: 10px 10px 10px var(--space-5); border: 1px solid transparent; border-radius: 999px;
  font: 700 1rem/1.35 var(--body); text-decoration: none; overflow-wrap: anywhere;
}
.button, .button.lime { background: var(--lime); color: var(--ink); }
.button-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--lime); }
.button-icon .icon { width: 20px; height: 20px; stroke-width: 2.5; }
.button:disabled { opacity: .65; cursor: default; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; font-size: 1rem; font-weight: 650; text-decoration: underline; text-underline-offset: .23em; text-decoration-thickness: 1px; }
.text-link > span { display: inline-flex; flex-shrink: 0; }
.button, .text-link { transition: color var(--duration-ui) var(--ease), background-color var(--duration-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) { .button:not(:disabled):hover { background: var(--action-hover); } }
@media (prefers-reduced-motion: reduce) { .button, .text-link { transition: none; } }