/* =========================================================
   Jackson Hall Strategies
   Palette and type extracted from the live site (see CLAUDE.md)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand blues — primary values taken from the live site */
  --blue:          #467D94;  /* primary: links, buttons, rules */
  --blue-hover:    #5791A7;  /* hover */
  --blue-active:   #45788C;  /* active / pressed */
  --blue-border:   #5C99B1;  /* borders on tinted grounds */
  --blue-deep:     #2B5060;  /* derived: hero + footer ground */
  --blue-deeper:   #1E3A47;  /* derived: gradient end */

  /* Neutrals */
  --ink:           #1B1B1B;  /* body copy */
  --ink-strong:    #151515;  /* headings */
  --muted:         #595959;  /* secondary copy, labels */
  --rule:          #E2E8EB;  /* hairlines */
  --tint:          #F4F8FA;  /* alternating section ground */
  --white:         #FFFFFF;

  /* Type */
  --font-head: 'Zilla Slab', Georgia, serif;
  --font-body: 'Raleway', Arial, Helvetica, sans-serif;

  /* Spacing scale (8px base) */
  --s1: 0.5rem;   /*  8px */
  --s2: 1rem;     /* 16px */
  --s3: 1.5rem;   /* 24px */
  --s4: 2rem;     /* 32px */
  --s5: 3rem;     /* 48px */
  --s6: 4rem;     /* 64px */
  --s7: 6rem;     /* 96px */

  --section-y: clamp(4.5rem, 9vw, 8rem);
  --container: 1120px;
  --gutter: 1.5rem;
  --nav-h: 76px;
  --radius: 4px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink-strong);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 var(--s3);
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.875rem, 3.6vw, 2.625rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); text-decoration: underline; }
a:active { color: var(--blue-active); }

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

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--tint); }
.section--rule { border-top: 1px solid var(--rule); }

.measure { max-width: 68ch; }

/* Section heading — the name of the section ("Who we serve", "How we
   work"). Full display size: these are the page's primary landmarks and
   must read as headings, not as labels. */
.section-title {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  color: var(--blue);
  margin: 0 0 var(--s4);
}

/* Sub-heading — the line sitting under a section title ("We build many of
   the tools we run on."). Deliberately well below .section-title so the
   section name stays dominant. */
.section-sub {
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

/* Tighten the gap when a sub-heading follows a title, so the two read as
   one unit rather than two separate blocks. */
.section-title:has(+ .section-sub) { margin-bottom: var(--s2); }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--muted);
  max-width: 68ch;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: var(--white);
  padding: var(--s2) var(--s3);
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.9rem 2rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  color: var(--white);
  text-decoration: none;
}
.btn:active { background: var(--blue-active); border-color: var(--blue-active); }

.btn--onDark {
  background: var(--white);
  border-color: var(--white);
  color: var(--blue-deep);
}
.btn--onDark:hover {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

/* ---------- Image placeholders ---------- */
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  text-align: center;
  padding: var(--s3);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(70,125,148,.06) 0 12px,
      rgba(70,125,148,.12) 12px 24px
    );
  border: 2px dashed var(--blue-border);
  border-radius: var(--radius);
  color: var(--blue-deep);
  font-family: var(--font-body);
}
.placeholder__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.placeholder__meta {
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.placeholder--onDark {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.07) 0 12px,
    rgba(255,255,255,.14) 12px 24px
  );
  border-color: rgba(255,255,255,.55);
  color: var(--white);
}
.placeholder--onDark .placeholder__meta { color: rgba(255,255,255,.8); }

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s ease;
}
.nav.is-stuck { box-shadow: 0 2px 14px rgba(0,0,0,.08); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--nav-h);
}

.nav__brand {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.031em; /* matches live site logo tracking */
  line-height: 1;
  color: var(--ink-strong);
  white-space: nowrap;
}
.nav__brand:hover { color: var(--blue); text-decoration: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-block: var(--s1);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
  text-decoration: none;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-strong);
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.nav__toggle span { margin-inline: auto; position: relative; }
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top: 7px; }

.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: block; }

  .nav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(0,0,0,.09);
    padding: var(--s1) 0 var(--s3);
    display: none;
  }
  .nav__list.is-open { display: flex; }

  .nav__link {
    display: block;
    padding: var(--s2) var(--gutter);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .nav__link:hover,
  .nav__link[aria-current="page"] {
    border-bottom: 0;
    border-left-color: var(--blue);
    background: var(--tint);
  }
}

/* =========================================================
   Hero — full-bleed artwork with the copy sitting in the
   image's own empty left third
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 76vh, 44rem);
  padding-block: var(--s7);
  background: #0B1220; /* matches the artwork's darkest ground */
  color: var(--white);
  overflow: hidden;
}

