/* BIDROOM — shell tokens (DESIGN.md §2-§4b). Build width 1920, scales 1280-2560, mobile <1024. */
/* fonts self-hosted (latin subsets from Google Fonts, OFL) so the chrome renders the same on every route, no late swap */
@font-face{font-family:'Abril Fatface';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/abril-fatface-latin.woff2) format('woff2')}
@font-face{font-family:'Signika';font-style:normal;font-weight:300 700;font-display:block;src:url(assets/fonts/signika-latin.woff2) format('woff2')}
@font-face{font-family:'Micro 5';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/micro5-latin.woff2) format('woff2')}

:root{
  --page: calc(100vw / 1920);

  --page-bg:#18021C;
  --plum:#3A1F4A;
  --plum-deep:#1E0C27;
  --paper:#F3E6D8;
  --paper-bright:#FFF7EC;
  --ink-navy:#1B0E2A;
  --ink-light:#FFF7EC;
  --muted:#D9CDE0;
  --coral:#DE6C59;
  --periwinkle:#B2BEFD;
  --hairline:#63466C;
  --hairline-paper:#D6C4B6;

  --gutter: calc(48 * var(--page));
  --container: calc(1824 * var(--page));

  --font-display:'Abril Fatface', serif;
  --font-body:'Signika', sans-serif;
  --font-numeral:'Micro 5', monospace;

  /* rule tokens (DESIGN.md §4b BORDER TABLE) */
  --rule-panel-w: max(1px, calc(2.3 * var(--page)));
  --rule-panel-c: var(--hairline);
  --rule-rim-c: var(--page-bg);
  --rule-panel-cream-w: max(1px, calc(2 * var(--page)));
  --rule-panel-cream-c: #C4AFA2;
  --rule-panel-cream-inset: calc(12 * var(--page));
  --rule-hairline-w: max(1px, calc(1.1 * var(--page)));
  --rule-hairline-c: var(--hairline);
  --rule-panel-cream-group-w: max(1px, calc(2 * var(--page)));
  --rule-panel-cream-group-c: #C4AFA2;
  --rule-panel-heavy-w: max(1px, calc(2 * var(--page)));
  --rule-panel-heavy-c: #5A4A5E;
  --rule-panel-heavy-inset: calc(12 * var(--page));
  --rule-card-w: max(1px, calc(2.3 * var(--page)));
  --rule-card-c: var(--hairline-paper);
  --rule-row-w: max(1px, calc(1.6 * var(--page)));
  --rule-row-c: var(--hairline-paper);
  --rule-focus-w: 2px;
  --rule-focus-c: var(--coral);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
body{
  background:var(--page-bg);
  color:var(--ink-light);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.45;
  min-height:100vh;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ONE PAGE FRAME (LUAT 53 / USER_FIXES.md): one page ground, one container, 48px gutters at 1920.
   Route bodies never set their own max-width, side padding or page background. */
main{
  display:block;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  background:var(--page-bg);
}
main.is-leaving{opacity:0}

:where(button,input,select,textarea){border:0;outline:0;font-family:inherit;background:none;color:inherit}

/* border classes (DESIGN.md §4b) — route bodies use ONLY these, zero ad-hoc border/outline */
.rule-panel{border:var(--rule-panel-w) solid var(--rule-panel-c)}
/* cream document panels (mockup profile): dark rim at the edge + ONE inner stroke inset from it —
   the "double line" of §4b is rim + inner stroke, never a ring outside the panel */
.rule-panel-cream,.rule-panel-cream-group,.rule-panel-heavy{
  position:relative;border:max(1px, calc(1.6 * var(--page))) solid var(--rule-rim-c);border-radius:calc(8 * var(--page));
}
.rule-panel-cream::after,.rule-panel-cream-group::after,.rule-panel-heavy::after{
  content:"";position:absolute;pointer-events:none;inset:var(--rule-inset);
  border:var(--rule-inner-w) solid var(--rule-inner-c);border-radius:calc(4 * var(--page));
}
.rule-panel-cream{--rule-inset:var(--rule-panel-cream-inset);--rule-inner-w:var(--rule-panel-cream-w);--rule-inner-c:var(--rule-panel-cream-c)}
.rule-panel-cream-group{--rule-inset:var(--rule-panel-cream-inset);--rule-inner-w:var(--rule-panel-cream-group-w);--rule-inner-c:var(--rule-panel-cream-group-c)}
.rule-panel-heavy{--rule-inset:var(--rule-panel-heavy-inset);--rule-inner-w:var(--rule-panel-heavy-w);--rule-inner-c:var(--rule-panel-heavy-c)}
.rule-hairline{border:var(--rule-hairline-w) solid var(--rule-hairline-c)}
.rule-hairline.on-paper{border-color:var(--periwinkle)}
.rule-card{border:var(--rule-card-w) solid var(--rule-card-c);border-radius:calc(8 * var(--page))}
.rule-row{border-bottom:var(--rule-row-w) solid var(--rule-row-c)}
.rule-input{border:var(--rule-panel-w) solid var(--rule-panel-c);border-radius:calc(8 * var(--page));padding:calc(10 * var(--page)) calc(14 * 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 N2 + footer F8, copied from mockup/v1/chrome/nav.html + footer.html (LUAT 52) */
[data-chrome="nav"]{
  height:calc(190 * var(--page));min-height:96px;
  background:var(--plum);color:var(--paper-bright);
  border-bottom:max(1px, calc(1.6 * var(--page))) solid rgba(255,247,236,.38);
}
[data-chrome="nav"] .nav{
  position:relative;height:100%;max-width:var(--container);margin:0 auto;
  padding:calc(22 * var(--page)) var(--gutter) calc(16 * var(--page));
}
[data-chrome="nav"] .brand{height:calc(96 * var(--page));min-height:52px;display:flex;align-items:center;justify-content:center;gap:calc(22 * var(--page));font-family:var(--font-display);font-size:clamp(28px, calc(58 * var(--page)), 58px);letter-spacing:.01em}
[data-chrome="nav"] .brand img{width:calc(92 * var(--page));min-width:44px;height:auto;object-fit:contain}
[data-chrome="nav"] .routes{height:calc(48 * var(--page));min-height:36px;display:flex;align-items:center;justify-content:center;gap:clamp(24px, calc(82 * var(--page)), 82px);flex-wrap:wrap}
[data-chrome="nav"] .routes a{font-size:15px;color:var(--muted);padding:11px 0 9px;border-bottom:3px solid transparent}
[data-chrome="nav"] .routes a.is-active,[data-chrome="nav"] .routes a[aria-current="page"]{color:var(--paper-bright);border-color:var(--coral)}

[data-chrome="footer"]{
  min-height:calc(138 * var(--page));
  background:linear-gradient(90deg,#32143f,#552058 55%,#3a1f4a);
  color:var(--paper-bright);border-top:max(1px, calc(1.6 * var(--page))) solid rgba(255,247,236,.38);
}
[data-chrome="footer"] .foot{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(14px, calc(18 * var(--page)), 18px);
  padding:calc(20 * var(--page)) var(--gutter);
}
[data-chrome="footer"] .brand-mark{height:calc(56 * var(--page));min-height:36px;width:auto}
[data-chrome="footer"] .line{font-family:var(--font-display);font-size:clamp(20px, calc(42 * var(--page)), 42px);line-height:1.02;max-width:760px}
[data-chrome="footer"] .btn{
  height:calc(66 * var(--page));min-height:40px;border:max(1px, calc(1.6 * var(--page))) solid var(--periwinkle);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:clamp(15px, calc(22 * var(--page)), 22px);
  padding:0 clamp(12px, calc(18 * var(--page)), 18px);
}
[data-chrome="footer"] .btn[aria-disabled="true"]{pointer-events:none;color:rgba(255,247,236,.6)}
[data-chrome="footer"] .btn.tg[aria-disabled="true"]{opacity:.7}
[data-chrome="footer"] .btn.tg{background:var(--coral);border-color:var(--coral);font-weight:600}

/* mobile drawer <1024 (DESIGN.md §1) */
@media (max-width:1023px){
  main{padding-left:16px;padding-right:16px}
  body{font-size:15px}
  [data-chrome="nav"]{height:auto;min-height:64px}
  [data-chrome="nav"] .nav{padding:12px 16px}
  [data-chrome="nav"] .brand{height:auto;font-size:24px;padding:8px 0}
  [data-chrome="nav"] .brand img{width:40px}
  [data-chrome="nav"] .routes{height:auto;flex-wrap:wrap;gap:16px;padding-bottom:8px}
  [data-chrome="footer"] .foot{grid-template-columns:1fr;text-align:center;padding:20px 16px}
  [data-chrome="footer"] .line{max-width:none;font-size:24px}
}