*,*::before,*::after{box-sizing:border-box}
/* 14.09 (owner): the site is always dark; it no longer follows the visitor's light/dark setting. */
:root{
  --ink:#EFE9E0; --paper:#14120F; --panel:#0E0C0A; --rule:#332E27;
  --voice:#E0824F; --quiet:#9C9186; --leaf:#1C1916; --measure:34rem;
  color-scheme:dark;
}
html{-webkit-text-size-adjust:100%}
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{color:var(--voice)}
:focus-visible{outline:2px solid var(--voice); outline-offset:3px}

/* layout: sidebar + content */
.layout{display:grid; grid-template-columns:minmax(0,20rem) 1fr; min-height:100vh}
.content{min-width:0}
.sidebar{ position:sticky; top:0; height:100vh; overflow-y:auto; scrollbar-width:none;
  background:var(--panel); border-right:1px solid var(--rule);
  padding:clamp(2rem,3.5vw,2.75rem) clamp(1.5rem,2.5vw,2rem);
  display:flex; flex-direction:column; gap:1.6rem }
.sidebar::-webkit-scrollbar{ display:none }

/* ⭕ кръгъл аватар за снимката */
.avatar{margin:0; width:9rem; height:9rem; align-self:flex-start}
.avatar .ph{width:100%; height:100%; border-radius:50%; border:1px dashed var(--rule); background:var(--leaf);
  display:grid; place-items:center; color:var(--quiet); font-size:.72rem; text-align:center; padding:.5rem}
.avatar img{width:9rem; height:9rem; border-radius:50%; object-fit:cover; display:block; border:1px solid var(--rule)}

.who{line-height:1.3}
.who b{font-size:1.1rem; font-weight:600; color:var(--ink)}
.who span{display:block; font-size:.85rem; color:var(--quiet); margin-top:.35rem}
.side-nav{display:flex; flex-direction:column; gap:.1rem}
.side-nav a{ color:var(--quiet); text-decoration:none; font-size:1rem; padding:.5rem 0;
  border-bottom:1px solid transparent; width:max-content }
.side-nav a:hover,.side-nav a:focus-visible,.side-nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--voice) }
.side-contact{margin-top:auto; font-size:.85rem; color:var(--quiet); line-height:1.5}
.side-contact a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--voice); padding-bottom:1px}

.banner{margin:0}
.banner img{width:100%; height:auto; display:block; border-bottom:1px solid var(--rule)}

.sheet{max-width:52rem; padding:0 clamp(1.5rem,4vw,4rem)}
.opening{padding-block:clamp(2.5rem,6vw,4.5rem) 2.25rem; border-bottom:1px solid var(--rule)}
.opening p{max-width:var(--measure); margin:0; font-weight:500;
  font-size:clamp(1.45rem,3vw,2.05rem); line-height:1.38; text-wrap:balance}
.opening .after{margin-top:1.6rem; font-size:1rem; line-height:1.6; color:var(--quiet); max-width:30rem}

.leaf{padding-block:2.6rem; border-bottom:1px solid var(--rule)}
.leaf:last-of-type{border-bottom:0}
.leaf h2{margin:0 0 1.1rem; font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--voice)}
.leaf p{margin:0 0 1.05rem; max-width:var(--measure)}
.leaf p:last-child{margin-bottom:0}
.note{font-size:.9rem; color:var(--quiet)}

.works{list-style:none; margin:0; padding:0}
.works li{padding-block:1.1rem; border-top:1px solid var(--rule)}
.works li:first-child{border-top:0; padding-top:0}
.title{font-size:1.3rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.soon{font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--voice); border:1px solid var(--voice); border-radius:999px; padding:.16em .7em}
.works p{margin:.4rem 0 0; font-size:.95rem; color:var(--quiet); max-width:32rem}
.app .title{margin:0}
.app-logo{height:2.4rem; width:auto; border-radius:.4rem; display:inline-block; vertical-align:middle}
.app .tagline{margin:.4rem 0 .7rem; color:var(--quiet); font-size:.95rem}
.app .note a{color:var(--quiet)}

/* legal pages — prose */
.page{padding-block:clamp(2.5rem,5vw,3.5rem)}
.page h1{font-size:clamp(1.8rem,4vw,2.4rem); margin:0 0 .4rem; letter-spacing:-.015em}
.page .eff{color:var(--quiet); font-size:.9rem; margin:0 0 2rem}
.page h2{font-size:1.15rem; color:var(--voice); margin:2.2rem 0 .8rem}
.page p,.page li{max-width:var(--measure)}
.page p{margin:0 0 1.1rem}
.page ul{margin:0 0 1.1rem; padding-left:1.2rem}
.page li{margin:0 0 .5rem}
.page pre{white-space:pre-wrap; font-family:inherit; margin:0}

.mail{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--voice); padding-bottom:1px}
.colophon{padding-block:2rem 3.5rem; font-size:.85rem; color:var(--quiet)}
.colophon a{color:var(--quiet)} .colophon a:hover{color:var(--ink)}
.colophon p{margin:0 0 .45rem}

@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static; height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--rule);
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; padding:1rem clamp(1.25rem,5vw,1.75rem)}
  .avatar{width:3rem}
  .who b{font-size:1rem} .who span{display:none}
  .side-nav{flex-direction:row; flex-wrap:wrap; gap:.25rem 1.1rem; margin-left:auto}
  .side-nav a{padding:.25rem 0; font-size:.92rem}
  .side-contact{display:none}
  .sheet{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* apps: икона + име + бутон (добавено 12.09) */
.app-head{display:flex; align-items:center; gap:1rem; margin-bottom:.9rem}
.app-icon img{width:96px; height:96px; border-radius:30%; display:block}
.app-head .title{margin:0; font-size:1.15rem; font-weight:600}
.app-head .title a{color:var(--ink); text-decoration:none}
.app-head .tagline{margin:.25rem 0 0}
.btn{display:inline-block; padding:.45rem .9rem; border:1px solid var(--voice); border-radius:.5rem; color:var(--voice); text-decoration:none; font-weight:600; margin-right:.6rem}
.btn:hover,.btn:focus-visible{background:var(--voice); color:var(--paper)}

/* 14.09 (owner, S23U): on phones the photo kept its 9rem size inside a 3rem box and covered the name,
   and the subtitle was hidden. The photo now fits its box and the subtitle is shown. */
@media (max-width:860px){
  .avatar{width:7.5rem; height:7.5rem; flex:0 0 auto}
  .side-nav{flex-basis:100%; margin-top:1.25rem}
  .avatar img{width:100%; height:100%}
  .who span{display:block; margin-top:.15rem}
}