/* ==========================================================================
   MCQ Capital
   Rebuilt from the original Squarespace site. Design tokens, type scale and
   section grid below mirror the original exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --white: #ffffff;
  --black: #000000;
  --light-accent: #f5f5f5;
  --accent: #d9d9d9;
  --dark-accent: #797979;
  --orange: #f15a29;
  --footer-link: #9fa5b0;

  /* Page metrics (Squarespace: maxPageWidth / pagePadding) */
  --max-page-width: 2000px;
  --page-padding: 4vw;
  --page-padding-mobile: 6vw;
  --grid-gap: 11px;

  /* Type */
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --tracking: -0.02em;
  --body-line-height: 1.3;

  /* Fluid sizes: min((v - 1) * 1.2vw + 1rem, (v - 1) * 24px + 1rem) */
  --size-h1: min(calc(2.3 * 1.2vw + 1rem), 71.2px);
  --size-h2: min(calc(1.1 * 1.2vw + 1rem), 42.4px);
  --size-h3: min(calc(0.6 * 1.2vw + 1rem), 30.4px);
  --size-h4: min(calc(0.4 * 1.2vw + 1rem), 25.6px);
  --size-large: min(calc(0.6 * 1.2vw + 1rem), 30.4px);
  --size-body: min(calc(0.3 * 1.2vw + 1rem), 23.2px);
  --size-small: 1rem;

  /* Heading line height: 1.1 * (1 + (1 - v) / 25) */
  --lh-h1: 1.0088;
  --lh-h2: 1.0516;
  --lh-h3: 1.0736;
  --lh-h4: 1.0824;

  --header-height: 76px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background-color: var(--light-accent);
  color: var(--black);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--tracking);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 32px;
  font-weight: 500;
  letter-spacing: var(--tracking);
}

h1 { font-size: var(--size-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--size-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--size-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--size-h4); line-height: var(--lh-h4); }

p {
  margin: 0 0 16px;
  font-size: var(--size-body);
}

p:last-child {
  margin-bottom: 0;
}

.t-large { font-size: var(--size-large); }
.t-small { font-size: var(--size-small); }

strong {
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--white);
  font-size: 1rem;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--light-accent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: 15.4px var(--page-padding);
}

.site-header__logo {
  display: block;
  padding-left: 3.5vw;
}

.site-header__logo:hover {
  text-decoration: none;
}

.site-header__logo img {
  width: auto;
  height: 45px;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 2px 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: var(--tracking);
}

/* Burger — two 1px rules, as on the original */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dark-accent);
  cursor: pointer;
}

.nav-toggle__lines {
  display: block;
  width: 35px;
}

.nav-toggle__lines span {
  display: block;
  height: 1px;
  background-color: currentColor;
}

.nav-toggle__lines span + span {
  margin-top: 10px;
}

.nav-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Mobile overlay menu */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--page-padding-mobile);
  background-color: var(--light-accent);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav li + li {
  margin-top: 24px;
}

.mobile-nav a {
  font-size: var(--size-h3);
  font-weight: 500;
  letter-spacing: var(--tracking);
}

.mobile-nav__close {
  position: absolute;
  top: 15.4px;
  right: var(--page-padding-mobile);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dark-accent);
  cursor: pointer;
}

.mobile-nav__close svg {
  width: 22px;
  height: 22px;
}

body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Section grid
   Mirrors the original layout engine: 8 columns on mobile, 24 on desktop,
   an 11px gutter, and rows sized as a fraction of the container width.
   -------------------------------------------------------------------------- */

main {
  flex: 1 0 auto;
}

.section {
  position: relative;
  width: 100%;
}

.section__grid {
  --gutter: calc(var(--page-padding-mobile) - var(--grid-gap));
  --cell: calc((var(--max-page-width) - (var(--grid-gap) * 7)) / 8);

  display: grid;
  grid-template-rows: repeat(var(--rows-mobile, 6), minmax(24px, auto));
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    repeat(8, minmax(0, var(--cell)))
    minmax(var(--gutter), 1fr);
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
  overflow-x: clip;
}

@media (min-width: 768px) {
  .section__grid {
    --gutter: calc(var(--page-padding) - var(--grid-gap));
    --cell: calc((var(--max-page-width) - (var(--grid-gap) * 23)) / 24);
    --container-width: min(
      var(--max-page-width),
      calc(100vw - var(--page-padding) * 2)
    );

    grid-template-rows:
      repeat(var(--rows-desktop, 6), minmax(calc(var(--container-width) * 0.0215), auto));
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      repeat(24, minmax(0, var(--cell)))
      minmax(var(--gutter), 1fr);
  }
}

