/* ============================================================================
   2m.com — DESIGN SYSTEM  ·  Site/css/styles.css
   ----------------------------------------------------------------------------
   The one stylesheet for the whole site. Plain CSS — no build step and no
   framework — organized into the numbered sections below. If it ever grows too
   big, split it on those section boundaries.

   SECTIONS
     1  Tokens — the design "settings" (color, type, spacing) as variables
     2  Base — defaults for plain elements (body, headings, paragraphs)
     3  Accessibility scaffolding
     4  Layout — the centered page container
     5  Components — shared building blocks (nav, links, cards, headings…)
     6  Interior pages + media — titles, sections, the media-entry two-up, cards
     7  In Memoriam — the one dark page
     8  Values   ·   9  Leadership   ·   10  Real Estate
     11 Video lightbox   ·   12  Join   ·   13  Contact & Legal

   CONVENTIONS
     • Class names follow BEM: .block, .block__element, .block--modifier. Names
       describe MEANING (.site-nav, .value-card), not appearance.
     • All color comes from the tokens in section 1 — never a raw hex value in a
       component rule.
     • Comments explain WHY for a reader new to the code. A pointer like "(§6)"
       means "see section 6 of this file."
   ============================================================================ */

/* ============================================================================
   1 · TOKENS  —  the design system as CSS custom properties
   ============================================================================ */
:root{
  /* --- Type family: Inter everywhere. (Archivo Black is not a text face here —
         it lives only inside the wordmark SVG.) --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* --- Type scale. Display sizes are fluid (clamp()) so they shrink on phones;
         reading sizes are fixed. The px equivalents are noted for reference. --- */
  --fs-hero:  clamp(1.75rem, 1rem + 4vw, 3.25rem);    /* 28 → 52px (fluid; shrinks on phones) */
  --fs-title: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);/* 30 → 40px — one shared title size: the entry titles, the Home hero, and the Home copy headings */
  --fs-h1:    clamp(2rem, 1.4rem + 2.6vw, 2.5rem);    /* 32 → 40px */
  --fs-h2:    1.875rem;                               /* 30px */
  --fs-h3:    1.5rem;                                 /* 24px */
  --fs-h4:    1.25rem;                                /* 20px */
  --fs-lead:  1.375rem;                               /* 22px (captured body) */
  --fs-body:  1.125rem;                               /* 18px (default reading size) */
  --fs-small: 1rem;                                   /* 16px */

  /* line-heights — body loose (1.5) for easy reading; display tight (1.12–1.2)
     so big headings hold together. */
  --lh-hero: 1.12;
  --lh-head: 1.2;
  --lh-body: 1.5;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* --- Color roles. Contrast ratios are WCAG against white unless noted. --- */
  --ink:       #3D3A37;  /* primary text, headings, wordmark — warm graphite, 11.3:1 AAA */
  --muted:     #6B6B6B;  /* secondary text only — 5.33:1 AA */
  --paper:     #ffffff;  /* page background */
  --surface:   #f7f6f3;  /* warm off-white — cards, panels */
  --line:      #e6e4df;  /* hairline borders */
  --accent:    #f7ea48;  /* brand yellow — NON-TEXT on light grounds; text only on --ink (10:1) */

  /* --- Spacing scale (4px base) --- */
  --space-1:.25rem;  --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem;  --space-6:2rem;   --space-7:3rem;   --space-8:4rem;
  --space-9:6rem;    --space-10:8rem;

  /* --- Layout --- */
  --container: 1200px;     /* full content width */
  --measure:   68ch;       /* readable line length for prose */
  --gutter:    var(--space-5);
  /* breakpoints (reference; media queries can't read custom props):
     sm 640px · md 900px · lg 1200px */

  /* --- Radii / borders / shadow (restrained brand) --- */
  --radius-sm: 3px;  --radius: 6px;  --radius-lg: 10px;
  --border:    1px solid var(--line);
  --shadow-1:  0 1px 2px rgba(0,0,0,.06);
  --shadow-2:  0 6px 22px rgba(0,0,0,.08);

  /* --- Motion --- */
  --transition-fast: 150ms ease;
  --transition:      250ms ease;
}

