@import '/static/companions-a.css';
@import '/static/companions-b1.css';
@import '/static/companions-b2.css';
/* Осідок — instrumental/institutional. ink/paper/brick, flat, no gradients. */
:root{
  --ink:#14181C; --paper:#F4F1EA; --accent:#A8482F;
  --sans:'Fixel Text', system-ui, sans-serif;
  --display:'Fixel Display', system-ui, sans-serif;
}
@font-face{font-family:'Fixel Display';src:url(/fonts/FixelDisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:'Fixel Text';src:url(/fonts/FixelText-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  min-height:100dvh;display:flex;flex-direction:column}
.top{padding:20px 24px;display:flex;justify-content:flex-end}
[dir=rtl] .top{justify-content:flex-start}
/* language switcher */
.sw{position:relative}
.sw summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 10px;font-size:14px;color:var(--ink)}
.sw summary::-webkit-details-marker{display:none}
.sw summary:hover{color:var(--accent)}
.sw[open] .chev{transform:rotate(180deg)}
.swc{letter-spacing:.02em}
.sw ul{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:210px;max-height:70vh;
  overflow-y:auto;list-style:none;background:var(--paper);border:1px solid rgba(20,24,28,.18);
  padding:4px;z-index:20}
.sw ul a{display:flex;align-items:center;gap:10px;padding:9px 12px;color:var(--ink);
  text-decoration:none;font-size:15px}
.sw ul a:hover{background:rgba(20,24,28,.05);color:var(--accent)}
.sw ul a[aria-current=true]{color:var(--accent)}
.lm{width:20px;height:15px;flex:none;object-fit:cover;box-shadow:0 0 0 1px rgba(20,24,28,.15)}
.lm-badge{display:grid;place-items:center;background:#8A8880;color:var(--paper);
  font-family:var(--display),'Noto Sans Arabic';font-size:9px;font-weight:500;line-height:1}
/* stage */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;padding:24px 24px 96px;text-align:center}
.mark{color:var(--accent);display:block}
.mark svg{width:56px;height:56px}
.word{font-family:var(--display);font-weight:500;font-size:clamp(38px,7vw,64px);
  letter-spacing:.14em;padding-inline-start:.14em}
.soon{font-size:clamp(16px,2.4vw,19px);color:rgba(20,24,28,.62)}