/* v3 layout — photo peek-and-rotate + the page shell (editorial rhythm). Part of the v3 design layer; linked by build-pages.ts sharedStyle(). */
    /* ── Photo peek-and-rotate (carried from index.html, condensed) ──────
       The photo IS the toggle: a hidden candid peeks from behind, hover
       fans them apart, click swaps which is on top. Used on the team page.
       A bare <button> styled as the photo itself — no button chrome. */
    .photo-peek-btn {
      position: relative; display: inline-block; background: none; border: 0;
      padding: 0; margin: 0; cursor: pointer; border-radius: 6px; box-shadow: none;
    }
    .photo-peek-btn:focus-visible { outline: 2px solid #264068; outline-offset: 4px; border-radius: var(--radius-sm); }
    .photo-peek-front {
      display: block; position: relative; z-index: 2; border-radius: var(--radius-sm);
      transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease-out, box-shadow 0.2s ease;
      box-shadow: 2px 2px 6px rgba(38,64,104,0.18);
    }
    .photo-peek-back {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: 1; border-radius: var(--radius-sm);
      transform: rotate(2deg) translate(5px,3px) scale(0.97); opacity: 0.92;
      transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease-out;
    }
    .photo-peek-btn:not(.is-flipped):hover .photo-peek-front,
    .photo-peek-btn:not(.is-flipped):focus-visible .photo-peek-front { transform: rotate(-2deg) translate(-4px,-3px); box-shadow: 4px 4px 10px rgba(38,64,104,0.2); }
    .photo-peek-btn:not(.is-flipped):hover .photo-peek-back,
    .photo-peek-btn:not(.is-flipped):focus-visible .photo-peek-back { transform: rotate(4deg) translate(9px,6px) scale(0.98); }
    .photo-peek-btn.is-flipped .photo-peek-front {
      z-index: 1; transform: rotate(-2deg) translate(-5px,-3px) scale(0.97); opacity: 0.92; box-shadow: none;
      transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1) 0.06s, opacity 0.28s ease-out, box-shadow 0.3s ease;
    }
    .photo-peek-btn.is-flipped .photo-peek-back {
      z-index: 2; transform: rotate(0deg) translate(0,0) scale(1); opacity: 1; box-shadow: 2px 2px 6px rgba(38,64,104,0.18);
      transition: transform 0.46s cubic-bezier(0.34,1.56,0.64,1) 0.08s, opacity 0.28s ease-out, box-shadow 0.3s ease;
    }
    .photo-peek-btn.is-flipped:hover .photo-peek-front,
    .photo-peek-btn.is-flipped:focus-visible .photo-peek-front { transform: rotate(-4deg) translate(-9px,-6px) scale(0.98); }
    .photo-peek-btn.is-flipped:hover .photo-peek-back,
    .photo-peek-btn.is-flipped:focus-visible .photo-peek-back { transform: rotate(2deg) translate(4px,3px); }
    .photo-peek-btn--team { display: block; width: 100%; max-width: var(--w-read); margin: 0 auto; }
    .photo-peek-btn--team .photo-peek-front, .photo-peek-btn--team .photo-peek-back { width: 100%; max-height: 500px; object-fit: cover; }
    .photo-peek-btn--team .photo-peek-front { height: auto; }
    /* Carolyn's flip card → matching framed polaroid (white frame + thick
       bottom) so it's consistent with the static staff polaroids; the flip
       transforms below still animate it. */
    .photo-peek-btn--staff { width: 190px; height: 214px; }
    .photo-peek-btn--staff .photo-peek-front, .photo-peek-btn--staff .photo-peek-back {
      width: 190px; height: 214px; object-fit: cover; object-position: center top;
      box-sizing: border-box; background: #fff;
      border: 9px solid #fff; border-bottom-width: 32px; border-radius: 2px;
    }
    .photo-peek-btn--staff .photo-peek-back { transform: rotate(-3deg) translate(-3px,8px) scale(0.96); }
    .photo-peek-btn--staff:not(.is-flipped):hover .photo-peek-front,
    .photo-peek-btn--staff:not(.is-flipped):focus-visible .photo-peek-front { transform: rotate(2deg) translate(3px,-4px); }
    .photo-peek-btn--staff:not(.is-flipped):hover .photo-peek-back,
    .photo-peek-btn--staff:not(.is-flipped):focus-visible .photo-peek-back { transform: rotate(-5deg) translate(-6px,12px) scale(0.96); }
    .photo-peek-btn--staff.is-flipped .photo-peek-front { transform: rotate(3deg) translate(3px,-8px) scale(0.96); opacity: 0.92; }
    .photo-peek-btn--staff.is-flipped .photo-peek-back { transform: rotate(0deg) translate(0,0) scale(1); opacity: 1; }
    .photo-peek-btn--staff.is-flipped:hover .photo-peek-front,
    .photo-peek-btn--staff.is-flipped:focus-visible .photo-peek-front { transform: rotate(5deg) translate(6px,-12px) scale(0.96); }
    .photo-peek-btn--staff.is-flipped:hover .photo-peek-back,
    .photo-peek-btn--staff.is-flipped:focus-visible .photo-peek-back { transform: rotate(-2deg) translate(-3px,4px); }
    .staff-card img[src*="placeholder"] { mix-blend-mode: multiply; background: transparent; }
    @media (prefers-reduced-motion: reduce) {
      .photo-peek-front, .photo-peek-back { transition: none !important; }
      .photo-peek-back { transform: rotate(2deg) translate(5px,3px) scale(0.97); opacity: 0.92; }
    }

    /* ── Page shell: spacious editorial rhythm ─────────────────────────── */
    /* Top padding sets the gap below the sticky nav to the title — generous on
       desktop, smaller on mobile so it isn't a big void. (Was --space-16/64px,
       which read too cramped under the nav.) */
    .v3-page { max-width: var(--w-read); margin: 0 auto; padding: clamp(88px, 8vw, 128px) var(--space-6) var(--space-24); }
    .v3-page--wide { max-width: var(--w-content); }
    .v3-eyebrow {
      font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-xs);
      letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #5a7298; margin: 0 0 var(--space-3);
    }
    .v3-page h1, .v3-hero h1 {
      font-family: var(--font-display); font-weight: var(--weight-light);
      color: #264068; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
      font-size: var(--text-h1); margin: 0 0 var(--space-5);
    }
    /* h2 alignment follows its container by natural inheritance (the base reset
       no longer forces center): left-grounded sections read left, while the
       deliberately-centered bands (.v3-band--invert, .v3-book-band, About's
       #visit / #team) center their own inner, so their h2 inherits center.
       No counter rule needed. */
    /* Guard (A09): pin a bare, unclassed heading to the v3 display defaults so it
       can't drift. :where() = 0 specificity, so this hardens future bare headings
       without ever overriding a classed one. NOTE: no text-align here — a bare
       heading follows its container, so a centered band (e.g. .v3-band--invert)
       centers its own <h2> while left sections stay left. (Prose-internal centered
       bands like .v3-book-band must override .v3-prose's left-align themselves —
       see v3-pages.css.) */
    main :where(h2, h3, h4):not([class]) {
      font-family: var(--font-display); font-weight: var(--weight-light);
      color: var(--color-ink);
    }
    /* ═══════════════════════════════════════════════════════════════════════
       TYPOGRAPHIC ROLES — the single source of truth for text styling.

       Each role is ONE rule with concrete values. The role class (.v3-body,
       .v3-card-title, …) comes first so you can drop it on any element; every
       existing component/element selector that should look the same is grouped
       in after it. To audit "why does this text look like that?" you read ONE
       rule here — no chasing variables across files, no near-duplicate rules
       drifting apart. To add a new card/intro/etc., add its selector to the
       matching group (or just use the role class in the markup).

       Only colour is a token (themeable, one var); size/leading/weight/family
       are literal on purpose so the rule reads at a glance.
       ═══════════════════════════════════════════════════════════════════════ */

    /* LEDE — page/section intro. Manrope medium; 400 renders thin on some
       screens at this size, so 500 for a cleaner read. */
    .v3-lede {
      font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500;
      line-height: 1.72; color: var(--color-ink-body); margin: 0 0 var(--space-8); max-width: 40em;
    }

    /* BODY — the standard reading paragraph (prose, intros, callouts, FAQ). */
    .v3-body,
    .v3-prose p,
    .v3-prose li,
    .v3-pillar__intro,
    .v3-callout p,
    .v3-info-card p,
    .v3-info-grid p,
    .v3-faq__a-inner,
    .staff-card p {
      font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500;
      line-height: 1.7; color: var(--color-ink-body);
      padding-bottom: 0; /* zero the v3-reset.css base <p> padding here */
    }

    /* BODY-SM — deliberately smaller secondary text (card blurbs, bento, notes).
       (The footer shares this SIZE but keeps its own navy/muted colours — see
       the footer block.) */
    .v3-body-sm,
    .v3-tcard__desc,
    .v3-bento__text,
    .v3-bento__cell p,
    .handbook-note {
      font-family: var(--font-sans); font-size: 1rem; font-weight: 500;
      line-height: 1.55; color: var(--color-ink-subtle);
      padding-bottom: 0; /* zero the v3-reset.css base <p> padding here */
    }

    /* CARD-TITLE — every card/teaser heading (services, info, staff). */
    .v3-card-title,
    .v3-tcard__name,
    .v3-info-card h2,
    .v3-info-grid h3,
    .staff-name {
      font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
      line-height: 1.2; color: #264068;
      padding-bottom: 0; /* zero the v3-reset.css base heading padding here */
    }
    /* .v3-prose now lives in the shared static/css/prose.css (linked in head),
       so the static pages and the blog share one complete prose treatment
       (p, h2–h4, ul/ol + nested, li, blockquote, a, code, hr, img, table). */
    .v3-divider { border: 0; border-top: 1px solid #d9e6ec; max-width: 200px; margin: 56px auto; }