/* ============================================================================
   2 · BASE / ELEMENT STYLES
   ============================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper);
}
h1,h2,h3,h4{ font-family:var(--font-sans); line-height:var(--lh-head); margin:0 0 var(--space-4); color:var(--ink); }
h1{ font-size:var(--fs-h1); font-weight:var(--fw-bold); }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-bold); }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-semi); }
h4{ font-size:var(--fs-h4); font-weight:var(--fw-semi); }
p{ margin:0 0 var(--space-4); max-width:var(--measure); }

/* ============================================================================
   3 · ACCESSIBILITY SCAFFOLDING  (baseline, not optional)
   ============================================================================ */
/* Skip link — first focusable element; lets keyboard users jump past the nav. */
.skip-link{
  position:absolute; left:var(--space-4); top:-3rem;
  background:var(--ink); color:#fff; padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-sm); text-decoration:none; z-index:100;
  transition:top var(--transition-fast);
}
.skip-link:focus{ top:var(--space-4); }

/* Visible keyboard focus. --ink ring is 10:1+ on white; dark sections switch to
   the accent so the ring stays visible (meets the 3:1 non-text contrast rule). */
:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }

/* Honor a reduced-motion preference: cut transitions/animations. */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Visually hidden, but available to screen readers — for a structural heading with
   no visible title (the /contact-legal page leads straight into its cards, §13). */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================================
   4 · LAYOUT
   ============================================================================ */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* ============================================================================
   5 · COMPONENTS  (BEM)
   The shared building blocks used across the site. A component that only one
   page needs is added when that page is built — not before — so there is no
   unused CSS.
   ============================================================================ */

/* ---- Wordmark: the outlined "2M" mark. Sized by height; color comes via
        currentColor, so it inherits --ink (or #fff on a dark ground). The SVG
        itself lives inline in the markup, so it needs no web font. ---- */
.wordmark{ display:inline-block; height:2.25rem; width:auto; color:var(--ink); }
.wordmark svg{ height:100%; width:auto; display:block; }

/* ---- Sticky header: persists at the top over the full-screen scenes (as on
        the current site). Sits above the scenes (z-index) so the nav stays
        readable as photos and panels scroll beneath it. ---- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--paper); }
/* On the home page the header OVERLAYS the scenes (position:fixed) instead of taking a
   strip of layout space, so the first photo sits flush to the top and pins instantly
   rather than scrolling up under the header first. Interior pages keep the sticky header. */
.home .site-header{ position:fixed; top:0; left:0; right:0; }

/* ---- Site navigation ---- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding-block:var(--space-4); border-bottom:var(--border); flex-wrap:wrap;
}
.site-nav__brand{ display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; }
.site-nav__list{ list-style:none; display:flex; gap:var(--space-5); margin:0; padding:0; flex-wrap:wrap; }
.site-nav__link{
  font-size:var(--fs-small); font-weight:var(--fw-semi); text-transform:uppercase;
  letter-spacing:.04em; text-decoration:none; color:var(--ink); padding-block:var(--space-2);
}
.site-nav__link:hover{ box-shadow:inset 0 -3px 0 var(--accent); }   /* yellow as NON-TEXT accent — allowed */
.site-nav__link--active{ box-shadow:inset 0 -3px 0 var(--ink); }

/* ---- Responsive nav disclosure (the "hamburger" menu).
        Progressive enhancement: the toggle button is hidden by default, so with
        no JavaScript the link list simply shows (and wraps) — content is never
        hidden behind a script. The `js` class (added to <html> before the page
        paints) opts in to the collapse-on-narrow behavior; the button toggles
        the `.is-open` class to reveal the list. ---- */
.site-nav__toggle{
  display:none; align-items:center; gap:var(--space-2);
  background:none; border:0; cursor:pointer; color:var(--ink);
  font-family:inherit; font-size:var(--fs-small); font-weight:var(--fw-semi);
  text-transform:uppercase; letter-spacing:.04em; padding:var(--space-2);
}
.site-nav__toggle-icon{ display:inline-block; width:1.5rem; height:1.5rem; }
.site-nav__toggle-icon svg{ display:block; width:100%; height:100%; }

@media (max-width:899px){
  .js .site-nav__toggle{ display:inline-flex; }
  .js .site-nav__list{
    display:none; flex-basis:100%; flex-direction:column;
    gap:var(--space-3); padding-block:var(--space-3);
  }
  .js .site-nav__list.is-open{ display:flex; }
}

