/* =====================================================================
   ROYALBUILDER.ai  ·  lockup.css
   THE FINAL LOCKUP, and the small amount of page furniture the four
   layer pages need that neither royal-system.css nor front-door.css
   already ships.

   WHY THIS FILE EXISTS AT ALL.
   The Royal Ai lockup is the header logo on every page of every site in
   the family (ruled 7/28/2026). It is INLINED as an SVG <symbol> and
   <use>d, never <img>ed, so the page's own Montserrat and CSS can reach
   it. An inlined <svg> has no intrinsic size, so it needs exactly one
   rule to size it - and this site's Content-Security-Policy forbids the
   inline style attribute that rule would otherwise ride on. So it lives
   here, in a sheet, in a class.

     SET THE HEIGHT. NEVER SET THE WIDTH.
     The viewBox "146 450 694 128" fixes the aspect at 5.42:1 and the
     width follows on its own. Set a width and the mark distorts.

   NEITHER SHEET THIS SITS ON TOP OF IS EDITED. royal-system.css and
   front-door.css are re-synced copies of the shared masters; every rule
   below is additive and none of it re-declares a brand token.

   Royal Mortgage LLC · NMLS #2059962
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. THE DEFINITION BLOCK

   The lockup is defined ONCE per page inside a hidden <svg><symbol> at
   the top of <body>, then referenced with <use>. It has to be defined
   once and only once: the file carries three gradients - gNavyR, gNavyO
   and gGoldO - and a second copy of those IDs on the same page makes the
   browser resolve whichever it met first, silently.

   hidden alone is not enough on every engine, so the block is also
   pulled out of flow and given no box at all.
   --------------------------------------------------------------------- */
.lockupdefs{position:absolute;width:0;height:0;overflow:hidden;
  pointer-events:none}


/* ---------------------------------------------------------------------
   2. THE MARK, ONE SIZE

   SUPERSEDED 2026-08-02 - this section used to be headed "THE MARK, TWO
   SIZES" and it carried the arithmetic for both: a front-door size
   reproducing --fd-mark's min(620px, 94vw) width as a height off the old
   694-unit wordmark, and a smaller deep-page size chosen to match the
   optical weight of the castle-plus-words sitemark the brandbar used to
   carry. Both sizes and both derivations are preserved verbatim at
   _superseded\2026-08-02-header-law\css\lockup.css.

   There is one size now, and it is the same one every site in the family
   uses. A front door and a deep page are the same brand at the same
   height; the wrappers still differ, the mark does not.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   THE HEADER LAW, 2026-08-02 (RAI.v7/ROVER v3 PART TWO C-2 / C-1b).

   THE MARK IS A CUT PNG NOW. assets\header-lockup-mitre-v11.png, 577 x 192 true
   pixels, carried by an <img> - not by the inlined <svg><use> this file
   was written for. The retired <symbol id="royal-ai-lockup"> and its
   <defs> STAY on every page, unreferenced, as the in-place archive.
   Nothing about them was deleted and nothing should be.

     SET THE HEIGHT. NEVER SET THE WIDTH.
   Bryan's H-7 ruling: every logo keeps its natural aspect ratio, with no
   stretching, compression or cropping. Height is the only dimension ever
   declared and the width follows it. The width and height ATTRIBUTES on
   the <img> are the asset's true pixel size and are there only to reserve
   the box against layout shift - they are not a size instruction, and CSS
   must never restate them.

   FOUR RULES WERE RETIRED HERE and every one of them is preserved
   verbatim at _superseded\2026-08-02-header-law\css\lockup.css - the bare
   rule that set only width and display for the inlined mark, the
   front-door size it took inside .markwrap (derived from the old
   694-unit wordmark width), the deep-page size it took inside .brandbar,
   and that rule's narrow-screen override inside a max-width:767.98px
   query. Their literal text is deliberately NOT restated in this comment:
   a commented-out size reads as a live one to every grep that audits this
   family, and the audit has to be able to see one size and only one.

   WHY THE TWO WRAPPER-SCOPED SIZES HAD TO GO, caught by MEASUREMENT and
   not by reading: the law's rule is `.brandmark`, specificity (0,1,0).
   Those two were `.markwrap .brandmark` and `.brandbar .brandmark`,
   specificity (0,2,0). A more specific rule wins NO MATTER WHERE IT SITS
   in the cascade, so this tree kept rendering its header at 114px while
   every other tree rendered 64px, even though all eight carried a
   byte-identical size string. The static check passed. The family was
   still broken. That is exactly the failure C-1b/4 predicts: "Uniform
   means those ten numbers match — not that the CSS matches. Eyeballing
   one page at a time will not catch drift and never has." It was found by
   _royal-system\_build\contact-sheet.html, which loads the real shipping
   pages and measures the rendered box in each.

   THE SAME TRAP, ONE STEP FURTHER, and this tree fell into it tonight: a
   first pass moved the size into each page's own <style> block but scoped
   it `.royal-header .brandmark`. NO element in this tree carries
   class="royal-header" - the headers here ride .brandbar on the deep
   pages and .markwrap on the front doors - so the selector matched
   nothing at all and the mark fell back to its natural 192px. A dead
   selector is worse than a wrong one, because it still reads correct.
   Those page-level blocks are retired in place with a dated note, and the
   size lives HERE, once, in the one sheet all eleven pages already link.

   DO NOT re-introduce a descendant selector for the mark's size in this
   file or any other. One rule, one size, family-wide.
   --------------------------------------------------------------------- */
