/* ============================================================================
   Praise (light page). Source: ajid-praise-mockup-v3e-hero-three-rooms.html,
   approved as-is 09-15; ground #E7E7E4 throughout (09-21).
   Site changes: headline "Over 25 design awards"; the third room and the
   honors line say "Doe Valley Lane"; the three script accents stay (a
   deliberate exception to the once-per-page rule). See build-notes.
   ========================================================================= */

:where(.page-praise) p + p { margin-top: 1.15em; }

/* ---- Hero: the three rooms that have won something ----------------------- */
.praise-hero { padding-block: clamp(116px, 9vw, 128px) clamp(24px, 3vw, 48px); }
.hcenter { text-align: center; will-change: transform, opacity; }
.accent {
  margin: .7em 0 .62em;
  font-family: var(--script); font-weight: var(--script-weight); font-synthesis: none;
  font-size: clamp(38px, 3.8vw, 52px); line-height: 1; white-space: nowrap;
  color: var(--voice);
}
.praise-hero .display { font-variant-numeric: oldstyle-nums; }
@media (min-width: 700px) {
  .praise-hero .display { white-space: nowrap; font-size: min(64px, calc((100vw - 2 * var(--gut)) / 15)); }
}
.hcenter .draw { margin: 30px auto 28px; max-width: 120px; }
.hcenter .lede { max-width: 54ch; margin-inline: auto; }

.rooms {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(36px, 4.4vw, 56px) clamp(20px, 2.6vw, 38px);
  margin-top: clamp(44px, 5.6vw, 80px);
}
@media (min-width: 760px) { .rooms { grid-template-columns: repeat(3, 1fr); } }
.room .slot {
  --ar: 4 / 5; --set-scale: 1.06; --set-dur: 1.4s;
  box-shadow: 0 22px 50px rgba(52,58,68,.14);
}
.room:nth-child(2) { --rev-dist: 42px; }         /* the three rooms fan in */
.room:nth-child(3) { --rev-dist: 54px; }
.room { --rev-dur: .9s; }
.room__name { margin-top: 20px; }
.award__prize, .award__cat { font-size: 14px; line-height: 1.6; letter-spacing: .02em; }
.room .award__prize { margin-top: 10px; color: var(--r-ink-2); }
.room .award__cat { margin-top: 4px; color: var(--r-quiet); }
.rooms__foot { margin-top: clamp(36px, 4.4vw, 56px); text-align: center; }

/* ---- Client stories intro ---------------------------------------------------- */
.sintro-band { padding-block: clamp(56px, 7vw, 104px) clamp(24px, 3vw, 44px); }
@media (max-width: 599px) { .sintro-band { padding-bottom: 4px; } }
.sintro { max-width: var(--measure); margin-inline: auto; text-align: center; }
.sintro__script {
  margin-bottom: .34em;
  font-family: var(--script); font-weight: var(--script-weight); font-synthesis: none;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1;
  color: var(--voice);
}
.sintro .lede { max-width: 56ch; margin: 20px auto 0; color: var(--r-ink-2); }
.sintro__rule { width: 64px; margin: clamp(30px, 3.4vw, 44px) auto 0; }

