/* Marston Reid — site chrome.
   Loads third: tokens.css → bundle.css → site.css → style.css.

   bundle.css owns every mr-* component. This file owns the two things the
   design system deliberately does not: the page-level composition classes
   (.band-inner, .split, .people, the footer grid) and the bridge between
   WordPress's block output and the system's type scale. Nothing here
   redefines a component; it only places them and teaches core blocks the
   same vocabulary. */

/* ---------- reset, scoped ---------- */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* The design system's bands set every margin in markup. Core block content
   (anything an editor adds outside a band) still wants the browser defaults,
   so the reset stops at the band boundary rather than going global.

   Written entirely in :where() so it carries zero specificity. At its natural
   weight it outranked the .stack-* utilities — two classes against one — and
   silently collapsed every stacked band to no spacing at all. It only has to
   beat the user-agent sheet, and origin, not specificity, decides that. */
:where(.mr-hero, .mr-cta, .mr-pagehead, .mr-band > .band-inner, .mr-site-footer)
  :where(h1, h2, h3, p, figure, blockquote, dl) { margin: 0; }

/* Headings inside a band carry their size from the type scale, not from
   theme.json's element styles. */
.mr-band :is(h1, h2, h3),
.mr-hero :is(h1, h2, h3),
.mr-cta :is(h1, h2, h3),
.mr-pagehead :is(h1, h2, h3),
.mr-site-footer :is(h1, h2, h3) { color: inherit; font-weight: 400; }

/* ---------- page composition ---------- */

.band-inner { width: min(1240px, 100% - (2 * var(--space-6))); margin-inline: auto; }
@media (max-width: 900px) { .band-inner { width: min(1240px, 100% - (2 * var(--space-5))); } }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .split, .split--even { grid-template-columns: 1fr; } }

.stack-7 > * + * { margin-top: var(--space-7); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-3 > * + * { margin-top: var(--space-3); }

.record-figure { margin-top: var(--space-8); }
.record-figure .mr-figure__frame { aspect-ratio: 21 / 9; }

.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .people { grid-template-columns: 1fr; } }

.roster { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); color: var(--ink-subtle); }

/* ---------- page opener ----------
   Every page that is not the home page opens with this band. It exists so the
   overlay header always lands on an ink ground, on every route, rather than
   being a home-page-only treatment that breaks everywhere else. */

.mr-pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-ink);
  color: var(--ink-on-ink);
  padding-block: calc(var(--space-10) + var(--space-8)) var(--space-9);
}
.mr-pagehead__media { position: absolute; inset: 0; z-index: -2; }
.mr-pagehead__media > img { width: 100%; height: 100%; object-fit: cover; }
/* Two scrims, not one. The band carries the transparent header, so the top
   of the frame has to hold the wordmark and the nav at 4.5:1 — one pass of
   --scrim does not do that over a bright frame like the skyline. */
.mr-pagehead__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.mr-pagehead__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--scrim) 0%, rgba(0, 0, 0, 0) 58%);
}
.mr-pagehead__eyebrow { color: var(--ink-on-ink-muted); }
.mr-pagehead__title { margin-top: var(--space-4) !important; color: var(--ink-on-ink); }
.mr-pagehead__deck { margin-top: var(--space-5) !important; color: var(--ink-on-ink-muted); max-width: 58ch; }
@media (max-width: 720px) { .mr-pagehead { padding-block: calc(var(--space-9) + var(--space-8)) var(--space-8); } }

/* ---------- header: mobile sheet ----------
   bundle.js wires [data-mr-sheet-toggle] to .mr-sheet; the design system
   ships the open/close transition and leaves the trigger's look to the site. */

.mr-burger {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  color: inherit;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 10px;
}
.mr-burger:focus-visible { outline: 2px solid var(--focus-on-ink); outline-offset: 2px; }
.mr-header.is-stuck .mr-burger:focus-visible { outline-color: var(--focus); }

/* The sheet keeps the ink ground in both header states: it opens over the
   hero while the bar is still transparent, and reads as a panel hanging off
   the bar once it is stuck. Its links have to be block-level — .mr-nav__link
   is an inline anchor in a flex row by default, and in the sheet's block
   container all four collapsed onto a single 28px line. */
.mr-sheet__inner {
  display: flex;
  flex-direction: column;
  background: var(--surface-ink);
  color: var(--ink-on-ink);
  box-shadow: var(--shadow-raise);
}
/* The padding goes on the nav, not on the collapsing box: box-sizing is
   border-box, so padding on a 0fr grid row still paints a 24px ink strip
   under a closed sheet. */
.mr-sheet .mr-nav { padding-block: var(--space-2) var(--space-4); }
.mr-sheet .mr-nav__link {
  display: block;
  padding-block: var(--space-3);
  border-top: 1px solid var(--line-on-ink);
}
.mr-sheet .mr-nav__link::after { background: var(--accent-on-ink); }

