/* REVEILLE — shell tokens (DESIGN.md §2-§4). Build width 1920, scales 1280-2560, mobile <1024. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,700..900&family=Rosario:ital,wght@0,400;0,500;0,700;1,400&family=Kosugi+Maru&display=swap');

:root{
  --page: calc(100vw / 1920);
  --ground:#8A9B63; --paper-bg:#8A9B63;
  --ink:#172116;
  --pine:#263923;
  --timber:#664426;
  --paper:#F3E9D1;
  --orange:#FF6A24;
  --navy:#103C9C;
  --night:#202A1D;

  --gutter-l: calc(20 * var(--page));
  --gutter-r: calc(9 * var(--page));

  --font-display:'Archivo', sans-serif;
  --font-body:'Rosario', sans-serif;
  --font-mono:'Kosugi Maru', monospace;

  /* rule tokens (BORDER_TABLE.md / DESIGN.md §4b) */
  --rule-ledger-w: max(1px, calc(1.3 * var(--page)));
  --rule-ledger-c: var(--pine);
  --rule-timber-w: max(1px, calc(2.6 * var(--page)));
  --rule-timber-c: var(--timber);
  --rule-pinned-w: max(1px, calc(1.1 * var(--page)));
  --rule-pinned-c: var(--ink);
  --rule-flag-w: max(1px, calc(1.5 * var(--page)));
  --rule-flag-c: var(--ink);
  --rule-flag-active-c: var(--orange);
  --rule-payload-w: max(1px, calc(2.5 * var(--page)));
  --rule-payload-c: var(--night);
  --rule-sleepcell-w: max(1px, calc(1.1 * var(--page)));
  --rule-sleepcell-c: var(--pine);
  --rule-wake-w: max(1px, calc(1.5 * var(--page)));
  --rule-wake-c: var(--orange);
  --rule-source-w: max(1px, calc(1.1 * var(--page)));
  --rule-source-c: var(--navy);
  --rule-focus-w: 2px;
  --rule-focus-c: var(--orange);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.35;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ONE PAGE FRAME (see USER_FIXES.md): every route lives inside this container. Route bodies never
   set their own max-width, side padding or page background. */
main{
  display:block;
  width:100%;
  padding-left:var(--gutter-l);
  padding-right:var(--gutter-r);
  background:var(--ground);
}
main.is-leaving{opacity:0}

/* border classes — route bodies use ONLY these, zero ad-hoc border/outline declarations */
:where(button,input,select,textarea){border:0;outline:0;font-family:inherit}

.rule-ledger{border:var(--rule-ledger-w) solid var(--rule-ledger-c)}
.rule-ledger-double{border-top:var(--rule-ledger-w) solid var(--rule-ledger-c);
  box-shadow:0 calc(4 * var(--page)) 0 -1px var(--rule-ledger-c)}
.rule-timber{border:var(--rule-timber-w) solid var(--rule-timber-c);border-radius:calc(2 * var(--page))}
.rule-pinned{border:var(--rule-pinned-w) solid var(--rule-pinned-c);border-radius:calc(2 * var(--page))}
.rule-flag{border-bottom:var(--rule-flag-w) solid var(--rule-flag-c)}
.rule-flag.is-active,.rule-flag[aria-current="page"]{border-bottom-color:var(--rule-flag-active-c)}
.rule-payload{border:var(--rule-payload-w) solid var(--rule-payload-c);border-radius:calc(2 * var(--page))}
.rule-sleepcell{border:var(--rule-sleepcell-w) solid var(--rule-sleepcell-c)}
.rule-wake{border:var(--rule-wake-w) solid var(--rule-wake-c)}
.rule-source{border-bottom:var(--rule-source-w) solid var(--rule-source-c);color:var(--navy)}
.rule-edge-t{border-top:var(--rule-ledger-w) solid var(--rule-ledger-c)}
.rule-edge-b{border-bottom:var(--rule-ledger-w) solid var(--rule-ledger-c)}
.rule-edge-y{border-top:var(--rule-ledger-w) solid var(--rule-ledger-c);border-bottom:var(--rule-ledger-w) solid var(--rule-ledger-c)}
[class*="rule-"].on-dark{border-color:rgba(243,233,209,.45)}
.rule-cols > * + *{border-left:var(--rule-ledger-w) solid var(--rule-ledger-c)}
.rule-input{border:var(--rule-timber-w) solid var(--rule-timber-c);border-radius:calc(2 * var(--page));padding:calc(8 * var(--page)) calc(12 * var(--page))}

:where(button,input,select,a,[tabindex]):focus-visible{
  outline:var(--rule-focus-w) solid var(--rule-focus-c);outline-offset:2px;
}

/* chrome: nav = N0 (hidden — logo/X/TG/route flags live inside each route's first screen art),
   footer = F10 shared credits strip, copied verbatim from mockup/v1/chrome/footer.html. */
/* ONE shared nav (USER_FIXES_R1 #1 #3 #5): the same horizontal flag row on every route; the router only moves
   aria-current. It hangs over the top edge of each route's first screen art (routes keep their top 64 u clear). */