/* ---- The five spreads ------------------------------------------------------------ */
.spreads { padding: clamp(8px, 2vw, 24px) 0 clamp(48px, 7vw, 104px); }
.spread { padding-block: clamp(44px, 5.6vw, 84px); }
@media (max-width: 599px) { .spread:first-child { padding-top: 20px; } }
.spread__inner { --mark: clamp(420px, 52vw, 760px); position: relative; max-width: 940px; }
@media (min-width: 900px) { .spread:nth-child(even) .spread__inner { margin-left: auto; } }
.spread__mark {
  position: absolute; left: -.06em; top: -.02em; z-index: 0;
  font-family: var(--display); font-weight: 100; font-size: var(--mark); line-height: 1;
  color: var(--voice); opacity: .2;
  pointer-events: none; user-select: none;
}
.spread__pull {
  position: relative; z-index: 1; max-width: 16ch;
  padding-top: calc(var(--mark) * .15);
  font-family: var(--display); font-weight: 100;
  font-size: clamp(34px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -.023em;
  color: var(--r-ink);
}
/* The pull line's words rise in one after another (the line itself stays put). */
.js .spread__pull.reveal { opacity: 1; transform: none; }
.js .spread__pull .w {
  display: inline-block; opacity: 0;
  transform: translate3d(0, calc(.3em + var(--i, 0) * .045em), 0);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .spread__pull.in .w { opacity: 1; transform: none; }
.w:nth-child(2) { --i: 1; } .w:nth-child(3) { --i: 2; } .w:nth-child(4) { --i: 3; }
.w:nth-child(5) { --i: 4; } .w:nth-child(6) { --i: 5; } .w:nth-child(7) { --i: 6; }
.spread__by { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 28px; }
.spread__rule { width: 56px; height: 1px; background: var(--r-hairline); }
.spread__scope { font-size: var(--size-body); line-height: 1.5; color: var(--r-ink-2); }
.spread__body {
  position: relative; z-index: 1;
  margin-top: clamp(30px, 3.6vw, 48px);
  columns: 2 300px; column-gap: clamp(36px, 4.6vw, 72px);
  font-family: var(--display); font-weight: 300;
  font-size: var(--size-lede); line-height: 1.62; color: var(--r-ink);
}
.spread__body p + p { margin-top: .95em; }
.spread__link { display: inline-block; margin-top: 22px; }   /* Skelly story → Collaborate (2026-10-02) */
.spread__body p:first-child::first-letter {
  -webkit-initial-letter: 3; initial-letter: 3; margin-right: .06em;
  font-family: var(--display); font-weight: 100; color: var(--r-ink);
}
@media (prefers-reduced-motion: reduce) {
  .js .spread__pull .w { opacity: 1; transform: none; transition: none; }
}

/* ---- Recognition ------------------------------------------------------------------ */
.recognition { padding-bottom: clamp(88px, 12vh, 128px); }
.recopen { margin-bottom: clamp(40px, 5vw, 72px); text-align: center; }
.rec { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 900px) { .rec { grid-template-columns: 1fr 1fr; align-items: start; } }
.rec .h2 { max-width: 20ch; }
.rec .lede { margin-top: 22px; max-width: 56ch; color: var(--r-ink); }
.honors__rule { margin: 14px 0 0; max-width: 120px; }
/* Selected honors (Robb, 2026-11-10): each award a centred block between two hairline arcs, a
   typographic take on film-festival laurels. Placement, project, category, awarding body, always
   in that order, so the four parts line up across the grid; the body sits on a shared bottom line
   however long the category runs. Two to a row; on phones, a plain list (below). */
.awards {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 2.6vw, 34px) clamp(16px, 1.8vw, 24px);
  margin-top: clamp(26px, 2.6vw, 34px);
}
.award {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 10px 24px 12px; text-align: center;
}
/* Each arc is one SVG curve used as a mask over the hairline colour, faded at both ends. (A
   rounded border drew stray strokes at its corner joins in Safari.) The right arc is the left
   one mirrored. */
.award::before, .award::after {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; width: 24px;
  background: var(--hairline); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 100' preserveAspectRatio='none'%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.22' stop-opacity='1'/%3E%3Cstop offset='.78' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath d='M12 0Q-10 50 12 100' fill='none' stroke='url(%23f)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 100' preserveAspectRatio='none'%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.22' stop-opacity='1'/%3E%3Cstop offset='.78' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath d='M12 0Q-10 50 12 100' fill='none' stroke='url(%23f)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.award::after { left: auto; right: 0; transform: scaleX(-1); }
.award .award__place { margin: 0; color: var(--ink); }
.award .award__project { margin: 6px 0 0; }
.award__rule { width: 28px; height: 1px; margin: 10px auto; border: 0; background: var(--hairline); }
.award .award__category { margin: 0 0 12px; line-height: 1.4; }
.award .award__body { margin: auto 0 0; letter-spacing: .14em; text-wrap: balance; }
/* Phones (Robb, 2026-11-10): a left-aligned list, in line with the headings above it, the awards
   set apart by space alone; the arcs and the short rule are for the two-up layout only. */
@media (max-width: 599px) {
  .awards { grid-template-columns: 1fr; gap: 28px; margin-top: 26px; }
  .award { align-items: flex-start; padding: 0; text-align: left; }
  .award::before, .award::after, .award__rule { display: none; }
  .award .award__project { margin-top: 4px; }
  .award .award__category { margin: 2px 0 8px; }
  .award .award__body { text-wrap: wrap; }
}

.marks-wrap { margin-top: clamp(56px, 7vw, 96px); }
.marks-wrap > .draw { margin: 0 0 clamp(36px, 4vw, 56px); }
.marks {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px);
}
@media (min-width: 1000px) { .marks { justify-content: space-between; } }
.marks li:nth-child(2) { --rev-dist: 36px; } .marks li:nth-child(3) { --rev-dist: 42px; }
.marks li:nth-child(4) { --rev-dist: 48px; } .marks li:nth-child(5) { --rev-dist: 54px; }
.marks li { --rev-dur: .9s; }
.marks img { height: auto; max-width: 42vw; opacity: .78; }
/* GC Magazine badge: rebuilt as the live site has it. The badge image has a
   blank middle that carries the words "Interior Designer", and the whole badge
   links to the article that gave the award (a "Best of" backlink badge).
   Text scaled from the live 15px on a 125px badge to this 95px one. */
.badge-gc { position: relative; display: block; opacity: .78; transition: opacity var(--dur-micro) var(--ease); }
.badge-gc:hover, .badge-gc:focus-visible { opacity: 1; }
.marks .badge-gc img { opacity: 1; }
.badge-gc__label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: Helvetica, Arial, sans-serif; font-size: 11.5px; line-height: 1; white-space: nowrap;
  color: var(--badge-gc-ink);
}
.marks__houzz { margin-top: clamp(36px, 4vw, 52px); text-align: center; }
.marks__houzz img { display: inline-block; width: min(100%, 640px); height: auto; opacity: .7; }

