/* Craics marketing site, token layer. Design System v2.0 aligned.
   Every colour, size, elevation and duration below is declared once here.
   No rule in this file, and no rule generated from the page, carries a raw value. */

:root {
  /* grounds and ink */
  --white: #ffffff;
  --paper: #f0f3ed;
  --paper-alt: #e9eee5;
  --paper-raised: #f5f8f2;
  --paper-rule: #d7ded1;
  --paper-edge: #dfe5d9;
  --paper-rule-soft: #dfe6da;
  --paper-rule-firm: #c3cbbe;
  --paper-tint: #e4eade;
  --paper-hover: #e6ebe4;
  --ink: #15171a;
  --ink-press: #000000;
  --ink-2: #3d424a;
  --ink-3: #4c5057;
  --ink-4: #5b6068;
  --ink-quiet: #8c9199;
  --ink-faint: #a8adb5;
  --ink-ghost: #c3c7cd;
  --surface-panel: #fbfbfc;
  --surface-sunken: #f4f5f7;
  --row-rule: #f0f1f3;
  --window-rule: #e4e6ea;
  --window-rule-soft: #eceef0;
  --chrome-rule: #d9dce1;
  --chrome-rule-2: #dcdfe4;
  --chrome-rule-3: #e0e2e6;
  --band: #12211c;
  --band-rule: #23302b;
  --band-rule-2: #33373d;
  --on-band: #b9bdc4;
  --on-band-2: #9aa0a8;
  --on-band-3: #6d737b;
  --on-band-4: #6f7a74;
  --savings: #35664f;
  --savings-on-dark: #7fb497;
  --cited-row: #f0e3cd;
  --cited-ink: #5b5240;
  --exception-mark: #d9a13f;
  --exception: #c9861a;
  --exception-strong: #8a5a12;
  --redline: #8f3a2e;
  --redline-on-dark: #d98a7a;
  --draft-line: #a8a396;
  --draft-line-soft: #c9c3b5;
  --draft-line-firm: #6f6a5e;

  /* layout: grounds run edge to edge, the content column stays centred at 1280 */
  --content-max: 1280px;
  --gut: max(clamp(20px, 3.4vw, 44px), calc((100% - 1280px) / 2 + clamp(20px, 3.4vw, 44px)));
  --tour-window: 920px;

  /* elevation, app windows only */
  --elev-window: 0 1px 2px rgba(20, 30, 24, .14), 0 14px 34px -8px rgba(20, 30, 24, .20);

  /* rule weights, exactly two across the page */
  --rule-opener: 2px;
  --rule-internal: 1px;

  /* type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-figure: 'Azeret Mono', ui-monospace, SFMono-Regular, monospace;
  --wdth-monument: 125;
  --wdth-heading: 118;
  --wght-monument: 800;

  /* interaction durations */
  --dur-press: 120ms;
  --dur-fast: 140ms;
  --dur-mid: 150ms;
  --dur-underline: 160ms;
  --dur-nav-reveal: 280ms;

  /* motion durations, mirrored by the constants in the motion layer */
  --dur-digit-rise: 620ms;
  --dur-hero-rule: 640ms;
  --dur-hero-text: 560ms;
  --dur-hero-label: 380ms;
  --dur-rule-draw: 720ms;
  --dur-cloud-draw: 760ms;
  --dur-lift: 620ms;
  --dur-stamp: 420ms;
  --dur-count: 1000ms;

  /* easing, ease out on an exponential curve. Nothing elastic. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* focus */
  --focus-width: 2px;
  --focus-offset: 3px;
}

html, body { margin: 0; background: var(--paper); overflow-x: hidden; }

/* Seats drafting leaders point across the column gap. Below 931px the seats grid
   collapses to one column, the copy moves under its sheet fragment, and a leader would
   point at nothing and past the page frame, so it is withdrawn. */
@media (max-width: 931px) { [data-leader-line] { display: none; } }

