/* THE HOUSE'S CHROME ON EVERY PUBLIC PAGE (17 Oct 2026).

   The audit of 17 Oct found three headers and three wordmarks across one
   house — the app's navy rail with the spaced capitals and the gold italic
   «through», the estate's «LtL» roundel over a two-line mixed-case name, and
   How it works with a third nav in an outline pill — and six button
   languages, from square navy blocks to 99px pills to a green «Create free
   account». A visitor who moves from a search result to the reader crosses
   all three and is entitled to wonder whether it is one house.

   So this sheet is the one place the public pages take their chrome from:
   the estate (pages/base.html), the legal pages (legal/base.html) and How it
   works (how_it_works.html) all load it, and all three draw the same
   masthead, lockup, buttons and footer from pages/_house_bar.html and
   pages/_house_foot.html. Its values are the APP's (src/ui/head.html :root,
   99-experience.css --world-deep), copied here because these pages never
   load the app's stylesheet; pages/test_the_house_is_one_house.py
   hold the two sets together.

   Nothing here may be beaten by a louder rule elsewhere: a page sheet that
   wants a different button deletes its own, it does not add !important. */

:root {
  /* the app's ground and paper, warm sheet on the cool room (head.html) */
  --room:#f7f9ff; --case:#e8eefc; --sheet:#fffdf5; --galley:#fffef9;
  --carbon:#17213a; --steel:#46536f; --rule:#d2d9e8; --rule-room:#8798b8;
  --pine:#244177; --pine-deep:#152747; --on-pine:#fffdf5;
  --signal:#f6c445; --signal-ink:#8a5a00; --on-signal:var(--carbon);
  --wrong:#a7332d;
  /* the room's ink: the app's --world-deep, the Russian room's by default */
  --world-deep:#35568c;
  --bill:'LTL Cyrillic','Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  --serif:'LTL Cyrillic','Spectral',Georgia,serif;
  --sans:'LTL Cyrillic','Geologica',Arial,sans-serif;
  /* the app's scale (head.html «nine sizes on a 4px baseline») */
  --t-00:11px; --t-0:13px; --t-1:15px; --t-2:17px; --t-3:20px;
  --t-4:24px; --t-5:29px; --t-6:35px; --t-7:44px;
  --r-control:5px; --r-surface:8px;
  --sh-press:0 3px 0 color-mix(in srgb, var(--signal-ink) 65%, transparent);
  --sh-press-quiet:0 2px 0 color-mix(in srgb, var(--carbon) 22%, transparent);
  --gutter:clamp(16px, 5vw, 64px);
  --page-w:1200px;
}
/* each room's ink, the app's own values (src/ui/css/99-experience.css) */
.room-de { --world-deep:#335f55; }
.room-es { --world-deep:#246d69; }
.room-fr { --world-deep:#5b4a86; }
.room-it { --world-deep:#8a4a2b; }

/* ------------------------------------------------------------ the masthead
   The app's rail: pine, the lockup at the left, the doors at the right. */
.house-bar { position:relative; z-index:5; background:var(--pine); color:var(--on-pine);
  border-bottom:3px solid var(--pine-deep); }
.house-bar-in { display:flex; align-items:center; gap:24px; max-width:var(--page-w); margin:0 auto;
  min-height:62px; padding:8px var(--gutter); }
.house-skip { position:absolute; top:8px; left:16px; z-index:10; transform:translateY(-200%);
  padding:10px 16px; background:var(--signal); color:var(--on-signal); border-radius:var(--r-control);
  font:600 var(--t-1)/1.3 var(--sans); text-decoration:none; }
.house-skip:focus { transform:none; }

/* THE LOCKUP — head.html .wordmark.small, set as the app sets it on its rail:
   Spectral capitals tracked .22em, the middle word Spectral italic in signal,
   one baseline. Weight 400: Spectral ships no bold here, and a synthesized
   one smears the capitals. */
.house-bar .house-mark { display:inline-flex; align-items:baseline; gap:.45em; flex:none;
  color:var(--on-pine); text-decoration:none; white-space:nowrap; line-height:1; }
.house-mark .wm-l { font:400 14px/1 var(--serif); letter-spacing:.22em; text-transform:uppercase; }
.house-mark .wm-t { font:italic 400 15px/1 var(--serif); letter-spacing:.02em; color:var(--signal); }
.house-bar .house-mark:hover { color:var(--on-pine); }
.house-mark:focus-visible { outline:2px solid var(--signal); outline-offset:6px; }

.house-nav { display:flex; align-items:center; gap:4px 26px; margin-left:auto; }
.house-nav .btn { order:2; margin-left:6px; }
.house-nav .nav-break { display:none; }
.house-nav a:not(.btn) { display:inline-flex; align-items:center; min-height:44px;
  color:var(--on-pine); text-decoration:none; font:500 var(--t-1)/1.3 var(--sans);
  border-bottom:2px solid transparent; }
.house-nav a:not(.btn):hover { border-bottom-color:var(--signal); color:var(--on-pine); }
.house-nav a:not(.btn)[aria-current="page"] { border-bottom-color:var(--signal); }
.house-nav a:focus-visible { outline:2px solid var(--signal); outline-offset:4px; }

/* ------------------------------------------------------------- the buttons
   ONE PRIMARY, the app's (99-experience.css .desk-host-btn, 107 .btn.primary):
   signal fill, a 1px signal-ink edge, 5px corners, a 3px press under it,
   Geologica 600 in sentence case. The secondary is the app's quiet .btn: a
   galley face, a hairline edge, no press. Nothing else is a button. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:48px; max-width:100%; padding:12px 22px; box-sizing:border-box;
  font:600 var(--t-1)/1.3 var(--sans); letter-spacing:0; text-transform:none; text-decoration:none;
  color:var(--carbon); background:var(--galley); border:1px solid color-mix(in srgb, var(--carbon) 40%, var(--rule));
  border-radius:var(--r-control); box-shadow:none; cursor:pointer;
  transition:background-color 160ms ease, box-shadow 120ms ease, transform 120ms ease; }
.btn:hover { color:var(--carbon); background:color-mix(in srgb, var(--galley) 90%, var(--carbon)); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:3px solid var(--signal-ink); outline-offset:3px; }
.btn .ic { width:18px; height:18px; flex:none; }
.btn.primary { color:var(--on-signal); background:var(--signal); border-color:var(--signal-ink); box-shadow:var(--sh-press); }
.btn.primary:hover { color:var(--on-signal); background:color-mix(in srgb, var(--signal) 90%, var(--sheet)); }
.btn.primary:active { box-shadow:0 1px 0 color-mix(in srgb, var(--signal-ink) 65%, transparent); }
/* on the pine rail the secondary is drawn in the rail's own cream */
.btn.on-pine { color:var(--on-pine); background:transparent; border-color:color-mix(in srgb, var(--on-pine) 50%, transparent); }
.btn.on-pine:hover { color:var(--on-pine); background:color-mix(in srgb, var(--on-pine) 12%, transparent); }
.btn.on-pine:focus-visible { outline-color:var(--signal); }
.btn.small { min-height:40px; padding:8px 16px; font-size:var(--t-0); }

/* ---------------------------------------------------------------- the foot */
.house-foot { max-width:var(--page-w); margin:0 auto; padding:48px var(--gutter) 40px;
  color:var(--steel); font:400 var(--t-0)/1.6 var(--sans); border-top:1px solid var(--rule); }
.house-foot a { color:var(--carbon); text-decoration:none; }
.house-foot a:hover { color:var(--world-deep); text-decoration:underline; text-underline-offset:.2em; }
.foot-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 32px; margin:0 0 28px; }
.foot-head p { margin:0; font:400 var(--t-4)/1.25 var(--serif); letter-spacing:-.015em; color:var(--carbon); }
.foot-head p em { font-style:italic; }
.foot-head a { font:500 var(--t-1)/1.4 var(--sans); display:inline-flex; align-items:center; gap:.5em; min-height:44px; }
.foot-head a .ic { width:18px; height:18px; }

/* THE FIVE ROOMS, five across. Each room's mark is its resident's stamp used
   as a MASK and filled with that room's ink — the stamps are single-ink
   silhouettes drawn #000, and set as <img> they printed as five black blobs
   on every estate page (audit E-02). */
.foot-rooms { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0; margin:0 0 28px;
  border-block:1px solid var(--rule); }
.foot-rooms a { display:flex; align-items:center; gap:12px; min-height:72px; padding:14px 12px;
  color:var(--carbon); text-decoration:none; border-left:1px solid var(--rule); }
.foot-rooms a:first-child { border-left:0; padding-left:0; }
.foot-rooms a:hover { color:var(--ink, var(--world-deep)); text-decoration:none; background:color-mix(in srgb, var(--ink, var(--world-deep)) 5%, transparent); }
.foot-rooms .rm { flex:none; width:34px; height:34px; background:var(--ink, var(--world-deep));
  -webkit-mask:var(--mark) center / contain no-repeat; mask:var(--mark) center / contain no-repeat; }
.foot-rooms span { display:flex; flex-direction:column; min-width:0; }
.foot-rooms small { font:500 var(--t-00)/1.4 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--steel); }
.foot-rooms strong { font:400 var(--t-3)/1.25 var(--serif); letter-spacing:-.01em; }
.foot-rooms .rm-ru { --ink:#35568c; } .foot-rooms .rm-de { --ink:#335f55; } .foot-rooms .rm-es { --ink:#246d69; }
.foot-rooms .rm-fr { --ink:#5b4a86; } .foot-rooms .rm-it { --ink:#8a4a2b; }

.foot-links { display:flex; flex-wrap:wrap; gap:0 24px; margin:0 0 8px; }
.foot-links a { display:inline-flex; align-items:center; min-height:44px; font:400 var(--t-0)/1.4 var(--sans); }
.foot-more { border-block:1px solid var(--rule); margin:16px 0; }
.foot-more > summary { display:flex; align-items:center; justify-content:space-between; min-height:52px;
  cursor:pointer; list-style:none; color:var(--carbon); font:500 var(--t-0)/1.4 var(--sans); }
.foot-more > summary::-webkit-details-marker { display:none; }
.foot-more > summary::after { content:''; width:8px; height:8px; margin:0 4px 4px 16px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }
.foot-more[open] > summary::after { transform:rotate(225deg); margin-top:6px; }
.foot-groups { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; padding:4px 0 24px; }
.foot-groups nav { display:flex; flex-direction:column; align-items:flex-start; }
.foot-groups h2 { margin:8px 0 6px; padding:0; border:0; font:600 var(--t-00)/1.4 var(--sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel); }
.foot-groups h2::before { display:none; }
.foot-groups a { display:inline-flex; align-items:center; min-height:36px; }
.foot-legal a { color:var(--steel); }
.house-foot .colophon { margin:12px 0 0; max-width:none; font:400 var(--t-0)/1.6 var(--sans); color:var(--steel); }
.house-foot .colophon a { color:var(--steel); text-decoration:underline; text-underline-offset:.2em; }

/* ------------------------------------------------------------ the phone
   The app stacks the lockup on a phone (three short lines) so the rail keeps
   room for its door; the masthead does the same, and its links take a second
   row at the 13px floor rather than shrinking to 11 (audit E-09). */
@media (max-width:760px) {
  .house-bar-in { flex-wrap:wrap; gap:6px 12px; padding:10px 16px 4px; min-height:0; }
  .house-mark { flex-direction:column; align-items:flex-start; gap:2px; }
  .house-mark .wm-l { font-size:12px; letter-spacing:.2em; }
  .house-mark .wm-t { font-size:13px; }
  .house-nav { display:contents; }
  .house-nav .btn { order:2; margin-left:auto; }
  .house-nav a:not(.btn) { order:3; min-height:40px; font-size:var(--t-0); }
  .house-nav a:not(.btn) + a:not(.btn) { margin-left:20px; }
  .house-nav .nav-break { display:block; order:3; flex-basis:100%; height:0; }
  .house-foot { padding:36px 16px 32px; }
  .foot-head p { font-size:var(--t-3); }
  .foot-rooms { grid-template-columns:repeat(2, minmax(0, 1fr)); border-bottom:0; }
  .foot-rooms a, .foot-rooms a:first-child { border-left:0; border-bottom:1px solid var(--rule); padding:12px 0; }
  .foot-rooms a:nth-child(even) { padding-left:12px; border-left:1px solid var(--rule); }
  .foot-rooms a:last-child:nth-child(odd) { grid-column:1 / -1; }   /* the fifth room, not alone in half a row */
  .foot-rooms strong { font-size:var(--t-2); }
  .foot-groups { grid-template-columns:1fr 1fr; gap:8px 20px; }
}
@media (max-width:360px) {
  .house-nav a:not(.btn) + a:not(.btn) { margin-left:14px; }
  .foot-rooms small { display:none; }
}
@media (prefers-reduced-motion:reduce) { .btn { transition:none; } }
@media print { .house-bar, .house-foot, .house-skip { display:none; } }