/* alsiberij.com — стили заглушки.
   Отдельный файл: при CSP style-src 'self' инлайновый <style> блокируется,
   а CSS с собственного домена разрешён. Шрифты только системные. */

:root{
  --ink:#14211f;
  --ink-soft:#3f524e;
  --paper:#eceee6;
  --paper-2:#e2e5db;
  --brass:#a3762a;
  --teal:#1d5b56;
  --rule:#c3c8bb;
  --num-size:clamp(2.1rem,8.5vw,4.6rem);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --pad:clamp(1.25rem,5vw,4rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.02rem,0.98rem + 0.25vw,1.16rem);
  line-height:1.62;
  background-image:
    linear-gradient(var(--paper-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--paper-2) 1px,transparent 1px);
  background-size:32px 32px;
}
::selection{background:var(--brass);color:var(--paper)}
.wrap{max-width:1000px;margin:0 auto;padding:0 var(--pad)}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 .9rem;
}
.eyebrow::before{content:"— ";color:var(--brass)}

.top{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding-top:1.6rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  color:var(--ink-soft);
}
.top b{color:var(--ink);font-weight:600}

.hero{padding:clamp(3rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem)}
.hero h1{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(2rem,6.2vw,4rem);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:0 0 1.4rem;
  max-width:18ch;
}
.hero h1 em{font-style:normal;color:var(--brass)}
.lede{
  font-size:clamp(1.1rem,1rem + .6vw,1.4rem);
  max-width:50ch;margin:0;color:var(--ink-soft);
}

.scale{margin-top:clamp(2.6rem,7vw,4.5rem)}
.scale__inner{font-family:var(--mono);font-size:var(--num-size);width:13ch;max-width:100%}
.scale__num{line-height:1;letter-spacing:-.02em;white-space:nowrap;display:flex}
.scale__num .frac{color:var(--brass)}
.scale__num .dot{color:var(--teal)}
.scale__ruler{
  height:1.05rem;margin-top:.55rem;
  border-top:1px solid var(--ink);
  background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 1ch);
  background-repeat:no-repeat;
  background-size:100% .42rem;
  opacity:.75;
}
.scale__legend{
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:.9rem;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);
}
.scale__legend span::before{content:"·";color:var(--brass);margin-right:.5rem}

.section{padding:clamp(2.8rem,7vw,5rem) 0;border-top:1px solid var(--rule)}
.section__head h2{
  font-family:var(--mono);font-weight:600;
  font-size:clamp(1.35rem,1.05rem + 1.3vw,1.9rem);
  letter-spacing:-.035em;line-height:1.14;margin:0;
}
.grid2{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:820px){
  .grid2{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}
  .section__head{position:sticky;top:2rem;align-self:start}
}

.items{display:grid;gap:1.7rem}
.item{padding-left:1.15rem;border-left:2px solid var(--rule);transition:border-color .25s ease}
.item:hover{border-color:var(--brass)}
.item h3{
  font-family:var(--mono);font-weight:600;font-size:1.02rem;
  letter-spacing:-.02em;margin:0 0 .4rem;
}
.item p{margin:0;color:var(--ink-soft)}

.creed{margin:0;padding:0;list-style:none;display:grid;gap:1.1rem}
.creed li{
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
  padding-left:1.6rem;position:relative;
}
.creed li::before{
  content:"→";position:absolute;left:0;top:0;
  font-family:var(--mono);color:var(--brass);font-size:.95em;
}

.contact{padding:clamp(3rem,8vw,5.5rem) 0 clamp(2rem,5vw,3rem);border-top:1px solid var(--rule)}
.contact h2{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.6rem,1.1rem + 2.6vw,2.7rem);
  letter-spacing:-.045em;line-height:1.08;margin:0 0 1.6rem;max-width:20ch;
}
.links{display:flex;flex-wrap:wrap;gap:.9rem 2rem;font-family:var(--mono);font-size:.92rem}
.links a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--brass);padding-bottom:2px;
  transition:color .2s ease;
}
.links a:hover{color:var(--brass)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

footer{
  border-top:1px solid var(--rule);
  padding:1.4rem 0 2.4rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}

.rise{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}
.d2{animation-delay:.18s}
.d3{animation-delay:.34s}
.d4{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  *{transition:none !important}
}