/* Pre-paint start state, switched on by the inline head script. visibility, not display,
   so every figure keeps its box and nothing shifts when the count begins. */
html[data-prep] [data-count] { visibility: hidden; }
html[data-prep] [data-sheet="elevation"],
html[data-prep] [data-sheet="cloud"] { clip-path: inset(0 100% 0 0); }
html[data-prep] [data-sheet="dim"] { transform: scaleX(0); transform-origin: left center; }
html[data-prep] [data-sheet="settle"],
html[data-prep] [data-sheet="date"] { opacity: 0; }
* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-2); }
::selection { background: var(--ink); color: var(--white); }

/* every interactive element gets the ink focus ring, never the browser default */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-width) solid var(--ink);
  outline-offset: var(--focus-offset);
}

/* generated state rules, one class per element that carries a hover, active or focus state.
   !important is required because the page carries its base declarations inline. */
.x1:hover { background-size:100% 1px !important;color:var(--ink) !important }
.x1:focus-visible { outline:2px solid var(--ink) !important;outline-offset:4px !important }
.x2:hover { background-size:100% 1px !important;color:var(--ink) !important }
.x2:focus-visible { outline:2px solid var(--ink) !important;outline-offset:4px !important }
.x3:hover { background-size:100% 1px !important;color:var(--ink) !important }
.x3:focus-visible { outline:2px solid var(--ink) !important;outline-offset:4px !important }
.x4:hover { background-size:100% 1px !important;color:var(--ink) !important }
.x4:focus-visible { outline:2px solid var(--ink) !important;outline-offset:4px !important }
.x5:hover { background:var(--ink-press) !important }
.x5:active { transform:translateY(1px) !important }
.x5:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }
.x6:hover { background:var(--ink-press) !important }
.x6:active { transform:translateY(1px) !important }
.x6:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }
.x7:hover { background:var(--ink) !important;color:var(--white) !important }
.x7:active { transform:translateY(1px) !important }
.x7:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }
.x8:hover { background:var(--surface-sunken) !important;color:var(--ink) !important }
.x9:hover { background:var(--surface-sunken) !important;color:var(--ink) !important }
.x10:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x11:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x12:hover { background:var(--surface-sunken) !important }
.x13:hover { background:var(--surface-sunken) !important }
.x14:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x15:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x16:hover { background:var(--surface-sunken) !important }
.x17:hover { background:var(--surface-sunken) !important }
.x18:hover { background:var(--surface-sunken) !important }
.x19:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x20:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x21:hover { background:var(--surface-sunken) !important }
.x22:hover { background:var(--surface-sunken) !important }
.x23:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x24:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x25:hover { color:var(--ink) !important }
.x25:active { transform:translateY(1px) !important }
.x25:focus-visible { outline:2px solid var(--ink) !important;outline-offset:2px !important }
.x26:hover { color:var(--ink) !important }
.x26:active { transform:translateY(1px) !important }
.x26:focus-visible { outline:2px solid var(--ink) !important;outline-offset:2px !important }
.x27:hover { color:var(--ink) !important }
.x27:active { transform:translateY(1px) !important }
.x27:focus-visible { outline:2px solid var(--ink) !important;outline-offset:2px !important }
.x28:hover { background:var(--ink) !important;color:var(--white) !important }
.x29:hover { background:var(--ink-press) !important }
.x30:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x31:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x32:hover { background:var(--surface-sunken) !important }
.x33:hover { background:var(--surface-sunken) !important }
.x34:hover { background:var(--surface-sunken) !important }
.x35:hover { background:var(--ink) !important;color:var(--white) !important }
.x36:hover { background:var(--ink-press) !important }
.x37:hover { background:var(--surface-sunken) !important }
.x38:hover { background:var(--surface-sunken) !important }
.x39:hover { background:var(--surface-sunken) !important }
.x40:hover { background:var(--surface-sunken) !important }
.x41:hover { background:var(--surface-sunken) !important }
.x42:hover { background:var(--ink) !important;color:var(--white) !important }
.x43:hover { background:var(--ink-press) !important }
.x44:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x45:hover { border-color:var(--ink) !important;color:var(--ink) !important }
.x46:hover { background:var(--surface-sunken) !important }
.x47:hover { background:var(--surface-sunken) !important }
.x48:hover { background:var(--surface-sunken) !important }
.x49:hover { background:var(--ink-press) !important }
.x50:hover { background:var(--surface-sunken) !important }
.x51:hover { background:var(--surface-sunken) !important }
.x52:hover { background:var(--surface-sunken) !important }
.x53:hover { background:var(--surface-sunken) !important }
.x54:hover { background:var(--surface-sunken) !important }
.x55:hover { background:var(--surface-sunken) !important }
.x56:hover { background:var(--surface-sunken) !important }
.x57:hover { background:var(--surface-sunken) !important }
.x58:hover { background:var(--surface-sunken) !important }
.x59:hover { background:var(--surface-sunken) !important }
.x60:hover { background:var(--surface-sunken) !important }
.x61:hover { background:var(--surface-sunken) !important }
.x62:hover { background:var(--surface-sunken) !important }
.x63:hover { background:var(--surface-sunken) !important }
.x64:hover { background:var(--surface-sunken) !important }
.x65:hover { background:var(--ink-press) !important }
.x65:active { transform:translateY(1px) !important }
.x65:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }
.x66:hover { background:var(--paper-hover) !important }
.x66:active { transform:translateY(1px) !important }
.x66:focus-visible { outline:2px solid var(--white) !important;outline-offset:3px !important }
.x67:hover { background:var(--white) !important;color:var(--band) !important;border-color:var(--white) !important }
.x67:active { transform:translateY(1px) !important }
.x67:focus-visible { outline:2px solid var(--white) !important;outline-offset:3px !important }
.x68:hover { background-size:100% 1px !important;color:var(--white) !important }
.x68:focus-visible { outline:2px solid var(--white) !important;outline-offset:3px !important }
.x69:hover { background-size:100% 1px !important;color:var(--white) !important }
.x69:focus-visible { outline:2px solid var(--white) !important;outline-offset:3px !important }
.x70:hover { background-size:100% 1px !important;color:var(--white) !important }
.x70:focus-visible { outline:2px solid var(--white) !important;outline-offset:3px !important }