/* ---- Inline text link: ink-colored text with a soft yellow underline. It is
        set apart by weight + underline, never by color alone, so it stays clear
        to readers who don't perceive the color. ---- */
.text-link{ color:var(--ink); font-weight:var(--fw-semi); text-decoration:none;
            box-shadow:inset 0 -.5em 0 rgba(247,234,72,.4); }   /* lighter, less saturated than solid --accent */
.text-link:hover{ box-shadow:inset 0 -.9em 0 rgba(247,234,72,.55); }

/* ---- Value card: each named value, as real selectable HTML text. ---- */
.value-card{
  background:var(--surface); border:var(--border); border-top:4px solid var(--accent);
  border-radius:var(--radius); padding:var(--space-5); box-shadow:var(--shadow-1);
}
.value-card__name{ font-size:var(--fs-h3); font-weight:var(--fw-bold); margin:0 0 var(--space-2); }
.value-card__desc{ font-size:var(--fs-body); color:var(--ink); margin:0; }

/* ---- Heading rule: the brand's yellow underline beneath a section heading or
        the hero headline. width:max-content sizes the box (and so the bar) to the
        heading's text, so the rule runs only the width of the words, not the whole
        column. The bar is decorative — the heading text carries the meaning — so
        using the yellow here (not as text) is fine for contrast. ---- */
.heading-rule{ width:max-content; max-width:100%; }
.heading-rule::after{
  content:""; display:block; height:6px; margin-top:var(--space-2);
  background:var(--accent); border-radius:var(--radius-sm);
}

/* ---- Prose column: body copy sits in a left-aligned column (not full width),
        set a touch larger for an airy, readable measure. ---- */
.prose{ max-width:34rem; }
.prose h2{ font-size:var(--fs-title); line-height:var(--lh-head); margin-bottom:var(--space-6); }
.prose p{ font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height:1.65; }
.prose > :last-child{ margin-bottom:0; }

/* ---- Home scenes: each historical photograph PINS to the top of the screen
        (position:sticky) while the white .copy panel scrolls up over it — the parallax
        reveal. This replaces background-attachment:fixed, which shimmers on slow scroll
        and is unreliable on iOS. The photo is a real <img> inside a sticky <figure>: it
        sticks to the viewport for the length of its scene, the opaque copy panel (on a
        higher layer) rises up to cover it, and then the next scene's photo takes over.
        Pure CSS, smooth, works on touch — and the photos are real content a reading view
        and search engines can see. ---- */
.scene{ position:relative; }
.scene__photo{
  position:sticky; top:0; z-index:0; margin:0; overflow:hidden;
  height:100vh; height:100svh; background-color:var(--ink);
}
.scene__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene__photo--eds img{ object-position:center 22%; }
.scene__photo--jcc img{ object-position:center 32%; }   /* keep the "Marlene Meyerson JCC Manhattan" sign in view */

/* The copy panel rises over the pinned photo: an opaque ground on a higher layer than
   the photo. Its height sets how long the photo stays pinned, so it is left to size to
   its content — forcing a full screen height left too much empty white below short copy. */
.copy{ position:relative; z-index:1; background:var(--paper); }
.copy .prose{ padding-block:var(--space-7); }

/* Hero caption over the first photo: headline at the vertical middle, left, on a
   left-weighted scrim. The headline is large display text, so it clears the large-text
   contrast bar (>= 3:1) over the bright snow while the figures on the right stay clear. */
.scene__photo--hero{ display:flex; align-items:flex-start; }
.scene__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right,
    rgba(40,38,35,.66) 0, rgba(40,38,35,.6) 38%,
    rgba(40,38,35,.55) 50%, rgba(40,38,35,.16) 72%, rgba(40,38,35,0) 90%);
}
.scene__caption{ position:relative; z-index:2; width:100%; padding-top:18vh; }   /* headline in the upper area so the rising copy panel stops below it, not through it */
.hero-title{
  margin:0; color:#fff; max-width:18ch;
  /* Uses the shared title size (--fs-title) so the opening "2M Companies." line
     matches the interior entry titles and reads as a confident headline without
     dominating. */
  font-size:var(--fs-title); line-height:var(--lh-hero); font-weight:var(--fw-black);
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}

/* Calm fallback for a reduced-motion preference: stop the pinning so the photos simply
   scroll in place, the copy in normal flow (no rise-over reveal). */