body{position:relative}
[data-chrome="nav"]{position:absolute;z-index:40;left:0;right:0;top:0;height:calc(64 * var(--page));pointer-events:none;background:var(--ground);box-shadow:0 calc(2 * var(--page)) calc(10 * var(--page)) rgba(23,33,22,.22)}
[data-chrome="nav"] > *{pointer-events:auto}
.rv-nav__pole{position:absolute;left:calc(70 * var(--page));top:0;width:calc(8 * var(--page));height:calc(64 * var(--page));background:#23291d}
.rv-nav__brand{position:absolute;left:calc(83 * var(--page));top:0;height:calc(56 * var(--page));width:calc(354 * var(--page));display:flex;align-items:center;gap:calc(12 * var(--page));padding-left:calc(20 * var(--page));background:var(--paper);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%);box-shadow:0 calc(3 * var(--page)) calc(6 * var(--page)) rgba(20,20,10,.2);text-decoration:none}
.rv-nav__brand img{height:max(46px, calc(48 * var(--page)));width:auto}
.rv-nav__brand b{font:900 max(14px, calc(30 * var(--page)))/1 var(--font-display);font-stretch:125%;letter-spacing:.02em;color:#2a2418}
.rv-nav__flags{position:absolute;right:calc(160 * var(--page));top:0;display:flex;gap:calc(4 * var(--page))}
.rv-nav__flag{position:relative;display:flex;align-items:center;height:calc(46 * var(--page));margin-left:calc(5 * var(--page));padding:0 calc(22 * var(--page)) 0 calc(14 * var(--page));background:#A9B37E;color:var(--ink);font:800 max(13px, calc(15 * var(--page)))/1 var(--font-display);font-stretch:112%;white-space:nowrap;text-decoration:none;clip-path:polygon(0 0,100% 4%,92% 50%,100% 96%,0 100%);transition:transform .16s ease-out,background-color .16s ease-out}
.rv-nav__flag::before{content:"";position:absolute;left:0;top:0;width:max(2px, calc(3 * var(--page)));height:100%;background:#23291d}
.rv-nav__flag:hover{background:#BEC593;transform:translateY(calc(3 * var(--page)))}
.rv-nav__flag[aria-current="page"]{background:var(--orange);color:#2a1a0c}
.rv-nav__social{position:absolute;right:calc(28 * var(--page));top:0;display:flex;gap:calc(12 * var(--page))}
.rv-nav__social a{display:grid;place-items:center;width:calc(52 * var(--page));height:calc(60 * var(--page));clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);color:#fff;transition:transform .16s ease-out}
.rv-nav__social a:hover{transform:translateY(calc(4 * var(--page)))}
.rv-nav__social a[data-launch="x"]{background:#18231A}
.rv-nav__social a[data-launch="tg"]{background:#2B6FC8}
.rv-nav__social svg{width:calc(24 * var(--page));height:calc(24 * var(--page));fill:currentColor}
[data-chrome="footer"]{
  width:100%;
  padding:calc(24 * var(--page)) var(--gutter-r) calc(24 * var(--page)) var(--gutter-l);
  background:#8a9963;color:var(--ink);border-top:2px solid #3C4A30;
  font-family:'Rosario',Arial,sans-serif;display:grid;place-content:center;text-align:center;gap:calc(8 * var(--page));
  font-size:15px;line-height:1.1;
}
[data-chrome="footer"] .brand-mark{height:42px;width:auto;margin:0 auto calc(4*var(--page))}
[data-chrome="footer"] .sources,[data-chrome="footer"] .social{display:flex;align-items:center;justify-content:center;gap:25px;flex-wrap:wrap}
[data-chrome="footer"] .sources span+span:before,[data-chrome="footer"] .social span+span:before{content:"|";margin-right:25px;color:#35442d}
[data-chrome="footer"] b{font-weight:700}
[data-chrome="footer"] .creed{font-family:'Kosugi Maru',monospace;font-size:14px}

@media (max-width:1023px){
  /* below 1024 the mockup switches to a distinct stacked layout (DESIGN.md §1) — fixed px, not the 1920 vw scale */
  main{padding-left:16px;padding-right:16px}
  .rule-cols > * + *{border-left:0}
  body{font-size:15px}
  [data-chrome="footer"]{padding:20px 16px;gap:8px}
  [data-chrome="footer"] .brand-mark{height:24px;margin-bottom:4px}
  [data-chrome="nav"]{position:relative;height:auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:0 12px 8px 16px;background:var(--ground)}
  [data-chrome="nav"] > *{position:relative;left:auto;right:auto}
  .rv-nav__pole{display:none}
  .rv-nav__brand{height:44px;width:210px;padding-left:12px}
  .rv-nav__brand b{font-size:20px}
  .rv-nav__brand img{height:36px}
  .rv-nav__social{margin-left:auto;order:2}
  .rv-nav__social a{width:40px;height:46px}
  .rv-nav__social svg{width:18px;height:18px}
  .rv-nav__flags{order:3;flex:1 0 100%;overflow-x:auto}
  .rv-nav__flag{height:38px;font-size:13px;padding:0 18px 0 10px}
}