/* An <img> rather than a CSS background, so srcset still applies. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Scrim: near-opaque where the copy sits, clear over the sculpture.
   Measured worst-case white-on-background contrast 7.3:1 at 1440px and
   6.95:1 at 1920px. Re-measure if the copy width, these stops, or the
   artwork change — the risk point is ~48% across, where the copy's
   right edge meets the brass. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(11, 18, 32, .95) 0%,
    rgba(11, 18, 32, .90) 30%,
    rgba(11, 18, 32, .62) 50%,
    rgba(11, 18, 32, .15) 68%,
    rgba(11, 18, 32, 0)   80%
  );
}

.hero__inner { position: relative; z-index: 2; }
.hero__copy  { max-width: 33rem; }

.hero h1 { color: var(--white); margin-bottom: var(--s4); }
.hero__sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: rgba(255,255,255,.88);
  max-width: 31rem;
  margin-bottom: var(--s5);
}

/* Phones: full-bleed does not survive a portrait viewport — covering a
   375x700 box with a 16:9 image crops ~70% of its width and leaves an
   unreadable fragment of stone. So on small screens the hero stops being
   a background: the artwork sits at its native 16:9 across the top and
   the copy runs beneath it on the same dark ground. */
@media (max-width: 860px) {
  .hero {
    display: block;
    min-height: 0;
    padding-block: 0;
  }
  .hero__bg {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .hero::after { display: none; }
  .hero__inner { padding-block: var(--s6); }
  .hero__copy,
  .hero__sub { max-width: none; }
}

/* =========================================================
   Who we serve
   ========================================================= */
.audience {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s5);
}
.audience__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.audience__item:first-child { padding-top: 0; border-top: 0; }
.audience__item h3 {
  margin: 0;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.35;
}
.audience__item p { color: var(--muted); }

@media (max-width: 800px) {
  .audience__item { grid-template-columns: 1fr; gap: var(--s2); }
}

/* =========================================================
   What we advise on — cards
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: var(--s4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(27,27,27,.09);
}
.card h3 { font-size: 1.1875rem; margin-bottom: var(--s2); }
.card p { color: var(--muted); font-size: 1rem; margin: 0; }

/* =========================================================
   How we work
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* The slot stays 4:3 at every width. The artwork is 16:9, so ~25% of its
   width is cropped — but its subject sits right with the left third
   deliberately empty, so anchoring right means the crop eats only that
   empty margin and the layered stack survives whole (it occupies 39–94%
   of the source width; the crop keeps 25–100%).
   A 4:3 slot also matches the height of the text column beside it; at
   16:9 the image would sit noticeably short of the copy. */
.split__media { aspect-ratio: 4 / 3; }
.split__media .placeholder { height: 100%; }

.split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-radius: var(--radius);
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* =========================================================
   Why us — principals row
   ========================================================= */
.principals__intro { max-width: 60ch; margin-bottom: var(--s5); }

.principals__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  max-width: 720px;
}
.principal-link {
  display: block;
  color: inherit;
  text-align: center;
}
.principal-link:hover { text-decoration: none; }
.principal-link img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(.96);
  transition: transform .22s ease, box-shadow .22s ease;
}
.principal-link:hover img {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(27,27,27,.16);
}
.principal-link__name {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-strong);
  margin: var(--s3) 0 0;
}
.principal-link:hover .principal-link__name { color: var(--blue); }
.principal-link__role {
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 2px 0 0;
}

@media (max-width: 620px) {
  .principals__row { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

/* =========================================================
   Contact
   ========================================================= */
.contact { background: var(--tint); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.form { display: grid; gap: var(--s3); }

.field { display: grid; gap: var(--s1); }
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.field .optional { font-weight: 400; color: var(--muted); }

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(70,125,148,.18);
}

.form__note {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}
.form__hp { position: absolute; left: -9999px; }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--blue-deeper);
  color: rgba(255,255,255,.82);
  padding-block: var(--s5);
  font-size: 0.9375rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.footer__brand {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  color: var(--white);
  letter-spacing: 0.031em;
}
.footer p { margin: 0; }

/* =========================================================
   Team page
   ========================================================= */
.page-head {
  background: linear-gradient(160deg, var(--blue-deep) 0%, var(--blue-deeper) 100%);
  color: var(--white);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.page-head h1 { color: var(--white); margin-bottom: var(--s3); }
.page-head p { color: rgba(255,255,255,.88); max-width: 68ch; font-size: 1.0625rem; }

/* Section groups on the team page: Principals / Legal Fellow / Academic advisors.
   All three share one heading treatment. */
.team-group {
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}
.team-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.team-group__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: var(--s6);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--blue);
  display: block;
}

.bios { display: grid; gap: var(--s7); }

.bio {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.bio__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  position: sticky;
  top: calc(var(--nav-h) + var(--s3));
}
.bio__name { margin-bottom: var(--s1); }
.bio__role {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--s3);
}
.bio__body p { color: var(--ink); }

@media (max-width: 860px) {
  .bio { grid-template-columns: 1fr; gap: var(--s4); }
  .bio__photo { position: static; max-width: 320px; }
}

/* A bio with no headshot yet: collapse the photo column so the text does
   not sit beside an empty gap, and hold it to a readable measure rather
   than letting one sentence run the full container width. Remove this
   class from the element as soon as the photo is added. */
.bio--noPhoto { grid-template-columns: 1fr; }
.bio--noPhoto .bio__body { max-width: 68ch; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .card:hover,
  .principal-link:hover img { transform: none; }
}