/* Aditi Inc. — aditi.us
   Plain CSS, no build step.

   Palette
     Oxblood  #6E2230  logo, rules, footer, primary buttons   — STRUCTURAL
     Brick    #A63A2C  links, hovers, active nav              — INTERACTIVE ONLY
     Ink      #2E2A2B  headings and body text
     Stone    #6E6663  secondary text, captions; borders @28%
     Bone     #FAF7F5  page background

   Brick never appears on anything that isn't clickable. */

:root {
  --oxblood: #6e2230;
  --brick:   #a63a2c;
  --ink:     #2e2a2b;
  --stone:   #6e6663;
  --bone:    #faf7f5;

  /* Stone at 28% — every hairline and border on the site. */
  --rule: rgba(110, 102, 99, 0.28);

  /* Recessed band, one step down from bone. */
  --bone-2: #f2edea;

  /* Bone, dimmed — secondary text on the oxblood footer. */
  --bone-dim: rgba(250, 247, 245, 0.72);

  --measure: 38rem;
  --page: 64rem;

  /* Vertical rhythm between sections — one dial for how much air the pages
     carry. Raised on 2026-08-27 from clamp(2.75rem, 6vw, 4.25rem) at Aubrey's
     request for more room and more scroll. Everything that sets top and bottom
     space on a section derives from this, so the pages stay in one rhythm
     instead of drifting apart as individual values get nudged. */
  --section-space: clamp(4rem, 9vw, 7rem);

  /* The full-bleed gutter, shared by the header and the hero so the logo and
     the headline start on the same vertical line. Proportional rather than
     fixed: at a flat 2.5rem the copy sat hard against the edge on a large
     monitor. */
  --gutter: clamp(1.5rem, 6.5vw, 12rem);

  /* How far the hero copy sits left of the shared gutter. This is the one
     place the headline deliberately does NOT line up with the logo. */
  --hero-shift: 2vw;

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

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

/* ONE PROPORTIONAL SCALE FOR THE WHOLE PAGE.

   The hero is sized in vw, so it grows with the window. Everything below it
   was sized in rem against a fixed 16px root and capped, so it did not. The
   two agreed at about 1470px, where the page was tuned, and drifted apart
   above it: on a 1920 monitor the headline was 31% larger while the body copy
   stayed at 17px in the same 1024px column, so the content shrank into a
   ribbon with double the empty margin. That drift is what this fixes.

   Scaling the root scales everything measured in rem — type, spacing, the
   64rem column, card padding — by one factor, so the page holds the same
   proportions at every width instead of two halves growing at different
   rates. Borders, outlines and rules are all in px on purpose and stay
   hairlines rather than thickening.

   1.088vw is 16px at 1470 — the width this design was drawn at, and the
   built-in display it is reviewed on. So this changes nothing there; it only
   takes over above it, where the drift used to start.

   The bounds are rem, not px, so they resolve against the reader's own
   default font size rather than overriding it; only the fluid middle is
   viewport-driven. Browser zoom scales vw, so text still resizes to 200%.

   Floored at 1rem: below 1470 the existing scale holds, because a truly
   proportional root would put body copy at 11px on a 1024 screen. Capped at
   1.75rem, which is reached at about 2560 — raise or lower that if the page
   feels oversized on a large monitor. It is the one dial here. */
@media (min-width: 64rem) {
  html { font-size: clamp(1rem, 1.088vw, 1.75rem); }
}

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

/* ---------- shared ---------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.measure { max-width: var(--measure); }

a { color: var(--brick); }
a:hover { color: var(--brick); text-decoration: underline; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--oxblood);
  color: var(--bone);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

h1 { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); }
h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

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

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--bone);
}

/* Header runs full-bleed so the logo sits near the viewport edge,
   rather than indenting to the centered content column. */
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.25rem;
  max-width: none;
  /* Derived from the hero's own offset rather than set independently, so the
     logo lands on exactly the same vertical line as the headline and the two
     stay locked together if either value is ever retuned. Subtracting here
     rather than lowering --gutter leaves the hero's padding untouched: the
     hero adds the shift back on its right, so changing --gutter would widen
     its content box and re-wrap the lede. */
  padding-inline: calc(var(--gutter) - var(--hero-shift));
}

