/* =========================================================================
   Ciano Meubles — demo: carry the hero's language through the rest of the page
   Loaded AFTER the production stylesheets, scoped to .dsheet so it can only
   touch this demo page's body content. The live pages are unaffected.

   Palette from css/tokens.css, which must load first; the --r-* block
   that used to sit in this file is gone.

   Two colour rules matter here:
   - Brass (var(--x-brass)) reads beautifully on the hero's near-black, but against
     cream it lands at ~2.5:1 — nowhere near readable. So brass is used for
     FILLS, RULES and MARKS on light ground, never for text.
   - Text accents use a deepened brass (var(--x-brass-ink), ~5.6:1 on cream) so the hue
     still reads as the hero's, at a contrast that passes AA.
   ========================================================================= */

/* ------------------------------------------------------------ display type */

.dsheet .section-title,
.dsheet .cta-band-title,
.dsheet .home-col-name,
.dsheet .intro-pull-quote,
.dsheet .intro-val-stat-num {
  font-family: var(--x-display) !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em;
}

.dsheet .section-title,
.dsheet .cta-band-title {
  font-size: clamp(2.2rem, 4.4vw, 3.9rem) !important;
  line-height: 1.04 !important;
  text-transform: none !important;
}

/* The hero's signature: the second line falls to italic in the accent hue. */
.dsheet .section-title em,
.dsheet .cta-band-title em {
  font-style: italic !important;
  color: var(--x-brass-ink) !important;
  font-weight: 300 !important;
}

.dsheet .home-col-name {
  font-size: clamp(1.4rem, 2.1vw, 2rem) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.dsheet .intro-pull-quote {
  font-style: italic !important;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem) !important;
  line-height: 1.35 !important;
  color: var(--x-ink) !important;
}

.dsheet .value-title {
  font-family: var(--x-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ------------------------------------------------------------ labels ----- */

.dsheet .section-label,
.dsheet .cta-band-contact-label,
.dsheet .footer-contact-label,
.dsheet .home-col-tag,
.dsheet .intro-val-stat-label {
  font-family: var(--x-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
}

.dsheet .section-label { color: var(--x-brass-ink) !important; }

/* Eyebrow rule, echoing the hero's dash before the eyebrow. */
.dsheet .section-label::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--x-brass);
}

.dsheet .home-col-num,
.dsheet .intro-val-stat-num {
  color: var(--x-brass-ink) !important;
}

.dsheet .intro-val-stat-num {
  font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
  line-height: 1 !important;
}

/* The third stat is a word ("Designed"), not a numeral. At numeral size it
   outruns its column and unbalances the row. */
.dsheet .intro-val-stat:last-child .intro-val-stat-num {
  font-size: clamp(1.35rem, 2.1vw, 1.9rem) !important;
  line-height: 1.25 !important;
}

/* ------------------------------------------------------------- body copy -- */

.dsheet .section-subtitle,
.dsheet .home-col-header-sub,
.dsheet .home-col-desc,
.dsheet .cta-band-sub,
.dsheet .value-desc {
  font-family: var(--x-sans) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
}

/* ---------------------------------------------------------------- rules --- */

.dsheet .divider,
.dsheet .home-col-header-divider-line,
.dsheet .cta-band-divider {
  background: var(--x-brass) !important;
}

.dsheet .home-col-header-accent-corner {
  border-color: var(--x-brass) !important;
}

/* --------------------------------------------------------------- buttons -- */

/* Nothing here any more. This block was the hero's button ported onto .btn
   for the home page alone — brass fill, square corner, cream wiping up from
   the bottom — and every rule in it carried !important to get past the
   graphite .btn-primary in style.css.

   That graphite button is gone: style.css now IS this treatment, for every
   page, so the override has nothing left to override. The .home-col-* half of
   each selector went with it; that section's markup no longer exists.

   See .btn / .btn-primary / .btn-outline in css/style.css. */

/* The CTA band is a light clay panel (var(--x-clay)), not dark — plain brass lands at
   2.29:1 there. Text keeps the deepened hue; only the rule stays true brass. */
.dsheet .cta-band .section-label,
.dsheet .cta-band-contact-label,
.dsheet .cta-band-title em { color: var(--x-brass-ink) !important; }

.dsheet .cta-band .section-label::before { background: var(--x-brass); }

/* --------------------------------------------------------------- accordion */

.dsheet .value-acc-header {
  transition: color 0.4s var(--x-ease);
}

.dsheet .value-acc-header:hover .value-title { color: var(--x-brass-ink) !important; }

/* ---------------------------------------------------------------- footer -- */

.dsheet .footer-nav a,
.dsheet .footer-contact-info a {
  font-family: var(--x-sans) !important;
  font-weight: 300 !important;
  transition: color 0.4s var(--x-ease);
}

.dsheet .footer-nav a:hover,
.dsheet .footer-contact-info a:hover { color: var(--x-brass-ink) !important; }


/* ---------------------------------------------------------- CTA band ----- */

/* The CTA's ground is no longer set here. Philosophy, the CTA and the footer
   are now one panel (.dclose) that paints a single clay ground for all three,
   and each child is transparent over it — see the .dclose block in
   home-sections.css, which is the only place that colour is decided.

   This rule used to force the CTA to var(--x-paper) to match a philosophy
   section that was cream at the time. Philosophy is clay now, so the override
   was what made the two sections disagree — and being !important it beat the
   panel. Do not reintroduce a background here. */