.brandlink{display:block;width:max-content;max-width:100%;margin:0 auto 0;text-decoration:none;min-height:44px;display:flex;align-items:center}
  /* 2026-08-02 TAP FLOOR RESTORED. The retired .lockup carried min-height:44px on
     purpose — css/site.css called it "the one place in the house where the tap floor
     is not met". .brandlink shipped without it and .brandmark clamps to 40px, so the
     header link was a 40px target on a phone: under WCAG 2.5.5 and under Apple's 44px
     floor. flex+center keeps the mark optically centred in the taller box.
     NO height is set on .brandmark here — the one-height-rule invariant is untouched. */
.brandmark{height:clamp(79.4px,14.29vw,127.0px);width:auto;display:block;max-width:100%}
.brandlink:focus-visible{outline:3px solid var(--gold,#CBA260);outline-offset:6px;border-radius:10px}

/* THE TWO WRAPPERS THIS SITE ALREADY HAD, both kept so no spacing moves.
   The front doors centre the mark with .markwrap and keep the centring
   margin .brandlink carries. The deep pages hang it at the LEFT of a
   .brandbar row with the nav beside it, so that margin is neutralised
   there - otherwise the mark would drift to the middle and shove the nav
   off the end. Neither rule touches the mark's own box. */
.brandbar .brand{display:inline-flex;align-items:center;text-decoration:none;
  flex:none}
.brandbar .brandlink{margin:0}


/* ---------------------------------------------------------------------
   3. THE WAY BACK

   A layer page is one room in a four-room walk, and this site is opened
   inside the native app, where there is no browser chrome and therefore
   no back button. The only way back out of layer three is the one the
   page provides. It sits UNDER the coin row, never above
   it - nothing goes in front of the page, and nothing competes with the
   ball for the first look.
   --------------------------------------------------------------------- */
.stepback{display:block;text-align:center;margin-top:clamp(18px,3.4vh,28px);
  font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
  letter-spacing:.01em;padding:10px 12px;min-height:44px;line-height:24px}
.stepback:hover,.stepback:focus-visible{color:var(--navy)}
.stepback b{color:var(--navy);font-weight:700}


/* ---------------------------------------------------------------------
   4. THE DOOR PAGE

   One ball, and two plain blocks of type under it. No timing block of
   any kind lives on that page - not written, not hidden, not commented
   out. That is a standing ruling for this site and it is absolute.

   .doorside is the share block behind #send. It is ordinary page
   content, visible on arrival like everything else here, because nothing
   interactive is ever put in front of a Royal page. Landing on #send
   only draws the gold rule around it so a visitor who asked for it can
   see what they asked for.
   --------------------------------------------------------------------- */
.doorside{width:var(--fd-col);margin:clamp(20px,3.6vh,30px) auto 0;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card-tint);padding:18px 18px 16px;text-align:left}
.doorside:target{border-color:var(--gold);box-shadow:0 0 0 3px rgba(203,162,96,.16)}
.doorside h2{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 8px;
  letter-spacing:.01em}
.doorside p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 12px}
.doorside .linkline{display:block;font-size:12.5px;line-height:1.5;
  color:var(--navy);background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:10px 12px;margin:0 0 12px;
  word-break:break-all;font-weight:600}
.doorside .btnrow{margin:0}
.doorside .btnrow a{min-height:44px}

/* the quiet line under the ball - what this door is, in one sentence */
.doorline{width:var(--fd-col);margin:clamp(16px,3vh,24px) auto 0;
  font-size:14px;line-height:1.6;color:var(--muted);text-align:center}
.doorline b{color:var(--navy);font-weight:700}
