/* boberland.com — «Паспорт будови» (див. apps/site/README.md). Шрифти самі хостимо: без запитів до Google. */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/commissioner-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/commissioner-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/commissioner-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"PT Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme: light only;
  --ground:#EDE6D4;      /* крафт-папір паспорта */
  --surface:#F6F1E3;
  --line:#CDBF9F;
  --line-strong:#9C8C69;
  --ink:#221C12;
  --ink-2:#5B503C;
  --ink-3:#86795E;
  --forest:#1D3B2A;      /* колір гри (theme-color у клієнті) */
  --forest-2:#2A4E39;
  --on-forest:#EFE9D6;
  --accent:#F2B21B;      /* жовта каска бобра */
  --accent-ink:#221C12;
  --signal:#2C7DA0;      /* вода */
  --sp:8px; --r:4px; --wrap:1160px;
  --ease:cubic-bezier(.2,.7,.3,1); --dur-ui:160ms;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --text:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"PT Mono",ui-monospace,Consolas,monospace;
  --fs-display:clamp(44px,8.4vw,124px);
  --fs-h2:clamp(26px,3.4vw,44px);
  --fs-body:17px; --fs-mono:12.5px;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--fs-body)/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
h1,h2{font-family:var(--display);font-weight:800;text-wrap:balance;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:1.08}
h3{font:650 20px/1.3 var(--text)}
p{text-wrap:pretty;max-width:64ch}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--accent)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:calc(var(--sp)*3)}
.mono{font:var(--fs-mono)/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--surface);padding:8px 12px;z-index:9}

/* шапка: стрічка огорожі будови */
.top{background:var(--forest);color:var(--on-forest)}
.top .wrap{display:flex;align-items:center;gap:calc(var(--sp)*3);min-height:56px;flex-wrap:wrap}
.brand{font:800 15px/1 var(--display);text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brand img{width:30px;height:30px}
.top nav{display:flex;gap:calc(var(--sp)*2.5);margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;opacity:.85}.top nav a:hover,.top nav a[aria-current]{opacity:1;text-decoration:underline}
.langs{display:flex;gap:2px;font:12px/1 var(--mono)}
.langs a,.langs span{padding:6px 7px;text-decoration:none;text-transform:uppercase;border:1px solid transparent;border-radius:var(--r)}
.langs span{border-color:color-mix(in srgb,var(--on-forest) 40%,transparent)}
.tape{height:10px;background:repeating-linear-gradient(-45deg,var(--accent) 0 14px,var(--ink) 14px 28px)}

/* hero */
.hero{background:var(--forest);color:var(--on-forest);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--sp)*5);padding-block:calc(var(--sp)*9) calc(var(--sp)*10)}
.hero .mono{color:color-mix(in srgb,var(--on-forest) 62%,transparent)}
.hero h1{font-size:var(--fs-display);line-height:.9;margin-block:calc(var(--sp)*3)}
.hero h1 span{display:block}
.hero h1 .k{color:var(--accent);margin-left:.6em}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:calc(var(--sp)*1.5);align-items:center;margin-top:calc(var(--sp)*4)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:var(--accent);color:var(--accent-ink);border:2px solid var(--ink);border-radius:var(--r);font-weight:650;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.chip{font:12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:9px 12px;border:1px dashed color-mix(in srgb,var(--on-forest) 45%,transparent);border-radius:var(--r);color:color-mix(in srgb,var(--on-forest) 80%,transparent)}
.chip b{color:var(--accent);font-weight:400}