/* Logo is an SVG wordmark, already drawn in oxblood. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.brand:hover { text-decoration: none; opacity: 0.78; }
.brand img {
  display: block;
  height: 2.375rem;
  width: auto;
}
@media (max-width: 30rem) {
  .brand img { height: 2rem; }
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--stone);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--brick); text-decoration: none; }
.site-nav a[aria-current="page"] {
  color: var(--brick);
  border-bottom-color: var(--brick);
}

/* ---------- hero ---------- */

/* No rule where the hero ends — a 6px ink bar sat there until 2026-09-01,
   removed at Aubrey's request. Nothing replaces it: the join is marked by the
   tone change alone (bone-2 above, bone below), and on desktop by the
   photograph's own bottom edge. `.focus` carries no top border, and
   `section + section` doesn't reach it because .hero is a div. */
.hero {
  background: var(--bone-2);
  padding-block: clamp(3.5rem, 9vw, 6rem);
}

.hero p.lede {
  font-size: 1.1875rem;
  color: var(--stone);
  margin-top: 1.5rem;
}

/* Below the desktop breakpoint the photograph is dropped rather than
   rearranged. It used to become a band beneath the copy, and carrying two
   arrangements of one image was the most intricate thing in this stylesheet.
   A narrow window is getting its own layout later, so the complexity buys
   nothing in the meantime. The type still scales, so the hero is smaller
   here but not differently designed. */
.hero-art { display: none; }

/* DESKTOP — one proportional composition.

   Height, type size and text width are all expressed in vw, so every part of
   the hero is the same fraction of the viewport at any width. Two things
   follow from that:

   1. The box holds a constant aspect ratio, so `cover` crops the photograph
      identically at every width. The tower lands in the same place relative
      to the text whether the window is 1280 or 2560 wide, so contrast only
      had to be established once — it does not drift with width the way it
      did when height scaled and type did not.

   2. Nothing stops growing partway. The old scale capped the headline at
      2.9rem and the column at 64rem, so beyond roughly 1300px the copy stayed
      exactly where it was while the window kept opening up. That gap is the
      dead space this replaces.

   The copy runs to the header's own padding rather than the centered 64rem
   column, so the headline starts on the same vertical line as the logo.

   Decorative throughout, so it is a CSS background rather than an <img> with
   alt text: it carries no information a screen-reader user would be missing.

   Re-measure contrast if any of these numbers change. See CLAUDE.md for the
   method; it must be measured on the rendered page, not reasoned about from
   the source image. */
@media (min-width: 64rem) {
  .hero {
    padding-bottom: clamp(3.5rem, 9vw, 6rem);
    background-image: url("hero.jpg");
    background-size: cover;
    background-position: center right;

    /* 44vw is what sets the aspect ratio, and so the crop. The vh guard only
       ever SHORTENS the box, which widens the aspect, which crops less and
       moves the tower further from the text — it cannot break the measured
       contrast, only improve it.

       78vh, not 90vh, so the hero takes a consistent share of the screen on
       displays of different SHAPE, not just different width. Height keys off
       vw, so on a 16:9 monitor the hero was 87% of the viewport while on a
       3:2 laptop it was 77% — on the wide screen you saw the hero and
       essentially nothing else. At 78vh both land at about 78%. The guard
       binds only on short, wide screens; on a 3:2 display 44vw is still the
       smaller value, so nothing there changes. */
    min-height: min(44vw, 78vh);
    display: flex;
    /* Copy sits toward the top of the hero rather than centred in it — the
       padding above holds it off the header. The tower's apex is top-right
       and the copy is left, so moving up keeps it on open sky. */
    align-items: flex-start;

    /* Top-aligned, but held down off the header — flush to the top read as
       too high. This sets where the copy actually sits in the hero. */
    padding-top: clamp(5rem, 8.5vw, 11rem);
  }

  /* The copy block is SHIFTED left, not widened. Taking the shift off the
     left padding alone would grow the content box, and the lede's max-width is
     a percentage of that box — a wider box re-wraps the three lines the safe
     area is shaped around. Adding back on the right keeps the box exactly the
     same width, so the headline and lede break in the same places and the
     whole block simply translates left.

     In vw, like the rest of the hero, so the shift stays the same fraction of
     the viewport at every width. It moves the copy AWAY from the tower, which
     is the contrast-safe direction; re-measured anyway. */
  .hero .wrap {
    max-width: none;
    padding-inline:
      calc(var(--gutter) - var(--hero-shift))
      calc(var(--gutter) + var(--hero-shift));
  }

  /* The <br>s in the markup set the line breaks, so the measure cap is
     dropped rather than widened — it would only fight them. */
  .hero h1 {
    font-size: 3.21vw;
    max-width: none;
  }

  /* Held to a fraction of the viewport so it breaks at the same three lines
     at every width — the safe area is shaped around where these lines wrap.
     The percentage tracks the type size: it is set so the three lines
     break in the same places at every width.

     Stone measures 3.6:1 over the photo and fails AA, so the lede steps up to
     ink here. Size alone carries the hierarchy. */
  .hero p.lede {
    /* Floored, unlike the headline. Pure vw put this at 10.5px on a 1440
       screen and 7.5px at 1024 — proportionally correct and unreadable. Body
       copy gets a minimum in rem; below about 1500px it holds at 15px rather
       than tracking the viewport. That is the one place the hero deliberately
       stops being proportional. */
    font-size: clamp(1.0625rem, 1.51vw, 2.25rem);
    max-width: 57%;
    color: var(--ink);
    margin-top: 1.75rem;
  }
}