@media (prefers-reduced-motion: reduce){
  .scene__photo{ position:relative; }
}

/* Hero on phones. The photo is wide; on a narrow screen it crops to a tall frame,
   pulling the figures toward the centre. So at phone widths we lift the headline up
   over the bare trees — clear of the figures and the bright snow below it — with a
   top-weighted scrim so the words keep a dark backing. */
@media (max-width:599px){
  .scene__scrim{
    background:linear-gradient(to bottom,
      rgba(40,38,35,.8) 0, rgba(40,38,35,.55) 30%,
      rgba(40,38,35,.18) 55%, rgba(40,38,35,0) 78%);
  }
  .scene__caption{ padding-top:12vh; }
}

/* ---- Footer ---- */
.site-footer{ background:var(--surface); border-top:var(--border); }   /* no extra top margin; the section padding sets the gap */
.site-footer__inner{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-5); padding-block:var(--space-6); flex-wrap:wrap; }
.site-footer__copy{ font-size:var(--fs-small); color:var(--muted); margin:0; }
.site-footer__list{ list-style:none; display:flex; gap:var(--space-5); margin:0; padding:0; }
.site-footer__link{ font-size:var(--fs-small); font-weight:var(--fw-semi); color:var(--ink); text-decoration:none; }
.site-footer__link:hover{ box-shadow:inset 0 -3px 0 var(--accent); }
/* The footer page you are ON (Join / Contact / Legal aren't in the primary nav, so
   the current-page marker lives on their footer link instead — mirrors the nav active). */
.site-footer__link[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--ink); }

/* ============================================================================
   6 · INTERIOR PAGES + MEDIA
   ----------------------------------------------------------------------------
   The home page is a full-bleed parallax story; every other page is a calmer
   "interior" content page. These are the few building blocks such a page needs:
   a title block, a section rhythm, the media-entry two-up, and the card. They
   are kept deliberately small — when a second page reuses one as-is, it is
   already shared.
   ============================================================================ */

/* ---- Interior page title: a quiet EYEBROW — small, uppercase, letter-spaced,
        with the brand underline. The standard title for every interior page
        (Values · Leadership · Foundation · In Memoriam), each in its own `.page-intro`
        block; the name reads as a calm kicker and the content carries the page.
        Color is --muted, which the dark theme (§7) re-tints. The .heading-rule
        adds the yellow underbar (white on the dark theme, §7), thinned to 3px to
        suit the small label. ---- */
.page-intro{ padding-block:var(--space-9) 0; }
.page-eyebrow{ font-size:var(--fs-small); font-weight:var(--fw-semi); text-transform:uppercase;
  letter-spacing:.18em; color:var(--muted); margin:0 0 var(--space-4); }
.page-eyebrow.heading-rule::after{ height:3px; }   /* thinner bar under the small eyebrow */

/* ---- Section: vertical rhythm for an interior page — white ground, like Home's
        copy bands. Stacked copy blocks within one section get an even gap. ---- */
.section{ padding-block:var(--space-8); }
.section .prose + .prose{ margin-top:var(--space-7); }

/* ---- Video: a poster image that opens the shared lightbox (§11). The poster +
        play button show at rest; clicking opens the privacy-mode Vimeo embed in
        the pop-out modal — so no request or cookie is sent to Vimeo until the
        visitor actually plays the film. The button is a real link to the Vimeo
        page, so with JavaScript off it still works. 16:9 thumbnail; playback is
        started by the visitor, so reduced-motion does not apply. ---- */
.video{ margin:var(--space-7) 0; max-width:52rem; }   /* wider than the text — a feature, like Home's photos — but capped + left-aligned */
.video__frame{ position:relative; aspect-ratio:16/9; background:var(--ink);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-2); }
.video__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.video__button{ position:absolute; inset:0; width:100%; display:flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer; background:rgba(40,38,35,.28); transition:background var(--transition); }
.video__button:hover{ background:rgba(40,38,35,.16); }
.video__button:focus-visible{ outline:3px solid var(--paper); outline-offset:-4px; }   /* white ring reads on any photo */
.video__play{ width:5rem; height:5rem; border-radius:50%; background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-2); }
.video__play svg{ width:1.9rem; height:1.9rem; margin-left:.2rem; fill:var(--ink); }   /* nudge triangle to optical centre */
.video__caption{ font-size:var(--fs-small); color:var(--muted); margin-top:var(--space-3); }