/* табличка будови (предметний обʼєкт №1) */
.board{position:relative;align-self:start;margin-top:calc(var(--sp)*2);background:var(--surface);color:var(--ink);border:3px solid var(--ink);box-shadow:10px 10px 0 rgba(0,0,0,.28);transform:rotate(1.4deg)}
.board header{background:var(--accent);border-bottom:3px solid var(--ink);padding:12px 16px;font:800 13px/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em}
.board dl{display:grid;grid-template-columns:auto 1fr;font-size:14px}
.board dt{font:11.5px/1.4 var(--mono);text-transform:uppercase;color:var(--ink-3);padding:9px 12px 9px 16px;border-bottom:1px solid var(--line)}
.board dd{padding:9px 16px 9px 0;border-bottom:1px solid var(--line);font-weight:600}
.board dd small{display:block;font-weight:400;color:var(--ink-2)}
.board .stamp{position:absolute;right:-18px;bottom:-26px;width:46%;max-width:190px;transform:rotate(-6deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.board footer{padding:10px 34% 14px 16px;font:11.5px/1.5 var(--mono);color:var(--ink-3)}
.hero .beaver{position:absolute;left:-40px;bottom:-30px;width:210px;opacity:.12;pointer-events:none}

/* секції */
section{padding-block:calc(var(--sp)*12)}
.sec-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:calc(var(--sp)*4);align-items:start;margin-bottom:calc(var(--sp)*6)}
.sec-head .mono{padding-top:10px;border-top:2px solid var(--ink)}
.sec-head p{color:var(--ink-2);margin-top:calc(var(--sp)*2)}

/* цикл гри: три кроки без карток */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong)}
.steps li{padding:calc(var(--sp)*3) calc(var(--sp)*3) 0 0;display:grid;grid-template-rows:auto 150px auto auto;gap:calc(var(--sp)*1.5)}
.steps li+li{padding-left:calc(var(--sp)*3);border-left:1px solid var(--line)}
.steps img{height:150px;width:auto;object-fit:contain;justify-self:start}
.steps p{color:var(--ink-2);font-size:16px}

/* специфікація матеріалів (предметний обʼєкт №2, дані з packages/core) */
.spec{background:var(--surface);border-block:1px solid var(--line-strong)}
.spec table{width:100%;border-collapse:collapse;font-size:15px}
.spec th{font:11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);text-align:left;padding:10px 12px 10px 0;border-bottom:2px solid var(--ink);font-weight:400}
.spec td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.spec td:first-child{display:flex;align-items:center;gap:12px;font-weight:650}
.spec td img{width:40px;height:40px}
.bar{display:flex;align-items:center;gap:10px}
.bar i{display:block;height:10px;background:var(--ink);min-width:2px;width:calc(var(--w) * 1.2px)}
.bar.w i{background:var(--signal)}
.spec .note{margin-top:calc(var(--sp)*2);font-size:14px;color:var(--ink-2)}

/* реєстр об'єктів (рівні) */
.register{columns:2;column-gap:calc(var(--sp)*6);list-style:none;padding:0}
.register li{break-inside:avoid;display:grid;grid-template-columns:52px 1fr;gap:4px 12px;padding:14px 0;border-bottom:1px dashed var(--line-strong)}
.register .num{grid-column:1;grid-row:1/span 2;font-size:13px;color:var(--ink-3);padding-top:3px}
.register b{grid-column:2;font-weight:650}
.register .goal{grid-column:2;color:var(--ink-2);font-size:15px}

/* учасники */
.cast{display:grid;grid-template-columns:5fr 4fr 4fr;gap:calc(var(--sp)*3);align-items:end}
.cast figure{border-top:2px solid var(--ink);padding-top:calc(var(--sp)*2)}
.cast figure:first-child img{width:min(100%,300px)}
.cast img{width:180px;margin-bottom:calc(var(--sp)*1.5)}
.cast figcaption p{color:var(--ink-2);font-size:15px;margin-top:6px}

/* статус платформ */
.status{background:var(--forest);color:var(--on-forest)}
.status .sec-head .mono{border-color:var(--accent);color:color-mix(in srgb,var(--on-forest) 65%,transparent)}
.status .sec-head p{color:color-mix(in srgb,var(--on-forest) 78%,transparent)}
.status table{width:100%;border-collapse:collapse}
.status td{padding:16px 16px 16px 0;border-bottom:1px solid color-mix(in srgb,var(--on-forest) 20%,transparent);vertical-align:top}
.status td:first-child{font-weight:650;width:30%}
.status .mono{color:var(--accent)}