/* The opening block on every page that is not the homepage. It carries the
   hero's own ground — bone-2, no closing rule — so an inner page starts the
   way the homepage starts, a tinted band under the header, rather than as
   unmarked copy at the top of the page. Added 2026-09-01: Aubrey wanted the
   other pages to carry the homepage's dimension and colour.

   No bottom hairline, for the reason the hero has none: the tone change is
   the join, and a rule on top of it reads as a seam. */
.page-head {
  background: var(--bone-2);
  padding-block: calc(var(--section-space) * 0.8);
}
.page-head p {
  color: var(--stone);
  margin-top: 1rem;
  font-size: 1.0625rem;
}

/* ---------- sections ---------- */

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

/* ---------- opening statement (oxblood) ---------- */

/* Carries .band as well, so the oxblood rules live in exactly one place. */
/* The opening statement carries a little more than the rest — it is the
   page's first full-width block after the hero. */
.statement { padding-block: calc(var(--section-space) * 1.15); }

/* Set in the heading serif at display size. Georgia is otherwise heading-only
   here, so a serif paragraph reads as a deliberate pull statement rather than
   as body copy that got bigger. */
.statement-lead {
  font-family: var(--serif);
  font-size: clamp(1.3125rem, 2.9vw, 1.6875rem);
  line-height: 1.4;
  color: var(--bone);
  margin-bottom: 1.5rem;
}


/* ---------- oxblood band ---------- */

/* The brand's structural red. Oxblood, never brick: brick means "clickable"
   everywhere on this site, and a brick background would destroy the one signal
   a visitor has for finding links.

   Everything inside follows the footer's rules for dark ground — bone text,
   bone links rather than brick, hairlines as bone at low alpha — so the site
   has one way of handling oxblood, not two. */
.band {
  background: var(--oxblood);
  color: var(--bone-dim);
}

.band h2 { color: var(--bone); }

/* The colour change is the divider. The site's stone hairline would otherwise
   land on top of the oxblood and immediately under it, which reads as a seam. */
.band,
.band + section { border-top: 0; }

/* Links and focus rings on oxblood, matching the footer.
   `:not(.btn)` matters — without it this rule outranks .btn-on-dark on
   specificity and paints the button's label bone on a bone background. */
.band a:not(.btn) { color: var(--bone); }
.band :focus-visible { outline-color: var(--bone); }

/* Stone measures 2.3:1 on oxblood and fails outright. Secondary text on this
   ground is bone-dim, the same value the footer uses. */
.band .section-label { color: var(--bone-dim); }

/* ---------- sectors + expertise, paired ---------- */

/* Two columns directly below the hero: the practice areas on the left, the
   sectors we work in on the right.

   The areas are a plain `.checklist`; the sectors are cards. They were the
   other way round until 2026-09-01, when Aubrey asked for the areas as a list
   and for the two columns to trade sides. A third column, a "What We Do"
   checklist, sat here earlier the same day and was deleted as a duplicate of
   the areas.

   `align-items: start` keeps each column its own height rather than stretching
   the shorter one to match. Stacks to one column at 56rem. */