/* Tracking is declared once here, at body-copy size, so every paragraph
   inherits the same pixel value. The original does the same, which is why
   small text is tracked slightly tighter than -0.02em of its own size. */
.block {
  grid-area: var(--area-mobile);
  align-self: start;
  font-size: var(--size-body);
  letter-spacing: var(--tracking);
}

@media (min-width: 768px) {
  .block {
    grid-area: var(--area-desktop, var(--area-mobile));
  }
}

/* Inset sections sit one page-gutter in from each edge (the original's
   "background-width--inset"). Everything else is full bleed. */
.section--inset {
  padding: 0 var(--page-padding-mobile) 56px;
}

@media (min-width: 768px) {
  .section--inset {
    padding: 0 var(--page-padding) 56px;
  }

  .section--inset .section__grid {
    --container-width: min(
      var(--max-page-width),
      calc(100vw - var(--page-padding) * 4)
    );
  }
}

/* --------------------------------------------------------------------------
   5. Page sections
   -------------------------------------------------------------------------- */

/* Home ------------------------------------------------------------------- */

.s-intro { --rows-mobile: 12; --rows-desktop: 10; }
.b-intro { --area-mobile: 3 / 1 / 13 / 10; --area-desktop: 4 / 2 / 11 / 16; }

.s-quote { --rows-mobile: 7; --rows-desktop: 5; }
.b-quote { --area-mobile: 2 / 2 / 8 / 10; --area-desktop: 2 / 3 / 5 / 20; }

.quote {
  margin-bottom: 32px;
}

.quote__accent {
  color: var(--orange);
}

/* About ------------------------------------------------------------------ */

.s-bio-lead { --rows-mobile: 26; --rows-desktop: 11; }
.b-bio-lead { --area-mobile: 3 / 2 / 11 / 10; --area-desktop: 3 / 3 / 9 / 14; }
.b-portrait {
  --area-mobile: 12 / 2 / 26 / 10;
  --area-desktop: 2 / 16 / 11 / 21;
  align-self: stretch;
}

.b-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.s-bio { --rows-mobile: 2; --rows-desktop: 9; }
.b-bio { --area-mobile: 1 / 2 / 3 / 10; --area-desktop: 2 / 3 / 9 / 14; }

.bio__role {
  margin-bottom: 16px;
}

/* Contact ---------------------------------------------------------------- */

.s-contact { --rows-mobile: 15; --rows-desktop: 15; }
.b-contact { --area-mobile: 3 / 2 / 13 / 10; --area-desktop: 4 / 3 / 13 / 10; }

.contact__email {
  color: var(--dark-accent);
  margin-bottom: 60px;
}

.contact__office {
  margin: 0;
}

.contact__office + .contact__office {
  margin-top: 59px;
}

/* Privacy Policy / Disclaimer -------------------------------------------- */

.s-legal { --rows-mobile: 2; --rows-desktop: 9; }
.b-legal { --area-mobile: 1 / 2 / 3 / 10; --area-desktop: 3 / 3 / 9 / 21; }

.legal p,
.legal li {
  font-size: var(--size-small);
}

/* Numbered section headings render at body size, as on the original */
.legal h4 {
  margin: 53px 0 16px;
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: inherit;
  line-height: var(--body-line-height);
}

.legal ul {
  margin: 21px 0;
  padding-left: 40px;
}

.legal li {
  margin-bottom: 8px;
}

.legal li:last-child {
  margin-bottom: 0;
}

/* Footer ----------------------------------------------------------------- */

.s-footer { --rows-mobile: 16; --rows-desktop: 4; }
.b-footer { --area-mobile: 2 / 2 / 13 / 10; --area-desktop: 2 / 3 / 4 / 20; }

.site-footer a {
  color: var(--footer-link);
  font-weight: 700;
}

.site-footer p {
  margin-bottom: 16px;
  font-size: var(--size-small);
}

.site-footer p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .site-header__logo {
    padding-left: 0;
  }

  .site-header__logo img {
    height: 30px;
  }

  .site-header__inner {
    padding-left: var(--page-padding-mobile);
    padding-right: var(--page-padding-mobile);
  }

  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

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