/* текстові сторінки (privacy / terms / support) */
.doc{padding-block:calc(var(--sp)*8) calc(var(--sp)*12)}
.doc .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:calc(var(--sp)*6)}
.doc aside{position:sticky;top:24px;align-self:start}
.doc aside ol{list-style:none;padding:0;margin-top:calc(var(--sp)*2);font-size:14.5px;display:grid;gap:6px}
.doc aside a{text-decoration:none;color:var(--ink-2)}.doc aside a:hover{color:var(--ink);text-decoration:underline}
.doc h1{font-size:clamp(32px,4.6vw,58px);line-height:1;margin-bottom:calc(var(--sp)*2)}
.doc h2{font-size:22px;margin:calc(var(--sp)*5) 0 calc(var(--sp)*1.5);scroll-margin-top:24px}
.doc p,.doc li{color:var(--ink);max-width:68ch}
.doc p+p,.doc p+ul,.doc ul+p{margin-top:calc(var(--sp)*1.5)}
.doc ul{padding-left:1.2em;display:grid;gap:6px}
.doc table{border-collapse:collapse;width:100%;font-size:15px;margin-top:calc(var(--sp)*1.5)}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.doc th{font:11.5px/1.3 var(--mono);text-transform:uppercase;color:var(--ink-3);font-weight:400;border-bottom:2px solid var(--ink)}
.doc .meta{margin-bottom:calc(var(--sp)*4)}
.mailbox{display:inline-block;margin-top:calc(var(--sp)*2);font:700 clamp(18px,2.4vw,26px)/1.2 var(--display);text-decoration:none;border-bottom:4px solid var(--accent)}
.qa dt{font-weight:650;margin-top:calc(var(--sp)*3)}
.qa dd{color:var(--ink-2);margin-top:6px;max-width:68ch}

/* колофон */
.foot{border-top:3px solid var(--ink);padding-block:calc(var(--sp)*4) calc(var(--sp)*6);font-size:14.5px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:calc(var(--sp)*2) calc(var(--sp)*4);align-items:baseline}
.foot nav{display:flex;flex-wrap:wrap;gap:calc(var(--sp)*2.5)}
.foot .mono{margin-left:auto}

.notfound{min-height:60vh;display:grid;place-items:center;text-align:left}
.notfound img{width:220px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-block:calc(var(--sp)*6) calc(var(--sp)*9)}
  .board{transform:rotate(0);margin-right:12px}
  .sec-head{grid-template-columns:1fr;gap:calc(var(--sp)*2)}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li+li{padding:calc(var(--sp)*3) 0;border-left:0;border-bottom:1px solid var(--line);grid-template-rows:auto;grid-template-columns:110px 1fr;column-gap:16px}
  .steps li>*{grid-column:2}.steps li img{grid-column:1;grid-row:1/span 3;height:110px}
  .register{columns:1}
  .cast{grid-template-columns:1fr 1fr}.cast figure:first-child{grid-column:1/-1}
  .doc .wrap{grid-template-columns:1fr}.doc aside{position:static}
  section{padding-block:calc(var(--sp)*8)}
}
@media (max-width:560px){
  .wrap{padding-inline:16px}
  .top nav{order:3;width:100%;margin-left:0;padding-bottom:10px;gap:16px}
  .langs{margin-left:auto}
  .spec td:nth-child(4),.spec th:nth-child(4){display:none}
  .spec table{font-size:14px}.spec td:first-child{gap:8px}.spec td img{width:28px;height:28px}
  .bar{gap:6px}.bar i{width:calc(var(--w) * .5px)}
  .board .stamp{width:120px;right:-6px;bottom:-34px}
  .cast{grid-template-columns:1fr}
  .cast img{width:150px}
  .foot .mono{margin-left:0}
}