/* =========================================================================
   Ciano Meubles — the dark close
   .dclose paints one ground for everything in it and drops the rules between
   its children, so a page's last few blocks read as one panel rather than a
   stack of sections. On the home page and collections that ground is paper.
   This is the same panel on the dark ground instead.

   It exists because of the About page. "How It Works" is a near-black band,
   and it used to end on a hard line back into cream with Contact underneath.
   Rather than soften that edge, the band stops being a band: the dark carries
   on through Contact and the footer to the foot of the page, so there is one
   join at the top of the section and none after it.

   WHAT THAT COSTS. Everything below the band is reversed — the form, its
   inputs, the footer, the whole close. This file is that inversion, and it is
   the whole of it: --dark is a modifier on .dclose in css/reveal.css and adds
   no structure of its own.

   Brass here is TRUE brass, not --x-brass-ink. The rule in tokens.css is that
   --x-brass reads 2.77:1 on paper and can only be a fill there, while
   --x-brass-ink is the deepened twin that survives as text. On this ground
   that flips: --x-brass is 5.63:1 and --x-brass-ink is far too dark to read.
   So every accent that home-restyle.css deepens for the paper close comes
   back up to true brass here.

   Loaded by about.html only.
   ========================================================================= */

/* ---------------------------------------------------------------- ground - */

/* One ground for the whole close. Solid, not the 95% the paper close uses:
   nothing is passing underneath this one, and a translucent near-black over
   the sheet's cream would lift it off --x-dark and break the seam with the
   band above, which is the entire point of the panel. */
.dclose--dark { background-color: var(--x-dark); }
.dclose--dark > * { background: transparent; }

/* The band keeps its own radial pool of light and gives up its solid, so the
   ground is painted once. Two stacked elements each carrying the full .dband
   background would each get their own pool, and the seam between them would
   show as the lift colour meeting flat dark. */
.dclose--dark > .dband {
  background: radial-gradient(112% 88% at 50% 46%,
    rgba(62, 60, 55, 0.55) 0%, rgba(40, 39, 36, 0.26) 40%,
    rgba(var(--x-dark-rgb), 0) 68%);
}

/* .dclose trims the bottom padding of every section in it so the last one
   meets the footer. The band is a full section in its own right and needs its
   own air, not the closing trim. */
.dclose--dark > .dband { padding-bottom: clamp(46px, 6vw, 86px); }

/* ------------------------------------------------------------- headings -- */

/* home-restyle.css sets these for the paper close with !important, so the
   dark close has to answer in kind. Same specificity would lose on source
   order alone; this file loads after, but the !important is what actually
   decides it. */
.dclose--dark .section-title { color: var(--x-paper) !important; }
.dclose--dark .section-title em { color: var(--x-brass) !important; }
.dclose--dark .section-label { color: var(--x-brass) !important; }
.dclose--dark .divider { background: var(--x-brass) !important; }

.dclose--dark .section-subtitle { color: rgba(var(--x-paper-rgb), 0.72); }

/* -------------------------------------------------------------- contact -- */

.dclose--dark .contact-detail-item { border-bottom-color: rgba(var(--x-paper-rgb), 0.12); }
.dclose--dark .contact-detail-label { color: var(--x-brass); }
.dclose--dark .contact-detail-value { color: rgba(var(--x-paper-rgb), 0.86); }
.dclose--dark a.contact-detail-value:hover { color: var(--x-brass); }

/* ----------------------------------------------------------------- form -- */

.dclose--dark .form-label { color: rgba(var(--x-paper-rgb), 0.62); }

/* The input's ground is a step UP from the panel, not down. On paper a field
   recesses by going darker than the page; on a near-black ground the only
   direction left is lighter, which is the same move --x-dark-lift exists for
   in tokens.css. */
.dclose--dark .form-input {
  background: var(--x-dark-lift);
  border-color: rgba(var(--x-paper-rgb), 0.16);
  color: var(--x-paper);
}

.dclose--dark .form-input::placeholder { color: rgba(var(--x-paper-rgb), 0.34); }

.dclose--dark .form-input:focus {
  border-color: var(--x-brass);
  background: var(--x-dark-lift);
}

/* A native select paints its dropdown from the element's own colours, and the
   list is drawn by the OS outside this stylesheet's reach — so the options
   have to be told as well or the menu opens as dark text on dark. */
.dclose--dark .form-select option {
  background: var(--x-dark-lift);
  color: var(--x-paper);
}

.dclose--dark .form-note { color: rgba(var(--x-paper-rgb), 0.55); }

/* The shared button is drawn for paper: --x-brass-ink label, brass wiping up.
   Only the resting label changes here — on this ground it can be true brass,
   and once the fill has arrived the label is --x-dark either way. */
.dclose--dark .btn-primary { color: var(--x-brass); }
.dclose--dark .btn-primary:hover { color: var(--x-dark); }

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

.dclose--dark > footer { border-top: 0; }

.dclose--dark .footer-brand p { color: rgba(var(--x-paper-rgb), 0.60); }

/* The logo is dark line-art on a transparent ground — invisible here. The nav
   inverts the same mark the same way when it is over dark imagery. */
.dclose--dark .footer-brand .nav-logo-img { filter: invert(1) brightness(1.9); }

.dclose--dark .footer-nav a { color: rgba(var(--x-paper-rgb), 0.68); }
.dclose--dark .footer-nav a:hover { color: var(--x-brass) !important; }

.dclose--dark .footer-contact-label { color: var(--x-brass); }
.dclose--dark .footer-contact-info { color: rgba(var(--x-paper-rgb), 0.68); }
.dclose--dark .footer-contact-info a { color: rgba(var(--x-paper-rgb), 0.68); }
.dclose--dark .footer-contact-info a:hover { color: var(--x-brass) !important; }

.dclose--dark .footer-bottom { border-top-color: rgba(var(--x-paper-rgb), 0.12); }
.dclose--dark .footer-bottom p { color: rgba(var(--x-paper-rgb), 0.45); }