/* shimov.com — static portfolio */
:root{--bg:#fff;--text:#000;--muted:#999;--band:#f5f5f5;--btn:rgba(0,0,0,.6);--btn-hover:rgba(0,0,0,.8);--pad-x:56px;--content:1088px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d0d0d;--text:#f2f2f2;--muted:#8a8a8a;--band:#171717;--btn:rgba(255,255,255,.18);--btn-hover:rgba(255,255,255,.3);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0d0d0d;--text:#f2f2f2;--muted:#8a8a8a;--band:#171717;--btn:rgba(255,255,255,.18);--btn-hover:rgba(255,255,255,.3);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:underline}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
.container{max-width:calc(var(--content) + 2*var(--pad-x));margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.h1{font-size:32px;line-height:1.2;font-weight:700}

/* header */
.header{display:flex;align-items:center;gap:24px;padding-top:21px;padding-bottom:0}
.avatar{width:86px;height:86px;border-radius:50%;object-fit:cover;flex:none}
.name{font-size:32px;line-height:1.2;font-weight:700}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px;font-size:16px;line-height:1.2}

/* theme toggle */
.name-row{display:flex;align-items:center;gap:12px}
.theme-toggle{width:32px;height:32px;margin:-8px;border:0;padding:0;background:transparent;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;opacity:.9;transition:opacity .15s;-webkit-tap-highlight-color:transparent}
.theme-toggle:hover{opacity:.6}
.theme-toggle svg{width:16px;height:16px;fill:currentColor;display:block}
.theme-toggle .ico-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .ico-sun{display:block}:root:not([data-theme="light"]) .theme-toggle .ico-moon{display:none}}

/* experience + about */
.intro{display:grid;grid-template-columns:355px 1fr;gap:24px;margin-top:45px}
.intro .h1{margin-bottom:16px}
.exp-list{display:flex;flex-direction:column;gap:16px}
.exp-date{font-weight:700}
.exp-role{margin-top:5px}
.about p{font-size:24px;line-height:30px}
.about p+p{margin-top:30px}

/* projects */
.projects{margin-top:50px}
.project{margin-top:70px}
.project:first-of-type{margin-top:32px}
.project-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-bottom:26px}
.project-head h3{font-size:24px;line-height:1.2;font-weight:700}
.project-date{font-size:24px;line-height:1.2;color:var(--muted)}
.project p{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;letter-spacing:-0.02em;font-feature-settings:"blwf","cv03","cv04","cv09","cv11";max-width:var(--content)}
.project p+p{margin-top:24px}
.project p strong{font-weight:700}

/* gallery */
.gallery-band{background:var(--band);padding:24px var(--pad-x);margin-top:16px}
.gallery{position:relative}
.gal-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-track li{flex:none;scroll-snap-align:start}
.gal-track img{height:600px;width:auto;object-fit:cover}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:var(--btn);padding:0;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .15s}
.gal-btn:hover{background:var(--btn-hover)}
.gal-btn.is-visible{display:flex}
.gal-prev{left:16px}.gal-next{right:16px}
@media (hover:none){.gal-btn{display:none!important}}

/* footer */
.footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;padding:80px var(--pad-x)}

/* tablet */
@media (max-width:1023px){
  .intro{grid-template-columns:1fr;gap:56px}
}
/* phone */
@media (max-width:767px){
  :root{--pad-x:24px}
  .header{padding-top:28px;align-items:flex-start}
  .avatar{width:72px;height:72px}
  .name{margin-top:-6px}
  .links{margin-top:8px}
  .intro{margin-top:40px;gap:48px}
  .about p{font-size:20px;line-height:25px}
  .about p+p{margin-top:25px}
  .project-head{flex-direction:column;align-items:flex-start;gap:4px}
  .footer{flex-direction:column;align-items:flex-start;gap:8px;padding:56px var(--pad-x)}
  .footer .h1{font-size:24px}
}