@import url("/tokens.css");
:root { --paper:#f7f0e7; --accent:#b49269; --accent-rgb:180,146,105; --bg:#d9cdbf; /* подобрано под тон фото */ --fs-h1:clamp(37px,3.4vw,57px); --lh-h1:1.09; --ls-h1:-.025em; }
* { box-sizing:border-box; }
html,body { width:100%; min-width:320px; min-height:100%; margin:0; background:var(--bg); color:var(--ink); }
body { overflow:hidden; font-family:var(--font-sans); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.works { position:relative; width:100vw; height:100vh; min-height:640px; overflow:hidden; isolation:isolate; }
.works__background { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; }
.works::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(249,244,237,.18),transparent 38%); }
.header { position:absolute; top:clamp(28px,5.3vh,58px); left:clamp(34px,4.2vw,70px); right:clamp(34px,4.2vw,70px); display:flex; justify-content:space-between; align-items:flex-start; }
.brand { display:inline-flex; width:48px; flex-direction:column; align-items:center; font:400 clamp(38px,3.2vw,56px)/.86 var(--font-serif); letter-spacing:-.08em; }
.brand i { width:4px; height:4px; margin-top:16px; border-radius:50%; background:currentColor; }
.menu { display:flex; align-items:center; gap:23px; padding:0; border:0; background:none; cursor:pointer; font-size:13px; letter-spacing:.31em; }
.menu__dot { width:4px; height:4px; border-radius:50%; background:currentColor; }
.menu__lines { display:grid; width:43px; gap:7px; }
.menu__lines b { height:1px; background:currentColor; }
.intro { position:absolute; top:50%; left:clamp(55px,7.1vw,118px); width:280px; transform:translateY(-48%); }
.eyebrow { margin:0 0 24px; }
.rule { display:block; width:34px; height:1px; margin:27px 0 24px; background:var(--accent); }
.intro>p:last-child { margin:0; color:rgba(var(--ink-rgb),.78); font-size:15px; line-height:1.62; }
.directions { position:absolute; inset:0; pointer-events:none; }
.direction { position:absolute; bottom:17.5%; display:flex; width:15.6%; min-width:180px; flex-direction:column; align-items:center; padding:70px 16px 18px; color:rgba(255,250,244,.96); text-align:center; text-shadow:0 1px 12px rgba(30,22,16,.38); pointer-events:auto; }
.direction::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 5%,rgba(30,24,20,.54)); opacity:.72; transition:opacity .25s ease; }
.direction:hover::before { opacity:.92; }
.direction span { font:400 clamp(25px,2vw,34px)/1.1 var(--font-serif); }
.direction small { margin-top:11px; font-size:10px; letter-spacing:.24em; }
.direction b { margin-top:17px; font-size:22px; font-weight:200; transition:transform .25s ease; }
.direction:hover b { transform:translateX(6px); }
.direction--color { left:37.6%; }
.direction--form { left:57.1%; }
.direction--motion { left:77.2%; }
.back { position:absolute; left:clamp(34px,4.2vw,70px); bottom:clamp(27px,4vh,45px); display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.24em; }
.back span { font-size:22px; font-weight:200; }
.progress { position:absolute; right:clamp(34px,4.2vw,70px); bottom:clamp(29px,4vh,47px); display:flex; align-items:center; gap:13px; font-size:12px; letter-spacing:.14em; }
.progress b { font-weight:500; }
.progress i { width:82px; height:1px; background:linear-gradient(90deg,#a6835b 33%,rgba(255,255,255,.78) 33%); }
.progress span { opacity:.67; }
@media (max-width:900px) {
  body { overflow:auto; }
  .works { min-height:760px; }
  .works__background { object-position:7% center; }
  .intro { left:6vw; top:43%; }
  .direction { bottom:14%; min-width:0; width:19%; padding-inline:4px; }
  .direction--color { left:38%; } .direction--form { left:59%; } .direction--motion { left:79%; }
  .direction small { display:none; }
}