/*
 * Cross-concept refinement layer
 *
 * Keeps the four art directions distinct while enforcing one shared contract
 * for viewport heroes, restrained display type, compact mobile media, and
 * calm chrome. Loaded last so this contract cannot be undone by a concept's
 * earlier exploratory rules.
 */

body.concept {
  --utility-height: 2.15rem;
  --refined-h1: clamp(2.9rem, 2.15rem + 2.45vw, 4.85rem);
  --refined-h2: clamp(2.25rem, 1.96rem + 1vw, 2.75rem);
  --refined-title-measure: 28ch;
}

body.concept--editorial-house {
  --section-space: clamp(4.75rem, 3.35rem + 4.2vw, 8rem);
}

body.concept--private-ledger {
  --utility-height: 2.1rem;
  --estate-section: clamp(4.75rem, 3.35rem + 4.2vw, 8rem);
  --refined-h1: clamp(2.9rem, 2.2rem + 2.3vw, 4.7rem);
  --refined-h2: clamp(2.25rem, 1.94rem + 1vw, 2.75rem);
}

body.concept--grand-maison {
  --section-space: clamp(4.75rem, 3.45rem + 3.9vw, 7.8rem);
  --refined-h1: clamp(2.85rem, 2.22rem + 2.05vw, 4.3rem);
  --refined-h2: clamp(2.25rem, 1.96rem + 1vw, 2.75rem);
}

body.concept--private-office.concept--executive-concierge {
  --utility-height: 1.95rem;
  --ec-rail: clamp(23rem, 32vw, 31rem);
  --ec-section: clamp(4.5rem, 3.35rem + 3.5vw, 7.25rem);
  --refined-h1: clamp(2.8rem, 2.2rem + 1.95vw, 4.15rem);
  --refined-h2: clamp(2.2rem, 1.92rem + .95vw, 2.7rem);
}

/* Stable page chrome lets the hero occupy exactly the remaining viewport. */
body.concept .utility-bar {
  block-size: var(--utility-height);
}

body.concept .utility-bar__inner,
body.concept .site-header__inner {
  min-block-size: 100%;
}

body.concept .site-header {
  block-size: var(--header-height);
}

body.concept--private-ledger .site-header {
  margin-block-end: 0;
}

body.concept main .hero {
  block-size: calc(100svh - var(--utility-height) - var(--header-height));
  min-block-size: 0;
  max-block-size: none;
}

body.concept main .hero .hero__content {
  block-size: auto;
  min-block-size: 0;
  padding-block: clamp(1.75rem, 6.5svh, 4.75rem);
}

body.concept main .hero .hero__video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}

/* The supplied portrait film remains decorative; copy carries the meaning. */
.hero__motion-toggle {
  display: none;
}

html.hero-motion-ready body.concept .hero__motion-toggle {
  position: absolute;
  z-index: 4;
  inset-block-start: clamp(.75rem, 1.5vw, 1.25rem);
  inset-inline-end: var(--gutter);
  display: inline-flex;
  min-block-size: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .55rem .8rem;
  border: 1px solid rgb(230 248 225 / .48);
  background: rgb(56 77 52 / .58);
  color: #E6F8E1;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

html.hero-motion-ready body.concept .hero__motion-toggle::before {
  inline-size: .7rem;
  block-size: .7rem;
  border-inline: 2px solid currentColor;
  content: "";
}

html.hero-motion-ready body.concept .hero__motion-toggle[data-motion="paused"]::before {
  inline-size: 0;
  block-size: 0;
  border: 0;
  border-block: .38rem solid transparent;
  border-inline-start: .62rem solid currentColor;
}

/* A controlled scale and generous measure prevent ornamental wrapping. */
body.concept main #hero-title {
  inline-size: auto;
  max-inline-size: min(100%, var(--refined-title-measure));
  font-size: var(--refined-h1);
  line-height: .98;
  text-wrap: balance;
}

body.concept main :is(
  #intro-title,
  #presence-title,
  #principles-title,
  #publications-title,
  #process-title,
  #membership-title,
  #discretion-title,
  #global-title,
  #resources-title,
  #collection-title,
  #contact-title
) {
  inline-size: auto;
  max-inline-size: min(100%, var(--refined-title-measure));
  font-size: var(--refined-h2);
  line-height: 1.02;
  text-wrap: balance;
}

body.concept main #global-title {
  max-inline-size: none;
  white-space: nowrap;
}