/* ---- Media entry: a media block (photo, portrait, or video) beside a text
        column — the recurring two-up layout shared by Leadership (§9), In Memoriam
        (§7), Real Estate (§10), and Foundation. Defining the grid ONCE keeps
        those pages in step. Media on the left (1fr), text on the right (1.25fr);
        it stacks to one column on small screens. ---- */
.media-entry{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:var(--space-7); align-items:start; }
.media-entry .video{ margin:0; max-width:none; }   /* fill the media column, not the 52rem cap */
@media (max-width:767px){ .media-entry{ grid-template-columns:1fr; gap:var(--space-5); } }

/* The two grid children of a media entry — the media (left) and the text column
   (right). The media is a photo, portrait, or video; the text column holds the
   heading, the meta line, the body copy, and an optional aside. These element
   classes are SHARED by Leadership, In Memoriam, and Real Estate so the three pages stay
   in lockstep; each page only varies the media's shape (a modifier below). */
.media-entry__media{ width:100%; height:auto; display:block; border-radius:var(--radius); background:var(--surface); }
.media-entry__media--square{ aspect-ratio:1/1; object-fit:cover; }          /* square headshots (Leadership) */
.media-entry__media--wide{ aspect-ratio:3/2; object-fit:cover; }            /* landscape photos (Real Estate) */
.media-entry__media--logo{ object-fit:contain; padding:var(--space-6); }    /* a contained emblem, not a cropped photo */
.media-entry__media--placeholder{ display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:var(--fs-small); letter-spacing:.04em; text-align:center;
  padding:var(--space-4); border:1px dashed var(--line); }                  /* a "photo to come" box */
.media-entry__text{ min-width:0; }   /* min-width:0 lets long words wrap instead of stretching the column */

/* Meta line under the name — a person's title, a memorial's years, a property's address. */
.media-entry__meta{ font-size:var(--fs-small); font-weight:var(--fw-semi); letter-spacing:.04em;
  color:var(--muted); margin:0 0 var(--space-4); }

/* Entry body copy. */
.media-entry__body p{ font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height:1.65;
  color:var(--ink); margin:0 0 var(--space-4); }
.media-entry__body p:last-child{ margin:0; }

/* Aside under the body — a small upper label over a line of links or a note (Leadership's
   "Elsewhere", In Memoriam's "Remembered at", Real Estate's "County records"). */
.media-entry__aside{ margin-top:var(--space-5); }
.media-entry__aside-label{ display:block; font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:var(--space-1); }
.media-entry__aside p{ font-size:var(--fs-small); color:var(--muted); margin:0; }

/* A short "remembered at" / "elsewhere" note rendered as a PARAGRAPH, not a div.
   Reading views (Safari Reader) strip link-only <div>s but keep <p>s, so the note
   survives. The label is a <span> set to display:block, stacked above the link.
   Bottom margin is zeroed so the note sits flush above the card's own padding
   (a plain <p> would otherwise inherit the body paragraph's bottom margin). */
.entry-note{ margin:var(--space-5) 0 0; font-size:var(--fs-small); color:var(--muted); }
.entry-note__label{ display:block; text-transform:uppercase; letter-spacing:.12em; font-size:.8125rem; color:var(--muted); margin-bottom:var(--space-1); }

/* ---- Entry title + rule: the heading of a media entry — a person's name on Leadership
        and In Memoriam, a property's name on Real Estate, the foundation's name on
        Foundation. Big and bold, with a short rule under it (neutral on light; the
        dark theme re-tints it white, §7). One definition keeps the pages in step. ---- */
.entry-title{ font-size:var(--fs-title); font-weight:var(--fw-bold);
  line-height:1.1; margin:0; color:var(--ink); }
.entry-title--sm{ font-size:var(--fs-h3); }   /* smaller variant for the short Contact / Legal headings */
.entry-rule{ width:54px; height:2px; background:rgba(0,0,0,.22); border:0; margin:var(--space-3) 0; }