.focus { padding-block: var(--section-space); }

/* One column by default; the pairing only happens when there is room for it.
   Everything the two-column arrangement needs lives in the one query below, so
   the stacked case is the plain, unmodified version of each part. */
/* Four children, not two column wrappers: heading, list, heading, list. The
   two headings share a grid row, so both lists start on the same line even
   though "Organizations across sectors" wraps to two lines and "Expertise"
   does not. Wrapping each pair in a div instead would make the columns
   independent, and the sectors list would sit a line lower than the cards.

   Row gap is zero throughout — the lists carry their own 2.5rem top margin, so
   a grid row gap would double the space under each heading. Stacked, the
   second heading needs that separation back; the rule below supplies it and
   the column layout takes it away again. */
.focus-grid {
  display: grid;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 0;
  align-items: start;
}

.focus-grid > * + h2 { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* The two lists set their own top margins elsewhere and they differ — 1.5rem on
   .checklist, 2.5rem on .sectors. That gap is what holds the lists off the
   shared heading row, so unequal values start them on different lines. One
   value here, rather than editing either list's own rule and moving it on the
   pages that use it outside this section. */
.focus-grid > ul { margin-top: 2.5rem; }

@media (min-width: 56rem) {
  /* The cards take the wider side. Two card tracks need more room than one
     column of list rows, and the wider they are the fewer labels wrap to a
     second line — which is what sets the card height, and so where the column
     ends. */
  .focus-grid {
    grid-template-columns: 1fr 1.35fr;
    grid-template-rows: auto auto;
    /* Fills down column one, then down column two: heading, list, heading,
       list — the markup order, placed without explicit line numbers. */
    grid-auto-flow: column;
  }
  .focus-grid > * + h2 { margin-top: 0; }

  /* The cards sit in a narrower column here than the 15rem minimum was drawn
     for, so it comes down to keep two across. At 15rem they collapse to one
     tall stack; at 11rem globally they run four across and cramped once the
     section stacks. Both values are load-bearing. */
  .focus .sectors {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  /* The two columns end on the same line. Row 2 of .focus-grid is as tall as
     the taller list, both lists fill it rather than sitting at their natural
     height, and `1fr` rows divide that height evenly — so six list rows and
     four rows of cards finish together instead of leaving one column hanging
     30-odd pixels above the other.

     This only works while the two are close to begin with; it distributes a
     difference, it does not hide one. If the cards ever grow tall again the
     list rows stretch with them and go airy, which is the signal that the card
     is the thing to fix, not this rule. */
  .focus-grid > ul {
    align-self: stretch;
    grid-auto-rows: 1fr;
  }

  /* A stretched row is taller than its label, so the label is centred in it
     rather than left sitting at the top with the rule a long way beneath. The
     marker follows: it is absolutely positioned against the row, and its
     global `top` aligns it with a first line that is no longer at the top. */
  .focus .checklist li {
    display: flex;
    align-items: center;
  }
  .focus .checklist li::before {
    top: 50%;
    margin-top: -2.5px;
  }
}

/* Visually hidden, still announced. No current user — the slider's numbered
   controls were the last one — but kept as the utility any future component
   needs for text that should be read and not seen. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The opening statement carries the section, so it is set larger than body
   copy and in full-strength bone. */
.band-lead {
  font-size: clamp(1.1875rem, 2.2vw, 1.375rem);
  line-height: 1.55;
  color: var(--bone);
}

/* Hairline between the statement and the practice areas — the two were
   separate sections before, and the rule keeps that beat without a colour
   change. */
.band-split {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(2.25rem, 5vw, 3rem);
  border-top: 1px solid rgba(250, 247, 245, 0.24);
}

.band .checklist li { border-bottom-color: rgba(250, 247, 245, 0.24); }
.band .checklist li::before { background: var(--bone); }

.band-cta { margin: 2rem 0 0; }

/* Links and focus rings on oxblood, matching the footer.
   `:not(.btn)` matters — without it this rule outranks .btn-on-dark on
   specificity and paints the button's label bone on a bone background. */
.band a:not(.btn) { color: var(--bone); }
.band :focus-visible { outline-color: var(--bone); }

/* Stone measures 2.3:1 on oxblood and fails outright. Secondary text on this
   ground is bone-dim, the same value the footer uses. */
.band .section-label { color: var(--bone-dim); }

.section-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 0.85rem;
}

/* Bone-dim only where the ground is oxblood. This lived unscoped and ahead of
   the rule above, which has the same specificity — so it never applied, and a
   label dropped into the red band would have rendered in stone against
   oxblood. Scoped and moved after, it works. */
.band .section-label { color: var(--bone-dim); }

.stack > * + * { margin-top: 1.15rem; }

/* ---------- two-column section spine (About) ---------- */

/* Label in a fixed left band, content beside it. The page was leaving roughly
   400px empty to the right of every text block while the label sat above the
   copy; this uses that width instead. The prose does NOT get wider — filling
   the page is the layout's job, not the line's, and past about 75 characters a
   line gets harder to read, not fuller. */
.split { display: grid; }

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  /* Optically seats the small-caps label on the first line of the body rather
     than at the top of its box. */
  .split > .section-label { margin-top: 0.35rem; }
}

