/* ============================================================
   RLGN.CA — night shell (clean-sheet flagship direction, 2026-07-02)
   body.night re-scopes the token system so every existing component
   reads correctly on the warm-dark ground. Pattern generalized from
   style.css's .cta-final re-scope (see its annotations for the traps
   this file handles: card fills, solid red buttons, the paper bar).
   ============================================================ */

body.night {
  /* ground */
  --night:       #16130e;
  background:    var(--night);

  /* paper surfaces → layered darks (cards/panels keep their hierarchy) */
  --paper:        #211d16;
  --paper-light:  #262119;
  --paper-deep:   #1b1712;
  --paper-edge:   #3a342a;
  --paper-shadow: rgba(0, 0, 0, 0.35);

  /* ink tiers → cream tiers (light on dark, AA-minded) */
  --ink:         #ddd4c0;
  --ink-soft:    #efe6d2;
  --ink-muted:   #b3aa97;
  --ink-faint:   #a89f8d;
  --ink-dust:    #57503f;

  /* rules on dark */
  --rule:         rgba(239, 230, 210, 0.14);
  --rule-strong:  rgba(239, 230, 210, 0.34);
  --rule-faint:   rgba(239, 230, 210, 0.07);

  /* red TEXT accents brightened for AA on dark (matches .cta-final recipe) */
  --red: var(--red-hot);

  color: var(--ink);
}

/* Solid red actions stay brand wrap-red — never the brightened text-red. */
body.night .btn-call,
body.night .btn-action,
body.night .cta-final .btn-call {
  background-color: #a8001f;
  border-color: #a8001f;
  color: #fff;
}

/* Small footer headings sit on the darkest paper tier. The brighter brand
   red keeps their drafting-label character while clearing text contrast. */
body.night .title-block__col h4 { color: #ff3b5c; }

/* The dispatch bar is the paper constant: cream toolbar riding over the night.
   Re-pin the original daylight tokens inside it. */
body.night .dispatch-bar {
  --paper:        #f1eadb;
  --paper-light:  #f8f2e4;
  --paper-deep:   #e4dac1;
  --paper-edge:   #c8bea3;
  --ink:          #54504a;
  --ink-soft:     #3d3933;
  --ink-muted:    #5d574e;
  --ink-faint:    #605a50;
  --ink-dust:     #b8b09c;
  --rule:         rgba(26, 24, 20, 0.16);
  --rule-strong:  rgba(26, 24, 20, 0.38);
  --red:          #E4002B;
  background:     #f1eadb;
  color:          var(--ink);
}
body.night .bar-menu {
  --paper: #f1eadb; --ink: #54504a; --ink-soft: #3d3933; --red: #E4002B;
  background: #f1eadb;
}

/* .cta-final is style.css's own dark panel: it colors its big number/h3/ghost
   button with var(--paper), which body.night re-scopes DARK — dark-on-dark.
   Re-pin the paper tiers light inside the panel (found independently by three
   page verifiers in the 2026-07-02 night burn; page-scoped copies of this rule
   in redseal.css/contact.css/about.html are now redundant but harmless). */
body.night .cta-final {
  --paper:      #f1eadb;
  --paper-deep: #e4dac1;
  --paper-edge: #a89f8d;
}

/* .capabilities paints its container/border with var(--ink) — cream under
   night — which reads as a cream slab behind pre-reveal cells and in empty
   grid cells. Hairlines go dark-gold instead. */
body.night .capabilities {
  border-color: var(--paper-edge);
  background: var(--paper-edge);
}

/* forms on night: fields become recessed dark panels with light text */
body.night input,
body.night select,
body.night textarea {
  background: var(--paper-deep);
  color: var(--ink-soft);
  border-color: var(--paper-edge);
}
body.night ::placeholder { color: var(--ink-faint); }

/* photography reads better slightly dimmed + neutral on night */
body.night .photo img, body.night .gallery img { filter: brightness(0.92) contrast(1.04); }

/* ---- night hero (nh): the flagship's patient entrance as a component ---- */
.nh { min-height: 62vh; display: grid; place-content: center; text-align: center;
      gap: 1.1rem; padding: 9rem 7vw 6rem; background: var(--night); }
.nh__kicker { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .22em;
              color: var(--red-hot); text-transform: uppercase; }
.nh h1 { font-family: var(--f-display); font-weight: 600; color: #efe6d2;
         font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1.02; }
.nh h1 .red { color: var(--red-hot); }
/* night heroes are uppercase display type (no descenders), so the shared
   draw-underline offset (-0.18em, tuned for mixed case) reads as a float —
   snug the rule up under the caps. Beats the base + reduced-motion rules on
   specificity, so one line covers both. */
.nh h1 [data-mk="draw"]::after { bottom: 0.05em; }
.nh__lede { font-size: clamp(1.02rem, 1.7vw, 1.28rem); color: #b3aa97;
            max-width: 52ch; margin: 0 auto; }
.nh__cta { margin-top: 1.4rem; display: flex; gap: 1rem; justify-content: center;
           flex-wrap: wrap; }

/* ---- night editorial rows (ng): flagship services strip as a component ---- */
.ng { background: var(--night); color: #efe6d2; padding: 7rem 6vw; }
.ng-head { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .22em;
           text-transform: uppercase; color: var(--red-hot); margin-bottom: 2.6rem; }
.ng-rows { max-width: 1100px; }
.ng-row { display: grid; grid-template-columns: 3.2rem 1fr 1.4fr 2.5rem; gap: 1.4rem;
          align-items: baseline; padding: 1.5rem 0; text-decoration: none;
          border-top: 1px solid rgba(239, 230, 210, 0.13); }
.ng-row:last-child { border-bottom: 1px solid rgba(239, 230, 210, 0.13); }
.ng-row__num { font-family: var(--f-mono); font-size: .78rem; color: #8f8674; }
.ng-row__title { font-family: var(--f-display); font-weight: 600;
                 font-size: clamp(1.4rem, 2.6vw, 2.1rem); color: #efe6d2;
                 transition: color 240ms; }
.ng-row__desc { font-size: .95rem; color: #a89f8d; }
.ng-row__arrow { font-size: 1.3rem; color: #8f8674; transition: transform 240ms, color 240ms; }
.ng-row:hover .ng-row__title { color: var(--red-hot); }
.ng-row:hover .ng-row__arrow { color: var(--red-hot); transform: translateX(6px); }

.ng-band { background: var(--night); border-top: 1px solid rgba(239, 230, 210, 0.13);
           padding: 6rem 6vw; text-align: center; }
.ng-band .bl { font-family: var(--f-display); font-weight: 600; color: #efe6d2;
               font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 1.6rem; }
.ng-band .tel { font-family: var(--f-mono); font-size: 1.05rem; color: #efe6d2;
                text-decoration: none; border: 1px solid #E4002B; padding: .9rem 1.6rem;
                border-radius: 3px; display: inline-block; }
.ng-band .tel:hover { background: #E4002B; color: #fff; }

.ng-foot { background: var(--night); border-top: 1px solid rgba(239, 230, 210, 0.13);
           padding: 3rem 6vw; display: flex; flex-wrap: wrap; gap: 2rem;
           justify-content: space-between; align-items: center; }
.ng-foot span, .ng-foot a { font-family: var(--f-mono); font-size: .7rem;
           letter-spacing: .12em; text-transform: uppercase; color: #8f8674;
           text-decoration: none; }
.ng-foot a:hover { color: #efe6d2; }

@media (max-width: 760px) {
  .ng-row { grid-template-columns: 2.4rem 1fr 2rem; }
  .ng-row__desc { display: none; }
}