/* ---- Card: the one box used everywhere — a property (§10), a leadership entry (§9),
        a memorial (§7), a Join section (§12), a Foundation block, a Contact/Legal
        box. Each sits on its own surface with the brand's 4px YELLOW TOP RULE, so
        every box on the site reads the same way. Inside a card is either a
        .media-entry grid or a .prose column. It is built from tokens, so it themes
        for both light and the dark In Memoriam page (where the top rule turns
        white — see §7). ---- */
.card{
  background:var(--surface); border:var(--border); border-top:4px solid var(--accent); border-radius:var(--radius);
  padding:var(--space-7); margin-bottom:var(--space-6);
}
.card:last-child{ margin-bottom:0; }
@media (max-width:767px){
  .card{ padding:var(--space-5); }
}
.card > p:last-child{ margin-bottom:0; }   /* a single-paragraph card (e.g. Foundation's notice) sits flush */
.card[id]{ scroll-margin-top:5rem; }   /* clear the sticky header when a card is a deep-link target */

/* ============================================================================
   7 · IN MEMORIAM — the one dark, accent-free memorial page
   ----------------------------------------------------------------------------
   The whole page inverts by REDEFINING the core color tokens on the
   .theme-memoriam scope (set on <body>). Because the shared chrome
   (header / nav / footer / wordmark) reads those same tokens, it flips to dark
   automatically — only the few rules that carry the brand yellow need a neutral
   override, since the yellow is intentionally dropped here. Portraits are a
   uniform warm monochrome; motion is near-zero.
   ============================================================================ */
.theme-memoriam{
  --paper:#262320;            /* dark warm ground — softer than pure black */
  --surface:#211d1a;          /* a touch darker — footer / recessed surfaces */
  --ink:#f3f1ec;              /* warm white — body, headings, the wordmark */
  --muted:#a8a29a;            /* muted warm grey on the dark ground (AA) */
  --line:rgba(255,255,255,.14);
  background:var(--paper); color:var(--ink);
}
/* Drop the brand yellow on this page — quiet neutral underlines stand in. */
.theme-memoriam .site-nav__link:hover{ box-shadow:inset 0 -3px 0 rgba(255,255,255,.45); }
.theme-memoriam .site-nav__link--active{ box-shadow:inset 0 -3px 0 var(--ink); }
.theme-memoriam .site-footer__link:hover{ box-shadow:inset 0 -3px 0 rgba(255,255,255,.45); }
.theme-memoriam .skip-link{ background:var(--ink); color:var(--paper); }   /* re-pair on the dark ground */
.theme-memoriam .text-link{ color:var(--ink); box-shadow:inset 0 -1px 0 rgba(255,255,255,.4); }
.theme-memoriam .text-link:hover{ box-shadow:inset 0 -2px 0 rgba(255,255,255,.7); }
/* On the dark ground the entry rule and the eyebrow underbar read white, not yellow. */
.theme-memoriam .entry-rule{ background:rgba(255,255,255,.3); }
.theme-memoriam .heading-rule::after{ background:var(--ink); }

/* In Memoriam's page title uses the shared .page-intro / .page-eyebrow (§6);
   there is no memoriam-specific intro. */

/* The memorial entries are built from the shared .card + .media-entry__* primitives
   (§6). Two dark-ground overrides are all this page needs: re-tint the otherwise
   near-invisible light card to a faint raised panel, and warm the body text down a
   step from the white headings. The card's yellow top rule turns WHITE here — the
   page is intentionally accent-free, so the brand yellow translates to white, as it
   already does for the heading rules on this page. */
.theme-memoriam .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); border-top-color:rgba(255,255,255,.55); }
.theme-memoriam .media-entry__body p{ color:#e4dfd6; }

/* Quiet film control — a slim labelled button, not a poster (the portraits carry
   the page). The button is a working link to Vimeo with JS off; with JS, the click
   opens the privacy embed (dnt=1) in the shared lightbox (§11). No Vimeo
   contact until play. */
.film{ margin-top:var(--space-5); }
.film__button{ display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none;
  background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink);
  font-family:inherit; font-size:var(--fs-small); font-weight:var(--fw-semi); padding:var(--space-3) var(--space-4);
  cursor:pointer; transition:background var(--transition-fast); }
.film__button:hover{ background:rgba(255,255,255,.06); }
.film__icon{ width:1.4rem; height:1.4rem; flex:none; fill:currentColor; }
.film__dur{ color:var(--muted); font-weight:var(--fw-regular); }