/* ---- In print: masthead rail and covers ----------------------------------------------- */
.press { padding-block: clamp(88px, 12vh, 128px) var(--sec); }
.press__head { max-width: var(--measure); }
.press__head .lede { margin-top: 24px; color: var(--d-ink); }
.rail {
  position: relative; overflow: hidden;
  margin-top: clamp(52px, 6vw, 84px); padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.rail:focus-visible { outline: 2px solid var(--d-quiet); outline-offset: -2px; }
.rail__track { display: flex; width: max-content; animation: rail 50s linear infinite; }
.rail__set { display: flex; align-items: center; flex: none; }
.rail__set li { flex: none; padding-inline: clamp(26px, 3.4vw, 52px); }
.rail__set img { height: auto; max-width: none; opacity: .86; }
@media (max-width: 599px) {
  .rail__set li { padding-inline: 22px; }
  .rail__set img { width: calc(var(--w) * .7); }
}
.rail:hover .rail__track, .rail:focus .rail__track, .rail:focus-within .rail__track { animation-play-state: paused; }
@keyframes rail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
/* logo widths (the mockup's --w), so the four copies stay identical */
.rail__set .w-137 { --w: 137px; width: 137px; } .rail__set .w-166 { --w: 166px; width: 166px; }
.rail__set .w-183 { --w: 183px; width: 183px; } .rail__set .w-185 { --w: 185px; width: 185px; }
.rail__set .w-195 { --w: 195px; width: 195px; }
@media (max-width: 599px) {
  .rail__set .w-137, .rail__set .w-166, .rail__set .w-183, .rail__set .w-185, .rail__set .w-195 { width: calc(var(--w) * .7); }
}
@media (prefers-reduced-motion: reduce) {
  .rail { -webkit-mask-image: none; mask-image: none; }
  .rail__track { animation: none; width: auto; justify-content: center; }
  .rail__set { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .rail__set[aria-hidden] { display: none; }
}

.covers {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(18px, 2.2vw, 32px);
  margin-top: clamp(56px, 7vw, 96px);
}
@media (min-width: 600px)  { .covers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .covers { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .covers { grid-template-columns: repeat(6, 1fr); } }
.cover__img { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 7 / 9; }
.cover__img img { width: auto; height: auto; max-width: 100%; max-height: 100%; box-shadow: 0 18px 40px rgba(12,16,24,.34); }
.cover figcaption { display: grid; gap: 6px; margin-top: 18px; }
.cover__title { font-family: var(--display); font-weight: 300; font-size: 17px; line-height: 1.3; color: var(--d-display); }