/* org.css — the shared View-side (org) chrome. The blue twin of home.css:
   the same self-contained header.bar / footer.bar / type, in the org palette.
   Dark-blue header, black footer, and a body that blooms from the dark blue
   down into the bright org blue (lab's gradient shape, in blue).

   The accent slot is still named --copper so any shared module that resolves
   that token renders in org blue with no edit; only its value changed. Blues
   are the org pair from market-board.js: #45A8FF (accent) and #123E68 (deep).

   Page-specific rules (panels, fields, inputs, buttons) stay inline on each
   page, the way home.css leaves doors and rails to the page. Load AFTER
   fonts.css. First consumer: gate/gate-enter.html. */
:root{
  --shell:#0E1519;                              /* the black: footer + neutral dark surfaces */
  --blue-deep:#0C1E34;                          /* the dark org navy: header + gradient top */
  --blue-mid:#123E68;                           /* the mid org blue: gradient middle */
  --head:#ECE4D3; --body:#CBC3B2; --muted:#8B978F;
  --rule:rgba(236,228,211,0.12); --rule-hard:rgba(236,228,211,0.22);
  --copper:#45A8FF; --copper-rgb:69,168,255;    /* accent slot, kept named --copper for module compatibility; value is the bright org blue */
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:17px;}
body{background:linear-gradient(180deg,var(--blue-deep) 0%,var(--blue-mid) 58%,var(--copper) 100%);color:var(--body);font-family:'DM Sans',system-ui,sans-serif;font-weight:300;line-height:1.7;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;}

/* header (deep-blue bar) */
header.bar{background:var(--blue-deep);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;padding:1.1rem clamp(1.2rem,4vw,2.4rem);}
.brand{display:flex;align-items:center;gap:0.7rem;}
.mark{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#fff;flex:none;}
.brand-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.15rem;color:var(--head);}
/* a single right-hand link (Home / Log out) */
.bar-right{font-family:'DM Mono',monospace;font-size:0.82rem;letter-spacing:0.12em;color:var(--muted);text-decoration:none;transition:color .2s;}
.bar-right:hover{color:var(--copper);}
/* a multi-link exit nav (Home / Exit), for building pages that owe two ways out */
.bar-nav{display:flex;align-items:center;gap:1.6rem;}
.bar-link{font-family:'DM Mono',monospace;font-size:0.82rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:0.4rem 0.2rem;transition:color .2s;}
.bar-link:hover{color:var(--copper);}

main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:3.2rem clamp(1.4rem,4vw,2rem) 4rem;}
.meta{font-family:'DM Mono',monospace;font-size:0.82rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;}
h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2rem,5vw,3rem);line-height:1.08;color:var(--head);margin:0 0 1rem;}
.lede{color:var(--body);line-height:1.8;max-width:56ch;}

/* footer (black bar, links vertical) */
footer.bar{background:var(--shell);border-top:1px solid var(--rule);padding:2.6rem clamp(1.4rem,4vw,2.4rem) 3rem;display:flex;flex-direction:column;gap:1.9rem;margin-top:auto;}
.foot-links{display:flex;flex-direction:column;gap:0.9rem;}
.foot-links a{font-family:'DM Mono',monospace;font-size:0.82rem;letter-spacing:0.08em;color:#FFFFFF;text-decoration:none;width:fit-content;transition:color .2s;}
.foot-links a:hover{color:var(--copper);}
.foot-note{font-family:'DM Mono',monospace;font-size:0.78rem;color:#FFFFFF;}
.foot-back{font-family:'DM Mono',monospace;font-size:0.82rem;letter-spacing:0.08em;color:#FFFFFF;text-decoration:none;transition:color .2s;}
.foot-back:hover{color:var(--copper);}

:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}
@media (max-width:600px){ html{font-size:16px;} }