/* Shared foundation for every page in /homepage: tokens, type, pills, menu, wordmark. */
:root {
  --bg: #f4f4f3;
  --white: #ffffff;
  --ink: #0b0b0b;
  --muted: rgba(11, 11, 11, 0.58);
  --yellow: #ffc700;
  --paper: #f1efea;
  --gray-top: #0c0b0a;
  --gray-bottom: #3b3a37;
  --serif: "Newsreader", "Times New Roman", serif;
  --sans: "Archivo", Arial, sans-serif;
  --gutter: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a, button { color: inherit; text-decoration: none; cursor: pointer; font: inherit; }
button { background: none; border: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--yellow); color: #000; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* Micro-label: the small tracked caps used across the site */
.label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3;
}

/* Pills (the live site's button shape) */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 14.5px; letter-spacing: 0.02em;
  border-radius: 300px; border: 1px solid var(--ink);
  transition: transform 0.2s var(--ease), background-color 0.2s ease, color 0.2s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill--yellow { background: var(--yellow); color: #000; height: 56px; padding: 0 30px; }
.pill--yellow:hover { background: #ffd333; }

/* Wordmark (sub pages) and menu button. Difference blend keeps both legible on light and dark. */
.wordmark {
  position: fixed; top: 20px; left: 24px; z-index: 50;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: #fff; mix-blend-mode: difference;
}
.wordmark svg { width: 22px; height: 22px; }
.menu-btn {
  position: fixed; top: 20px; right: 24px; z-index: 50;
  width: 40px; height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: #fff; mix-blend-mode: difference;
}
.menu-btn span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
body.menu-open .menu-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu links: small type that slides out to the left of the icon, always in one row. Same blend as the icon. */
.menu-links {
  position: fixed; top: 20px; right: 74px; z-index: 49; height: 40px;
  display: flex; flex-direction: row; align-items: center; gap: 30px;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.menu-links a {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateX(18px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease);
}
body.menu-open .menu-links { pointer-events: auto; }
body.menu-open .menu-links a { opacity: 1; transform: none; }
body.menu-open .menu-links a:nth-child(3) { transition-delay: 0.02s; }
body.menu-open .menu-links a:nth-child(2) { transition-delay: 0.06s; }
body.menu-open .menu-links a:nth-child(1) { transition-delay: 0.1s; }
.menu-links a:hover { opacity: 0.6 !important; }
.menu-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.wordmark { transition: opacity 0.25s ease; }

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .wordmark { top: 14px; left: 12px; }
  .menu-btn { right: 12px; top: 14px; }
  .menu-links { right: 56px; top: 14px; gap: 16px; }
  .menu-links a { font-size: 10px; letter-spacing: 0.1em; }
  body.menu-open .wordmark { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

/* Cover shown for a moment when arriving from a homepage button: same colour the button's panel grew into, then it fades out */
html[data-hf]::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; animation: hfOut 0.8s 0.12s ease forwards; }
html[data-hf="strategy"]::after { background: #0c0b0a; }
html[data-hf="portfolio"]::after { background: #f4f4f3; }
@keyframes hfOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html[data-hf]::after { display: none; } }