/* Anything that is a run of sentences gets the measure cap. The checklist is
   deliberately not in this list — it is short labels in columns, not prose, so
   it can use the full width. */
.split-body > p,
.split-body > h2 { max-width: var(--measure); }

.split-lede  { margin-top: 1.25rem; }

/* Team: the bio keeps a reading measure, the checklist beside it does not. */
.person-bio { margin-top: 1rem; max-width: var(--measure); }

/* ---------- lists ---------- */

.checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.checklist li {
  padding: 0.6rem 0 0.6rem 1.15rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
/* Decorative marker — oxblood, not brick: nothing here is clickable. */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 5px;
  height: 5px;
  background: var(--oxblood);
}

/* ---------- sectors ---------- */

/* The industries as cards — a boxed set on the right of `.focus`, against the
   plain `.checklist` of practice areas on the left. Inline SVG, so there is
   nothing to fetch and no build step: seven line drawings on a 24 grid,
   stroked in currentColor so one rule colours them all.

   Oxblood, not brick. Brick is reserved for things you can click, and a
   decorative icon is the easiest place to break that rule by accident.

   The card is the one the expertise areas used to wear — bone-2, hairline
   border, 3px oxblood top rule. There is only one card in this stylesheet, so
   a card always means the same thing.

   The icon sits **beside** the label, not above it, and is 1.5rem rather than
   2.125rem. Both are height decisions: a stacked icon and a 2rem-plus padding
   made the card tall enough that four rows of them ran far past the six list
   rows opposite, and the section ended in a long ragged step. Compact cards
   land close enough that `grid-auto-rows: 1fr` can close the rest. */
.sectors {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

/* Ground, border and top rule come from the shared card rule further down. */
.sectors li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 1.25rem 1.15rem;
}

.sectors svg {
  width: 1.5rem;
  height: 1.5rem;
  /* Never let a long label squeeze the icon out of square. */
  flex: none;
  color: var(--oxblood);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- cards ---------- */

.grid {
  display: grid;
  gap: 1.75rem 1.5rem;
  /* 12rem, not 16rem: inside .split-body there is room for three across, and
     16rem drops it to two. */
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-top: 2rem;
}

/* ---------- the card ---------- */

/* One card, worn by three things: a sector on the homepage, a principle on
   About, a person on Team. Bone-2 ground, hairline border, 3px oxblood top
   rule. Defined once and shared rather than restated per component, so a card
   always means the same thing and a change lands everywhere at once.

   It exists in this form because the homepage was the only page carrying any
   depth — flat prose either side of it looked like a different site. The card,
   the oxblood band and the tinted page head are the three things that carry
   the homepage's character onto About and Team.

   Only the padding differs by component, and only because the contents do: a
   sector is one line, a person is a heading and a list. */
.sectors li,
.principle,
.person {
  background: var(--bone-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--oxblood);
}

.principle {
  padding: 1.25rem 1.25rem 1.4rem;
}
.principle h3 { margin-bottom: 0.35rem; }
.principle p { color: var(--stone); font-size: 0.9875rem; }

.person {
  padding: 1.75rem 1.75rem 2rem;
}
.person + .person { margin-top: 1.25rem; }
.person .role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.4rem;
}
.person h2 { font-size: 1.5rem; }