/* ============================================================================
   8 · VALUES   (the Values page)
   ----------------------------------------------------------------------------
   The named values as cards in ONE responsive grid (3 across → 2 → 1). The
   .value-card itself is defined in §5 (warm surface, hairline border, 4px yellow
   top rule).

   ORDER: the values carry no ranking, so a small script on the page (see its
   <script> block) gathers the cards, shuffles them, and re-appends them on every
   load — each visit shows a fresh order. With JavaScript off they read in their
   source order. Nothing animates here.
   ============================================================================ */

/* Three cards across; reflows to two, then one, on narrow screens. The list reset
   strips the <ul> markers (it is a list for SEMANTICS — an unordered set).
   align-items:stretch makes the cards in a row share a height. */
.value-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--space-5);
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:899px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:599px){ .value-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   9 · LEADERSHIP   (the Leadership page)
   ----------------------------------------------------------------------------
   ONE page listing the leaders as inline bios. It is the daylight twin of In
   Memoriam (§7): the same media-entry layout and sizes, but on the bright ground
   with light tokens. An eyebrow page title, then one card per person.
   ============================================================================ */

/* The Leadership page is built entirely from the shared .card + .media-entry__* primitives
   (§6) — it has NO page-specific rules. Each person is one media entry: a square
   headshot (.media-entry__media--square) beside the name, the title (.media-entry__meta),
   the bio (.media-entry__body), and the links (.media-entry__aside). */

/* ============================================================================
   10 · REAL ESTATE   (the Real Estate page)
   ----------------------------------------------------------------------------
   A property reads like a Leadership (§9) / In Memoriam (§7) entry, but the subject is
   a building: the name uses the shared .entry-title (§6), the address sits where a
   person's title would, and a "County records" block sits where Leadership's "Elsewhere"
   links sit. The layout reuses the shared .media-entry two-up (§6): a single
   property is one .media-entry, and a property with several structures shows the
   name once over repeated .structure-row entries. The entries are shown inline
   (no pop-up), so short content reads in place with no extra scripting.
   ============================================================================ */

/* A property reads like a Leadership / In Memoriam entry, built from the shared .card +
   .media-entry__* primitives (§6): the photo uses .media-entry__media--wide (3:2),
   a missing photo uses --placeholder, and a group emblem uses --logo. The only
   Real-Estate-specific rule is the multi-structure GROUP below.

   A single-structure property is one .media-entry inside the card. A multi-structure
   property repeats .structure-row media entries inside ONE card, the group name shown
   once at the top. Every structure row after that header is lifted into its own WHITE
   PANEL, so the individual buildings read as distinct items rather than blending
   across a hairline. */
.structure-row + .structure-row{ background:var(--paper); border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:var(--space-5); margin-top:var(--space-5); }

/* ============================================================================
   11 · VIDEO LIGHTBOX (the pop-out film player)
   ----------------------------------------------------------------------------
   The films play in a pop-out lightbox: a click on any a[data-vimeo] opens the
   privacy-mode Vimeo embed centered over a dimmed page; close on the ✕, the
   backdrop, or the Esc key. ONE shared component — the same markup sits at the
   foot of Foundation and In Memoriam, wired up by each page's modal script. It is
   its own dark overlay (dim backdrop + black frame + white ✕), so it looks the
   same on the light pages and the dark In Memoriam page. For privacy, the Vimeo
   iframe is created only when a film is opened and destroyed when it is closed
   (which also stops the audio). The .modal-open class on <html> freezes the page
   scroll while the lightbox is open.
   ============================================================================ */
.video-modal{ position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:var(--space-5); }
.video-modal[hidden]{ display:none; }                     /* the hidden attr wins over display:flex */
.video-modal__backdrop{ position:absolute; inset:0; background:rgba(15,13,11,.86); }
.video-modal__dialog{ position:relative; width:min(92vw, 64rem); }
.video-modal__frame{ position:relative; aspect-ratio:16/9; background:#000;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-2); }
.video-modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* ✕ over the top-right corner of the video — the familiar lightbox affordance, on
   its own dim chip so it reads on a bright frame. */
.video-modal__close{ position:absolute; top:var(--space-3); right:var(--space-3); z-index:1;
  display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem;
  background:rgba(0,0,0,.55); border:0; border-radius:50%; color:#fff; cursor:pointer;
  transition:background var(--transition-fast); }
.video-modal__close svg{ width:1.5rem; height:1.5rem; }
.video-modal__close:hover{ background:rgba(0,0,0,.8); }
.video-modal__close:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* Page-scroll lock while the modal is open (set on <html> by the modal script). */
.modal-open{ overflow:hidden; }

/* ============================================================================
   12 · JOIN   (the recruiting page)
   ----------------------------------------------------------------------------
   The recruiting "front door." Unlike the other interior pages (which use the
   quiet eyebrow title), Join mirrors the HOME page's editorial style: the motto in
   the home hero's headline treatment (.page-hero + the yellow .heading-rule, but
   inked on white, no photo), then three sections (About 2M · People We Like · Our
   Culture), each wrapped in the shared card (§6). The whole page sits in a centered
   reading column (.join). The one bespoke piece is the SKILL & CARE duo: a distinct
   raised white panel inside the People We Like card — two panels split by a hairline
   divider with an "&" node, where the Skill sentence trails off into the Care panel.
   ============================================================================ */

/* Centred reading column for the whole page (hero + sections + close). */
.join{ max-width:46rem; margin-inline:auto; }

/* The motto, in the HOME hero's headline treatment but inked on white (no photo):
   big fluid display, heaviest weight, the brand yellow rule beneath. */
.page-hero{ font-size:var(--fs-hero); line-height:var(--lh-hero); font-weight:var(--fw-black);
  color:var(--ink); margin:0; }

/* Source attribution under the motto — small, muted, em-dash prefix, the org linked. */
.page-cite{ font-size:var(--fs-small); color:var(--muted); margin:var(--space-4) 0 0; }

/* The opening frame above the cards — fills the column (not the narrow .prose cap). */
.join__intro{ max-width:none; margin:0 0 var(--space-8); }

/* Inside a centred-column page (Join / Contact-Legal) the prose fills its card. */
.join .prose{ max-width:none; }

/* The closing invite — lead size; its spacing comes from the last card's margin.
   It routes to the Contact section. */
.join__cta{ font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); margin:0; }

/* Skill & Care — a raised WHITE panel (paper + shadow) so it stands apart from the
   surface People We Like card that holds it. Three grid tracks: panel · divider ·
   panel; it stacks to one column on phones, the divider turning horizontal. */
.duo{ background:var(--paper); border:var(--border); border-radius:var(--radius); box-shadow:var(--shadow-2);
  padding:var(--space-7); margin:var(--space-6) 0;
  display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-7); align-items:stretch; }
