@font-face {
  font-family: Gotham;
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("fonts/Gotham-Book.otf") format("opentype");
}
@font-face {
  font-family: Gotham;
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/Gotham-Medium.otf") format("opentype");
}
@font-face {
  font-family: Gotham;
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("fonts/Gotham-Bold.otf") format("opentype");
}
/* The heaviest cut Serafina ships. It is what the wordmark is set in. */
@font-face {
  font-family: Serafina;
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("fonts/SerafinaHeavyV2.otf") format("opentype");
}

/*
 * Shared foundation for the copley.com redesign concepts.
 * Tokens mirror public/brand/tokens.css as plain custom properties so a
 * non-Tailwind page can read them. Each concept layers its own system on top.
 */

:root {
  /* Brand */
  --blue: #0b6eba;
  --deep-blue: #06416f;
  --dark-blue: #07497c;
  --stroke-blue: #85b6dc;
  /* The same hue at 4.6:1, for the places the stroke colour is set on
     text rather than on a border or an SVG stroke. */
  --stroke-blue-ink: #3f7aa8;
  --light-blue: #e6f0f8;
  --light-blue-2: #e4f4ff;
  --divider-blue: #cee2f1;
  --light-saber: #64d9e2;

  /* Ink */
  --black: #191b1a;
  --charcoal: #484848;
  --slate: #70707b;
  /* 5.02:1 on white, 4.69:1 on --light-gray-2. It reads as the same quiet
     grey and passes AA at the 10px this is used at. */
  --quicksilver: #6f6f70;

  /* Surfaces + lines */
  --white: #ffffff;
  --light-gray: #fcfcfd;
  --light-gray-2: #f7f7f9;
  --frost: #efefef;
  --storm: #d6d6d6;
  --divider: #dddfe1;
  --divider-light: #d2d2d2;

  /* Status */
  --green: #15803d;
  --success-green: #d6ffef;
  --red: #dc2626;
  --yellow: #b58a09;
  --purple: #8b5cf6;

  /* Charts */
  --g-purple: #9f7aea;
  --g-teal: #38b2ac;
  --g-indigo: #667eea;
  --g-rose: #ed64a6;
  --g-orange: #ed8936;
  --g-cyan: #4fd1c5;
  --evergreen: #008071;
  --lagoon: #07ae98;
  --mint: #7fd6b1;

  /* Type
   * Gotham, self-hosted from assets/fonts and mapped the way /brand/fonts.css
   * maps it: Book for body, Medium for headings, Bold where a page asks for 700.
   * The @font-face rules name the files outright, so a single-weight Gotham
   * installed locally cannot hijack the other weights. Work Sans stays in the
   * stack as the open substitute the brand guide names. */
  --sans: 'Gotham', 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Serafina', 'Newsreader', Georgia, 'Times New Roman', serif;
  /* Deliberately system-only: nothing here is self-hosted, so naming a
     webfont just made a local preview of src/ render differently from the
     deployed site, which strips the Google Fonts link. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 10px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 0 0 1px rgb(16 24 40 / 0.04);
  --shadow-lift: 0 24px 48px -24px rgb(13 32 60 / 0.28), 0 2px 6px -2px rgb(13 32 60 / 0.10);

  --gradient: linear-gradient(to top left, #2c8ad1 0%, #25618d 30%, #1e3b4f 60%, #1a2328 83%, #191b1a 94%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--black);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* Shared page-nav that sits above every concept, so David can flip between
   them without going back to the index. Not part of any design. */
.concept-bar {
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgb(25 27 26 / 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px -12px rgb(13 32 60 / 0.5);
  font-size: 12px;
  color: #fff;
}
.concept-bar a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: rgb(255 255 255 / 0.55);
  font-variant-numeric: tabular-nums;
}
.concept-bar a:hover { color: #fff; background: rgb(255 255 255 / 0.12); }
.concept-bar a[aria-current='page'] { background: var(--blue); color: #fff; font-weight: 600; }
.concept-bar .concept-bar__name {
  padding: 0 10px 0 6px;
  color: rgb(255 255 255 / 0.65);
  white-space: nowrap;
}
.concept-bar .concept-bar__home {
  width: auto;
  padding: 0 10px;
  border-right: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 0;
  margin-right: 4px;
}
.concept-bar .concept-bar__home:hover { background: none; }

@media (max-width: 720px) {
  .concept-bar__name { display: none; }
}

/* The one button, shared by every page on the site. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap; cursor: pointer; font-family: inherit;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #1580d0; }
.btn--ghost { border-color: var(--divider-light); color: var(--black); background: #fff; }
.btn--ghost:hover { border-color: var(--stroke-blue); color: var(--blue); }
.btn--lg { height: 48px; padding: 0 26px; font-size: 15px; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* The blue bands are the brand blue, so the brand blue ring disappears into
   them. White is the only ring that reads on both ends of that gradient. */
.close .btn:focus-visible,
.de-close .btn:focus-visible { outline-color: #fff; }