/* Portrait in the card's left band, above the role. The band is 11rem, so
   there is room for a larger picture than this — the size is set by the file,
   not the layout. `samir-desai.jpg` is 222px square, which covers 7rem exactly
   on a 2× screen at the 16px root and starts to soften above that as the root
   scales. **If a higher-resolution original ever arrives, raise this width;
   until then don't.** An upscaled face is more obviously poor than a small one.

   Square with a hairline, like everything else here — a circular crop would be
   a shape the site does not otherwise use. `aspect-ratio` with `cover` means a
   portrait that is not square gets centre-cropped rather than squashed. */
.portrait {
  display: block;
  width: 7rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--rule);
  margin-bottom: 0.9rem;
}

/* Holds the portrait and the role together as one grid child, so `.split`
   still sees two columns. Divya has no portrait yet and carries the wrapper
   anyway, so adding one is a drop-in. */
.person-id { margin-bottom: 0.4rem; }
.person-id .role { margin-bottom: 0; }

/* ---------- contact ---------- */

.contact-layout {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 46rem) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* The form is currently commented out, which left this grid with one child in
   a 1.15fr column and a wholly empty column beside it — the widest patch of
   dead space on the site. :has() collapses it to a single column whenever
   there is only one child, so it corrects itself the moment the form block is
   uncommented and there are two again. Nothing to remember to undo. */
.contact-layout:has(> :only-child) { grid-template-columns: 1fr; }

/* Details spread across whatever width they are given: three across in the
   full-width column while the form is paused, one across inside the narrower
   column once it is back. */
.contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem 2.5rem;
  margin-top: 1.75rem;
}
.contact-details .detail + .detail { margin-top: 0; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.65rem 0.75rem;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus,
.field textarea:focus {
  border-color: var(--brick);
  outline: 2px solid rgba(166, 58, 44, 0.2);
  outline-offset: 0;
}

.btn {
  display: inline-block;
  background: var(--oxblood);
  color: var(--bone);
  border: 1px solid var(--oxblood);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--bone);
  text-decoration: none;
}

/* Button on oxblood. Reversed rather than outlined: a ghost button here would
   sit at bone-on-oxblood for its border and read as disabled. Hover goes to
   brick, which is legitimate — this is a clickable thing.

   Nothing uses it since the homepage's "Learn more" was removed on 2026-09-01.
   Kept, unlike the classes that went with that button: the oxblood band is a
   standing part of the site and the next button placed on one needs this rule
   rather than a fresh guess at how a button behaves on dark ground. */
.btn-on-dark {
  background: var(--bone);
  color: var(--oxblood);
  border-color: var(--bone);
}
.btn-on-dark:hover {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--bone);
}

.btn-ghost {
  background: transparent;
  color: var(--oxblood);
  border-color: var(--rule);
}
.btn-ghost:hover {
  background: var(--brick);
  border-color: var(--brick);
  color: var(--bone);
}

.detail + .detail { margin-top: 1.5rem; }
.detail dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.3rem;
}
.detail dd { margin: 0; }
.detail address { font-style: normal; }

.form-note {
  font-size: 0.875rem;
  color: var(--stone);
  margin-top: 1rem;
}

/* ---------- cta ---------- */

.cta { background: var(--bone-2); }
.cta p { color: var(--stone); margin-top: 0.85rem; }
.cta .btn { margin-top: 1.75rem; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--oxblood);
  color: var(--bone-dim);
  padding-block: calc(var(--section-space) * 0.85);
  font-size: 0.9375rem;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
}

.site-footer address { font-style: normal; }
.site-footer h3 {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 0.6rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.35rem; }

/* Bone, not brick: brick on oxblood is unreadable. Still clearly a link. */
.site-footer a { color: var(--bone); text-decoration: none; }
.site-footer a:hover { color: var(--bone); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--bone); }

.colophon {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 245, 0.24);
  font-size: 0.875rem;
  color: var(--bone-dim);
}