/* ============================================================================
   Praise rev 1 (Robb, 2026-11-06; see the note at the top of praise-rev-1.html).
   Loaded after praise.css; only what the new order needs.
   ========================================================================= */

/* ---- Hero: text only, the clients first ------------------------------------------ */
.praise-hero--stories { padding-bottom: clamp(8px, 2vw, 24px); }
.praise-hero--stories .tlink { display: inline-block; margin-top: 30px; }

/* ---- Project frames beside the stories ------------------------------------------- */
/* Empty until Allison confirms which project each story belongs to (Robb, 2026-11-06). They sit in the
   open side of each spread (the spreads alternate), float like the project pages' small frames
   (js/detail.js), and only show where there is room beside the 940px text. */
.spread__proj { display: none; }
@media (min-width: 1320px) {
  .spread__proj {
    --ar: 4 / 5;
    position: absolute; top: calc(var(--mark) * .2); left: calc(100% + 56px);
    display: grid; place-items: center;
    /* whatever is left of the content width beside the 940px text and the 56px gap, so it never passes the page edge */
    width: min(240px, calc(min(100vw, var(--wide)) - 2 * var(--gut) - 940px - 56px));
    border: 1px dashed var(--r-hairline); background: transparent;
  }
  .spread:nth-child(even) .spread__proj { left: auto; right: calc(100% + 56px); }
  .spread__proj span {
    font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--r-quiet); text-align: center; padding: 0 16px;
  }
}

/* ---- Recognition: text and the two marks only (no room photos; Robb, 2026-11-06) ---------- */
/* The marks sit left under the lede at a set gap (Robb, 2026-11-10: left-aligned and closer
   together, the last ending roughly under the lede's last words, not on its edge). */
.rec .marks--two {
  justify-content: flex-start !important; gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(32px, 3.6vw, 48px);
}
/* One row at every width: the marks shrink together (in proportion to their set widths) rather
   than wrap when the column is narrow. */
.rec .marks--two { flex-wrap: nowrap; }
.rec .marks--two li { flex: 0 1 auto; min-width: 0; }
.rec .marks--two img { max-width: 100%; }
/* A linked mark (the Houzz badge) brightens on hover and focus, like the GC badge. */
.marks__link { display: block; }
.marks__link img { transition: opacity var(--dur-micro) var(--ease); }
.marks__link:hover img, .marks__link:focus-visible img { opacity: 1; }

/* ---- In print on the light ground --------------------------------------------------- */
.press--light { padding-top: clamp(56px, 7vw, 96px); }
.press--light .press__head .lede { color: var(--r-ink); }
.press--light .rail:focus-visible { outline-color: var(--r-quiet); }
.press--light .rail__set img { filter: brightness(0); opacity: .62; }   /* the logo files are white, made for navy */
.press--light .cover__title { color: var(--r-ink); }
.press--light .cover .eyebrow { color: var(--r-quiet); }
/* Calmer covers: the critique's "busiest area on the site". Colour at rest is muted; it returns on hover. */
.press--light .cover__img img {
  box-shadow: 0 18px 40px rgba(52,58,68,.22);
  filter: saturate(.6);
  transition: filter var(--dur-micro) var(--ease);
}
.press--light .cover:hover .cover__img img { filter: none; }
@media (min-width: 900px) { .covers--six { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-inline: auto; } }
@media (min-width: 1180px) { .covers--six { grid-template-columns: repeat(6, 1fr); max-width: none; } }

/* ---- Close: the client's words over the drift --------------------------------------- */
.praise-note { padding-top: clamp(40px, 6vw, 96px); }
.praise-note .drift-note__card { max-width: 860px; }
/* A longer quote: the reading size and Canela weights of the Home and Services cards */
.praise-note .drift-note__card .h2 {
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.34;
  font-weight: 300; letter-spacing: 0; word-spacing: .04em;
}
@media (min-width: 900px) { .praise-note .drift-note__card .h2 { font-weight: 100; } }

/* Floating frames fade in without the reveal's rise (the float owns the transform) */
.js .reveal[data-float] { transform: none; transition-property: opacity; }
[data-float] { will-change: transform; }