.x71:hover { background:var(--ink-press) !important }
.x71:active { transform:translateY(1px) !important }
.x71:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }
.x72:hover { background:var(--ink) !important;color:var(--white) !important }
.x72:active { transform:translateY(1px) !important }
.x72:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }
.x73:hover { background:var(--ink-press) !important }
.x73:active { transform:translateY(1px) !important }
.x73:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }
.x74:hover { color:var(--ink) !important;text-decoration-color:var(--ink) !important }
.x74:focus-visible { outline:2px solid var(--ink) !important;outline-offset:3px !important }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* Reveal nav. The bar hides on the way down and returns on the way up, at any depth.
   Everything here is gated on html.navreveal, which only the script adds, so with
   scripting off the nav stays exactly where it is authored, in flow, at the top of
   the page. The spacer holds the nav's height once the nav leaves the flow, which is
   what keeps the hero from jumping at the moment the class lands. */
#navspacer { height: 0 }

html.navreveal #nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--paper);
  transform: translateY(0);
  transition: transform var(--dur-nav-reveal) var(--ease-out);
  will-change: transform;
}
/* 101% so the 2px bottom rule clears the viewport edge and leaves no hairline */
html.navreveal #nav.is-hidden { transform: translateY(-101%) }
html.navreveal #navspacer { height: var(--navh, 0px) }
/* anchor targets land below the bar rather than under it */
html.navreveal { scroll-padding-top: calc(var(--navh, 0px) + 10px) }