body.concept main .button {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Center the constrained heading box as well as the type inside it. */
body.concept main :where(
  .publications__intro,
  .section-heading--centered
):not(
  .estate-press__intro,
  .estate-process__heading,
  .ec-proof__intro
) > h2 {
  margin-inline: auto;
}

/* Let editorial aspect ratios control their frames instead of HTML dimensions. */
body:is(
  .concept--editorial-house,
  .concept--private-ledger,
  .concept--grand-maison
) main .wide-editorial img {
  block-size: auto;
}

@media (min-width: 61.01rem) {
  body.concept--private-ledger .estate-press__inner {
    grid-template-columns: minmax(27rem, .72fr) minmax(0, 1.28fr);
  }
}

body.concept--private-ledger .estate-membership__heading,
body.concept--private-ledger .estate-membership__content {
  padding: clamp(2.25rem, 3vw, 3.25rem);
}

body.concept--grand-maison main #principles-title,
body.concept--executive-concierge main #principles-title {
  font-size: clamp(2.2rem, 1.92rem + .85vw, 2.5rem);
}

/* Gallery Pavilion: broaden the prologue title and make the global plate real. */
@media (min-width: 86.01rem) {
  body.concept--grand-maison .pavilion-hero .hero__content {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem 3rem;
  }

  body.concept--grand-maison .pavilion-hero h1 {
    grid-column: 1 / -1;
  }

  body.concept--grand-maison .pavilion-hero p {
    grid-column: 1;
    grid-row: 2;
  }

  body.concept--grand-maison .pavilion-hero .button {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (min-width: 72.01rem) {
  body.concept--grand-maison .pavilion-intro .intro__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(26rem, .95fr);
    align-items: start;
    column-gap: clamp(3.5rem, 6vw, 6.5rem);
    row-gap: 0;
  }

  body.concept--grand-maison :is(
    .pavilion-intro__heading,
    .pavilion-intro__lead,
    .pavilion-intro__services,
    .pavilion-intro__continuation
  ) {
    grid-column: 1;
    inline-size: 100%;
  }

  body.concept--grand-maison .pavilion-intro__heading {
    grid-row: 1;
    padding-block: 0 clamp(2rem, 3vw, 3rem);
    text-align: start;
  }

  body.concept--grand-maison main .pavilion-intro__heading #intro-title {
    margin-inline: 0;
  }

  body.concept--grand-maison .pavilion-intro__lead {
    grid-row: 2;
    justify-self: start;
    max-inline-size: 62ch;
    margin-block-start: clamp(2.5rem, 4vw, 3.75rem);
  }

  body.concept--grand-maison .pavilion-intro__services {
    grid-row: 3;
    margin-block-start: clamp(3rem, 5vw, 4.5rem);
  }

  body.concept--grand-maison .pavilion-intro__continuation {
    grid-row: 4;
    justify-self: start;
    max-inline-size: 62ch;
    margin-block-start: clamp(3rem, 5vw, 4.5rem);
  }

  body.concept--grand-maison .pavilion-intro__image {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    justify-self: stretch;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
  }

  body.concept--grand-maison .pavilion-intro__image img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 42%;
  }

  body.concept--grand-maison .pavilion-presence .presence__body {
    grid-template-columns: minmax(20rem, 1.08fr) minmax(0, .92fr);
  }

  body.concept--grand-maison .pavilion-presence .presence__prose {
    grid-column: 1;
    grid-row: 1;
  }

  body.concept--grand-maison .pavilion-presence .editorial-image {
    grid-column: 2;
    grid-row: 1;
  }

  body.concept--grand-maison .pavilion-global {
    grid-template-columns: minmax(21rem, .78fr) minmax(0, 1.22fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
}

body.concept--grand-maison .pavilion-global .global-service__media {
  aspect-ratio: 4 / 5;
  min-block-size: 0;
  block-size: auto;
}

body.concept--grand-maison .pavilion-global .global-service__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (max-width: 62rem) {
  body.concept--private-office.concept--executive-concierge {
    --ec-rail: 100%;
  }
}

@media (max-width: 86rem) {
  /* The collapsed navigation is a reading surface, not desktop utility type. */
  body.concept :is(
    .site-nav__link,
    .nav-group > summary
  ) {
    min-block-size: 4rem;
    padding-block: .7rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.18rem + .7vw, 1.8rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.18;
    text-transform: none;
    white-space: normal;
  }

  body.concept .nav-group__panel a {
    display: flex;
    min-block-size: 2.75rem;
    align-items: center;
    padding: .65rem .5rem;
    font-size: clamp(1rem, .95rem + .18vw, 1.08rem);
    line-height: 1.4;
  }

  /* A filtered ancestor turns Concept 03's fixed drawer into a header-sized box. */
  body.concept .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.concept.nav-open .site-header {
    z-index: 80;
  }

  html.js body.concept--grand-maison .site-nav {
    position: fixed;
    inset: 0;
    block-size: 100dvh;
    max-block-size: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 48rem) {
  body.concept {
    --header-height: 4.2rem;
    --refined-h1: clamp(2.25rem, 8.8vw, 3.05rem);
    --refined-h2: clamp(2rem, 7.7vw, 2.65rem);
    --refined-title-measure: 100%;
  }

  body.concept--editorial-house {
    --section-space: clamp(3.75rem, 11vw, 5rem);
  }

  body.concept--private-ledger {
    --estate-section: clamp(3.9rem, 11vw, 5.1rem);
  }

  body.concept--grand-maison {
    --section-space: clamp(3.9rem, 11vw, 5.1rem);
  }

  body.concept--private-office.concept--executive-concierge {
    --ec-section: clamp(3.75rem, 10.5vw, 5rem);
    --refined-h1: clamp(2.25rem, 8.8vw, 3.05rem);
    --refined-h2: clamp(2rem, 7.7vw, 2.65rem);
  }

  body.concept .site-header__inner {
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem;
    gap: .35rem;
  }

  body.concept .site-header .brand {
    inline-size: clamp(11.75rem, 49vw, 14rem);
  }

  body.concept main .hero .hero__content {
    padding-block: clamp(2rem, 6svh, 3.25rem);
  }

  body.concept main .hero .hero__video {
    background: #384D34;
    object-fit: cover;
    object-position: 50% 50%;
  }

  body.concept main #hero-title,
  body.concept main :is(
    #intro-title,
    #presence-title,
    #principles-title,
    #publications-title,
    #process-title,
    #membership-title,
    #discretion-title,
    #global-title,
    #resources-title,
    #collection-title,
    #contact-title
  ) {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  body.concept main :is(
    .section-heading,
    .collection__intro
  ) {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  body.concept main .button {
    inline-size: 100%;
  }

  /* Primary portrait plates: full parent width and never taller than 3:4. */
  body.concept main :is(
    .editorial-image,
    .membership__media,
    .global-service__media,
    .collection__media
  ) {
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    block-size: auto;
    aspect-ratio: 3 / 4;
    justify-self: stretch;
    margin-inline: 0;
  }

  body.concept main :is(
    .editorial-image,
    .membership__media,
    .global-service__media,
    .collection__media
  ) > img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Landscape process plates stay broad and compact on a narrow screen. */
  body.concept main .process__feature {
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    block-size: auto;
    aspect-ratio: 4 / 3;
    justify-self: stretch;
    margin-inline: 0;
  }

  body.concept main .process__feature > img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Supporting object studies use a slightly shorter portrait frame. */
  body.concept main :is(
    .discretion__media,
    .resources__media,
    .final-cta__media
  ) {
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    block-size: auto;
    aspect-ratio: 4 / 5;
    justify-self: stretch;
    margin-inline: 0;
  }

  body.concept main :is(
    .discretion__media,
    .resources__media,
    .final-cta__media
  ) > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  body.concept main .wide-editorial,
  body.concept main .wide-editorial img {
    inline-size: 100%;
    max-inline-size: none;
  }

  body.concept main .wide-editorial img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* The Estate's desktop invitation becomes a true image/copy stack. */
  body.concept--private-ledger .estate-invitation {
    display: grid;
    min-block-size: 0;
  }

  body.concept--private-ledger .estate-invitation__media {
    position: relative;
    z-index: 0;
    inset: auto;
  }

  body.concept--private-ledger .estate-invitation__media::after {
    background: linear-gradient(0deg, rgb(56 77 52 / .58), transparent 58%);
  }

  body.concept--private-ledger .estate-invitation__content {
    inline-size: min(calc(100% - (2 * var(--gutter))), 47rem);
    min-block-size: 0;
    margin-inline: auto;
    padding-block: clamp(3.5rem, 12vw, 5rem);
  }

  /* Concept 03 carried deliberate desktop picture widths into mobile. */
  body.concept--grand-maison main .pavilion-discretion .discretion__media,
  body.concept--grand-maison main .pavilion-resources .resources__media,
  body.concept--grand-maison main .pavilion-close .final-cta__media {
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    block-size: auto;
    aspect-ratio: 4 / 5;
    justify-self: stretch;
  }

  body.concept--grand-maison main .pavilion-global .global-service__media {
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    block-size: auto;
    aspect-ratio: 4 / 5;
    justify-self: stretch;
  }

  body.concept--grand-maison main .pavilion-collection .collection__media {
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: 0;
    block-size: auto;
    aspect-ratio: 3 / 4;
    justify-self: stretch;
  }

  /* Larger, calmer mobile brand lockups and a centered footer masthead. */
  body.concept .site-footer {
    padding-block-start: clamp(3rem, 10vw, 4.25rem);
  }

  body.concept .site-footer .site-footer__top {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: 1.15rem;
    text-align: center;
  }

  body.concept .site-footer .brand--footer {
    inline-size: clamp(14.5rem, 64vw, 17.5rem);
    justify-self: center;
  }

  body.concept .site-footer .instagram-link {
    justify-self: center;
    text-align: center;
  }
}

@media (max-width: 48rem) and (orientation: landscape),
       (max-height: 35rem) {
  body.concept {
    --refined-h1: clamp(2rem, 5.2vw, 2.85rem);
  }

  body.concept main .hero .hero__content {
    padding-block: 1.25rem;
  }

  body.concept main .hero p {
    margin-block-start: .75rem;
    font-size: .9rem;
    line-height: 1.4;
  }

  body.concept main .hero .button {
    min-block-size: 2.8rem;
    margin-block-start: .9rem;
    padding-block: .55rem;
  }

  body.concept--grand-maison .pavilion-hero .hero__content {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
    grid-template-rows: auto auto;
    align-items: end;
    gap: .55rem 2rem;
    text-align: start;
  }

  body.concept--grand-maison .pavilion-hero h1 {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: end;
  }

  body.concept--grand-maison .pavilion-hero p {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    text-align: start;
  }

  body.concept--grand-maison .pavilion-hero .button {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.concept main .hero .hero__video {
    animation: none;
  }
}

/* ==========================================================================
   CROSS-CONCEPT CONSISTENCY (concepts 07-10)
   Loaded last, so these win. Each rule below closes a gap measured against
   concepts 01-06 rather than a matter of taste.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · PARAGRAPH RHYTHM
   Measured at 430px: concepts 01-06 set 1.43em between paragraphs, these four
   set 1.05em. Side by side the difference reads as cramped rather than as a
   different design, which is exactly the inconsistency to remove. 1.5rem on a
   17.2px body lands at ~1.4em and matches.
   -------------------------------------------------------------------------- */
.prose__continuation > * + *,
.prose-block > * + *,
.rich-text > * + *,
body.concept--grand-maison .prose__continuation > * + * {
  /* em, not rem: the body size is fluid, so a fixed rem gap drifts from 1.4em
     on a phone to 1.2em on a desktop. Concepts 01-06 set 1.4em flat, and the
     point of this rule is to match them at every width. */
  margin-block-start: 1.4em;
}

/* --------------------------------------------------------------------------
   2 · THE PRESS LOGOS
   Nine logos. Each of these four concepts ships its own column ladder under
   its own class name and its own selector weight, and all four ended on two
   columns at the narrowest step — four full rows and a single stranded logo.
   Two of them also ran all nine across in one row on a desktop, which is
   cramped rather than balanced.

   One ladder for all ten concepts now: five across above 62rem, which lands
   as a balanced 5 + 4, and three across below it, which divides nine exactly.
   The selectors below deliberately mirror each concept's own so they tie on
   specificity and win on order; a generic .publication-grid rule would lose to
   every one of them.
   -------------------------------------------------------------------------- */
.publication-grid,
body.concept--private-ledger .estate-press__marks,
body.concept--grand-maison .pavilion-publications .publication-grid,
body.concept--executive-concierge .ec-proof__marks {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 62rem) {
  .publication-grid,
  body.concept--private-ledger .estate-press__marks,
  body.concept--grand-maison .pavilion-publications .publication-grid,
  body.concept--executive-concierge .ec-proof__marks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .publication-grid img,
  body.concept--private-ledger .estate-press__marks img,
  body.concept--grand-maison .pavilion-publications .publication-grid img,
  body.concept--executive-concierge .ec-proof__marks img {
    block-size: 5.25rem;
    padding: .9rem;
  }
}

/* --------------------------------------------------------------------------
   3 · THE FOOTER WORDMARK ON A PHONE
   The cell is centred but the image inside it was not, so the logo printed
   left of the copy beneath it.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .site-footer__top,
  .site-footer__identity {
    justify-items: center;
    text-align: center;
  }

  .brand--footer,
  .brand--footer img {
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   4 · BUTTON LABELS
   Belt and braces: any flex button whose label could sit left of centre once
   the button goes full width on a phone.
   -------------------------------------------------------------------------- */
.button,
.button--primary,
.button--ghost,
a.button,
button.button {
  justify-content: center;
  text-align: center;
}

/* Concept 09 sets its intro rhythm through `.pavilion-intro__continuation
   p + p`, which outweighs the generic rule above. Matching its selector so the
   two tie and source order decides — refinements.css loads last. */
body.concept--grand-maison .pavilion-intro__continuation p + p,
body.concept--grand-maison .prose__continuation p + p {
  margin-block-start: 1.4em;
}