@media (max-width: 720px) {
  .mr-nav--desktop { display: none; }
  .mr-burger { display: inline-flex; }
  .mr-header__inner { gap: var(--space-4); }
}
@media (min-width: 721px) {
  .mr-sheet { display: none; }
}

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

.mr-site-footer { background: var(--surface-ink); color: var(--ink-on-ink); padding-block: var(--space-9) var(--space-7); }
.mr-site-footer__grid { display: grid; grid-template-columns: 4fr 2fr 2fr 4fr; gap: var(--space-6); }
@media (max-width: 900px) { .mr-site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mr-site-footer__grid { grid-template-columns: 1fr; } }
.mr-site-footer a { color: var(--ink-on-ink-muted); text-decoration: none; display: block; padding-block: 3px; }
.mr-site-footer a:hover { color: var(--ink-on-ink); }
.mr-site-footer :focus-visible { outline: 2px solid var(--focus-on-ink); outline-offset: 2px; }
.mr-site-footer__base {
  display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-ink); color: var(--ink-on-ink-muted);
}
.mr-site-footer__base a { display: inline; color: var(--accent-on-ink); }

/* ---------- WordPress bridge ----------
   Everything below teaches core block output the system's vocabulary, so the
   four inner pages and anything an editor adds later inherit the refresh
   instead of reverting to chassis defaults. */

/* WP gives every root-level block, and every child of a flow layout, a
   block-gap margin. Bands butt against each other by design, and the page's
   bands are grandchildren of main — they sit inside post-content — so the
   post-content case has to be named explicitly or a 16px strip of page colour
   shows between every pair of bands. */
.wp-site-blocks > *,
main.wp-block-group > *,
main .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

.wp-site-blocks > main { display: block; }

/* The template part renders its own <header> wrapper, so that wrapper — not
   the .mr-header inside it — is the element that sticks.
   It is given zero height rather than the mockup's negative margin: the bar
   compresses from 48px to 24px of padding once it is stuck, and a negative
   margin sized to the resting height would drop the whole page by 48px at
   that moment. A zero-height sticky host takes no space in either state, so
   the opening band starts at the top of the page and nothing shifts. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 0;
}
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

/* Prose inside a band: core paragraphs, lists and links, sized by the scale. */
.mr-prose { color: var(--ink-muted); font-size: 17px; line-height: 28px; }
.mr-prose > * + * { margin-top: var(--space-4); }
.mr-prose :is(h2, h3) { color: var(--ink); margin-top: var(--space-6); }
.mr-prose strong { color: var(--ink); font-weight: 600; }
.mr-prose ul { padding-left: 1.1em; margin-block: 0; }
.mr-prose li + li { margin-top: var(--space-2); }
.mr-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.mr-prose a:hover { color: var(--accent-strong); }
.mr-prose a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Any core block dropped into a band keeps the band's measure. */
.mr-band .wp-block-group.has-global-padding { padding-inline: 0; }

/* The system's own link colour, for editor-authored content outside a band. */
:where(main) a:not([class]) { color: var(--accent); text-underline-offset: 2px; }

/* Frames rendered by lawfirm_frame(): the component around them sets the box,
   this only stops the inline-image baseline gap. */
.mr-frame { display: block; }
.mr-plate { min-height: 120px; }

/* Parallax frames overscan their box.
   bundle.js shifts a [data-mr-parallax] element by up to 40px in either
   direction; at exactly 100% height that shift walks the frame's own edge
   into view, so the element that moves is given headroom to move within. */
.mr-figure__frame > [data-mr-parallax],
.mr-cta__media > [data-mr-parallax],
.mr-pagehead__media > [data-mr-parallax] {
  display: block;
  height: 118%;
  margin-top: -9%;
}
.mr-figure__frame > [data-mr-parallax] > img,
.mr-cta__media > [data-mr-parallax] > img,
.mr-pagehead__media > [data-mr-parallax] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Attorney fact list — admissions, education, contact. */
.mr-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.mr-facts dt { color: var(--ink-subtle); }
.mr-facts dd { margin: 0; color: var(--ink-muted); }
@media (max-width: 560px) { .mr-facts { grid-template-columns: 1fr; gap: var(--space-1) 0; } }

/* .mr-row as a static article rather than a link: the component's hover
   affordances would be promising a destination that is not there. */
.mr-row--static { cursor: default; }
.mr-row--static:hover { background: transparent; }
.mr-row--static.mr-row--lead:hover { background: var(--surface-accent-soft); }
.mr-row--static:hover .mr-row__title { transform: none; }


/* The CTA band's frame is a lit conference room, not the dark plate the
   mockup stood in for it, and the contact details sit over its brightest
   corner. A second pass of the scrim buys that column its contrast back. */
.mr-cta__scrim { background: var(--scrim); }
.mr-cta__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--scrim) 100%);
}