/* RLGN.CA — red-seal-millwright-calgary page styles.
   Night editorial, the lightest treatment in the family: no canvas, no
   engine. The credential set like the certificate itself — a plate of
   type on the night ground. Partner to css/night.css (body.night). */

/* ---- certificate plate ---- */
.cert { background: var(--night); padding: 0 6vw 6.5rem; }

.cert__plate {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4.2rem) clamp(1.4rem, 5vw, 4rem) clamp(1.9rem, 4vw, 2.6rem);
  border: 1px solid var(--rule-strong);
  text-align: center;
}
/* inner hairline — the double rule of an engraved plate */
.cert__plate::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
/* corner weights on the outer rule */
.cert__c {
  position: absolute;
  width: 16px; height: 16px;
  border: 0 solid var(--rule-strong);
}
.cert__c--tl { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.cert__c--tr { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; }
.cert__c--bl { bottom: -1px; left: -1px; border-bottom-width: 3px; border-left-width: 3px; }
.cert__c--br { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; }

.cert__eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red-hot);
}
.cert__trade {
  margin-top: 1.1rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #efe6d2;
}
.cert__trade-q {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.58em;
  letter-spacing: 0.05em;
  color: #ddd4c0;
}
/* short centered rule under the trade name */
.cert__trade::after {
  content: "";
  display: block;
  width: 72px; height: 1px;
  margin: 1.35rem auto 0;
  background: var(--rule-strong);
}

/* ledger lines with dot leaders */
.cert__ledger {
  max-width: 42rem;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
  text-align: left;
}
.cert__line {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.6rem 0;
}
.cert__k {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f8674;
  white-space: nowrap;
}
.cert__dots {
  flex: 1;
  min-width: 1.6rem;
  border-bottom: 1px dotted rgba(239, 230, 210, 0.24);
  transform: translateY(-0.3em);
}
.cert__v {
  font-size: 0.95rem;
  color: #ddd4c0;
  text-align: right;
}

/* the seal — quiet, rotated, top-right of the plate */
.cert__seal {
  position: absolute;
  top: clamp(0.9rem, 2.6vw, 1.7rem);
  right: clamp(0.9rem, 2.6vw, 1.7rem);
  width: clamp(64px, 8.5vw, 100px);
  transform: rotate(-8deg);
  opacity: 0.92;
}
.cert__seal svg { display: block; width: 100%; height: auto; }

.cert__foot {
  margin-top: clamp(1.7rem, 4vw, 2.4rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b3aa97;
}
.cert__trust {
  margin: 1.7rem auto 0;
  max-width: 60rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8f8674;
}

@media (max-width: 640px) {
  .cert { padding-bottom: 5rem; }
  .cert__line { flex-direction: column; gap: 0.2rem; padding: 0.7rem 0; }
  .cert__line + .cert__line { border-top: 1px solid var(--rule-faint); }
  .cert__dots { display: none; }
  .cert__v { text-align: left; }
  /* narrow plates: the seal sits above the eyebrow, centered, stamp-style */
  .cert__seal { position: static; width: 64px; margin: 0 auto 1.1rem; }
}

/* ---- page-scoped contrast fix (upstream files are read-only) ----
   style.css's dark .cta-final panel re-scopes ink tiers via the paper ramp;
   under body.night the paper tokens go DARK, so `color: var(--paper)` inside
   the near-black panel reads dark-on-dark (big number, h3, ghost button).
   Re-pin the paper tiers light inside the panel on this page. */
body.night .cta-final {
  --paper: #f1eadb;
  --paper-deep: #e4dac1;
  --paper-edge: #a89f8d;
}

/* Pre-reveal flash guard: .capabilities' container background is var(--ink),
   which resolves CREAM under body.night. While the .cap cells sit at
   opacity:0 waiting for reveal-stagger, that cream slab flashes on the night
   ground. Pin the container to the night ground on this page; post-reveal the
   cells cover it edge-to-edge (12 cells fill every breakpoint's grid exactly),
   so the rendered grid is unchanged. */
body.night .capabilities {
  background: var(--night);
}