.duo__panel{ min-width:0; }                                 /* let the text wrap, not blow out the track */
.duo__name{ font-style:italic; font-size:var(--fs-h3); font-weight:var(--fw-semi);
  color:var(--ink); margin:0 0 var(--space-3); }
.duo__body{ font-size:clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height:1.65;
  color:var(--ink); margin:0; }

/* The divider: a 1px line carrying a small round "&" node at its centre; the node
   wears the panel's paper ground so it cuts the line cleanly. Purely decorative
   (aria-hidden in the markup) — the two names carry the meaning. */
.duo__divider{ position:relative; width:1px; background:var(--line); }
.duo__node{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.5rem; height:2.5rem; border-radius:50%; background:var(--paper); border:var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--fw-bold); color:var(--muted); }

@media (max-width:599px){
  .duo{ grid-template-columns:1fr; gap:var(--space-5); padding:var(--space-5); }   /* match the other cards' tighter mobile padding */
  .duo__divider{ width:auto; height:1px; }                  /* the divider lies flat when the panels stack */
}

/* ============================================================================
   13 · CONTACT & LEGAL   (the combined /contact-legal page)
   ----------------------------------------------------------------------------
   Contact and Legal live on ONE page, /contact-legal, styled like Join (§12): a
   centered column (.join) of cards (§6), no eyebrow title. The separate /contact
   and /legal addresses are small REDIRECT pages that send visitors to the #contact
   / #legal sections here. The page carries a visually-hidden <h1> for structure
   (§3). The only addition over Join's system is a scroll-offset so the sticky
   header doesn't cover a section when you arrive from a #link.
   ============================================================================ */

/* The per-section scroll offset for a deep-linked Contact / Legal card is handled by
   the shared .card[id] rule (§6), so a targeted section clears the sticky header. */